Xuanwusea Web Design

Website Design Usability How-to Quick Reference Guide

Web design usability improvements can double visitor satisfaction and sales, and site 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 companys website success.

Typical web sites have usability issues which put off potential clients leaving them confused and frustrated. This can all be corrected. This how-to guide is intended for a new website, or those that have a web site that doesnt perform.

Usability The Numbers

* Forrester Research studies estimate that approximately 50 percent of potential sales are lost because visitors cant find information and 40 percent of them do not return to a site when their first experience is negative.
* According to Jakob Nielsen usability expert, web site re-design based on usability standards can increase online sales by 100%
* Usability projects can return 5-10 times their price tag within 12 months.
* A comprehensive usability effort can improve website results by 83%. Since competitors will probably incorporate some of your changes, this can settle out to 68%.

Page Layout And Structure Usability

* Web design quality increases credibility just do it
* Error free HTML (or XHTML) and CSS ensures uniform cross-browser page rendering. A discombobulated web page will destroy your credibility.
* Whitespace increases comprehension by 20%
* Golden Triangle is important. That is the top-left of the page above the fold (before scrolling). Jakob Nielsens user scrolling report showed that only 23% of visitors scroll on their first visit to a website.
* Faces not looking at you if an image of a face is looking somewhere other than directly at us, well also look in the 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 90% of searches can be shown in a 27 character search box according to Jakob Neilsen
* Header and footer should be separated in design from the main page content.

Usability and Website Navigation

* Consistent Navigation make sure navigation appears in the same location on web pages
* Text is king always use text links, not images, java applets or flash
* Location feedback provide visitors with information about where they are with colors, breadcrumbs or hyperlink styles
* Site maps provide a visitor sitemap with an outline and your most important links
* Navigation boxes or calls to action should not look like ads because users automatically skip over them
* Home page navigation placed at the top of pages performs best

Text Characteristics Usability

* Dominant headlines will immediately draw the visitors eye
* Headlines first words must grab your website visitors attention immediately. If they are keywords then you also get an SEO benefit out of it.
* Headings, subheadings, date/times and phone numbers should be used and formatted consistently. Using a logical progression of h1, h2, h3, etc. tags helps the readers understanding of the page hierarchy and is also a helpful accessibility feature.
* Standard fonts of 12 points or more optimize 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 only to emphasize words ultra-relevant to the topic

Text Link Definitions Usability

* Blue text links are the standard color for links
* Underline anchor links this is also a standard and good for accessibility reasons
* Visited text links should be a different, more pale color
* Text link hover color should light up the link with brighter colors
* Red or green text links should be avoided due to the preponderance of color-blindness
* Do not underline any text that is not a link
* Do not show normal text in text link colors
* Do not use bolding as a hover effect. Bolding text will cause the text to re-align.
* Link titles can be used on hover to describe the text link destination also a great accessibility feature
* Link text should describe the target page
* The tabindex property is a great method to define logical element tabbing
* Menu links should usually not follow the above rules

Usability and Writing Standards

* Write to be scanned web site visitors dont read long paragraphs. Keep paragraphs down 3 sentences, group them logically and write succinctly.
* 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 targeted keywords.

Scroll To Top