Before considering navigation options, it is highly recommended that you first outline you web site on paper. What are the major topic headings? What are the sub-units? How many layers or levels of content are there? With such a chart in hand, browse the samples below to select the most appropriate navigation technique. Page-turning navigation is appropriate if your design plan includes sequential, page-after-page information. Tab-stop navigation is more appropriate if your design includes hierarchical information with multiple sub-levels.

To get a "feel" for effective navigation techniques, it is useful to study the strategies employed by others. Some strategies are effective, while others are confusing. After designing your web site, it is a good idea to conduct a field test or "usability test" with sample users. Observing, taping, or interviewing these users can reveal potential problems with your selected navigation strategy.

NOTE: Click on any image below to enlarge the thumbnail.
Menu-tree navigation represents a technique whereby information is structured under major topic headings and sub-headings. Users navigate down a particular path/hierarchy and back out of that path using visible menus. The menu and path remains visible and is evident at any point in the tree structure. In the example screen shot at right (Williams-Sonoma), the path selected is then highlighted across a top-level menu bar, with the options for various sub-levels available for selection. Click on the images for an enlarged view.

Notice how color and fading is used to highlight activated from deactivated menu items.

 

 

Tab-stop navigation represents a technique whereby information is again structured under major headings and sub-headings, but the user accesses that information using a file-folder tab-stop metaphor. The major tab headings are always visible. Click on the sample at right for an enlarged view.

Index navigation represents a technique whereby information is structured within an all-inclusive table of contents. All potential selections are visible. Sites with vast information contents employ this method so users will not be forced to "dig" through multiple levels of menus to find a specific piece of information (search engines provide a related option). As a result, the interface may be more usable, but tends to look cluttered or "busy" from a visualization perspective. It is possible to design by one of the prior navigation techniques (e.g, menu-tree), then provide an index for those users who prefer this method of information access. Click on the sample at right (Staples) for an enlarged view.

Note in the second example, craigslist, how the navigation might be easier if the user could search with a wider scope via region or state.

 craigslist

Pull-Down Menu navigation employs javascripting to direct users to different parts of a web site. The old Volkswagen samples at right are particularly confusing. On the main menu screen, the user can choose pull-down selections from four main areas (i.e., cars, culture, commerce, and about us). Once a sub-topic is selected from a pull-down menu, however, the user is not given any indication of the sub-topic they have selected (i.e., the upper menu bar does not indicate the selection, nor are titles provided). Further, more sub-sub-topic menu options appear, creating a potentially confusing situation.

Note that pull-down menus are used generally quicklinks or as an aid to narrow searches.
 
The navigation schemes above are text-based. Iconic navigation is a technique where the user can select a visual representation of specific items they wish to link to. Sometimes the icon is accompanied with a text label, sometimes it is not. For clarity, both text and iconic representations are recommended. When the main visual is selected, the subsequent, underlying page should also contain the icon to signal the learner as to the selected item.

Notice in the first Land Rover example, how the visual item is selected from top. On the second screen, the selected icon is pulled over to far left and highlighted in red. Also, a text title cue is provided as to location (e.g., "Gear").

 

 
Page Turning navigation is useful for creating tutorials or content structured according to units or chapters. It may be difficult to create an entire site with this navigation approach, but sections of a site are often accessed in such a manner.

Notice how the Science of Baseball site uses an outfield wall as a metaphor for their navigation bar with "next" and "back" buttons. Similarly, the Structures Around the World site uses a steel superstructure as a metaphor for their navigation bar with "next" and "back" buttons.

Speaking of Metaphors, another common navigation approach is to structure content according to some familiar or everyday metaphor (e.g., virtual desk, map, or farm scene) and provide access to that information with related treatments (e.g., clicking to "open" a desk drawer or to enter a particular map or scene for specific content). For example, metaphors enable users to access geographic-related information via virtual maps, or art-related information in a virtual museum. Browse National Geographic's Xpeditions site to see how content is arranged around the metaphor of an exhibit hall.

 
Combining navigation techniques may be accomplished with many of the above forms (e.g., hybrid form of menu-tree navigation and tab-stop navigation). In the first screen shot at right, Peets Coffee presents a main menu. When a main menu option is selected, a second level of menu options is presented, some of which have a third level of information accessed by tab stops. Note, the extraneous links on the side menu bars in addition to the main navigation system may be confusing.