Successful Navigation Design

Successful navigation design is a key part of your website. Navigation is arguably the most important part of website usability, and is often not done correctly. If your site is to be successful, navigation design should be considered at the start of the development process. This article covers some of the often missed points that make for successful navigation design.

All about the user

Navigation is for the user to be able to locate your content. after all, the content takes a long time to write, and you can't fit everything on the homepage.
Looking funky and cool is a nice to have feature when it comes to navigation - not a must have. Having user-friendly navigation that looks good as well is something to aim for, but user-friendly should be non-negotiable.
So many sites fail the usability test by placing buttons in the wrong place (or not having them at all), naming buttons with words that confuse the visitor, or coming up with a "revolutionary" new nav design.

Creating good navigation for large sites is much harder than for small sites. It's hard to get the nav wrong on 5 page brochureware sites (but many still do). But when you have a 1,000, or 100,000 page site, navigation and search becomes particularly important.

Designing good navigation that is search engine friendly becomes yet another challenge. When you have a large, well indexed site, many of your visitors will not enter the site through the homepage. They don't know where in the site structure they are, so they can't just use the back button to go to your homepage. This is where breadcrumb navigation and logical homepage links become important.

I have created a set of rules below that I follow when designing navigation. A lot of this seems obvious, but then it's so often forgotten about, even on large, professionally designed sites.

The basic stuff

These are rules that should always be followed, because users are used to these concepts. If you try to change these concepts, you are asking your visitors to learn something new, which they won't like doing.

Home is Home

The main navigation button that takes you to the homepage should be labelled "home" (or whatever variation for your language). There is no need to change this ever, and if you are concerned about anchor text, this can be tweaked elsewhere. Home should always be the on the left or top of your main navigation, and be labelled as "home". I can think of very few exceptions to this rule.

Clickable Logo

The logo for your site should always be clickable, because some users can't be bothered looking for the "home" button, and simply use the logo instead. As a side-note, it's also worth trying to make the logo a single image, as people may wish to download the logo and use it to place a link to your site. Sliced logo images make this more difficult.

Easy to find contact button

When your visitor decides they want to call you, make it easy for them. They will expect the contact to be the last item on the main nav (not the third to last), so include the link here if you are able to. If the button isn't on the main navigation, users will look to the top right corner for a contact button (which should be labelled "contact" or "contact us"). Visitors will also look in the footer for contact info, but whatever the case make it easy for them to find.
If, for whatever reason, you don't want people contacting you, at least do your visitor the courtesy on letting them know. Include the contact button anyway, with a friendly message explaining. This will save your visitor the frustration of searching for, but not finding, your contact page.

Logical button names

Always keep the naming simple and informative on button names. Stick with what people expect, that is home, about, products, services, search, contact etc. Be specific where you need to be, but do your best to keep button names logical and standard.

Title attribute for rollovers

The title attribute is becoming more common for explaining where a link goes - these will usually appear as a popup tooltip when you mouseover the button or link. All main navigation links should have a title attribute set, explaining where the button goes. These are easy to add, and I consider an important part of navigation usability.
The benefit for the user is obvious - they are thinking I wonder what is on this page? Should I bother clicking to find out? If you can answer the question for them, you can save them the 10 seconds required to click on a page they aren't interested in - but more importantly, you can also convince them to click on a page they are interested in.
The title attribute for the products page might be "A selection of our widget products available for purchase online". This is where you place all that text that won't fit on the button. Search engines will recognise keywords in title tags, but write first and formost for the visitor, and don't even consider keyword stuffing.

Static is good

Keep the main navigation in one place, and don't move it about. Users expect the main navigation to be constant, always in the same place on every page. They will read your navigation the first time, then gloss over it on every subsequent page. If you are changing things around, you are forcing them to concentrate again, which goes against usability.
Many site designs incorporate a "splash page" which has a quite different navigation structure to the rest of the site. You may be able to get away with this if you don't expect the visitor to come back to this page, but unless your site is very small, asking the visitor to alternate between 2 different nav sctuctures is too much.
For sub-navigation, this will change depending on which section of the site you are in. But please keep it in the same place.

Navigation Techniques

There is no one "best" navigation system. Ultimately, your navigation needs to be easy to navigate your content, which can be small or large. It needs to look good, and fit in with your branding and design.

CSS Navigation

CSS Styled text navigation is the modern way of designing fast, accessible, attractive and maintainable navigation. The concept revolves around applying css styles to a standard unordered list element. CSS can take the list and display it as a tree, dropdown menu, horizontal nav, vertical nav, and many different styles.
The advantages of this kind of navigation are obvious - clean markup, degrades well for non-css browsers, minimal images required and very fast. It's quite common to include a certain amount of javascript with CSS based menus for our "special" friend Internet Explorer, but generally the navigation will be fully functional with Javascript turned off.

Javascript or DHTML Navigation

DHTML Navigation uses some complicated Javascript to create (usually) very nice looking menus. DHTML menus often have smooth fade effects and gradients, and can be styled to fit in with most site designs.
There are 2 major problems with DHTML navigation, and some (myself included) would consider these show-stoppers. Firstly, DHTML navigation does not work at all with Javascript disabled, an accessibility problem for a number of browsers. And because of this, many (most?) search engines are unable to follow DHTML navigation links.
If DHTML is used for the main naviation, it's critical to have an alternative navigation system for non-javascript users. At the very least, this should be a sitemap for the search engines, but ultimately the website should detect if javascript is present and produce alternative navigation if it is not.

Breadcrumb Navigation

On large sites, breadcrumb navigation is becoming more and more common. Breadcrumbs are links at the top of the page, which show the path the user has taken through the site.
Eg. Home > Products > Widgets > Small green widget.

This technique is becoming increasingly important where visitors are entering the site through sub-pages and not the homepage (which your SEO work should aim to do). Breadcrumbs are a simple way of explaining your site structure to the visitor, and giving them an alternative "back button" which they can use if they need to.
Breadcrumbs probably aren't required when a site only contains 5 pages - but any page that is 2 clicks or more from the homepage should include breadcrumb navigation.


A successful navigation design shouldn't need a sitemap, as originally the sitemap was the place where users go when they give up on your main navigation. On most sites, it's worth including a sitemap for Search engines to use so that all your content is within 2 clicks from the homepage. Some visitors are used to using sitemaps as a consistent way of navigation, so it's worth including one, but when you have a choice time is better spent designing good main navigation in the first place.
A good sitemap will use an unordered list which shows the hierachy of pages and subpages within the site. Sitemaps should also be broken up into several pages with a maximum of 100 links per page, on large websites.
Decide whether the sitemap is for the user, or for Google (or a combination of both). If your sitemap is for the user, use the same logical names for each page as you do on the main menu (eg "home"). If your sitemap is for the search engines, try to use your targeted search phrases in the clickable text instead.


A search facility is a good form of navigation on larger sites - some sites have no navigation, just a good search facility. A site search feature gives users quick access to the information they are looking for on your site. If you don't have what they are after, they can move on to the next site, and you have saved them some time. Be sure your search returns relevant results, as a badly written search feature can turn away visitors.
Google provides a system for adding search to your website. This is free and easy to install, and has good points and bad points. On the good side, Google know more about writing search algorithms than you do, so it's likely to come up with nice relevant results. On the down side, Google search only works with pages it knows about (cached pages). A Google search will often miss newly updated content, and will also return very little if your site isn't indexed properly. Also, a Google search can cheapen the image of your site (because it's free). A branded search results page is nicer for the visitor, if the results are as relevant.

Since Google released the Google API it is possible to use Google's search engine and deliver results that are branded with your colours. This is a good method of delivering search results, although these will still be based on pages indexed by Google only.

Footer Navigation

Footer navigation originated as plain text navigation as an alternative to the search-engine-unfriendly DTNML main navigation. Now that we are all using accessible CSS main navigation, we can use the footer nav for other things. I like to use the footer navigation for less important pages that aren't worth putting on the main nav. These include link exchange pages, sitemap pages, links to the web developer who wrote your website, and any link vault or advertising links you may have.

Footer Navigation is also a good place to use targeted anchor text - On the main nav, your homepage should be labelled "home" but on the footer nav you can get away with using your targeted key phrase as the link text instead.

A quick note on image rollovers

Rollover images are a common technique for navigation - when the mouse moves over the button, the image changes to a highlighted version. It's a nice effect, but it's old-school. This effect can almost always be reproduced using CSS and text navigation, using 2 images total instead of 2 images per button. Image rollovers are clunky because of the extra download time required. Care must be taken to preload the images so the effect is smooth, and the technique usually relies on javascript. If your site includes the standard dreamweaver rollover code MM_swapImage() then there is probably room for improvement.

Discovery level URLs

A discovery level URL is an address that people can logically guess, or one that is easy to type. Discovery level URLs are a great idea for main pages, such as contact, products and sitemap.
Consider renaming your pages as follows...

or for different languages...

Hotkey navigation

In New Zealand, it's a government standard that hotkeys are used in a consistent format. On all NZ Government websites, ALT-1 takes you to the homepage, ALT-2 takes you to the sitemap, ALT-3 for search, and ALT-9 will take you to the contact page.
Try this on or
This is known to very few users, but is a useful navigation tool for those that do.


Navigation is hard to get right, and the only way to know is to ask someone. I like to grab someone with an average level of computer knowledge (managers and salespeople are good for this) and ask them to find a certain page on the site. Ask them to find your page on small green widgets. Then the contact page.Then back to the homepage. If they struggle with these simple tasks, then your navigation might not be as effective as it should be.
Digg StumbleUpon technorati blinklist furl reddit sphinn

Tags: navigationusabilitynavigation usability