Skip to Main Content

Website Navigation Essentials

Posted on 2.11.2007
By Iain Row, Prominent Media
add to furl add to add to technorati add to blinklist add to digg add to google add to stumbleupon add to yahoo
Though it sounds simple, one of the keys to making a website easy to use is giving people a clear indication of where in the site they are, have been previously and should go next. This is the job of the site’s navigation elements.

In previous years, the consensus was that the main function of website navigation was to take visitors from your front page to the area of the site they wanted to visit. However, in today’s search-engine-dominated World Wide Web this model is unlikely to be the most accurate.

Overwhelmingly, visitors go directly to content-laden pages, lower down the navigation hierarchy. This is because these pages are the ones that search engines direct them. From there, site visitors will make a decision about whether to browse further, contact you directly or leave the site. If your navigation design makes it difficult for people to move through the site, they will simply leave.

This is the main reason why the use of frames has largely died out, but it also bodes badly for JavaScript driven dynamic navigation, where elements are not visible until the mouse is over them. If your visitors found one of your Web pages from a search engine and didn’t use your home page site navigation, how will they know which area to roll over to get to other useful content? Those hidden elements that guide the user through your site are all but invisible. It’s likely that the user will hit the back button and start another search for content that may be elsewhere on your site.

Breadcrumb navigation can help by letting the visitor know how far they are down a certain path and helping them to come back up, but it provides no clue about what other pages might also be appropriate.

The best solution is to have context-sensitive navigation. When visiting one page, at a glance you can see other pages in the same section, as well as other main sections of interest.

A good example is the site of Cranfield Aerospace ( This site contains more than 150 pages, but even jumping straight into a content page four levels down we can tell immediately where we are, just from the navigation. We can also tell from links on the left what other pages are “siblings” of this page, as well as what other sections are available.

A key factor is the use of a different color to highlight the current page or section. This is vital for helping the visitor to quickly see where they are. If another color is not an option, bold or italic text can work just as well. What’s important is that the path to the current page is visible.

In the case of Cranfield Aerospace, their entire site’s navigation is run using a piece of .NET code called SiteNav ( This lets the team running the website write a simple XML file which maps the navigation like a family tree; the SiteNav code then reads this file and works out what links are appropriate for each page. It can use the same data to produce breadcrumb navigation and a sitemap page. The key benefit is that you don’t have to be an IT guru to write the XML file or implement SiteNav — two lines of code are all that is required.

You don’t have to use SiteNav, of course, but whatever method you use, try to avoid the false promise of JavaScript and instead implement navigation properly. If you do, your site has a good chance of both retaining visitors and encouraging them to spend as much time exploring your site as possible.

About the Author:
Iain Row is the lead developer at Prominent Media Ltd, a Web development company based in the UK. Their SiteNav product is an intelligent website navigation solution.

add to furl add to add to technorati add to blinklist add to digg add to google add to stumbleupon add to yahoo
Website Magazine
Today's Top Picks for Our Readers:
Recommended by Recommended by NetLine

Leave Your Comment

Login to Comment

Become a Member

Not already a part of our community?
Sign up to participate in the discussion. It's free and quick.

Sign Up


Leave a comment
    Load more comments
    New code