Navigation is one of the most important parts of any application or web site. An effective navigation system seamlessly integrates these two features:

1. Providing the actions for moving between various panels.
2. Providing the context of the current panel (where am I relative to other panels?).

For this article I took a look at numerous web sites that have the main purpose of providing information. Each of these web sites uses a navigation banner across the top of the panel. (Note that the screen shots have all been scaled down because these web sites assume a large minimum width, and in many cases I wanted to show the entire horizontal navigation area.)

PRO SPORTS WEB SITES

Figure 1 is a screen shot of the navigation area for the National Basketball Association® web site, nba.com®.

The first two rows of the home page on nba.com constitute the default navigation area. The next section (with a height larger than the navigation) is advertising, followed by the default home page. At first I thought the title of this area was Scores & Schedules, but as it turns out, this is simply a link to that panel. Apparently visitors to this site often want to go to Scores and Schedules and the option on the second row of navigation isn’t prominent enough for them to find it, so the additional link is provided.

It seems obvious that the advertising is the most important part of this design, because it is difficult to find or to interpret the navigation area. The Teams option in the upper left looks like it might be the default selection because its background is grey, but that’s just part of a drop-down menu where the teams are listed. There is no indication in the navigation area what the current selection is.

Figure 2 is a screen shot of nba.com after TICKETS is selected from the top row navigation.

Notice in that not only is there no indication in the navigation area that TICKETS is selected (one must look below for the title of the current panel), but now the area has been rearranged by moving the advertising above the two navigation rows. It’s nice to have the navigation and the title of the current panel together now (so the advertising can more easily be ignored), but depending on which panel is selected, the advertisement moves back and forth. Ugh. Not nice. Another annoyance is the fact that with some of the selections, a completely new navigation area is displayed (for example WNBA), making it difficult to figure out how to get back to the previous panel. Not nice at all.

Figure 3 shows a screen shot of the default home page from the web site of the National Football Association®, nfl.com®.

The nfl.com web site has two rows of options at the top. The first is the team logos for each of the teams; selecting any of them invokes the team web site in a new window or tab. Below the search control is a row of navigation options. Figure 4 is a screen shot of the panel after SCORES has been clicked.

Like nba.com, nfl.com does not give any indication in the navigation area about what has been selected, rather, the title SCORES is displayed below. For some of the selections an advertisement banner appears between the navigation area and the panel below, but at least the navigation doesn’t jump around. However, this web site does have the same problem of replacing the entire navigation area for certain selections (for example, VIDEO), but it does provide a quick link at the upper left to return to the main site (see Figure 5). This web site is a little better than the first.

NEWSPAPER WEB SITES

Newspapers have been around for a long time and most are doing a pretty good job of moving their offerings to the internet, but some have done a better job than others. Figure 6 is the top portion of a screen shot from the New York Times® web site, nytimes.com®.

The top navigation area for nytimes.com is quite sparse. It has only five options, including the obviously internet-specific VIDEO, but there isn’t much with regard to getting to a particular section that might commonly be found in a newspaper. These are actually listed in a second navigation area below and at the left side, as shown in the screen shot in Figure 7.

In the left navigation area one can select to go immediately to a specified section of the newspaper web site, but unfortunately, everything below the top banner changes. The left navigation is now gone, replaced by the main panel for the selected section with the section names now listed horizontally across the top underneath the title for the current section (see Figure 8), instead of along the left side where they were at first.

Figure 8 shows the top portion of a screen shot of the panel that was displayed when I clicked the summary of an article on the HOME PAGE of nytimes.com. I didn’t know what section it was in until the display updated with the Technology title. Because the entire page and left navigation area changed, it was a little disconcerting when I wanted to return to the previous panel. Notice, though, that the bottom navigation row highlights the Technology tab, giving context for the current display.

But what is the new heading Business Day all about? Business and Technology are listed separately in the navigation areas (Figure 7 at left, Figure 8 at bottom). Clicking Business Day redraws the panel with the same display as clicking Business in the left navigation area. It turns out that Technology is actually one of many sub-categories under Business, but they chose to give it it’s own link on the main navigation. Interesting.

Figure 9 is a screen shot of the top portion of the web site of The Washington Post®, washingtonpost.com®.

This newspaper’s web site shows all of the sections across the top at all times for selecting and also display of the current selection for all panels other than the home page. This is much better.

Figure 10 is the top portion of a screen shot from washingtonpost.com after the National section is selected. Notice that the National navigation option is highlighted, in addition to the title area changing to give prominence to the NATIONAL section title on the panel. This not only makes it clear what is being displayed, but also how to get here. (I would prefer not to have The Washington Post title so diminished on the new panel, however.)

The web site for the Los Angeles Times®, latimes.com®, also does a great job of showing the current location with the navigation display, as shown in Figure 11.

Notice that the Sports section is highlighted using a tabbed display and the Ducks/Kings sub-section is also highlighted using another tabbed display. In general, I’m not a big fan of nested tabs, but this one uses different colors, and it is pretty clear what panel is being displayed and how to move quickly to other sections or sub-sections. I also like how the Los Angeles Times title stays prominent while the SPORTS section title is just added to the end. This is much better than either of the previous two examples where the newspaper title changes both location and size depending on the current panel.

OTHER NEWS WEB SITES

I also looked at several other news organization web sites and found some similar problems to those described above. The web site for USA Today® for example, usatoday.com®, does not show the current selection in the navigation area and usually changes the layout when moving into new sections. See Figures 12, 13, 14, and 15.

Notice that in Figures 13 and 14 the navigation buttons are different sizes and shapes than the display on the home page (Figure 12). In Figure 15 notice how the second row of the display actually changes to resemble a breadcrumb trail for the Sports » NBA title, but only for these two levels. There are way too many variations and inconsistencies on this web site.

Figure 16 is the top portion of a screen shot from the Fox News® web site foxnews.com®.

The Fox News web site displays three levels of tabs. Wow. The top level selections actually redirect the display to a different URL for each selection, as shown in the example in Figure 17 when Fox Business is clicked.

Each new URL (invoked from the top level tabs) looks nothing like any of the others, with the exception of the tabs themselves, which all act the same for each web site. That, at least, was definitely the right design, making it easy to return to previous URLs. Unfortunately, clicking on selections in the second level of tabs on the Fox News site, for example, (Figure 16) has other inconsistencies. Most have similar displays, but clicking Video changes the display and navigation layout completely. And clicking On Air expands a section below the tabs to show a list of hosts, but does not change the current selection or the remainder of the display, so that the list actually appears in between the second- and third-level tabs, as shown in Figure 18.

Putting the On Air display in between the tabs is a very strange thing to do, especially since the third-level tabs are the sub-sections for the currently selected item on the second-level tabs. Notice how the On Air display looks like it’s a sub-section for the SciTech selection, when in fact it has nothing to do with what is currently selected at the second level. I can’t imagine why the designers thought this would be a good place to inject the On Air display. It would have been much better to expand upward either inserting between the banner and the navigation area, or overlaying/replacing part of the top banner. The current implementation is not awesome.

GREAT NAVIGATION DISPLAY

By far, my favorite navigation display of all those I checked out for this article (including others I didn’t mention), is the implementation of the web site for CNN®, cnn.com®. Figures 19, 20, and 21 show the consistency between the various selections of the top-level tabs.

Notice that the section title is appended to the CNN logo at the top and that the selected section is also highlighted in the navigation bar. The display and layout do not change for the various sections. The only exceptions are the options Money and Sports which each invoke a new URL, but note that they are displayed differently with the ending arrow to indicate the variation from the other options. I really like that no matter where I am on this site, I always know right where to look to find the section I’m in and the section I wish to go to. This is very user-friendly.

Figure 22 is a screen shot of the top portion of the CNN Money web site, money.cnn.com® which is invoked when Money is selected from the main site.

Figure 22 uses a layout similar to the main CNN site, but different colors help users be aware of the differences. The consistency and predictability in the implementation of the CNN web sites are simply fantastic.

KEY DESIGN POINTS

1. If tabs are used to navigate to a new panel, then those same tabs should display the current location.
2. Bouncing navigation options between left and top areas, or above and below advertisements makes it difficult for your users to keep track of where to find the navigation functionality.
3. Always use consistent navigation techniques throughout all levels of your display; don’t require your users to figure out a new layout for a different panel!