Pattern 25: Navigation bar **
AKA:

Back to Diagram 1 - Getting started Back to Diagram 2 - Useability Back to Diagram 3 - Adding detail Back to Diagram 4 - Workflow/security

View sensitizing image - tbd

You have created a SITE MAP (12) and want to make it accessible to the user.

How can the number of clicks the user needs to make to get from one section (or major section) of the site to another be reduced? How can we ensure that the user knows her location relative to the site and relative to the web as a whole?

Therefore

As in Figure 25.1, use colour to indicate current location and where the user has been already. Try to FOLLOW STANDARDS (36) when doing this.
Avoid using pull down menus for navigation. The user has to perform an extra action to see what the options are, and the links don’t change colour when visited in these lists. Provide a bar on the home page – and possibly on other pages – that allows the user to jump to any section of the site or at least the top three levels. Place it above the fold. Consider the use of the tab metaphor if there a less than about 7 categories.

Next include BREADCRUMBS (23) and make sure that the are NO FRAMES ON PUBLIC SITES (27). Embed the navigation bar in a THREE-REGION LAYOUT (26). For large suites consider using STRUCTURED MENUS (19).

Contributors and sources
Paul Dyson, Dave Sissons, Krug (2000), Nielsen (2000), Veen (2001)

Discussion - forces - known uses

A navigation bar lists either the top level structure of the site or the use cases it offers. Many sites list the high level services down the left hand side and the use cases across the top.

Highlight the current location in the navigation bar by changing its colour, emboldening it or using an image or character that looks clearly like a pointer. Preferably do at least two of these things.

Reinforce the idea that your navigation bars are to do with navigation by using a unique colour background for navigation throughout the site.

Items that should go on the bar for all sites include:

For workflow or sales sites you should include:

Other possibilities include:

Structural links, which point to other parts of the site, should be displayed consistently on each page to reinforce user understanding of the navigation scheme. However, this takes up a lot of space and sometimes a compromise solution is needed. The service navigation bar, usually displayed left, shows the breadth of the site but occupies a lot of valuable screen space. Therefore, consider placing it only on the home page – only a click away via the site logo, which is on every page.

Index card tabs are a commonly-used metaphor on navigation bars, with amazon sites being the best known example as shown in the sensitizing image of this pattern. Notice how colour is used to connect the current navigation options to current tab. This works a lot better when there a only a few options. As amazon’s product range has been extended the usability of the sites seems to have degraded slightly. Also, at a glance the All Products combo box on the German site doesn’t seem to do anything but duplicate the tabs – or does it restrict the search somehow? Here is something that could well confuse users – and confusing people is bad. Amazon supplement this navigation with a vertical bar on the left that contains deeper navigation options. Notice how the different placement of the combo box makes its function much clearer.

Browsers change the link colours for sites that have already been visited. This is helpful information and should not be overridden or hidden in any way. Nielsen’s studies indicated that the standard link colours should be retained to maximize usability. If weFOLLOW STANDARDS (36) then anything clickable will be underlined.

Figure 25.1 Show users clearly their current location and where they’ve been already. [Refer to book]

Browse the language What is Wu? Look at an example pattern sequence Structure of the patterns
Comment on Wu Contributors Return to TriReme home page Links to related sites