Navigation - Page 11

The Web is a navigational system: The basic user interaction is to click on hypertext links in order to move around a huge information space with hundreds of millions of pages. Because the space is so vast, navigation is difficult, and it becomes necessary to provide users with navigational support beyond the simple "go-to" hyperlinks.

Navigation interfaces need to help users answer the three fundamental questions of navigation:

• Where am I?
• Where have I been?
• Where can I go?

Where Am I?

The most important navigation question is probably "Where am I?" because users will never stand a chance of understanding the site's structure if they don't understand where they are. If you don't know where you are, then you also don't have the ability to interpret the meaning of the link you just followed.

The user's current location needs to be shown at two different levels:

• Relative to the Web as a whole
• Relative to the site's structure

You need to identify your site on all of your pages because they form a subset of the Web as a whole. All web pages are much the same from the user's perspective; they share interaction techniques, they are downloaded (slowly) from the Internet, and they have relatively similar layouts. These similarities are in fact good because they allow users a measure of transfer of skill from one site to the next. My usability studies show that users complain bitterly when a site tries to use navigation interfaces that are drastically different from the ones they have come to expect from the majority of other sites.

The Web as a whole dominates the user experience because users tend to view no more than four to five pages at a time at any individual site. The potential downside is that users will not know what site they are on unless you tell them. Thus, navigation rule number one is to include your logo (or other site identifier) on every page. The logo should have consistent placement (preferably the upper-left corner if the page is in a language that reads left to right) and should be made into a hypertext link to the home page so that users can get to your home page from any other page. Location relative to the site's structure is usually given by showing parts of the site structure and highlighting the area where the current page is located. It is also important to have a clear main headline for the page that states its name or main content in a glance. Finally, the page title in the HTML header definition should be used to generate a meaningful name for each individual page so that users can locate it easily in their bookmark list if they bookmark the page.

Where Have I Been?

Because standard web technology is state-less, it may be hard for page designs to directly address the "Where have I been" question, because the site doesn't know without resorting to cookies or other user-tracking measures. Luckily, some of the few useful navigation mechanisms in current web browsers provide some assistance with this question. The Back button takes the user directly to the previous page, the history list includes a list of recently visited pages, and hypertext links are shown in a different color if they point to previously visited pages.

I recommend not changing the standard link colors because users will only understand the meaning of the link colors if they are kept the same. I tested many sites with non-standard link colors where the users ended up not understanding what links they had already followed.

Knowing what links lead to previously visited pages is useful for two reasons: It helps users learn the structure of the site, and it prevents them from wasting time going to the same page many times.

Where Can I Go?

This question is answered by the visible navigation options and any other links on the page. In addition, assuming that the user has acquired some understanding of the site's structure, the user may have a general idea of other, currently invisible, places to go. Because it is impossible to show all possible destinations on all pages, it is obvious that a good site structure is a major benefit in helping users answer the "Where can I go" question. There are three kinds of hypertext links that can be used on a page:

• Embedded links are the traditional underlined text that indicates that "more stuff" is available about some topic that is discussed in the body text.

• Structural links are links that systematically point to other levels of the site structure as well as to siblings or children in a hierarchy. It is important to have the same structural links on all pages so that the user will understand what structural navigation options to expect.

  Of course, the exact destinations pointed to by the structural links will be different from page to page. Therefore, it is often better to use link anchors that name the specific destinations in addition to giving the generic structural relationship between the current page and the destination page. For example, it is better to have a link that reads "Up to Widget Product Family" than a link that simply reads "One Level Up."

• Associative links are used to give users "see also" hints about pages that may be of interest to them because they are similar or related to the current page.

  It is usually best to represent links as underlined text, keeping the standard link colors of blue for links to unvisited pages and purple for links to pages the user has seen before. Everybody learns the meaning of this convention the first day they are on the Web, and there is simply no doubt that underlined text means "click here." Because underlining now has a strong perceived clickability affordance, it is best not to underline any text that cannot be clicked.

  Usability problems are also associated with links that have any form other than simple, underlined text. Pull-down menus and graphics should be used for navigation only with great care because they don't behave in the standard manner of underlined text. In particular, they don't turn purple if they link to places the user has already seen.

  Still More Metaphors - Page 10
  Designing Web Usability
  Navigation: Examples - Page 12