Designing navigation

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.

Principles for good navigation design
A site must:

Let me know where I am at all times
Clearly differentiate hyperlinks from content
Let me know clearly where I can go from here
Let me see where I've already been
Make it obvious what to do to get somewhere
Indicate what clicking a link will do
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.

Content 101

The purpose of design is to facilitate communication. Choosing what to communicate is the first step.

It's risky to start a design before paying close attention to what a site will feature and why.

A good site design creates a structure that enables a clear two-way dialogue with all its users.

Content is our problem
A lot of designers think that web design is about the interface, and that content is what's added on later, or else it's "the client's problem".

I've seen designers argue that the content must be changed to fit the way the site was designed. This only represents the designer's failure.

Designing for the content should be the designer's problem and focus, because content is the key to success.

Remember the purpose of design: To enable communication between the consumer and the content.

Content is what it's all about.

It's content that makes a site work, flow and communicate well with the right tone. That makes it the web designer's problem, because effective communication is our problem.

It's our job to maximise a web site's effectiveness and that means understanding how users will interact with a site's content.

Designing for communication
It always helps to have a framework to start from, so that we're not designing into thin air. A good way to build a framework is to list what a site has to say, and then prioritise those messages. I like to picture an active two-way conversation between the site and the user.