Web Design Usability How-To Quick Reference Guide

• 
• Tweet
• Buffer
• Email

• Tweet
• Email

Web design usability improvements can double sales and visitor satisfaction, and website visitor satisfaction means more return visits. A company’s website is many times the first experience with that company so usability and a quality user experience is critically important to your company’s online success.

Typical websites have usability issues which deter potential clients and customers leaving them with confusion and frustration. It can all be fixed. This how-to quick reference guide is intended for anyone about to design a new website, or those that have a website that doesn’t perform to their expectations.

Usability – The Numbers

* Forrester Research studies estimate that approximately 50 percent of potential sales are lost because visitors can’t find information and 40 percent of visitors do not return to a website when their first experience is negative.
* According to usability expert Jakob Nielsen, website re-design based on usability standards can increase online sales by 100%
* Usability projects can return 5-10 times their cost in the first year.
* A comprehensive usability project can improve website results by 83%. Since your competitors will probably incorporate some of the changes you implemented, this can settle out to 68%.

Page Layout And Structure Usability

* Web design quality enhances credibility – just do it
* Error free HTML (or XHTML) and CSS ensures consistent cross-browser page rendering. A discombobulated website will kill your credibility.
* Whitespace usage increases comprehension by 20%
* Golden Triangle is important. That is the top-left of the page above the fold (before scrolling). Jakob Nielsen’s user scrolling study showed that only 23% of visitors scroll on their first visit to a website.
* Faces not looking at you – if a face image is looking somewhere other than directly at us, we’ll also look in that same direction. Take advantage of this by drawing your users’ attention to the most important parts of your page or ad.
* Search box size counts – 27 character search box shows all search text in 90% of searches according to Jakob Neilsen
* Header and footer should be separated in design from the main body of the page

Website Navigation Usability

* Consistent navigation – make sure navigation appears in the same location on web pages
* Text is king – use descriptive text in navigation links, not images, java applets or flash
* Location feedback – provide the user with information about where they are with headings, breadcrumbs and/or styles in menus.  If you use colors then a large portion of your visitors may not be able to differentiate the colors due to color-blindness.
* Sitemaps – provide a visitor sitemap with a website outline and important links
* Call to action or navigation boxes should not look like ads because visitors automatically skip over them
* Homepage navigation placed on the top of the page performs best
** One more extremely important point on text color: do not make any text color the same as the defined background color of a page. This is an old way of hiding tons of SPAM text on a page. If you do this will be construed as SPAM and you’ll be severely penalized by the search engines.

Text Characteristics Usability

* Dominant headlines will immediately draw the visitors eye
* Headlines first words must grab your attention immediately. If they are keywords then you also get an SEO benefit out of it.
* Headings, subheads, phone numbers and date/times should be used and formatted consistently. Using a logical progression of h1, h2, h3, etc. tags helps the readers understanding of the page information hierarchy and is also a good accessibility feature.
* Standard fonts of 12 points or more maximize reading speeds
* Black text on a white background increases reading speeds up to 32%
* Sentence case (only first word capitalized) is important for reading speed and comprehension
* Bold and italics should be used sparingly, and ideally to emphasize keywords relevant to the topic

Link Definitions Usability

* Underline links – this is also standard and good for accessibility reasons
* Visited links should be a different, more pale color
* Link hover color should light up the link with brighter colors
* Don’t underline text that is not a link
* Don’t show normal text in link colors
* Red or green links should be avoided due to the preponderance of color-blindness
* Blue links are the most standard color for links so use blue link text if possible
* Don’t use bold-facing as a hover effect. Making the font wider will cause the text to re-align.
* Link titles can be used for the hover effect to describe where the link is going – also a great accessibility feature
* Link text should describe the page they are linked to
* Tabindex is a great method for defining logical tabbing through elements
* Menu links should usually not follow the rules above

Writing Standards Usability

* Write for scanning – internet readers don’t read long paragraphs. Keep paragraphs to 3 sentences, group logically and provide ample but not too much information.
* Bullet points should be used as much as possible
* Bold and italics should be used for your most important words. This is also a big SEO factor – search engines take more heed when you emphasize keywords and will consequently rank you higher for them.

Miscellaneous Usability Items

* Jakob Neilsen points out that tests with 5 users will find 85% of site problems and 15 users will reveal them all.
* If you run Google Adwords campaigns then use the free Google Website Optimizer to test your campaigns
* You might also try the Vertster testing tools: http://www.vertster.com

Usability Resources

There are many online usability resources. I recommend the following sites for further research:
Jakob Nielsen’s Website – He is a major usability expert: http://www.useit.com/

US Government Usability Website and Resource

http://www.usability.gov/guidelines/

Smashing Magazine:

http://www.smashingmagazine.com/2009/09/24/10-useful-usability-findings-and-guidelines/

http://www.problogger.net/archives/2009/05/20/11-striking-findings-from-an-eye-tracking-study/

Other Usability Numbers and Quotes

http://www.optimalusability.com/quotes.php

About the Author

Michael Cordova writes about technology and builds WordPress SEO websites. He has been doing Internet marketing, search engine optimization since the beginning of the Internet. BEFORE YOU GO call Michael at (303) 744-2178 for a free initial SEO website evaluation or contact him from the links above.

Follow Michael

If you want to follow Michael you can:

• Subscribe to our RSS feed
• Follow on Twitter
• Connect to Michael on LinkedIn
• Friend Michael in Facebook
• Connect on Plaxo
• Connect on MySpace

Related posts:

1. Speeding Up Page Load Time, Usability, SEO – Tools of the Trade
2. Web Development to Increase Sales