Looking for Regional Information?

Designing a Good Navigation System for Your Website

By Charles Hopkins Published 04/23/2006 | Web Design
While you should design your website to be aesthetically pleasing, beautiful graphics and clever little details are no substitute for a good navigation system. No matter how great your website looks, it will be useless if your visitor can't find their way around your site.

Traditionally the navigation menu is placed just below the header area or on the left hand side of the web page. Usability studies have shown that web site visitors instinctively look in these areas first.

Wherever you decide to place your navigation menu, remember that consistency is important. The most important thing is to place your navigation menu in the same spot on every one of your web pages. If you use an image to represent a navigational button, use the same image and the same color for that image on each page of your website. For example, if you use an image of a green house in the left hand corner of your web page as your "Home" navigational link, use the same green house image in the left hand corner of every one of your web pages to designate the "Home" link.

Your visitor should be able to find what they are looking for within 3 clicks of your home page. This is usually not a problem for small sites. However, if you have a large site with many pages, you will need to design a navigation menu that provides access to all areas of your website without getting your visitor lost or confused.

You may want to use a bread crumb trail type of navigation system for large sites (Homepage > Category > Subcategory > Content). Another option is to use a dynamic menu that changes according to the page your visitor is, but be aware that search engines may not be able to spider sites using dynamic menus.

Usability studies have shown that a navigation menu should contain no more than 8 links. The more choices a user is given, the more difficult it will be for them to make a decision. Also, if you have many links, your visitor may get the impression that your site is complicated and difficult to navigate.

If you have only a few links, use mouse rollovers to visually enhance your website. You will need to add some Javascript that pre-loads the rollover images and then add "onMouseover" events to your image links. Alternatively, use CSS for text rollovers that change the link color when the mouse cursor hovers over a link.

Navigation links should be considered the most important part of your website for two reasons:

1) They are used by your visitor to find content on your site.

2) They are used by search engines to spider your site.

The reason users visit your site is to get information. If visitors can't find the information they are searching for, they will click away, perhaps never to return again.

While different search engines have different rules on how they spider and rank a site, basically a "bot" or "spider" will visit a site, search for a "HREF" link and follow the links to other pages, indexing the pages as it goes along. If the "bot" or "spider" doesn't find a "HREF" tag on a page, it is blocked from going any deeper into the site. As you can see, you need to design your navigational system so that a search engine can spider all pages of your website.

When designing your website, take the extra time to design a good navigational system. It is vital to your success!