Effective Navigation Bar Design

Advice on how to create a navigation bar that provides clear site navigation.

As you add navigation to your Web site, make sure you keep in mind these three design considerations: consistency, placement, and labeling, which I talk about in the following sections. A well-thought-out navigation bar makes your Web site much easier to navigate and helps ensure that visitors can easily find the information they're looking for.

Consistency
More than anything else, your navigation should be consistent throughout your site. If you place a horizontal navigation bar on the top of your home page, you should stick with top-horizontal orientation throughout your site, even if you are using multiple navigation bars for different parts of your site. Otherwise, people can become confused and disoriented, and may simply leave.

Navigation bar placement
"Western" people process information in a left-to-right, top-to-bottom manner. Given that, your navigation bar should be at the top and oriented horizontally or else on the left side and oriented vertically. A secondary text-only navigation bar at the bottom of the page is an optional feature you may want to add.

Crystal-clear labeling
When naming your labels on your navigation bar, be as clear and lucid as possible. For most sites, navigation bar labeling is no place to be creative, obtuse, and edgy. For example, if Gilligan Sportswear, Inc., has a page on its site that provides background information on the company, a good label is "About Us" or "About Gilligan Sportswear." Above all, avoid getting cute and coming up with your own vernacular and labeling it something like "Gilligan's Scoop" or "The Locker Room." Visitors will be clueless as to what the link sends them to.

Short, descriptive labeling
The graphical buttons that make up a SiteBuilder navigation bar automatically expand in width based on the text length that you enter for the labels. While you have that flexibility, aim not to use it; stretched images never look as crisp as their original counterparts. Try to keep the labels as short as possible while still being descriptive. Also, while the labels inevitably have some variance in text length, work to keep them as close in length to one another as possible. Having their length range wildly makes for a messy looking navigation bar.

	Effective Navigation Bar Design This article is excerpted from Yahoo! SiteBuilder For Dummies by Richard Wagner (For Dummies - A Branded Imprint of Wiley Publishing, Inc., 2005). Used by arrangement with Wiley Publishing, Inc. Buy the book

Back to Top Email Printer Friendly View

RATE THIS ARTICLE
Rate it:

Overall Rating: Very Good