Web Site Navigation Models

List of contents

See above. Useful where there are several relevant items accessible in or from the current page.

Breadcrumb trail

The breadcrumb trail is the familiar navigation device that:

• Shows you where you in are in a hierarchy, and
• Lets you click back to any point above where you are now

Breadcrumb trails are great in situations where:

• You've got a particularly deep hierarchy, say four levels or more
• The possible flow is such that a typical user might want or need to get back to a specific previous place

Horizontal top bar

Horizontal navigation bars are very neat. Because top-down flow is slightly superior to left-right flow, it's natural for high-level navigation to sit above content.

The obvious problem is when a top bar gets wider than the page. It's normal for web pages to extend vertically, and users are used to scrolling vertically. Horizontal scrollling is to be avoided at all costs! Remember, if you use text-based navigation, and it's resizable (both good practice!), your navigation could get bigger or smaller depending on the user's browser settings.

Horizontal bars are therefore appropriate where the number of items is known in advance, there are not going to be any more items added, and there is enough width to accommodate all items safely in the target screen resolution (generally 800px).

Example horizontal top nav bars:

Tabs

Tabs are a type of horizontal top navigation bar. They have some extra advantages over a line of links:

• They serve to show the active section/selection very clearly
• They naturally have a working visual hierarchy, with a real-world connection that makes them extremely clear. A tab is normally attached to (part of) a folder or sheet in a binder, and physically labels everything in the folder, or on the sheet.
• They are unambiguously mutually-exclusive. It's physically impossible to have two tabs selected (because they would both have to be at the front).

2-level top (bar or tabs)

2-level tabs have the same benefits and limitations as single top bar.

Example of 2-level tabbed navigation from Apple.com.

Some nice 2-level tabs from a UK mortgage service site.

Top and side bars

Very common. The top bar is used for the site-level navigation/tools and often first-level navigation, because these are more fixed.

Nav bar with revealed drop-downs

This has become quite a common navigation mechanism over the past few years, although it is complicated and has usability challenges.

The principle is that you click on a button and a further multiple-item menu is revealed. Sometimes, clicking or hovering over a menu item can reveal a further sub-menu.

The strengths of this mechanism (like the drop-down box), is that it can facilitate selection of a large number of items, while taking up relatively little space in its default state.

This device also has a number of problems, and is frequently less elegant a solution than it seems:

• The user doesn't know what the button enables without clicking it (i.e. doesn't "let me know clearly where I can go from here"). Unless the user is already familiar with the contents of each menu, this device often fails. (Generally, drop-down menus are appropriate when either: their contents are totally obvious, or the user is familar enough to find what they need and are prepared to dig for it).
• There is no dominant behaviour pattern, which can be disconcerting or confusing. e.g. Does the menu disappear when the mouse moves outside a menu, or when the user clicks outside a menu?
  • If it's cancelled on mouseOut, this can be very fiddly (the example below is from my hosting provider, and it can take me several tries to select the desired item from the multi-menu!).
  • If it's cancelled on click-away, the user can be stressed by not knowing what they're clicking on.
• As the revealed drop-down can require accurate motor skills, it can be difficult for some people to use effectively. If there is available space, very often an alternative mechanism (like an explicit index of links) is a lot quicker.

Multiple-level tree nav

A complex navigation device that lets users browse multiple-level hierarchies.

This mechanism is fairly conventional in desktop applications, such as file browsers, and sometimes applied to web site navigation, using either client-side DHTML or server-side scripting.

Benefits

It is relatively familar and intuitive (provided it is presented in a conventional format).

It can provide relatively simple access to a complex structure.

Drawbacks/risks

Client-side scripting solution is very complex, can be hard to maintain, and is platform-dependent.

Server-side solution is easier, but requires multiple page-loads, which can reduce usefulness.

It's tempting to use non-standard icons, which reduces usability unless the product is a web application that users will use frequently.

 

Paging

Paging is a mechanic that will be familiar to all web users. This is where you get a piece of content that spans several pages (typically long articles, long indexes, forums, or search results). You are given (fairly) standard tools that let you navigate back, forwards, or jump directly to specific pages.

Paging benefits from being highly recognisable and conventional. It can throw up interesting questions and variations, depending on the context.

One problem can be: which pages do you show in the direct numbered links? When there are more results pages than the default number of direct links you show, where should the current page sit in that sequence: in the middle? at the end? at the beginning?

The answer lies in: when might the user want to jump ahead in the list? In the case of search engine results, users will start at page one (most likely to find success there), and will work forward through pages. There is no need to enable them to jump forward more than one step, but they may wish to jump back more than one, so in this case we should show the previous results already seen.

However, when the results are ordered or indexed, say by initial letter, it is imaginable that a user may want to leap ahead. Take a case where there are 25 pages presented, you get page one first, and the results are alphabetised. If you are looking for a Plumber, you want to jump straight to 'P' in the index, so it would be helpful to have the chance of guessing and clicking around page 14/20.