Navigation encompasses the range of ways a user may move around a web
site, and the tools designers offer to help them.
Good navigation needs to complement the information architecture, and
be totally clear.
1. Let me know where I am at all times
'Signposting' is part of
(how can you navigate somewhere if you don't know where you're starting
from). Clear signposting is always important, to let people know where
in the site they are, down to the page level (particularly when you
consider that someone could be entering via an unusual link or search
Where navigation includes "where you
are now", it must be clearly indicated. The WDFS side navigation
differentiates between "here" nav and "there" nav by showing "here" in
black text on a grey background with no hyperlink (even the presence of
a hyperlink suggests it's "there").
Note: Tabs naturally show "here" from
"there". (See Navigation
2. Clearly differentiate hyperlinks
When navigation is apart from
content, differentiate through
physically separation, grouping and/or style from content.
When links are within content, you
have to use style to differentiate. Conventional blue, underlined style
with distinct 'hover', 'active' and 'visited' colours work really well.
It has become generally acceptable to exclude the underline from links,
although I strongly recommend keeping text hyperlinks in blue when on a
3. Let me know clearly where I can go
It must be obvious at a glance where
I can go from here. That means that hyperlinks must be clearly
distinguishable from content (see previous principle).
4. Let me see where I've already been
Being able to see pages you've
already visited helps you to filter where you might want go now. It
also helps you understand where you are in relation to where you've
HTML differentiates between unvisited
and visited links by default. The standard colours work very well
because they are conventional and easily recognised. If the designer
must change the default link colour settings, they *must* provide
alternatives that clearly differentiate visited and unvisited links. If
tempted to change link colours because of your content's background
colour, think whether the background colour is really that important.
Would white be a better solution?
5. Make it obvious what to do to get
Once a user knows where they can go,
they need to know how to get there. It should be clear to tell what is
navigation from what isn't, without any thought at all.
Note: If you have to label your
navigation "Navigation", you've failed to make navigation clear enough.
6. Indicate what clicking a link will
The target of a link must be obvious.
i.e. The link must tell me either:
- what I'll get
- where I'll go
- or what will happen, when I click
The way to do this is to make
the content of the link say either:
- what I'll get
- where I'll go
- or what will happen, when clicked
Where should you put navigation?
Depends on the type of navigation.
The golden rules are:
- put the most useful navigation
where it's closest to hand
- put navigation where the user is
likely to look for it
Most people are right-handed, and the
commonly-used vertical scrollbar sits on the right side of the screen.
This means that most of us tend to leave the
pointer over on the right-hand side of the screen when
'idle'. So, when you've got vertically-oriented nav, putting it on the
right has its benefits.
(Lots of smart sites are using
right-hand navigation, including A
List Apart - see below.
Navigation within a screen
Main navigation tools for moving
around a screen are: the scrollbar, and internal hyperlinks. Resist
using frames or inline frames for content, because if that content
needs to scroll, the navigation tool won't be in the usual place.
Resist using CSS to mess around with
the window scroll bars! This is nearly always detrimental to usability.
Note, if your site is completely
Flash, don't make the movie totally full-screen, make it the width it
needs to be, and leave space in the holding HTML document, so that the
e.g. Navigation problems: "Grope"
'Grope' navigation is a useful term
coined by a colleague of mine, RJ Smith, to describe navigation that
doesn't display its target until you move the mouse pointer over a
This example, from beepmarketing.com
is typical, and exposes some of the typical problems that grope nav
The target is displayed at the far
left of the list when the user hovers over each button. This obviously
breaks the third
principle above, because it's not letting you know clearly
where you can go from here - it makes you dig.
Another difficulty this example
throws up is the icon problem: it's very hard to create effective
icons, and extremely hard to make icons that will work on a web site.
Of course, lots of computer GUIs use icons, and many of these are
highly iconic - you don't have to think about their meaning at all, you
just know that an open folder means 'open' or a red 'x' means 'delete'.
However, it's almost impossible to create a new icon that can be that
The online environment compounds the
problem: people are only likely to spend seconds or minutes using your
website, compared to weeks or months they'll spend using MS Word.
Another problem with this particular
example is: the label is not attached to the icon. When I hover over
the 'book' icon, 'downloads' appears somewhere else. It's not 100%
obvious that if I click now I'll get downloads.
This may also cause problems for
people with weak
skills: moving your eyes' focus can make your hand move as
It would be much more effective if
the labels appeared as part of, on top of, or right next to, the
associated icon. Of course, ideally the icons would be replaced by text
links, which will perform far better for new and intermediate users.
Only people who've spent an hour or more on this site will begin to use
the icons with any efficiency.
e.g. Navigation problems: A List Apart
A List Apart, is
a first-rate web production site, and a favourite of mine.
In this example, the same visual
style is used for three hyperlinks that point to three different levels
in the site hierarchy. The top sub-title "ALA Topics: Design" is
actually a two-part link:
- the first part goes to Topics/
- second part to Topics/Design (which
is also where we are now!)
A third link, the second sub-title,
"Exploring Footers" goes to Articles/Footers.
I've applied the purple tint to
indicate the links.
Problems with this navigation
- This page is not telling me
clearly where I am, and not telling me clearly where I can go. This
site appears only to have a two-level hierarchy (Up Front, Articles,
About ALA...), and it seems that I'm in Articles. This is not the case.
- The red hyperlinks are not clearly
- There's no visual clue (other than
colon) that the first link is two different links. The two elements in
fact represent parent and child areas of the site, but that's not
- The style used for navigating to
an article is the same as used for navigating to a different section of
the site. I'm not sure what I'm getting when I click. Am I getting an
article, or another bridge page?
- What's the difference between
articles and topics, and why aren't articles in topics?