After 10 years of web site architecture and design, conventions exist
to solve nearly every navigation problem.
This page provides a toolkit of common IA and navigation conventions.
List of contents
See above. Useful where there are
several relevant items accessible in or from the current page.
The breadcrumb trail is the familiar
navigation device that:
- Shows you where you in are in a
- Lets you click back to any point
above where you are now
Breadcrumb trails are great in
- 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
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
Example horizontal top nav bars:
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.
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
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
- 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
It is relatively familar and
intuitive (provided it is presented in a conventional format).
It can provide relatively simple
access to a complex structure.
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 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 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.