Usability Institue Logo- A bolt that can be fastened with any of 4 tools
PicoSearch
Reducing Training to Its Sensible Minimum: Zero...
Inexpensive, Independent Usability Consulting by Jack Bellis
Home Page- List of All Content Home Page- All content, in date order Resources: page describing tools you can use Morsels: just our short articles and blurbs Just our Before&After Articles Just our Before&After Articles About: details on who I am and what I do Address, phone, number,  and so on
Contact me for a FREE usability review!
 

Website Survival Checklist

The following three sections are criteria we use to evaluate web site usability. Our Reviews page lists the evaluations we've done. We're in the process of adding good and bad examples.

 

  Part 1: Content Basics
   
        Examples  
  1. Logo in top left, linked to home: Good example The logo should be in the top left and on all pages but the home page it should be linked back to the home page.
  2. Tagline: Good example This is a 3-7 word slogan that is how you want your company to be known, such as "Inexpensive, Independent Usability Consulting by Jack Bellis."
  3. Welcome blurb: Bad Example This is a 2-3 sentence description of what you do, on your home page.
  4. Plain wording   Use words that need no interpretation, such as "Products" not "Innovations." Don't use nicknames.
  5. No 'happy talk'   Don't waste valuable space with words that will never get read, such as a "mission statement."
  6. Concise wording   Don't fluff up your wording with elaborate expressions. Imagine that every thought is a classified ad and must get the critical message across in 10 words.
  7. Visited pages are distinguished by link color-coding   Use the basic feature of web design that turns visited links purple. Change the color if you must, but make sure that visited pages' links are a different color.
  8. "Utilities" are easy to find Good example Utilities are things that help you use a page, such as Shopping Cart, Site Map and so on. Try to set them apart.
  9. Search on all pages, with box and button   At a minimum, place a box and button beside it, labeled "Search" or "Go." I use a free search tool from PicoSearch.com
  10. "You Are Here" indicator   This is an arrow or other highlight on the primary and/or secondary navigation links that got you to the page you're on.
  11. 'Breadcrumbs' as links   This is a set of links that represent every categorical link from the Home page to the current page. They should each be links and should be separated by this symbol: ">".
     




Part 2: Visual Design: Fonts, Colors, Layout, Basic Interaction Design and Accessibility
    Examples  
1.

Sans-serif fonts

  "Sans-serif" means fonts that don't have the little pointy ends that serif fonts like Times Roman have like this. The most popular, professional sites seem to suggest that sans-serif fonts are easier to read online.
2.

Appropriate background color

Bad example For informational pages, a white or very nearly white background is best. Dark colors can work on home pages and non-informational pages.
3. Appropriate color hues   Medium to dark blue has become the safest bet for the theme color on informational sites. Blue has long been the best choice on television ads. Red is the color of assertive selling and works on many sites. In the hands of a good graphics person, many schemes can work.
4. Visual representation of the information hierarchy   This means that the position, size, grouping, and diagrammatic effects (such as lines and boxes) on a page accurately convey the relationship between the pieces of information. Steve Krug points out a great analogy to the front page of a newspaper. You can tell at a glance what's most important and what is subordinate to what.
5. Conservative quantity of colors   Two main colors and an accent color is common. As you can see from the page you're reading now, all rules have exceptions, and some sites use color-coded tabs, but for a page with one purpose, three or four principal colors is about right.
6. Text sizes are "relative"   This is an HTML technical point. Text sizes, if specified should use values like "+1" or "-1" not "2." Relative text sizes enable a visitor to use the Larger/Smaller feature of the browser to change the size.
7. Anti-aliased graphics   This is another technical point. Anti-aliased graphics are those that are made with paint programs intended for electronic display. They blend the colors at the edges so it looks smooth on-screen.
8. Graphics file size doesn't slow navigation   If the page takes more than a few seconds to load because of images, visitors might not wait.
9. "Alt tags" used well   An important point for "accessibility" (for poor vision and other disabilities), this means that when you roll the mouse over an image, a text description appears in a "tool tip" or "balloon help" box. The text should be helpful enough that if the image doesn't appear the user still knows whether clicking it would get him where he wants to go.
10. Links don't just say "Click Here"   Another important point for "accessibility" but also for everyone, links that say simply "Click here" can be meaningless to those 'reading' your site with a machine that reads the links out loud. Instead include text that describes the destination.
11. A style sheet (CSS) is used.   If most formatting is defined via a Cascading Style Sheet visitors can replace it with their own style sheet, one that suits their vision.




Part 3: Genuine Value: Useful Content & Critical Interaction Design


    Examples  
1. Questions are answered   Easy to state, but the hardest of all goals. This includes both "Can they get to it?" and once they get to it, "Is the key information there?" Does the content have value, or do you try to "protect" certain things, like embarassing problems with your products, your brick-and-mortar address, or your E-mail addresses? If you're really paying attention, perhaps you notice that this is a matter of usefulness, not usability! Good for you, but that doesn't bump it from #1 in the hit parade. Usefulness is the ultimate endpoint of the usability profession. Stopping short is a hypocritical disservice.
2. Search results get the job done   When they search for the term they think of, do the suitable pages appear? Do you index misspellings and synonyms? Do categorical pages float to the top, so that incidental references don't obscure a page solely devoted to the search term?
3. Effective 'click tree'   Searching is one way to find pages and browsing (clicking categorical links) is the other. Laying out the right tree of clickable choices is the holy grail of Web information design. The problem won't be solved by telling you that users must get to their destination in x number of clicks, or that wide is better than deep. What matters is that each click has a high degree of certainty. And just how can you determine the right hierarchy? 1. Learn from other sites. 2. Enlist a structured thinker who is also a communication expert... someone like me. 3. Experiment. (Choose any 3)
4. Conceptual flow from upper left to lower right   Western culture reads from left to right, progressing down a page, and the rough arrangement of information should as well. True, studies make it clear that users fixate near the center top of a page, the broader items should be toward the top left and the narrower items to the bottom and right. I still believe in the Windows/Mac scheme that finishing steps (like an OK button) should toward the bottom and right.
5. Simple, outline-like site map   Provide a site map. Don't get too fancy or technological unless you're certain it's a benefit. Try to emulate the Table of Contents in traditional books. If it helps to have a given page listed more than once in your site map because people might look for it under multiple headings, that's OK as long as visited links are color-coded. (Listing pages more than once can defeat an important benefit of a site map, that of showing how big a site is.)
6. Primary navigation is obvious   This means that visitors can tell at a glance that certain links are the main buckets into which every page on the site is placed. On a clothing site, Mens and Womens might be primary navigation.
7. Secondary navigation is obvious   This means that once you click a primary link or get to a page that has what you want, you know what to do next. On a clothing site, for instance, on the page with a particular shoe, is it clear how to find available sizes or colors?
8. Contact information easily accessible   Some sites try to bury it as a way of discouraging contact. If that's the case, then it's time for sites to simply have a Contact link and just state the policy overtly. Bellis's Law: Usability = Explicitness.
9. Links are clear Bad example

The generalization that clickable content is underlined is slowly giving way. We struggle with that design issue on our own pages, preferring to use bold in some situations. What matters though is whether it's clear what can be clicked. Make buttons look like buttons with raised surfaces. Consider using triangle arrows or ">>" to the left of obscure links. Within prose paragraphs on pure informational pages, stick with underlining for links.

10. Intro panel or animation not excessive   StopitwiththestupidFlashthingsalreadyyou'redrivingmenuts. At least provide a "Skip Intro" link and don't repeat it on subsequent visits.
11. Graphics used only for core message   If you've got photographic content make it relevant. For instance, for a book manufacturer show the impressive array of presses, not smiling customers.

 

 


"My interest in usability arose from the pain and tears of patching the wounds of suffering interface designs with the inadequate bandages of help files and user guides." — Daniel Cohen
Contact me for a FREE usability review!

© 2002, UsabilityInstitute.com   All Rights Reserved    jackbellis@hotmail.com
Any and all content may be reused without prior consent if you simply acknowledge the source, UsabilityInstitute.com