1. Let me know where I am at all times

'Signposting' is part of navigation (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 engine result).

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 models)

2. Clearly differentiate hyperlinks from content

When navigation is apart from content, differentiate through complete 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 white/grey background.

3. Let me know clearly where I can go from here

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 been.

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 somewhere

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 do

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 it.

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 mouse 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 mouse wheel works.

e.g. Navigation problems: "Grope" Navigation

e.g. Navigation problems: A List Apart