Home  › Marketing › Strategies

Designing Web Navigation: Traffic Light, Not Neon Light

  |  March 7, 2002   |  Comments

Save the bells and whistle for something else. Here's how to make Web navigation clear, functional, and useable.

Navigation allows reader to find the content they want by moving through a Web site 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 "navigate" 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 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 about creating clear and consistent signs. Readers turn 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. And it uses them in a consistent order: red first, amber in the middle, green at the end. I have yet to hear anyone complain traffic lights are boring and should change their design.

Hypertext colors are a bit like traffic light colors. Hypertext changes color to support Web navigation. Blue represents links that have not been clicked. Purple represents links that have been clicked. 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 view navigation as a neon light. They become more concerned with how it looks rather than how it works. The more arty the Web site, the more obscure the navigation becomes, as if navigation were some sort of creative statement. Making navigation obscure, making it look like New York's Times Square, is not artistic. It's bad Web design.

According to Jonathan and Lisa Price's 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 Web site, keep the following in mind:

  • Make sure it's readable. Use a sans serif font in an appropriate size.
  • Make sure it's consistent. Decide on a structure for your navigation and use that structure consistently throughout your Web site.
  • Keep hypertext colors blue for unclicked, purple for clicked.
  • Place the main navigation for your Web site on the far left of the page. That's where readers expect it to be.
  • Your navigation should be "invisible" until it is wanted. Never let it flash, and never design it in a way that dominates the page.
  • Always use text in your navigation. If you use icons, make sure there's a text description under each one.

ClickZ Live Chicago Join the Industry's Leading eCommerce & Direct Marketing Experts in Chicago
ClickZ Live Chicago (Nov 3-6) will deliver over 50 sessions across 4 days and 10 individual tracks, including Data-Driven Marketing, Social, Mobile, Display, Search and Email. Check out the full agenda and register by Friday, Oct 3 to take advantage of Early Bird Rates!

ABOUT THE AUTHOR

Gerry McGovern Gerry McGovern is a Web consultant and author. His most recent books are Content Critical and The Web Content Style Guide, published by Financial Times Prentice Hall.

COMMENTSCommenting policy

comments powered by Disqus

Get the ClickZ Marketing newsletter delivered to you. Subscribe today!

COMMENTS

UPCOMING EVENTS

Featured White Papers

IBM: Social Analytics - The Science Behind Social Media Marketing

IBM Social Analytics: The Science Behind Social Media Marketing
80% of internet users say they prefer to connect with brands via Facebook. 65% of social media users say they use it to learn more about brands, products and services. Learn about how to find more about customers' attitudes, preferences and buying habits from what they say on social media channels.

An Introduction to Marketing Attribution: Selecting the Right Model for Search, Display & Social Advertising

An Introduction to Marketing Attribution: Selecting the Right Model for Search, Display & Social Advertising
If you're considering implementing a marketing attribution model to measure and optimize your programs, this paper is a great introduction. It also includes real-life tips from marketers who have successfully implemented attribution in their organizations.

WEBINARS

Jobs

    • Web Writer
      Web Writer (Money Map Press) - BaltimoreDo you have a passion for the markets and investing, and writing? Do you want to spend your days providing...
    • Web Production Specialist
      Web Production Specialist (Money Map Press) - BaltimoreMoney Map Press is looking for a self-starter to perform and oversee the production of daily...
    • Internet Marketing Campaign Manager
      Internet Marketing Campaign Manager (Straight North, LLC) - Downers GroveWe are looking for a talented Internet Marketing Campaign Manager...