Navigation Guidelines

The most common form of getting from one place to another on a website is the navigation bar. It’s not the way though, you could have a search box, breadcrumbs, tag clouds, site map and so on. But whichever system you decide to use, there are a few ground rules for each that you need to consider.

The Navigation Bar

This navigation bar normally describes the links to the primary areas of the website. Ideally it should use simple text anchors that fully describe the target page.

The first link in your navigation bar should be to your home page and the last one to your contact page. In between should be no more than 4 or 5 links. Each one of these needs to be clearly labeled with a description of the target page:  ‘Gardening Equipment’ for example rather than just ‘Equipment’. There are two reasons for this:

1. It provides more information to the visitor (who may be new to the site).

2. The search engines can link the anchor text to the target page.

Ambiguous or confusing links can put potential customers off – so make your link text as clear as possible.

Move your links to the ‘about us’ page, privacy policy, legal and so on down to the footer. They may be very interesting but since they are secondary to primary aim of the site (to sell something or provide information) move them out of the way.

Location

The most popular locations for a navigation bar are across the top or down the left. The exception are blogs which for some reason have their navigation down the right. My primary navigation is top left with everything else off to the right (the secondary navigation).  You will find your own system but do not make it too radical – Internet users don’t like surprises. A general rule of thumb is to keep the navigation at the top unless you have too many links in which case you can put it down the side. But too many links means you can lose focus and the visitor won’t know what to do. Fun isn’t it.

Dropdowns

Complex websites sometimes make use of dropdown menus to provide further options from the navigation bar. Whilst this makes the job of the webmaster easier, it doesn’t always help the visitor. Unless they are aware of the dropdown they won’t know to ‘hover’ over the link to see the options. And if the visitor is using a PDA then it is likely that the drop down won’t work. Some drops down do work though. The ‘mega menu’ used by sites such as JohnLewis are very easy to use:

In general though, if you can build a navigation system without dropdowns so much the better.

Resources:

Eyetrack Report on Browser Hotspots from poynterextra.org

Son of Suckerfish dropdown menu from: www.htmldog.com

Site Search

This is often considered the most usable method of finding information within a site providing that it is used properly – the visitor does not have to worry about which link to activate – all they need do is enter a search word and press GO or SEARCH. This is how search engines like www.google.com or www.ask.com work. The downside is that it can take time to set up, will often need to advertise the site search provider and may not display the results in a manner that matches the site style.

If however you want to add a search facility to your site, www.freefind.com or www.google.com (among many others) can do it for you.

Remember: Some users choose a search facility before using any other navigation feature, other users will use a search facility as a last resort – so make sure you do not use the search facility as your only form of navigation.

Breadcrumbs

On some sites you will a ‘breadcrumb trail’ near the top of the page that usually looks a bit like this:

Home > Products > Computers > Peripherals

There are two types of breadcrumb. The first tells the visitor where they are in the site. The second is more dynamic and show the path the visitor has taken to get to that page.

Position Breadcrumbs

If the site is organized properly then it is easy to set up the position breadcrumb trail as it is simply a matter of moving up and down the folders. Position breadcrumbs have the advantage that should a visitor land on a page somewhere deep inside the site they can find their way back to the various index pages that make up the site hierarchy.

It follows therefore that you need to organize your site. Use folders and sub-folders to keep related information together so that it becomes easier to build your breadcrumbs.

Path Breadcrumbs

If you set up a path breadcrumb trail it only becomes useful once the visitor has navigated through a number of pages. Once they have done so, it has the advantage over position breadcrumbs because it allows the visitor to track their navigation history.

It’s up to you which one you use – both have the advantages and disadvantages.

Resources:

Usability article from Jacob Nielsen: useit.com.

JavaScript breadcrumb code for position and history breadcrumbs: whitford.id.au/webmonkey. Note: the script only works if you have a structured site hierarchy (sure I’ve mentioned this already).

Tag Clouds

Now very popular with social networking sites, a tag cloud is just that: a cloud of links the size of which indicates the popularity of that link. A useful indicator of what other people are looking at, tag clouds only really work if you have a lot of articles and posts to tag, they won’t help your navigation if you have a small site dedicated to cream cheese.

Resources:

How to build a Tag Cloud by petefreitag.com

Inline Links

These are the links you place within the main content of the page. There is no law that says links have to be blue and underlined but there is increasing evidence that sticking to the convention will increase your Click Through Rate (CTR).

Make sure you provide plenty of textual links within the page content to allow the visitor to cross reference information. Note however that too many links within within text can slow down reading flow.

Ensure as well that your inline links are sufficiently different from the rest of the page – nothing worse than trying to click on a link that isn’t.

You should also differentiate between internal links (links within the web site) and external links (links to other web sites). If you are linking within the web site, simply add the link to the appropriate text. If you are linking to an external web site, try to include the full web site address (e.g. www.website.com) in the text so users know they are going to a different web site before they click on the link.

Resources:

Making your Links Work: www.seoresearchlabs.com

Link Colours: www.marketingexperimentsblog.com

The Footer

This is where you need to bung all those ‘corporate’ links. The about us, privacy policy, legal etc. These are the links you may need but are secondary to the main purpose of the site. It is worth repeating the primary navigation links here as well – visitors do occasionally get to the bottom of a page and it is nice to give them something to do when they get there.

Coding

The most effective navigation systems use simple text links. Add a bit of CSS to make them look pretty but underneath all they are is a bunch of text links. Almost nothing can go wrong, they will work with every operating system/browser combination and they are easy to maintain.

If you want to open external links in a new window then it can be useful to include a note on the page to that effect, ie: ‘external links open in a new window’.

But if you really want a JavaScript or Flash driven navigation system then remember that not all browsers support these options, some users turn it off and they make it difficult for the robots to index your site. And the increasing use of mobile computing (PDA, Mobile phone etc) means that you may be limited to the text-only option.

There are also accessibility issues, screen readers for example cannot process JavaScript or flash. But if you still think it is worth the hassle then don’t let me stop you.

And Finally

Keep your navigation system the same across the whole site. Do not change colours or styles or heaven forbid the location of the links. Users will soon get fed up and leave.

Make sure the HOME and CONTACT links are on every page – it can be very frustrating to a visitor to read something interesting and have to go hunting for the email link.