Develop System Menus and Navigation Schemes 359

Step 4: Develop System Menus and Navigation Schemes 359

links. Use of a particular symbol should (1) always indicate clickability, or (2) never indicate clickability. Otherwise the user will be confused and a mental model of the system will be more difficult to learn.

Underline text links. To identify a link, the well-established convention is to under- line the link text. All link text must be underlined, including that embedded in page content, that presented in explicit listings, that contained in headings, and that taking the form of labels in graphical images.

If design clearly indicates a page area’s navigational function, underlining may be safely eliminated. Consider, however, displaying an underline under non-underlined links when the pointer is placed over the text. This will reinforce the element’s clickability.

Designate used links. Unselected or unvisited links must be distinguishable from selected or visited links. The ability to understand what links have been followed is one of the few standard navigational aids available in browsers. In a study, pro- viding this type of feedback was the only variable that increased a person’s speed in finding information (Koyani et al., (2004). Stick with the default colors of blue for links already followed and purple for links not yet ventured down. While the choice of blue as a text color was poor because of its degraded reading ability, it is now well learned. Van Schaik and Ling (2003) found that blue links are easier to click than black ones, even though black ones have higher visual contrast and are easier to see. Blue’s use is recommended because it is now very familiar. Using nonstandard link colors can lead to problems. It is difficult to remember which color means what, thereby increasing link selection errors. It can also lead to con- fusion with normal underlined text in a document. If on a Web site multiple links lead to the same destination, change all links to the “visited” color. Finally, to avoid viewer confusion, never present other page components in a link’s chosen selected/unselected colors.

Distinguish kinds of links. Visually distinguish links leading to different Web des- tinations. A study found that people often assume that a link will take them to another page in the Web site where they are browsing (Koyani et al., 2004). If the link simply moves within a page, or goes to another Web site entirely, confusion can result. A link that moves to another Web site can also be aggravating if the person was not ready to move on. A link’s destination should be as predictable as the content at the other end.

Koyani et al. recommend the following methods for notifying a user that a link will leave the current Web site. Include the URL address of the destination below the link text as shown in Figure 4.23. Provide an Exit disclaimer command button adjacent to the link as shown in Figure 4.24. Provide an interim page after clicking the external link and before going to the new Web site as illustrated in Figure 4.25. Whichever technique is chosen, it should be followed consistently within a Web site.

Designation of these different destination types can also be accomplished by grouping links by type, giving them a descriptive heading, and placing them in unique and consistent locations on a page. Anchor links, for example, can be given a heading such as “Page Contents” as illustrated in Figure 4.26. A destina-

360 Part 2: The User Interface Design Process

Figure 4.23: Destination URL address.

Figure 4.24: Web site exit disclaimer.

Figure 4.25: Web site interim page.

Figure 4.26: Anchor links table of contents. Graphical links. Clearly identify clickable regions of images, either the entire image

or the relevant sections of the image. Users should not have to use the mouse pointer to locate the clickable area or areas. If care is not exercised, graphical links may be also confused with decorative graphics. A principle of graphical or icon design is to always provide a text label (see Step 11). Distinguish graphical links by underlining the graphical text labels, as is done with plain link text.

Links in toolbars. Distinguish links contained in toolbars from page content by pre- senting the toolbars in consistent locations, and/or displaying them in back- grounds of a contrasting color to the page content. Global toolbars, most often in iconic or button form, are becoming consistently arrayed across the top of a page. Category or topical toolbars are now commonly arrayed down the left side or