In a paper discussing UCD and Web development, Raïssa Katz-Haas offers the following ten guidelines for Web-page design.
1. Visibility—Make 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 Load—Make screen elements meaningful and consistent across the site to reduce memory load. In this way, users don’t have to remember what the elements mean from one page to another. Relate new items and functions to ones the user already knows.
3. Feedback—Provide 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. Accessibility—Users need to find information quickly and easily:
• 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/Navigation—Help users orient themselves by providing the following navigational clues:
• 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 expect.
6. Errors—Minimize 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. Satisfaction—Make 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. Legibility—Make 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 fonts—9 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. Language—You can improve usability by incorporating the following stylistic elements:
• 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.)
• Metaphors
• Icons
• Idioms
• Puns
10. Visual Design—The 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 user’s 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.
