How to Plan and Make a Website's Navigation Bar

by Jason OConnor

More Web Designing Articles

Published on this site: January 5th, 2010 - See more articles from this month

The Web is interactive. As a visitor, you get to determine where you go and what you see. One of the most important features of every website is its navigation, and its navigation that gives the controls to the visitor.

The navigation bar is a grouping of the main sections of your site. It's important that every page has the same navigation bar. Don't make the user think by having to relearn the system when they get to a new page. Don't confuse the visitor. Consistency builds trust and facilitates finding what's desired.

The navigation bar should be the same on every page including the homepage. Since half your visitors will start on the homepage, this is the perfect opportunity to introduce your site's structure. The structure is represented in the navigation bar. Use a visual structural diagram to help you create the navigation bar. A visual structural diagram visually is simply something that represents the planned organization or architecture of your website.

The main sections which were mapped out in the visual structural diagram become your navigational sections.

There are numerous different types of navigation bars. They can be comprised of buttons, text links or JavaScripts. They can be horizontal under each page's main banner image. The can be vertical along the left or right hand sides. There can more than one. For instance, you could have one navigation bar that points to all the main sections of the site run vertical and along the left hand side, and also have a horizontal one that runs across the top and points to all the company-related pages.

How should you organize your navigation bar(s)? That depends. Ask yourself, what will make the visitors' lives the easiest, not make them think and help them best accomplish their goals? Also, make sure it's clean and easy to use. If a navigation bar is cluttered with 45 links all on top of each other with no breaks, you're making visitors work hard to find what they want.

Finally, stick to Web conventions. Don't reinvent the wheel here. You may have a designer who is dying to present your navigation bar in some weird but original way. Don't let her. You can't go wrong with a simple and small list of vertical links or buttons down the left hand side of each page. Since this is a standard, it's a sure bet. And the other good choice is a horizontal nav bar across the top of your site just under the header graphic.

Eye-tracking studies have been done to determine where people's eyes move when they land on a Web page. They generally go from the top left down to the middle of the page first. So be sure that your most important page elements, including your navigation, appear within this path. Now you know why so many websites place their logo in the top left.

Even more importantly, always group your navigation in items of six or less. So if you have eighteen buttons in your vertical navigation bar, split them up into three visually distinct groups of six. Eye-tracking studies have shown that this works best for Web page viewers as well.

You may have a lot of pages that you want represented in the main navigation bar. In this case, employ rollover menus. This is usually done with JavaScript or Flash.

It's important to keep in mind that your site's functionality should work across all popular platforms and browsers. This extends to navigation as well. So if you include rollover menus in your navigation, be sure the rollover functionality works for everyone, regardless of the platform or browser they're using. JavaScript is supported by all popular browsers, that why I suggest using it, but you still need to test it using various platforms and browsers to be sure your navigation works for everyone.

When deciding on your navigation bar structure, be sure to think in terms of how your visitors see and use the site. In other words, group similar sections together from the point of view of the user and what the user will want to do. Support sections should be grouped together and company sections should be in a separate grouping.

By following a few simple rules when creating a navigation bar you'll be sure you have the best-suited system on your site. First determine what the most important sections are going to be that require a link from every page. Then create a visual structural diagram to visually show your site's various sections. Think in terms of what you're visitors will want to accomplish and use Web conventions such as putting the navigation bar(s) vertically down the left or right hand columns and/or horizontally across the top. Group your sections in clusters of six. Be sure each button/link in your navigation bar is as descriptive as possible so that your visitors know what to expect if they click, and make the navigation the same on every page of your site to establish consistency.

Copyright 2009 Oak Web Works, LLC

Jason OConnor is the head of Oak Web Works, LLC, an Internet marketing
and Web design company in Massachusetts
(http://www.oakwebworks.com/design/index.htm). Jason is the author of "The Ultimate Guide to a Successful Business Website" that teaches you how to hire a Web designer and create a money-making website.