Usability Guidelines


Navigation

Keep navigation and search functionality intuitive and consistent on each page.

Don't disable the "Back" button.

Have a consistent link to the home page across the entire site. Note: Not all users know that the logo typically takes users back to the home page.

 

Create a Site Map

The home page is not the only entry page to the site. Make sure each page is clearly labeled so that if visitors enter on that page they know where they are in relation to the overall site.
Redundancy of navigation items / links is ok. It helps ensure users find what they need.
Error messages should explain what is causing the issue (i.e., required field missing, clear 404 message, etc).

 

Page layout

Pages should not scroll horizontally.
Home page should not scroll vertically.
Test page layout with different browsers to ensure it appears as expected.


Content

Write for the web, so the page is scannable. Use headings, bulleted lists, short paragraphs. Avoid using acronyms.

Place the most important elements, such as the logo and key navigation in the upper left side of the page and the most important content in the top center of the page, keeping as much content “above the fold” as possible. The further right and down on the page, the less emphasis in placed on the element.

Use a sans-serif font for all text. Image-based text can be done in Amplitude, etc.

Do not use all caps – mixed case only, except for the H2 tag.Text should be left-justified.

Make contact info available from each page.

Provide a clear call to action on each page.

Hyperlinks

Underlines should be used for links only.
Link labels should be consistent with the landing page title / content.
Use dark text on light background or light text on dark background for greatest contrast.
Designate when links have been clicked (a different text color for visited links).
If a link opens a file, indicate the type of file to be opened (i.e. doc, pdf, xls). These files should open in new browser windows.
Provide multiple ways for users to access content – add links where appropriate.
Links to external sites should open in new browser windows.

Graphics

Include downloads to necessary plug-ins.
For greatest clarity, the content / topic of images and text should match. Visitors expect images on a financial services site, for example, to represent something related to finance.

Provide language selector indicators if content is available in multiple languages (e.g., flags or native-language links).
Do not overuse large images or videos that may slow page loading and are not searchable, especially on the homepage.



Additional resources


Suggested Readings

"Designing Web Usability" - Jakob Nielsen
"Contextual Design: A Customer-Centered Approach to System Designs" - Beyer and Holtzblatt
"Usability for the Web" - Tom Brinck, Darren Gergle and Scott D. Wood
"The Design of Sites: Patterns, Principles, and Processes for Crafting a Customer-Centered Web Experience" - Douglas K. van Duyne, James A Landay and Jason I. Hong
"Don’t Make Me Think" - Steve Krug
"The Elements of User Experience" - Jesse James Garrett
"User and Task Analysis for Interface Design" - JoAnn T. Hackos and Janice C. Redish

 

Web Resources


Heuristic Principles:

Heuristic Evaluation - a Step by Step Guide - http://www.sitepoint.com/article/520
Ten Usability Heuristics - http://www.useit.com/papers/heuristic/heuristic_list.html
Heuristic Evaluation - http://www.useit.com/papers/heuristic/

General Usability Information:

http://www.useit.com
http://www.usability.gov
http://www.usableweb.com

Writing for the Web

http://www.plainenglish.co.uk/free_guides.html
http://www.useit.com/papers/webwriting/
http://www.sun.com/980713/webwriting/
http://www.usability.gov/design/writing4web.html