Learn to design a good navigation bar

Build your website -> Website Navigation

Just as you wouldn't fail to implement current safety codes before building a house, it's no different with a website when it comes to implementing a good navigation bar. It plays an essential role in creating good first impressions and setting site expectations. New visitors will scan your navigation bar when they first arrive on your site home page.

Besides labeling the bar clearly, when visitors hover the mouse over it, they should see a title with small explanation of what and where the label button will take them. You cannot create a good user experience without a good navigation bar.

New vs Redesign
It is much easier to design and implement a navigation bar in a brand new design than to make patches or redesign it. So if you are building your very first website, it is essential to have a good navigation bar that is clear and not confusing to the visitors.

Basic Guidelines
1. Use recognizable link labels that set a clear and accurate expectation for the page content. Examine the horizontal and vertical navigation bars on this website. They are clearly labeled and each label shows a title when you hover mouse over it. You need simple, clear, unambiguous terms in your primary navigation bar. The bar labels above quickly tell the visitor that site content will be easy to explore.

If you have a graphical navigation bar, each element needs alt tags for visually challenged viewers. Alt tags should include the bar link label, but it is best to expand on the content with a few additional key words.

2. The navigation bar must be in a consistent location on every page. The navigation bar should be in the same place on every page and should always include a link to the home page. Most but not all sites meet this guideline.On this website, notice the horizontal and vertical menu bars are always in the same location on all pages.

3. Avoid self-referential links that only refresh the page you are on. Either the bar label can be inactive for the page you are visiting or the page should be clearly labeled with a heading to let the visitors know what page they are on. On this website, all menu elements are active. However, each page is clearly labeled with a clear heading.

4. Provide visual cues that tell you what page you are on, and what pages you have visited. On this page, each page has a label either at the bottom or left hand side in the form of a button that reads "back to where came from." Whenever you click this button, it will bring you back to the page where you came from. It creates a "stack" kind of operation, that is, last in first out (LIFO.)

Ensure that the text is clear and readable. Dark text on light background is more readable than light on dark. Link "hot spots" must be large enough to easily keep the cursor over links. It is annoying when the submenu links disappear when the cursor strays the slightest bit so be sure to test the worst case scenario - a laptop without a mouse.

Horizontal or Vertical Navigation Bars
On this website, some of the labels on the horizontal bars are expanded on the vertical menu bar. For example, when you click on "create" on the horizontal bar, a corresponding detailed vertical bar appears. Similarly, the same operation occurs when you click on "promote" and "monetize" elements on the horizontal bar.

How to Test Your Navigation Bar
You should always user-test your new navigation bar design. Test early before extensive coding is completed, so you can make changes if necessary.

In a Nutshell
Begin now to plan navigation bar improvements. Improving the user experience by building a good navigation bar will not earn rave reviews from your visitors. In fact, most will not even notice it. Ensure that new visitors become repeat customers by providing a great user experience - beginning at the navigation bar.