dotParagon Home ||| Tips & Tools Index

Design for Usability

Noise Impairs Usability

General Readability Issues

One readability issue where web designers could learn a lesson from print is the relationship between typeface size and line length. Over a period of centuries, researchers have determined optimal line lengths for various sizes of type.

Whether the web site visitor relies on default fonts/sizes or a customized configuration, one designer faux pas that has a dramatic (usually negative) effect on readability is specifying line width. Why? Differing monitor sizes or default browser widths can lead to scrolling or asking the user to modify their optimal settings. Long lines with small type are hard for the eye to follow. A related faux pas, centering long lines of type, also impairs readability.

Not only is the same "size" type rendered in different sizes on Macintosh and Wintel computers (larger on the Wintel machine). Users also have the option of specifying their default fonts and sizes. And, the width of <width=800> will also appear different on Mac and Wintel monitors. Finally, web pages with a fixed width of 800, for example, ignore the varied monitor sizes and settings and result in massive scrolling on the more common 640x480 monitors.

Another usability issue involving navigation is the tag which renders text underlined. In pre-computer days, typists (using typewriters) would underline words in order to create emphasis. The underline and typing words in all CAPS were the only way text could be emphasized.

With the advent of word processors and computers, typists can modify type face, size and style ­ each assisting in communicating emphasis and emotion.

However, the underline style option in HTML should be avoided for two reasons. First, alternative methods of emphasis, with built-in user familiarity, are available (bold, italic, indent via blockquote and to some extent type size). Second, underlining text leads to navigation confusion.

Underlining hypertext links is another browser default setting. Designers who override this command or who add underlining to other text can only cause momentary confusion to the visitor. This confusion can be critical, adding unnecessary time and energy to understanding how to navigate a corporate intranet, for example. This confusion can merely be annoying, perhaps alienating a more savvy web visitor.

Text typed in all caps is also difficult to read, leading to impairment of a site's usability. This is because the eye needs the movement associated with each letter in order to recognize the word. With capitals being the same size (no ascenders or descenders), the eye must slow down to gather information.

Finally, designers can increase site usability and readability by using templates that provide a consistent look-and-feel throughout the site. Print designers such as Jan White have preached this mantra for several decades; the concept applies to the web as well. When common elements appear in the same place and look the same, users better understand where they are and how to navigate the site.

Web site examples:

  • The Web100
    This is a clean, attractive site ­ both with and without graphics. It is information rich with a clean look-and-feel.

  • Minnesota
    A clean, very accessible site, in tune with its users.

  • Previous Section, Frames
  • Next Section, Conclusion

    This paper is part of the Tips & Tools portion of the dotParagon web site.
    dotParagon Home ||| Tips & Tools Index

  • dotParagon, web services
    specializing in content, design, research

    Copyright Kathy E. Gill, 1996 and 1997. Comments?

    Last Modified: