Designing Web Site Navigation

Principles for good navigation design

A site must:

  1. Let me know where I am at all times
  2. Clearly differentiate hyperlinks from content
  3. Let me know clearly where I can go from here
  4. Let me see where I’ve already been
  5. Make it obvious what to do to get somewhere
  6. Indicate what clicking a link will do
[pwda]

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

Example of grope navigation from beepmarketing.com

‘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 hotspot.

This example, from beepmarketing.com (site no longer live) is typical, and exposes some of the typical problems that grope nav causes.

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

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 motor skills: moving your eyes’ focus can make your hand move as well.

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

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 visually identifiable.
  • 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 represented visually.
  • 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?
About the author

Ben Hunt

Ben has over 20 years' experience in web design and marketing, and is one of the most influential figures on the subject of effective web design. He has written a bunch of books and spoken at multiple conferences internationally. In 2015, Ben created Open-Source Marketing, which promises to turn the practice of marketing upside down.. Find out more at http://opensourcemarketingproject.org

Comments are closed