Web navigation design principles, part 2: April 23, 2001 issue of New Thinking

April 23, 2001 New Thinking:
Web navigation design principles, part 2

Website content management

Home I About I Services I Clients I Contact

New Thinking Home

Subject Classification
Reader Feedback
Subscribing
Unsubscribing
2006
2005
2004
2003
2002
2001
2000
1999
1998
1997
1996

Books by
Gerry McGovern

Content Critical

Gaining competitive advantage through high-quality web content

The Web Content
Style Guide

The essential guide
for online writers, editors and managers

April 23, 2001

Web navigation design principles, part 2:
Let the reader know where they are, where they’ve been and where they’re going

By Gerry McGovern

(Note: This is an excerpt from Chapter 8 of Content Critical.)

Navigation supports a reader in moving around a website. In this sense, navigation should, where possible, let the reader know where exactly on the website they are, where they have been on the website, and where they will be taken, if they click on a particular link.

Let the reader know where they are
Navigation should give the reader a clear and unambiguous indication of what page of the website they are on. Web navigation is like a mixture of a map and a system of sign posts. Imagine you are on holiday and you are looking at a map in a town square. If the map is well designed then one of the most prominent features will be a ‘You are here’ sign.

CNN supports the reader well in this regard. For example, if you find yourself on the entertainment page of CNN, you will see in bold capitals in the masthead the word, ENTERTAINMENT.

What this means from a design point of view is that the navigation element that describes the page the reader is currently on should be among the most prominent elements on the page. This will allow the reader to fix themselves, to be able to say: ‘Ah, this is where I am.’

As a rule, navigation should be text-based. Where there is a need for navigation to be in graphical form, the navigation classification that represents the page the reader is on, should be a different design from the other classifications.

For example, let’s say you are on the homepage of a particular website. The ‘Home’ classification in the navigation should have a slightly different design than the other classifications in that navigation, thus indicating to the reader that they are on that particular page.

Let the reader know where they’ve been
A fundamental principle of web navigation design is to let the reader know where they’ve been on the website. This is a key reason to design navigation in hypertext, rather than graphical, form. With hypertext, when a link is clicked it changes color. The reason it changes color is so that the reader can know where they have and haven’t been.

The standard colors for hypertext are blue for unclicked and purple for clicked. Avoid changing these colors. Remember, navigation should always represent the familiar. On the majority of websites, blue and purple are the hypertext colors applied. The reader is used to these colors. Changing them will only serve to confuse and disorientate the reader.

Let the reader know where they are going
The obvious way to achieve this is to create navigation classifications that are as self-descriptive as possible. Never build a navigation based on obscure classifications that are familiar to those who work for the organization, but not to the general public.

There will be times when navigation requires extra support so as to achieve greater clarity for the reader. There are a number of ways to achieve this greater clarity:

If the navigation element is an image such as a company logo, and is linked to the homepage, put in ALT text that says something like: “Company homepage”.
If the text link is not quite as descriptive as it should be, put in “link title” text to give the reader more background.
Changing the color of the link when the mouse rolls over it. This is helpful when there are a lot of classification links close together. Because the link changes color, the reader is more certain of what they are about to click on.
Have a drop-down menu showing lower levels of the classification when the mouse rolls over a particular link. The benefit is that it allows the reader to reach deeper into the website if they so wish.

Gerry McGovern

Next issue: Web navigation design principles, part 3
Previous issue: Web navigation design principles, part 1
New Thinking homepage

New Thinking Newsletter
Subscribe to this free weekly newsletter covering the role and function of content on the Web.
More info | Privacy policy
Read the current issue

Email Address:

 Subscribe  Unsubscribe

Content management seminar feedback
"Gerry's presentation was very well received by the more than 400 higher education delegates. I've chaired this meeting since 1994 and very few speakers have generated the same level of enthusiasm. Wit and wisdom is always an unbeatable combination."
Bob Johnson, American Marketing Association

“Excellent presenter ... thought-provoking and relevant. I hope we can persuade him to visit us again one day.”
Malcolm Davison
The British Association of Communicators in Business

"Hearing Gerry McGovern speaking, one can feel that he truly masters the subject of content management. He was voted ‘best speaker of the conference’ by delegates."
Toon Lowette
European Association of Directory Publishers

Find out more about Gerry McGovern's seminars

The standard colors for hypertext are blue for unclicked and purple for clicked. Avoid changing these colors.