Blooper 16: Numerous Navigation Schemes

 <  Day Day Up  >  

Blooper 16: Numerous Navigation Schemes

Another very common high-level navigation blooper is for a website to have multiple competing navigation schemes. Multiple navigation schemes can delay, distract, and divert site visitors : "So many different ways to get around! How do I choose one? Where do I start?" They compete with each other for users' attention.

Competing Navigation Schemes with Duplication

The jury duty website of the Superior Court of San Francisco is a subsite of San Francisco's city government website. When citizens of San Francisco are notified to report for jury duty, they are advised to visit the site for further information. The jury duty home page displays three navigation bars (Figure 3.4). Two are the same except in their position and orientation-needless duplication.

click to expand
Figure 3.4: (Feb. 2002)-Three navigation bars- two are duplicates, and one is for the parent website but looks like text-only links for this site.

The third navigation bar-the blue one at the bottom of the page-is for the city government website. It is not well identified as being for the parent site: It looks like text-only links for this Superior Court site, especially since there are no other text-only links on this page. In fact, many people arrive here directly, without coming through the main city site, because they use the URL given in their jury duty notice. Therefore, many users of this Superior Court site probably do not understand what the blue navigation bar is.

Thus visitors to this site-especially newcomers-are faced with three navigation bars to choose from, two of which are duplicates and one of which is mysterious . Which one should they use?

Competing Navigation without Duplication

Competing navigation schemes need not contain obvious duplication to cause confusion and distraction. This can be seen at the home page of Rational, a software company (Figure 3.5). The page has at least five competing navigation schemes: a left navigation column, a top navigation bar (or perhaps two), two top left menus , and a bottom menu. How is a user to choose?

click to expand
Figure 3.5: (Feb. 2002)-Multiple competing navigation schemes- left navigation bar, two top navigation bars, top left menus, and bottom menu.

Furthermore, the bottom menu is labeled "Within the site...." Does that mean the "Select a product" and "Select a country" menus take us to other sites?

Perhaps the clearest example of how multiple competing navigation schemes can confuse Web users is provided by , an online movie guide. This site has so many different navigation schemes that it is difficult to even count them all, much less know which one to use.

While looking at the information for a particular movie, users are faced with three navigation bars (Figure 3.6[A]). Two of the navigation bars appear as rows of tabs, although the tabs are depicted differently. Clicking on one of the top tabs-such as Short Films- replaces the bottom set of tab panels with a single tab panel (Figure 3.6[B]).

click to expand
Figure 3.6: (Jan. 2002)- A- Three navigation bars, two of them shown as tabs- tabs within tabs. B- Clicking on top tabs yields another pseudo-tab.

At this site, even though I was looking for information about a specific movie, I found myself clicking aimlessly for a while, trying to decide which navigation scheme was the right one to find the movie. I soon gave up and used the site's Search facility. Thank goodness for that Search box on every page.

Avoiding the Blooper

Unless your goal is for visitors to your site to wander aimlessly, which is the goal for some sites, you should minimize the number of navigation schemes the site presents . It is okay to have multiple navigation schemes, such as navigation bars both down the left side and across the top of the page, but each scheme should have a clear, unique purpose.

For example, the navigation bar on the left lists the content areas of the site, and the one across the top lists standard company or organization topics such as About Us, FAQ, Contact Us, and Privacy Policy. Or vice versa. A very succinct statement of this guideline is in the book Homepage Usability (Nielsen and Tahir 2001). They say,

It's critical that users be able to find the appropriate navigation area effortlessly, differentiate between the choices, and have a good sense of what lies beneath the links ...

Locate the primary navigation area in a highly noticeable place ...

Group items in the navigation area so that similar items are next to each other ...

Don't provide multiple navigation areas for the same type of links. ... (p. 19)

Classic examples of following these guideline are and . These home pages have only one set of main content links in the middle: down both sides for Monterey (Figure 3.7[A]) and down the left side for Yale (Figure 3.7[B]). At both sites, standard site logistical links are across the bottom.

click to expand
Figure 3.7: A- (Sept 2002); B- (Sept 2002)-Single main navigation scheme separated from site logistics.

Exception: Text-Only Links

The exception to the rule against multiple navigation schemes containing the same links is text-only links. If a website provides the standard-and recommended-text-only links to its important sections, it will have at least two navigation schemes. This is okay, because Web users are familiar with the convention, so the text-only navigation bar doesn't really compete with the main one.

What About Very Large Sites?

One could argue that the and sites don't have much content-at least not in comparison to the Web's largest sites-and so don't need many links and multiple ways to navigate. Okay, let's look at how two very large websites avoid multiple competing navigation schemes. Each solves the problem differently. (Figure 3.8) avoids a large number of links and multiple navigation bars by presenting only a few very high level content categories on its home page. Organizing the site's content in this way required careful costly information architecture but paid off well by simplifying the home page.

click to expand
Figure 3.8: (Sept. 2002)-A lot of content behind a simple navigation scheme.

In contrast, United's home page (Figure 3.9) presents three task-oriented tools and many very specific links. Despite all the links, there aren't several navigation schemes competing for users' attention; there is only one. Their home page may look cluttered, but functionally it's very simple.

click to expand
Figure 3.9: (Sept. 2002)-Many links, all organized in a single navigation scheme.

 <  Day Day Up  >  

Web Bloopers. 60 Common Web Design Mistakes and How to Avoid Them
Web Bloopers: 60 Common Web Design Mistakes, and How to Avoid Them (Interactive Technologies)
ISBN: 1558608400
EAN: 2147483647
Year: 2002
Pages: 128
Authors: Jeff Johnson © 2008-2017.
If you may any questions please contact us: