Web navigation: traffic light, not neon light design: March 04, 2002 issue of New Thinking

March 04, 2002 New Thinking:
Web navigation: traffic light, not neon light design

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

March 04, 2002

Web navigation: traffic light, not neon light design

By Gerry McGovern

Navigation allows the reader to find the content they want by moving through a website using classification links. It should be designed in a simple, clear, consistent and functional manner; like a traffic light, not a neon light.

Navigation comes from two Latin words: "navis" (ship) and "agere" (to drive). According to the Merriam Webster dictionary, the general meaning of navigation is: "To steer a course through a medium ... to get around, move ... to make one's way over or through ... to operate or control the course of …"

It is a fundamental mistake to design web navigation as if it were a neon light. The objective of navigation should never be flashy. The job of navigation is not to grab attention. Rather, navigation design is all about creating clear and consistent signs. The reader turns to navigation when they want to get somewhere on the site. First and foremost, they want something that is functional and informative.

A traffic light system is clear and consistent. It uses three colors: red, amber and green. It uses them in a consistent order: red first, amber middle, green end. I have yet to hear anyone complaining that traffic lights are boring and that they should change their design.

Hypertext colors are a bit like traffic light colors. The reason why hypertext changes color is to support web navigation. Blue represents links that have not been clicked on. Purple represents links that have been clicked on. Many designers take the liberty to change these colors. Why? For what purpose? Changing the color of hypertext is like changing the color of traffic lights. All it does is confuse.

Too often, web designers see navigation as a neon light. They become more concerned with how it looks, rather than how it works. The more arty the website, the more obscure the navigation becomes, as if this is some sort of artistic statement. Making your navigation obscure—making it look like New York's Times Square—is not artistic, but rather bad web design.

According to Jonathan and Lisa Price, in their recent book, Hot Text, "If you want to help your visitors, you must think of each menu as a set of well-lit street signs. The challenge is to organize and write those signs so that visitors can find their way while moving at high speed."

When designing navigation for your website, keep the following in mind:

Make sure it is readable. Use sans a serif font at an appropriate font size
Make sure it is consistent. Decide on a structure for your navigation and use that structure consistently throughout your website
Keep the hypertext colors blue for unclicked and purple for clicked
Place the main navigation for your website on the far left of the page, as that's where readers expect it to be
Your navigation should be 'invisible' until it is wanted. Never have it flashing or designed in such a way that it dominates the page
Always use text in your navigation. If you want to use icons, make sure there is a text description underneath each icon

Gerry McGovern

Next issue: Your website should have an opinion
Previous issue: Knowledge management: can information be counterproductive?
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

Making your navigation obscure—making it look like New York's Times Square—is not artistic, but rather bad web design.

Content Critical: Highly recommended
"Content Critical is highly recommended. It belongs in every design library. It should be on the reading list of every course in Web design. Any Web designer who plans to be in business five years from now should read this book." More
Ken Friedman, Design Research News, January 2002