What is Website Navigation?

Website navigation answers these questions for your visitors:

• Where am I? Offering feedback on the current location helps visitors feel confident they're on the right page. Everyone runs into misleading links out there — people want to know that the link they clicked leads to information they really need.
• Where else can I go? Usability.gov suggests that we "do not create or direct users into pages that have no navigational options." Don't trap your visitors, on purpose or inadvertently.
• What else can I do? Even basic websites are actually applications. Navigation includes messages that guide your visitors through any tasks they need or want to accomplish on your site. Friendly and useful error messages, obvious sign-up / log-in / log-out links, clearly labeled forms, prominent "buy now" buttons, etc.
• How do I get back? "Undo" features also inspire confidence. If visitors feel they can easily navigate backward, they're more likely to move forward.

Consistency is Key

No matter what your design, navigation is easy to use when it's consistent. Put navigation elements in the same place on each page whenever possible. Sometimes you'll want to repeat some of your navigation, maybe summarized further down on the page. If you do this, make sure the links appear in the same order in both locations, whatever that order may be.

Adobe repeats their menu's product list further down the page. The bottom list summarizes the more common products, but both lists are in the same overall order (alphabetical).

A Picture is Worth a Thousand Words

If there's one lesson I've learned over and over from interface design, it's this: people don't read. If possible and appropriate for your site, give your main navigation icons that describe their links. Add meaningful pictures that actually indicate what clicking them will do (and make them clickable!).

Use appropriate alt attributes for accessibility — if your image has a caption, don't repeat the whole caption in the alt attribute or screen readers will say the same thing twice. Conversely, the title attribute aids usability by showing a tooltip when a visitor hovers over the image. For clickable images, this can tell your visitor what will happen when they click the image.

There's a subtle but important difference between alt and title. Alt attributes should provide useful text when an image is not visible, whether that means the visitor is blind, the image file is missing, images are turned off in the browser, or the visitor's connection is unbearably slow. Title attributes should provide useful text when an image IS visible — don't bother describing obvious images, but do provide additional information that you don't want or need to include in the body text.

Twitter's logo has a navigational tooltip, courtsey of the title attribute.

Sitemaps

Sitemaps can be both the most and least important navigational tool. Search engines do their best to spider your entire site, but a quality XML sitemap can ensure no page falls through the cracks. "Real" visitors may or may not use sitemaps, depending on your site's target audience, amount of information, and actual content. If you offer tons of products, services, galleries, or other collections, visitors may find HTML sitemaps useful in finding what they need efficiently and effectively.

The arguments.callee sitemap is dynamically generated with PHP, so any new posts are immediately visible to visitors (and Google's robot army).

More in my SCAN web design series:

1. SCAN Introduction
2. S is for SCANNING
3. C is for CONTENT
4. A is for ACCESSIBILITY
5. N is for NAVIGATION (current page)