In addition to functionality, copy, spelling, grammar, and imagery, quality assurance testers can make a huge difference in the success of a web project by focusing on usability.    

Here are some tips for incorporating usability into your QA process:

Start with a clear user flow

Starting with a clear user flow helps to identify any pitfalls the production team may encounter while building a complicated system. Walk through them during the project’s early phases: if you are familiar with a project from beginning to end, there's a good chance you will catch inconsistencies.

Check search functionality and pagination

Paring down search results through the use of filtering and refining should be intuitive and directly relate to the content being searched. If a keyword search produces no results, instead of presenting the user with a blank page, it’s helpful to display copy letting the user know, "Hey we didn't find what you are looking for" or prompt the user to take another action such as an advanced search.

Once you have ensured the search functionality is clear, it’s time to focus on pagination. Pagination labels should reflect the result listing. Results can be listed alpha/numeric order, date, or relevancy, and the pagination should reflect the order. (I recently came across a search results listing in alpha order and the pagination read newer vs. older when the labels should have been “Next” / “Previous” or numbered.)

Pay attention to layout

Page layout should be clean and navigation hierarchy clearly established. Body content is balanced with the imagery and hyperlinks are easily identified. In the case of paragraph headings, is it obvious which heading is associated to which paragraph? If not, spacing may need to be adjusted.

Test form design and validation

Users should be able to complete forms easily and correctly. Error messaging should be presented to the user when required, such as an empty or invalid entry of a field. Many forms out on the web contain no indication denoting a required field and only after clicking “Submit” are you prompted to correct any mistakes.

Know your hyperlinks

Not only should hyperlinks be clearly identified, the user should have a clear idea of where they are going when they click it. Is the message of the hyperlink clearly conveying where it will take the user? Hyperlinks should take you directly to the material you are referencing. If not done properly, hyperlinks will frustrate the user and ultimately lose them.

Closely examine Flash applications

Flash applications rich in complexity (think training modules or videos) require close examination of user experience throughout the entire application. Is the text displayed long enough for the user to read and understand? Is there a static version of the Flash image that will display for users on iPhones and other non-Flash devices? Heavy embedded Flash applications also require you to evaluate performance issues, such as load time. 

Account for a global audience

If you are working with a global site, start by evaluating the copy for US slang and terminology. Pay close attention to form fields for city, state and zip which will not apply to areas outside of the US. If there are plans to localize the site for global audiences, will the copy and design be able to accommodate different text sizes in order to translate to other languages?

Evaluate training materials

Make sure all the steps are included and provide clear instructions to the user for how to accomplish their goals.  Illustrations outlining the training path make all the difference in the world.  Make sure to verify that potential pitfalls in the training path are cleared and that there are instructions for how to quickly resolve any issues that may arise for a new end user.  

Being on the mobile team here at Springbox and focusing on all things mobile, I came across an article from Stephen Mellish on utalkmarketing.com about the gap between mobile marketing adoption and smartphone growth. The first thing that caught my attention was in the first line: "Recent news that sales of mobile device overtaking personal computers has come as a surprise to analysts and experts alike."

The author provides statistics to support this statement, which is sort of a wake-up call on the momentum shift to mobile devices for personal computing. "Manufacturers sold a total of 101 million smartphones in the last three months of 2010, up 87% from the same period a year earlier, while PC shipments reached 92 million units in the fourth quarter, up less than 3%."

The article goes on to state the tipping point is approaching much faster than originally predicted, surprising many. And in order to close the gap, retailers and media organizations need to pick up the pace progressing towards mobile web adoption and do it fast. They are missing abundant sales opportunities as a result of this trend.

A few who are doing it right:

Starbucks developed a successful "touch to pay" app for iPhone and Blackberry users to purchase coffee beverages using their phones. Starbucks CEO, Howard Shultz announced the new app was used by three million people in three months. That's a lotta java.

Ancestry.com recently announced their mobile app for iPhone, iPad and iPod was downloaded over one million times. You can now take your family tree with you. 

ESPN launched a free app WatchESPN that allows some cable subscribers to view a live stream of ESPN to watch the Masters, NBA Playoffs and MLB games. 

At Springbox, we are witnessing phenomenal smartphone usage and growth in the marketplace. It's evident in the number of users who use smartphones to access our current clients' full-version websites. We are passionate about taking advantage of mobile opportunities to provide a robust mobile strategy as part of our portfolio for new and existing clients. Some of our mobile sites include a Livestrong iPhone app, Livestrong Spanish mobile site and a mobile site for Central Market. We have even delved into the realm of using QR codes in the Central Market Chocolate campaign.

App or site? We'll find the right one for you.  

Need quick access to website test tools? Look no further than your web browser. Firefox and Internet Explorer both have developer toolbars for Web QA professionals to download and utilize for QA. I have found both to be useful during QA in identifying image attributes, metadata, links and Flash validation.

Helpful browser tools to QA by:

Internet Explorer Toolbar (Add to Explorer)

1.    Selecting elements – Find> Select Element by click, allows you to select an element of the page and view the highlighted code in the Developer window at the bottom of the page. The benefit of this function is that it isolates a section of code instead of viewing source and having to parse through it all.   

2.    Link validation – View> Link Report, allows you to view all the hyperlinks in a list. This comes in handy for verifying whether a link is supposed to pop up a new window.

3.    Identifying images and image attributes

a.    Identifying images – Images>Disable Images, turns off all the images in order to identify and differentiate images from the CSS, which is helpful if you need to report and distribute the bug to the right person. You can do the same by selecting Outline>Images.

b.    Image sizing, click Images>Show Image Dimensions and select dimensions, file sizes or image paths.

c.    View alt text only – Images>View Alt Text, to view alt text for all images on the page, saving time instead of mousing over each one.

4.    Verify background colors – Tools>Show Color Picker, useful for verifying background colors or validate design changes if the color change was just a small variation from what it was before.

Mozilla Firefox Toolbar (Add to Firefox)

1.    Form Validation – a very quick way to test forms in Firefox is to select Forms>Populate Form Fields. The browser will auto populate the entire form minus doc uploads, which will reduce QA time by manually completing the form. Another useful toolbar command is the Forms>Clear Radio Buttons for testing a radio buttons on a form since the only way to “de-select” these form options is to refresh the page or close the browser and start over.

2.    Link Validation – Tools>Validate Links, similar to Explorer, Firefox has an option to validate links. They both use the W3C link checker, which is invaluable for quickly finding 404 links, redirect links to pages that have been removed and details regarding anchor links.

3.    Display Information – contains a large variety of commands regarding links, elements and tables to name a few. Information>View Color Information provides thumbnails of the images that make up the page along with their hex values if colors need to be verified. Another option under Display information is Information>View Metatag Information, which displays the page’s metadata.

4.    Miscellaneous – Don’t let the title fool you. The Miscellaneous option on the toolbar includes several options helpful for QA. Miscellaneous >Display Ruler is useful for quickly measuring images or other elements on the page via the cursor, which turns into a crosshair. Once you have selected an item to measure using the crosshair cursor the coordinates display above with the dimensions.

5.    Resize Window – In lieu of changing your screen resolution, Resize>Resize Window, allows you to change your screen resolution through the browser.

The ability to quickly parse information during QA is so valuable — especially with tight deadlines.  These two toolbars are must-haves in your QA toolbox.

The “death” of IE 6, presented by Aten Design Group at a mock funeral earlier this month in Denver, Colorado, was indeed symbolic and a long time coming. After all, funerals are supposed to be a time of sorrow for the deceased; however in the case of IE 6, we could not be happier to see the proposed ending of this aged browser.

Ask any developer, designer or quality assurance professional about the animosity they have towards IE 6, and you will get an earful about the limitations and frustration they have had working firsthand with the browser. For instance, websites that are built using current web standards practically have to be customized to work in IE 6. Designers wanting to push the limits are, well, limited, as their concepts likely won’t transfer to IE 6 very well. Quality Assurance professionals required to test IE 6 know to add plenty of extra time to the QA process. Testing a website in IE 6 is almost equal to testing two sites instead of one, as a site in IE 6 will render completely differently than it will in FireFox, IE 8 or Safari. In IE 6, content is most often misaligned or pushed down to the bottom of the page, and then there’s the ubiquitous transparent .png issue, where images appear to be surrounded by a light blue halo.

So with all the problems experienced by web professionals, plus the availability and quality of more modern browsers (not to mention IE 6 is prone to hacks), why are users still navigating the web with a 9- year-old browser?  

A few things:

• Older computers came with IE 6 pre-installed.
• Users are comfortable using IE 6 and aren’t willing to change.
• Employees have to use IE 6 at work and are prevented from upgrading or downloading another browser.
• Clients require sites to render IE 6 due to the number of users.

As of February 2010, Net Marketshare shows IE 6 with a nearly 20% penetration rate, which is on the heels of the # 1 browser Internet Explorer 8. IE 6, however, is on a steady decline.  

For a browser that is loathed by many, reduced usage could not come at a better time. YouTube is dropping support for IE 6 on March 13; UK citizens are petitioning their government to cease using IE 6; and France and Germany are warning against using any version of Microsoft Internet Explorer, citing security vulnerabilities.

Goodbye IE 6, 9 years is a long time. Users owe it to themselves to upgrade.

Need a Mobile version of your website? All signs point to yes. 

Apple released the iPhone, named Invention of the Year by Time magazine in 2007, and this October Motorola released its DROID phone, which Time named No. 1 of its Top 10 Gadgets of 2009. BlackBerry can be Bold or Curve, and Palm has its Pre. Chances are you have one of these phones and are just an index finger away from browsing the web.

According to Frost & Sullivan, the Growth Partnership Company, “Of the more than 1.2 billion mobile phones expected to ship globally in all of 2009, nearly 190 million will be smartphones.” They estimate this number to increase to 250 million in 2010.

Thanks to the smartphone, and other handheld devices such as Kindle and Sony’s PSP, the web has evolved to become mobile. Per Mary Meeker, Technology Analyst at Morgan Stanley, “People are underestimating how big the mobile Web will be in the coming years.” If you already have a mobile website or are considering creating one, you are way ahead of the curve. Here are a few resources available for developing a mobile version of your website sans coding skills.

MoFuse – A mobile-software start-up working with companies to create and maintain a basic site on all platforms, which is key due to lack of platform standardization.

Zinadoo – Received the Mobile Internet Innovation Award for 2008. It offers a free mobile site creation tool, free hosting and a free .mobi domain name. For these free services, Zinadoo mobile websites will display ads that can be disabled for a small cost.

Contec Innovations – A web content aggregator delivering current news, sports, finance and entertainment via its patent-pending BUZmob Mobile Media Network.

While the resources above will certainly get your mobile presence up and running, it’s important to develop a mobile content strategy beforehand. Springbox has found that condensed, simplified versions of primary sites — designed for navigating content on a smaller screen — are your best option. Next time you are on your smartphone, check out Facebook, Target, YouTube and The Weather Channel to see a few companies who are doing mobile right.

 There goes the web evolving again. This time be ready.