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.
|
|
|
|
|
|
|
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 |
|
|
1. |
Sans-serif fonts |
2. |
Appropriate background color |
3. |
Appropriate
color hues |
4. |
Visual representation
of the information hierarchy |
5. |
Conservative quantity
of colors |
6. |
Text sizes are "relative" |
7. |
Anti-aliased
graphics |
8. |
Graphics
file size doesn't slow navigation |
9. |
"Alt
tags" used well |
10. |
Links don't just say
"Click Here" |
11. |
A style sheet (CSS) is
used. |
Part 3: Genuine Value: Useful Content & Critical Interaction
Design
|
|
|
1. |
Questions
are answered |
2. |
Search results
get the job done |
3. |
Effective
'click tree' |
4. |
Conceptual
flow from upper left to lower right |
5. |
Simple, outline-like
site map |
6. |
Primary
navigation is obvious |
7. |
Secondary
navigation is obvious |
8. |
Contact
information easily accessible |
9. |
Links are clear |
10. |
Intro panel
or animation not excessive |
11. |
Graphics
used only for core message |