The Human Factor: Guidelines for Designing Interactive HTML Documents
by Tandy Trower
So you want to design great Web pages? This article covers some basic design guidelines.
"Whoa," you say.The Web is a public forum that allows for creative expression. What place do design guidelines have here?
Well, these recommendations are not intended to define any form of formal acceptability or conformance criteria. Nor do I propose to discourage creativity. However, while the Web offers a great vehicle for creative designs, there are fundamental design factors that characterize great Web pages.
A good starting reference is "The Windows Interface Guidelines for Software Design" (http://www.microsoft.com/win32dev/uiguide/default.htm). Originally designed for more traditional desktop applications, many of its conventions and recommendations can be applied to Web page design, especially the information on basic design principles and methodology, when to use various types of controls, layout, labeling, and design considerations for international audiences. For example, Web page design benefits from an iterative design process that includes prototyping and usability assessment. You can read the Guidelines online now or order a printed copy from your local bookseller.
Consistency
Consistency is one the fundamental design principles outlined in The Windows Interface Guidelines for Software Design. Although HTML pages can be produced with a great variety of styles and expression, consider the following aspects of consistency in your design:
Consistency of identity, purpose, and audience. Consider what kind of identity you want to project. Is it, for instance, one of seriousness or playfulness? Are you communicating corporate information or entertainment?
Consistency with de facto industry conventions. For example, terms like "home," "back," and "forward" have accepted interpretations among users and should be employed accordingly.
Internal design consistency. Layout and navigational interfaces need to be consistent from page to page. Common elements, such as headers, footers, navigation aids, fonts, color, and general layout conventions, should be presented consistently.
Consistency of metaphor. Metaphors can be useful in presenting interactive documents. For example, a movie site might be presented as the entrance to a theater. To a reasonable extent, your design should be consistent with the metaphors you use. A user clicking on the image of the theater’s marquee may likely expect to see a movie listing.
Remember that the goal of consistency is not to promote least-common-denominator uniformity or to limit innovation, but to ensure ease of use and predictability.
Visual and aesthetic design
In desktop applications, design typically focuses on the creation or editing of content. But HTML page design focuses on the presentation and interaction of content. So fonts, color, and general layout need to be even more carefully considered. As in print or other media, simplicity of design and an appropriate limitation of choices aids the user’s ability to scan and parse the information you present.
Using color
The Windows Interface Guidelines for Software Design also describes the effects of color and how it can have a powerful impact on communication. Color can motivate and enhance a user’s experience or distract and confuse. Because HTML page designs typically include a richer use of color, the guide’s recommendations on careful usage and appropriate color combinations apply. For example, the background color of your page may affect the readability of any overlaying text.
Also, when selecting colors, for page elements as well as for graphics, try to stay within a 216-color palette so that your page won’t remap the colors of other applications that may be running. It may also ensure better presentation across multiple platforms. You especially want to avoid changing the colors in the palette reserved for the standard system color settings. Read Kate Knight’s article, "Decreasing Download Time Through Effective Color Management," at http://www.microsoft.com/workshop/design/.
Using fonts
Just because you can use a large mix of font styles in an HTML document doesn’t mean you should. Good basic visual design suggests the following minimal guidelines:
Use a small set of fonts and sizes. Too many fonts and sizes make it difficult for users to understand the interrelationships of the information you present. Use fonts to create a visual hierarchy of information, with larger, bold fonts introducing specific topics.
Limit your use of all-capital letters . Use ALL CAPS only when you want to draw attention to small runs of characters. While words displayed in all capital letters attract the eye, used to excess, they make text harder to read.
Limit your use of bold fonts. Imagine how difficult it would be to communicate if someone were continually or indiscriminately shouting at you. While bold text attracts attention, it loses its impact when everything is bold. Limit bold text to titles, headings, and specific items to which you want to direct the user’s attention.
Limit your use of italics. Used in isolation, italics can attract attention; but overuse tends to decrease the emphasis of text. And, because of display resolution, italicized words may be harder to read on the screen.
Using graphics
When incorporating graphics in your HTML page designs, always consider your audience and the impression you intend to communicate. You also should consider the impact that graphics may have on user access to the document. Graphic elements, particularly color images, typically consume large amounts of memory, potentially slowing a document’s load time. However, there are a variety of schemes to present graphics, such as the use of thumbnail graphics, compressed formats, or graphics stored with reduced color depth—but be aware of the tradeoffs in quality that such schemes exact. For example, JPEG (Joint Photographic Experts Group) images are in a compressed format that works well for blending; however, the format is "lossy"—that is, detail may be lost when the image is displayed at particular sizes. GIF (Graphics Interchange Format) images are in a format that works better for line art. GIF also supports transparency, better for layering over existing graphics.
You can support progressive rendering (also known as interlaced formats) for some graphics or include height and width information for the image so that the space for the graphic appears while the image loads. These techniques allow the user to browse a page and quickly get the basic layout without having to wait for the graphics to load completely. Remember to include descriptive information, or "alternate text," for all images. For more information, see the following section on "Designing Accessible HTML Pages."
The size of your graphics not only affects load time, but may also make document viewing and navigation difficult. Having to scroll around a large graphic image can be tedious. You may find that using many small graphics is more effective and less time-consuming than using one large image.
Finally, consider the importance of graphics to what you are trying to communicate. If your graphics don’t enhance visual presentation and communication, avoid them.
Using sound, video, and animation
As The Windows Guidelines for Software Design recommends, use sound primarily as an enhancing quality. As with color, poor use of sound can annoy or detract from a design. Consider that some users may not have sound support, may operate in situations where sound should not or cannot be heard, or may have hearing disabilities. As with graphics, also consider the size of the sound file. The smaller the file, the faster it will load and play.
These guidelines also apply for including video in your documents. It is typically better to give the user the option to download the file, rather than to have it automatically play when the page is loaded.
The same may be true for animations. Small, short animations can have an enhanced quality, but long, large animation files should be made user downloadable. Also, avoid using animation to display essential information, without making it otherwise available to the user. For example, displaying help information on an animated scrolling marquee can prove frustrating for users.
Page design
The organization and navigation you support for your HTML pages can have a significant impact on their usability, particularly because users view active documents interactively. How you organize the elements on a page can dramatically affect how well they communicate. For example, grouping establishes relationships between elements. Grouping can be accomplished using lines, space, color, or patterns. Also remember that users may view your page at different resolutions and can change the size of fonts displayed on the page. Therefore, it is important that you keep the layout flexible.
Sizing your page
Because HTML documents are viewed on the screen, design your page size to take this into account. A good rule of thumb is to limit the page size vertically to what can be viewed in one to three screens of a maximized window on a 640 × 480 display. (If you are certain your target audience has different resolution, you may use a more specific measurement.) For your initial page or any key navigational pages, design for a single screen so that the user can see the entire page without scrolling. Similarly, design your page horizontally to fit within a maximized window. Larger dimensions increase the likelihood that the user must scroll for desired information. Usability studies have shown that users have difficulty reading and retaining content for documents that require extensive scrolling, or they may simply miss content located outside the viewable area. In addition, larger pages imply longer loading time. Users have little patience for long load times.
Displaying update information
When creating Web documents for any form of public consumption, you should include information about the creation or modification of the document: the owner (often the creator) of the document, and its creation or revision date. When including date information, use an unambiguous format. For example, a date formatted as 9-4-96 could be interpreted either as September 4, 1996, or April 9, 1996. Using the text format of the month provides a clearer interpretation.
Supporting downloads
Whenever you provide support for users to download information, be sure to include the size of the downloadable file so that the user can make an informed choice about how long the download will take and how much local space it will consume. For an example, try the download pages for the Microsoft Excel Viewer (http://www.microsoft.com/msoffice/excel/).
Supporting printing
A Web document typically comprises several separate pages, which does not make it easy for users to print the entire document. You should include other mechanisms for this purpose; for example, provide an option on the introductory page to download the entire document as a single file.
Designing navigation for a web document requires more than simply breaking a document into separate pages. You want to provide efficient ways to support navigation throughout the document. Consider the following guidelines:
Give careful design consideration to your first page. You may want to provide a short summary or overview of the document and include links to key pages in the document. For documents that you update frequently, you may want to include links to new or recently updated pages.
When defining the topography of your navigational design, try to achieve a good balance between breadth and depth. Avoid a too-shallow hierarchy that forces the user to backtrack to a particular page in order to link to other pages. Such design makes navigation not only tiresome, but annoying if sounds are associated with a page that must be frequently traversed. However, forcing the user through multiple levels of menus before getting to actual information can also be annoying.
Provide an indication of where users are so that they can orient themselves within your navigational framework. Users can easily get lost in hierarchies. Display some type of visual cue to indicate where the user has come from. If all your pages display a common set of navigational links that correspond to specific pages, visually differentiate the link that relates to the page currently being viewed.
Avoid relying solely on navigation provided by the browser window. Many users have difficulty predicting what the Back command will do, because the command sometimes goes back at the same level and sometimes up a level, depending on the navigational design of the document. Providing navigation controls on the pages assists users with internal navigation in a document. However, be careful not to confuse Next and Previous with Back and Forward commands. Next and Previous imply navigation at the same level. Because in some situations, users may have difficulty understanding the difference between Previous and Back commands, it is better to be more specific in defining your general navigational controls. For example, instead of a Previous button, use a descriptive reference labeled as "Page 2: Selecting a Product." Check out how the online version of the Windows guidelines updates its navigational links (http://www.microsoft.com/win32dev/uiguide/default.htm). Thumbnails (screen miniatures) of previous pages might also work to provide a reasonable cue, depending on how unique or identifiable the page may be.
Use descriptive definitions when defining links within the document. Avoid using the words "Click Here" when describing a link. Instead of using "If you want information about selecting a product, click here" or "For more information, click here", use something like "For more information, see Selecting a Product" or "The section, Selecting a Product, provides more information."
Avoid including the mechanics of the navigation in your reference. Instead of saying "You can read more about this in the tutorial, which is linked to the home page," say "The tutorial provides more information."
When providing your own navigation controls, always try to keep them visible. If the user must scroll to read the entire contents of the page and the navigation controls scroll off the page, also put the controls at the bottom of the page. The Windows design guidelines online follow this practice. Of course, you can also use frames to keep navigational controls on a page.
When composing the starting text to any page, never assume that all readers will be arriving at that page from the same place.
Avoid navigational dead ends. Use bi-directional links that allow the user to return to the previous page. At a minimum, consider a link back to a primary navigation page (such as the home page or table of contents page).
Avoid links to incomplete pages. Users find little value in being rewarded with an "Under Construction" banner.
Alert users when they will be going outside the context of your pages. Otherwise, users may become disoriented and have difficulty returning to your document. You may want to consider placing such links in a separate location or otherwise distinguishing them on the page, rather than mixing them in with the internal content. For example, you can include a graphic or description that makes a link to another document obvious to the user. To see how you might handle this, see the "Other sites of interest" section on http://www.microsoft.com/workshop/.
Avoid too many links on a page. While you want to support efficient navigation, remember that the greater the number of links, the less likely the user will read your entire page.
Tandy Trower has memorized every word of "The Windows Interface Guidelines for Software Design" and, boy, are we glad to have him back.
While the Web offers a great vehicle for creative designs, there are fundamental design factors that characterize great Web pages.
Usability studies have shown that users have difficulty reading and retaining content for documents that require extensive scrolling.
The complete version of the article from which this excerpt was taken can be found at http://www.microsoft.com/msdn/news/devnews/.