The backbone to a good navigation system is the structure of the web site itself. If your web site is organized and structured, it’s that much easier to design a clear navigation system. Divide the material of your site into clear topics, and if required, subdivide each topic into subtopics.

Plan Ahead

When planning the structure of your web site, think ahead. Imagine how your site will expand in the future as you plan your structure now, and allow for extra sections that will be added later.

Overview Page

The overall structure of your site is indicated in things like table of contents pages, site maps and search features. As well as having an index of your whole site, each major section should have a contents page. Each link should be accompanied by a descriptive hyperlink.

Depth of Navigation

Nothing annoys users more than having to click through a sequence of content free pages to get to where they want. Don’t make your visitor have to click through more than 5 pages to get from your home page to anywhere on your site. The longer they have to travel, the more chance you have of losing them. And try to have content on every page they go through, even if just a descriptive table of contents.

Use a Navigation Bar

Every page on your site should have some type of navigation bar/menu. This is a collection of links to major pages on your site, placed at the top, bottom or side of your page (or in more than one of these three positions). You can link to the essential pages only, or also include links to other sections of your site. How you structure your navigation bar is up to you.

Consistency

Your navigation bar should be consistent throughout your site for two reasons. Firstly, the unified look reminds your visitor they’re still in your site. Secondly, the predictability of having the same controls performing the same action on every page makes navigation easier and more comfortable.

Essential Links

You should always link to your home page. This way the user can always start over if they hit a dead end (information wise, not navigation wise). Also link to your email address or a comment page. Always allow your visitors to comment on your site as they can give great advice/feedback on mistakes/strengths of your site.

For larger sites, a hierarchical linking system is more elegant and can be used to help the visitor know where they are within the structure of your site. As well as including your essential links, include links to major pages of the section the user is in. This is more work as the navigation bar will change as you go through different sections.

Breadcrumbs

Breadcrumbs show users where they are within the hierarchical structure of your site. They allow the user to jump back up the structure to any level at any time. This example from yahoo.com shows the trail the user took from the home page, through the Business and Economy page to the Business to Business page.

Breadcrumbs can be automated by any number of plug-ins and scripts, but make sure your server supports them before you depend on one of these solutions. They can also be created manually on each page, if the structure is always the same.

Text Navigation Bars

Some of your visitors will use text only browsers, or use graphical browsers with images turned off. For these people, as well as users with slow modems, it’s polite to include a text only menu. These are typically shown in the page footer and may take on different looks:

Home | Index | Help | Email

[ Home ] [ Index ] [ Help ] [ Email ]

Mystery Icons

Another bad example of bad hyperlinks are graphical icons without any explanatory text. Don’t assume everyone will know what your graphics mean. A site full of enigmatic icons is a guessing game for the user and a nightmare to navigate. For this reason, always accompany text with your graphical links. The icons don't have to be intuitive, but they have to be guessable in one or two guesses.

Descriptive Hyperlinks

Ideally, a hyperlink should contain enough information to allow the user to decide whether they want to link to it or not. Aim to create hyperlinks as or accompanied with short, descriptive phrases. This phrase needs to summarise the features of the page they’re linking to in just a few words.

A classic transgression of this rule is the NEXT link used in many sites, without any summary or explanation. If possible, you should include a brief description of what’s coming up next (for example, Next: Navigation Bars).

Multiple Avenues

Offer multiple ways to get around. Your site shouldn’t be a linearly linked site with only one way to each page. Instead, it should mirror the World Wide Web in that it’s an interlinked web with pages linking to each other all over the place. Of course, you shouldn’t overdo it (everything in moderation). Try and make your extra links unobtrusive either as links within your text or links in margins or footnotes.