Article: Website Navigation Essentials

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 now, 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 to. 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, you can see at a glance the other pages in the same section, as well as the other main sections of interest. 

For an example, take a look at  This site has 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 the links on the left what other pages are ‘siblings’ of this one, and might be worth a visit, as well as which other sections are available.

A key factor is the use of a different colour to highlight the current page or section.  This is vital for helping the visitor to see at a glance where they are, although it doesn’t need to actually be a different colour; bold or italic text can work just as well, depending on the site’s design.  The key thing is that the path to the current page must be 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 site map page, and the key benefit is that you don’t have to be in any way technical 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, you’ll give your site the best chance of both retaining visitors, and encouraging them to spend as much time exploring your site as possible.

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.

Monday, October 27th, 2008 Published Elsewhere, Web Development

No comments yet.

Leave a comment

Bookmark and Share