Webpage Design
This section presents guidelines for designing and implementing individual
web pages. For general "Dos and Don'ts" about using frames, popup windows,
and other special page elements, see
Site Design.
Key Usability "DOs"
The following attributes characterize the pages that users have said they find
most appealing and useful:
- Treat screen real estate as a valuable commodity. This
doesn't mean pages should
be packed with tightly spaced text, but rather that how space is used
is just as important as what content is included.
- The main page content should fit in the browser window's width,
even when the window is not "maximized" to fill the entire screen.
Users find it annoying to have to scroll horizontally just to read a
line on the page. It's even worse when they adjust the browser's
font or window size to improve viewing of a page, then must re-adjust
it when they move to a new page. See Page
Size for details.
- Design webpages so the browser can resize them according to the
display space available. This is particularly important with the increasing
use of small-screen portable computers, PDAs, and cellphones to access web
content. Specifics on how to make content re-size to fit the browser window
will be found under the topic Page Size.
- Keep the size of most webpages small enough to download in under 10
seconds. Many user studies have established that failure to do so will
cause users to move their attention to something else or leave the website.
For the rare page that really requires longer download time (such as a video
clip or animation), warn the user ahead of time so that he/she can choose
whether or not to incur the extra time. Note that this is just one reason
to keep files small; others were laid out in the section on Site Design.
- Use visual highlighting to draw the user's eye to key information,
such as the key phrases in this list of "dos and don'ts." Boldface or
large fonts are not the only elements that draw the eye. Tables, the
interspersing of bullets with text, and "white space" (blank areas) can
all be used judiciously to ensure that the user doesn't miss key
information. Specific examples of how to do this effectively will be
found under Helping Users Find Key Content.
- Limit images to elements that are really meaningful. This
doesn't necessarily mean pages have to be dull, since there are lots
of alternatives to provide visual interest. But usability studies have
shown clearly that dense graphics alienate many users, due to their
affect on the time required to download and display pages and a
pervasive assumption that sites with too many or too advanced graphics
are "all flash and no substance." further, heavy use of graphics
indicates an insensitivity to users who dislike graphics or cannot see
them well.
- Use block text rather than creating .gif or .jpg images of "display
text". Image files take substantially longer to load. They do not
resize properly or display well on very small screens. Finally, they cannot
be interpreted by browsers that have been voice-enabled for visually
impaired users.
Key Usability "DON'Ts"
Studies have also indicated that certain page design features are
particularly likely to frustrate or annoy users and should therefore
be avoided:
- Don't specify fonts using absolute sizes (e.g.,
size="14pt"), since that robs users of any control over the
appearance of the webpage. Relative sizing will not only allow users to
increase or decrease the size to fit their display screens, but also opens
the door to improvements when the page is processed through a voice-synthesis
interface (see Use of Fonts).
- Don't use all-caps for text unless you are referring to an
acronym. Use of all capital letters has been demonstrated to take at
least 25% longer to read, and typically results in significantly more user
errors than mixed-case or lower-case alone. Generally speaking, follow the
conventions for capitalization used in most books: titles (including menus,
buttons, and links) in mixed upper- and lower-case, text in lower case
except for proper nouns.
- Don't get carried away with creative fonts. Many "artistic" fonts
are actually quite difficult to read when displayed in a small browser
window (see Use of Fonts).
In addition, users find that combining a lot of different font sizes and
styles becomes distracting.
- Don't use animation unless it's truly needed. Animation can
be a valuable tool for showing change over time, but gratuitous movement
on web pages is annoying to users and ignores the fact that many users
have older versions of browsers or do not have the newest sets of plug-ins
available. Save animation for worthwhile things like time-series information,
fly-throughs of 3-D spaces or visualizations, or live camera images.
- Don't assume all users can see what you see. Your web pages should
be accessible to users even if the images have not been downloaded. In
some cases, this is because the user is visually-impaired. In others, it's
because the user wishes to make pages display faster or because he/she
prefers a browser with a voice-synthesis interface. Either way, it's
important to include
ALT= tags for all images (see
Helping Users Find Key Content).