Chapter 7
Navigation
Navigation
Navigation refers to the method used to find information within a Web site. A navigation page is used primarily to help users locate and link to destination pages. A Web site’s navigation scheme and features should allow users to find and access information effectively and efficiently. When possible, this means designers should keep navigation-only pages short. Designers should include site maps, and provide effective feedback on the user’s location within the site.
To facilitate navigation, designers should differentiate and group navigation elements and use appropriate menu types. It is also important to use descriptive tab labels, provide a clickable list of page contents on long pages, and add ‘glosses’ where they will help users select the correct link. In well-designed sites, users do not get trapped in dead-end pages.
Research-Based Web Design & Usability Guidelines
7:1 Provide Navigational Options
59
Relative Importance:
Guideline: Do not create or direct users into pages that have no navigational options.
Comments: Many Web pages contain links that open new browser windows. When these browser windows open, the Back button is disabled (in essence, the new browser window knows nothing of the user’s past navigation, and thus is disabled). If the new window opens full-screen, users may not realize that they have been redirected to another window, and may become frustrated because they cannot press Back to return to the previous page. If such links are incorporated into a Web site, the newly-opened window should contain a prominent action control that will close the window and return the user to the original browser window.
In addition, designers should not create Web pages that disable the browser’s Back button. Disabling the Back button can result in confusion and frustration for users, and drastically inhibits their navigation.
Sources: Detweiler and Omanson, 1996; Lynch and Horton, 2002; Spool, et al., 1997; Tullis, 2001; Zimmerman, Slater and Kendall, 2001.
Example:
Strength of Evidence:
Navigation
The link for this document opens a new browser window that presents the user with a disabled Back button. This can confuse users.
Research-Based Web Design & Usability Guidelines
7:2 Differentiate and Group Navigation Elements
60
Guideline: Clearly differentiate navigation elements from one another, but group and place them in a consistent and easy to find place on each page.
Comments: Create a common, Web site-wide navigational scheme to help users learn and understand the structure of your Web site. Use the same navigation scheme on all pages by consistently locating tabs, headings, lists, search, site map, etc. Locate critical navigation elements in places that will suggest clickability (e.g., lists of words in the left or right panels are generally assumed to be links).
Make navigational elements different enough from one another so that users will be able to understand the difference in their meaning and destination. Grouping reduces the amount of time that users need to locate and identify navigation elements.
Do not make users infer the label by studying a few items in the group. Finally, make it easy for users to move from label to label (link to link) with a single eye movement. This best can be done by positioning relevant options close together and to using vertical lists.
Sources: Bailey, 2000b; Detweiler and Omanson, 1996; Evans, 1998;
Farkas and Farkas, 2000; Hornof and Halverson, 2003; Koyani and Nall, 1999; Lynch and Horton, 2002; Nielsen and Tahir, 2002; Niemela and Saarinen, 2000.
Example:
Relative Importance:
Navigation
Strength of Evidence:
Navigation elements are grouped (high-level topic areas across the top of the page) and consistently placed across the Web site.
Research-Based Web Design & Usability Guidelines
7:3 Use a Clickable ‘List of Contents’ on Long Pages
61
Guideline: On long pages, provide a ’list of contents’ with links that take users to the corresponding content farther down the page.
Comments: For long pages with several distinct sections that are not visible from the first screenful, add a short, clickable list of the sections (sometimes called ’anchor’ or ’within-page’ links) at the top of the page. ’Anchor links’ can serve two purposes: they provide an outline of the page so users can quickly determine if it contains the desired information, and they allow users to quickly navigate to specific information.
Since ’anchor links’ enable a direct link to content below the first screenful, they are also useful for getting users to specific information quickly when they arrive from a completely different page.
Sources: Bieber, 1997; Farkas and Farkas, 2000; Haas and Grams, 1998; Levine, 1996; Nall, Koyani and Lafond, 2001; Spool, et al., 1997; Spyridakis, 2000; Williams, 2000; Zimmerman, Slater and Kendall, 2001.
Example:
Relative Importance:
Navigation
Strength of Evidence:
See page xxii for detailed descriptions of the rating scales
Research-Based Web Design & Usability Guidelines
7:4 Provide Feedback on Users’ Location
62
Guideline: Provide feedback to let users know where they are in the Web site.
Comments: Feedback provides users with the information they need to understand where they are within the Web site, and for proceeding to the next activity. Examples of feedback include providing path and hierarchy information (i.e., ’breadcrumbs’), matching link text to the destination page’s heading, and creating URLs that relate to the user’s location on the site. Other forms of feedback include changing the color of a link that has been clicked (suggesting that destination has been visited), and using other visual cues to indicate the active portion of the screen.
Sources: Evans, 1998; Farkas and Farkas, 2000; IBM, 1999; Lynch and Horton, 2002; Marchionini, 1995; Nielsen and Tahir, 2002; Spool, et al., 1997.
Example:
Relative Importance:
Navigation
Strength of Evidence:
Color coding the pages and navigation menus provides effective feedback to the user about their location in the Web site.
This box is used to designate the section of the Web site that is currently being viewed.
See page xxii for detailed descriptions of the rating scales
Research-Based Web Design & Usability Guidelines
7:5 Place Primary Navigation Menus in the Left Panel
63
Guideline: Place the primary navigation menus in the left panel, and the secondary and tertiary menus together.
Comments: One study found that navigation times were faster when the primary menu was located in the left panel. Also, navigation performance was best when the secondary and tertiary menus were placed together. Placing a navigation menu in the right panel was supported as a viable design option by both performance and preference measures. Users preferred having the primary menu in the left panel, and grouping secondary and tertiary menus together, or grouping all three menu levels together. The best performance and preference was achieved when all three menus were placed in the left panel (placing them all in the right panel achieved close to the same performance level).
Sources: Kalbach and Bosenick, 2003; Kingsburg and Andre, 2004.
Example:
Relative Importance:
Navigation
Strength of Evidence:
Primary and secondary navigation is placed consistently throughout the site.
Research-Based Web Design & Usability Guidelines
7:6 Use Descriptive Tab Labels
64
Relative Importance:
Guideline: Ensure that tab labels are clearly descriptive of their function or destination.
Comments: Users like tabs when they have labels that are descriptive enough to allow error-free selections. When tab labels cannot be made clear because of the lack of space, do not use tabs.
Sources: Allinson and Hammond, 1999; Badre, 2002; Koyani, 2001b.
Example:
Strength of Evidence:
Navigation
These tab labels clearly describe the types of information a user can expect to find on the destination pages.
These tab labels are not as descriptive which leaves the user in doubt about the type of information available on the destination pages.
See page xxii for detailed descriptions of the rating scales
Research-Based Web Design & Usability Guidelines
7:7 Present Tabs Effectively
65
Relative Importance:
Guideline: Ensure that navigation tabs are located at the top of the page, and look like clickable versions of real-world tabs.
Comments: Users can be confused about the use of tabs when they do not look like real-world tabs. Real-world tabs are those that resemble the ones found in a file drawer. One study showed that users are more likely to find and click appropriately on tabs that look like real-world tabs.
Sources: Bailey, Koyani and Nall, 2000; Kim, 1998.
Example:
Strength of Evidence:
Navigation
These clickable tabs look just like tabs found in office filing cabinets.
The design of these navigation tabs provides few clues to suggest that they are clickable until a user mouses-over them. Mousing-over is a slow and inefficient way for users to discover navigation elements.
Research-Based Web Design & Usability Guidelines
7:8 Keep Navigation-Only Pages Short
66
Relative Importance:
Guideline: Do not require users to scroll purely navigational pages.
Comments: Ideally, navigation-only pages should contain no more than one screenful of information. Users should not need to scroll the page, even a small distance. One study showed that users considered the bottom of one screenful as the end of a page, and they did not scroll further to find additional navigational options.
Sources: Piolat, Roussey and Thunin, 1998; Schwarz, Beldie and Pastoor, 1983; Zaphiris, 2000.
Example:
Strength of Evidence:
Navigation
Users can view all of the information on these navigation pages without scrolling.
See page xxii for detailed descriptions of the rating scales
Research-Based Web Design & Usability Guidelines
7:9 Use Appropriate Menu Types
67
Relative Importance:
Guideline: Use ’sequential’ menus for simple forward-moving tasks, and use ’simultaneous’ menus for tasks that would otherwise require numerous uses of the Back button.
Comments: Most Web sites use familiar ’sequential’ menus that require items to be selected from a series of menus in some predetermined order. After each selection is made, another menu opens. The final choice is constrained by the sum total of all previous choices.
Simultaneous menus display choices from multiple levels in the menu hierarchy, providing users with the ability to make choices from the menu in any order. Simultaneous menus are often presented in frames, and are best employed in situations where users would have to make extensive use of the Back button if presented with a sequential menu.
Sources: Card, Moran and Newell, 1980a; Hochheiser and Shneiderman, 2000.
Example:
Strength of Evidence:
Navigation
This is an example of a ‘sequential’ menu. In this case, mousing-over ‘Deputates’ invokes the circled sub-menu.
This is a good example of when to use ‘simultaneous’ menus. The user can repetitively manipulate the many variables shown in the left panel and view the results on the map in the right panel without having to use the Back button.
Research-Based Web Design & Usability Guidelines
7:10 Use Site Maps
68
Relative Importance:
Guideline: Use site maps for Web sites that have many pages.
Comments: Site maps provide an overview of the Web site. They may display the hierarchy of the Web site, may be designed to resemble a traditional table of contents, or may be a simple index.
Some studies suggest that site maps do not necessarily improve users’ mental representations of a Web site. Also, one study reported that if a site map does not reflect users’ (or the domain’s) conceptual structure, then the utility of the map is lessened.
Sources: Ashworth and Hamilton, 1997; Billingsley, 1982; Detweiler and Omanson, 1996; Dias and Sousa, 1997; Farkas and Farkas, 2000; Farris, Jones and Elgin, 2001; Kandogan and Shneiderman, 1997; Kim and Hirtle, 1995; McDonald and Stevenson, 1998; McEneaney, 2001; Nielsen, 1996a; Nielsen, 1997a; Nielsen, 1999b; Nielsen, 1999c; Nielsen, 1999d; Stanton, Taylor and Tweedie, 1992; Tullis, 2001; Utting and Yankelovich, 1989.
Example:
Strength of Evidence:
Navigation
The use of headers, subcategories, and alphabetization make this site map easy to scan.
This site map effectively presents the site’s information hierarchy.
Research-Based Web Design & Usability Guidelines
7:11 Use ‘Glosses’ to Assist Navigation
69
Guideline: Provide ’glosses’ to help users select correct links.
Comments: ’Glosses’ are short phrases of information that popup when a user places his or her mouse pointer close to a link. It provides a preview to information behind a link. Users prefer the preview information to be located close to the link, but not placed such that it disturbs the primary text. However, designers should not rely on the ’gloss’ to compensate for poorly labeled links.
Sources: Evans, 1998; Farkas and Farkas, 2000; Zellweger, Regli and Mackinlay, 2000.
Example:
Relative Importance:
Navigation
Strength of Evidence:
When a user places his or her mouse pointer over one of these links (‘News’, ‘Information’, etc.), a ’gloss’ appears to the right that provides information about the content contained under that particular link.
When a user mouses-over the ‘Office of Trust Records (OTR)’ link, the circled text appears.
See page xxii for detailed descriptions of the rating scales
Research-Based Web Design & Usability Guidelines
7:12 Breadcrumb Navigation
70
Relative Importance:
Guideline: Do not expect users to use breadcrumbs effectively.
Comments: One study reported no difference in task completion times and total pages visited between groups that had breadcrumbs and those that did not. Participants could have used breadcrumbs thirty-two percent of the time, but only did so six percent of the time. It is probably not worth the effort to include breadcrumbs unless you can show that your Web site’s users use them frequently, either to navigate the site, or to understand the site’s hierarchy.
One study found that test participants who received instruction on the use of breadcrumbs completed tasks much faster than those who did not. This time savings could result in increased productivity for users that search Web sites on a daily basis.
Sources: Rogers and Chaparro, 2003; Hull, 2004.
Example:
Strength of Evidence:
Navigation
Breadcrumbs, when used, allow users to quickly navigate your site.
See page xxii for detailed descriptions of the rating scales
Research-Based Web Design & Usability Guidelines
