Ten Guidelines for User-Centered Web Design
by Aimée Truchard, editor, and Raïssa Katz-Haas, content author.
Most users dont really read Web pages. Instead, they scan text for
specific pieces of information in a process called information retrieval. With
user-centered design (UCD), you can improve the usefulness (relevance) and usability (ease
of use) of Web sites by considering information retrieval and other factors.
Who are the users of this Web site?
What are the tasks and goals of these users?
What experience levels do the users have with
This interface and interfaces like it?
The domain (subject matter)?
What are the users working or Web-surfing environments?
What hardware, software, and browsers do the users have?
How can the design of this interface facilitate users cognitive processes? How do
the users discover and correct errors?
What are the users preferred learning styles? How much training, if any, will the
What relevant knowledge and skills do the users already possess?
What functions do the users need from this interface? How do they currently perform
these tasks? Why do the users currently perform these tasks the way they do?
What information might the users need and in what form do they need it?
What do users expect from this Web site? How do users expect this interface will work?
Reprinted from Usability Interface, Vol 5, No. 1,
After answering these questions, you can begin developing, designing, and
testing your Web site. In UCD, your development cycle includes stages for both usability
design and testing. Be sure to get user feedback throughout development and dont
settle on a final direction or design too soon. Usability testing is the only way you can
know if your particular site meets these users needs.
In a paper discussing UCD and Web development, Raïssa Katz-Haas offers the following
ten guidelines for Web-page design (Katz-Haas, 1998).
1. VisibilityMake important elements such as navigational aids highly
visible so users can determine at a glance what they can and cannot do. Visibility helps
users predict the effects of their actions.
2. Memory LoadMake screen elements meaningful and consistent across the site to
reduce memory load. In this way, users dont have to remember what the elements mean
from one page to another. Relate new items and functions to ones the user already knows.
3. FeedbackProvide immediate feedback when a user performs an action. For
example, when the user clicks a button, something on the screen should change so the user
knows the system has registered the action.
4. AccessibilityUsers need to find information quickly and easily:
Offer users a few ways to find information such navigational elements, search
functions, or a site map. However, offer only a few options at a time to avoid confusion.
Organize information into small, digestible pieces using a schema or hierarchy that is
meaningful to the user.
Make it easy for users to skim; provide clues that allow users to find the information
by scanning rather than reading.
5. Orientation/NavigationHelp users orient themselves by providing the following
- Descriptive links
- A site map
- Obvious ways to exit every page
- Clearly visible elements on each page that inform users where they are in relation to
other pages and how to navigate to other pages
Use frames sparingly, if at all. Frames confuse many users because the Back button,
printing, and bookmark functions do not work like they do on non-frames pages.
Approximately 60% of Web users employ the Back button as their primary means of
navigation. Usability issues surface when the Back button doesn't work the way they
6. ErrorsMinimize user errors by avoiding situations in which users are likely to
make mistakes. Also try to accommodate incorrect actions by users so they can recover
quickly. For example, if you anticipate that users might look for certain information on
one Web page that actually appears on another, you can include descriptive links to the
page they need.
7. SatisfactionMake your site pleasant to use and view. Users satisfaction
with the interface influences their
- Perception of ease-of-use.
- Motivation for learning how to use the site.
- Confidence in the reliability of the information in the site.
8. LegibilityMake text easy to read. When developing online documentation, use
- Sans serif fonts rather than serif fonts, especially in body text.
- Non-ornamental fonts.
- Roman characters rather than italic.
- Medium-sized fonts9 to 11 points for sans serif fonts and 11 to 12 points for
serif fonts often work well for body text.
- Mixed case for text rather than all capital letters.
- Line lengths less than 50 to 60 characters long to facilitate scanning.
- High contrast between text and background colors to increase legibility. Dark text
against a light background is most legible.
9. LanguageYou can improve usability by incorporating the following stylistic
- Concise language
- Everyday words instead of jargon or technical terms
- Active voice and active verbs
- Verbs instead of noun strings or nominalizations
- Simple sentence structure
Because the Internet crosses cultural and national boundaries, be careful with
ambiguity. The following stylistic elements can be misinterpreted easily:
- Humor (Humor does not translate well across cultures. At best, it is not understood; at
worst, it can offend.)
10. Visual DesignThe aesthetics of your interface play an important role in
communicating information and tone to your users effectively. As you develop your site,
consider the following visual design strategies:
- Create pages that are interesting yet simple and uncluttered.
- Use graphics to illustrate and inform, increase the users satisfaction and
motivation, and aid navigation. Avoid using graphics that only serve as decoration.
- Use graphics that are small in file size so they download quickly.
- Make the most important elements the most visually prominent.
- Treat text as a graphic element.
- Make preliminary page layouts using a grid.
- Group related elements close to each other so users can associate the elements just by
looking at the placement.
- Use white space to visually organize the page, to emphasize important elements, and to
give users eyes some resting space.
- Use invisible table lines (white space) instead of visible lines.
If you must use lines, use light and thin ones.
- Use color conservatively. Although color can engage users, it can distract them
unnecessarily or be misinterpreted. Also keep in mind that some users have equipment that
only supports monochrome. Try your design in monochrome first, then add a few colors.