How frustrated would you feel if you visited another country to find that all the maps you need to use for your travels are terrible written/drawn? That’s almost the same thing people feel when visiting a web site with a bad navigation, except that they can visit another web site (or hit the “back” button) in an instant. They won’t spend much time trying to figure things out.

Many site owners think that a navigation is just a collection of links that link to the site’s sections, when, in fact, the whole point is to help users find what they need with little effort and without frustration.

This post will present 5 simple steps to turn a bad site navigation into a usable one. Note that it doesn’t cover everything about navigations (such as design and positioning), but rather how they should generally be structured. I will also be referring to a site’s main navigation as just “navigation”.

To make this easier to understand, I’m going to use the following made up navigation (supposedly for a web development site) and try to apply each step on it:

Home, PHP, ASP.NET, Weblog, Bulletin Board, The Team, Related Links, Recent Articles

Step 1: Group related links:

First of all, we need to group the related links. A navigation should only contain top-level sections (to avoid clutter). In our example, PHP and ASP.NET are both used for web development, so we could create a new section called “Web Development” (for example), and put these two in it:

Home, Web Development, Weblog, Bulletin Board, The Team, Related Links, Recent Articles

Step 2: Use conventional and descriptive names:

By using conventional/descriptive names, you make it much easier for visitors to find what they’re looking for. In our navigation, we have “Weblog” and “Bulletin Board” need to be changed to “Blog” and “Forum”. Because basically the latter terms are used more than the former. (check the google results comparison (”google fight”) for: Weblog vs. Blog and Bulletin Board vs. Forum)

There’s also “The Team”. “The Team” leads to a page full of information about the team behind our example site. It needs a more descriptive and conventional name. “About us” seems to be what we need.

So now the navigation looks like this:

Home, Web Development, Blog, Forum, About us, Related Links, Recent Articles

Step 3: Shorten long names:

Link names in a navigation must always be as short and concise as possible, because the point is to help visitors scan and use the navigation easily and effectively.

Although I didn’t include a truly long name in the example I’m using, but we still can shorten “Related Links” to “Resources”. It might not mean the same thing in different sites, but let’s assume it does in this context:

Home, Web Development, Blog, Forum, About us, Resources, Recent Articles

Step 4: Remove unnecessary links:

So how can we tell which link is unnecessary? most of the time, any links that leads to a sub-section or a portion of a page instead of a top level section is unnecessary.

The “Recent Articles” link in our example is an unnecessary link, because it’s a feature of another section (which could be Home, Web Development, Blog, or Forum), so it needs to be removed:

Home, Web Development, Blog, Forum, About us, Resources

Step 5: Order by importance (and convention):

Last but not least, the items of a navigation need to be ordered by importance and convention. Users tend to scan horizontal navigations from left to right, and vertical navigation from top to bottom. But they will also look immediately at the left (or the bottom) end if they were looking for an “about” or “contact page”.

So, first you need to place the common pages conventionally: The “Home” page will always come first and the “About” , “Contact” or “feedback” page are usually last.

Then after that you start sorting the links in the middle by importance. If you value your “Blog” most and want your visitors to take a look at it, put its link after the “Home” link, even if “Articles” might be more interesting to them. It’s somehow like what some supermarkets do - they place the beverages as far as possible from the entrance to increase the chance of you buying something else on the way.

After ordering the navigation’s links, it looks like this:

Home, Blog, Web Development, Forum, Resources, About Us

As you can see, it looks much more elegant and usable than the original navigation, and it’s been achieved by applying five simple steps only.

Note that these exact steps won’t necessarily work on all navigations (especially big, multi-level ones), but you can still benefit of them greatly.