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.
Provide Navigational Options
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.
Differentiate and Group Navigation Elements
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.
Use a Clickable ‘List of Contents’ on Long Pages
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.
Provide Feedback on Users’ Location
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.
Place Primary Navigation Menus in the Left Panel
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).
Use Descriptive Tab Labels
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.
Present Tabs Effectively
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.
Keep Navigation-Only Pages Short
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.
Use Appropriate Menu Types
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.
Use Site Maps
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.
Use ‘Glosses’ to Assist Navigation
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.
Breadcrumb Navigation
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.