Navigation
The task of navigational cues is to maintain the visitor's sense of orientation within a site. This means the presence of cues to the current location within the site, and clearly-marked paths to other locations. According to Sano: Failure to establish logical relationships between information usually translates into pages with too many unrelated choice confronting the user.Two common navigational aids are the navigational bar, or navbar, at the top of the page, and the left-hand margin. The navbar is becoming ubiquitous, and with good reason: it provides a compact device to go to second-level nodes. For example, this navbar from webreference.com, is only 600 bytes in size:
For a navbar to work effectively:
- Don't have the navbar link to another site! Guaranteed disorientation.
- Title each second-level page with the same words as on the navbar.
In Designing Site Navigation, Dmitry Kirsanov points out the distinction between topics and tools. Topics are things like People, Products, Support, and so on; tools are things like Search, Feedback, Shopping Cart. Few sites make the distinction, and I'm not sure it's terribly important.
The second high-level navigational aid is simply a column of links in the left-hand margin. Apart from improving the look of the page, this, if used effectively, provides a valuable second-level set of navigation links. These links only really work if the relationship between them and the navbar and other links on the page is clear. If the index is a seemingly-random collection of jumps to places with the site, rather than links that conform to the site structure, then the navigation model breaks down.
A third, relatively uncommon, high-level navigational aid is simply an indication of where each page, or set of pages, is in the hierarchy. The location bar: a) tells you where in the hierarchy you are; and b) let's you move back up the hierarchy as far as you like if you have jumped into this page from somewhere else.
Examples
- Webreference
- This article from the Webreference site illustrates the use of a
location bar, which looks like this:
home / web / articles / writing / style This is a nice-looking one, too. On this site, this site, the bar tends to jump around from page to page and change font style, which is disconcerting. In addition, the "web" item in the location bar links to the same location as the "contents" item in the navbar!
(This article, by the way, commits one of the seven hypertext sin: blue text. Text must only be blue if it's a link -- or an example of one, as I did above.)
- useit.com
- Jakob Neilson's site uses a similar location indicator:
useit.com 
Recommended Books User Interface Design and Usability
His hierarchy levels are more descriptive, which probably makes cognition easier. The yellow highlighting, though, makes the location bar too obvious.
- Yahoo
- Yahoo is a straight-forward tree. You proceed down the tree, at
each level guessing which category the item you are looking for is
in. Eventually, you find it, or try the search engine instead.
Yahoo has two features to improve this simple model: A location bar, which tells me where I am, and links that go down two levels, presumably to the most commonly-accessed nodes within the next level.
- Microsoft
- Microsoft's front page is a good example of why front pages
should not have a margin index. This index contains too many items,
and it has no apparent correlation with the main navigation bar. For
example, Products and Technical support are in the navigation bar, yet
are also in the second level of the index column. The effect is
to obscure to site structure and the navigation paths.
The Products page, on the other hand, uses the margin index very effectively. The title of the page is the same as on the navbar, and the margin index lists none third-level items. The page body contains links to the "front pages" for a few popular product groups, with their own news items and second-level index column. Curiously, though, the path to, say, the Windows NT page, completely bypasses the Overview page I got through the other path. For a while, I thought that there were two completely different Windows NT pages.
