Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Design > Voices That Matter

Web Design Reference Guide

Hosted by

Navigation Design

Last updated Oct 17, 2003.

Navigation design focuses on getting the user to move around the site through links. As in the real world, when we're driving or walking from one place to the next in our daily lives, we know how to get to where we're going. Sometimes people find it difficult to explain in words how to get from here to there because the visual cues are missing. Two people can get from here to there in two different ways.

Poor Dorothy lands in a new place and has no idea what new world she has entered. The Wizard of Oz is a children's story, and it all works out after Dorothy meets the Munchkins. However, I admit that if I were plopped out of the blue into unfamiliar territory, I'd be scared out of my wits and overwhelmed at the thought of what to do next.

Drastic example, but it's similar to what happens to a visitor who arrives at a Web site other than the front page. When creating each page, asking four basic questions can help you think like a user who arrives on the page for the first time:

  • Where am I?

  • Where can I go?

  • How can I get back to where I came from?

  • Will I know where I am when I arrive from outside sites?

A visitor may arrive at a site from a search engine or other external Web site, which renders the third question redundant; hence the need for the fourth question. The fourth question considers how a person can dig his way out after landing deep into a site's page.

Good navigation orients the user to where he is located within the site's scheme. Just like walking or driving to a spot, users create a virtual map in their heads when they're on Web sites. Most sites have multiple navigation systems in place. For instance, Yahoo! is a big site that has been broken into three basics: Directory Home, Yahoo!, and Help. These three make up the global navigation and appear on the top-right corner of most of its pages. If you're moving around within directory pages, there are "bread crumbs" that tell you where you are within the directory. Directory > Education > K-12 > Reading is an example of bread crumbs and local navigation.

Contextual, supplementary, and courtesy are other types of navigation. On occasions when we need a snapshot of the Web site, we look for the site map. Most site maps are similar to an outline going two levels deep: the top level and the secondary level. Anything deeper than two levels is most likely too much detail. An index is similar to a site map, except that it's organized alphabetically like indexes found in the back of the book.

Drop-down menus, buttons, checkboxes, radio buttons, text fields, and scrolling lists are examples of user interface design elements. When you think of checkboxes and radio buttons, what is the main difference between the two? Checkboxes are usually square, whereas radio buttons are round. The squares usually allow the user to select more than one item, whereas the circles limit the selection to one. All elements are acceptable for use on a Web site. The key is to use the right ones.