Website Navigation Mechanisms

Contents

  1. Introduction
  2. Bread-Crumb Trails
  3. Normal Inline Links
  4. Navigation Menus
  5. Internal Search
  6. Site Maps and A–Z Indexes
  7. Link Validation / Checking
  8. Further Reading

Introduction

After content, navigation is probably the most important aspect of a website. With anything more than a simple one-page site, your visitors will need to be able to move around your pages in order to find what they're looking for. Crucial to this is understanding the site's structure, and knowing where they currently are. Remember users may arrive at an internal page from a search engine or other link, rather that starting at your site's homepage.

An important aspect of navigation is consistency within your own site, followed closely by consistency with other sites. Remember most surfers will spend most of their time elsewhere. They will be much happier if their expectations based on experience of other sites are met.

A bread-crumb trail is a sequence of links designed to show the user their current location in a site, and provide easy access to higher level pages. For a hierarchically-arranged site, the trail naturally includes links to each of the directory levels between the current page and the site home, and possibly to the site home itself. The typical arrangement is a horizontal line, running from the highest level on the left to the page itself on the right. The links are separated by right angle brackets (>) or chevrons (»). The links themselves should be short descriptive phrases, and should avoid repeating any obvious context that's implied by the links from higher levels.

For a site with more than two hierarchical levels, a bread-crumb is usually a very good idea. If you do employ one, make sure it's consistent and matches the hierarchical structure of your site. Otherwise, rather than helping users, you'll confuse them.

Practice across the web seems to vary as to whether or not to include or link the current page at the end of the the trail. I advocate always include the short title of the current page at the end of the trail, but don't make the text a link (and ensure that it's styled differently from the others). This is the only way a user can be sure whether or not the last item is the current page, and it also helps orientate the user if there are sub-pages in which the same text appears.

Normal Inline Links

Links are typically blue (or at least a different colour to the normal text) and underlined. It would be unwise to deviate too far from this norm. The most important aspect of these links is that they should be natural, conforming to user expectations in their behaviour. This means that the link text should make it more or less obvious what the user will find at the target of the link.

For accessibility reasons (some visually impaired users will just listed to the links being read out) it's important that the link text makes sense out of context and that you don't use the same text for two links which point to different places. That said, the title attribute can be useful to add extra information about the link target to avoid ugly constructions within the main text flow of the document.

As well as the destination, the manner in which it will be presented should be made clear. Anything that isn't the default new web page in the current window needs to be flagged up, and preferably avoided altogether. PDF and other document formats will generally open in 'helper applications' or offer a download dialog box. Flagging this with a "(PDF)" note, or an icon (you can do clever things with background images in CSS) will help your users. Similarly, avoid using mailto: links which will typically start up a mail client without warning. In any case, the use of such links is a bad idea from the point of view of attracting spam.

You really should avoid trying to force links to open in new windows. This doesn't fit with the web model, and can dis-orientate users (even if flagged up in advance). Moreover with the advent of tabbed browsing and increasing use of pop-up blockers there's no guarantee that efforts to force a new window will work. Trust the user. If they want a new window or tab, they should ask the browser to give them one.

As a service to your users, you might also like to differentiate between internal and external links to help them understand where they will end up. Internal links should leave them on a page with a familiar-looking set-up and consistent navigation system. External links to foreign sites, would therefore benefit from a little warning (CSS and background images can be used to good effect, e.g. on Wikipedia).

Finally, avoid unexpected links pointing to anchors within the same page, as again this breaks user expectations. A "contents" block is one good use of such links. If they are used elsewhere, make sure they are clearly flagged. For further details see Jakob Nielsen's Alertbox article Avoid in-page links.

Menus contain simple lists of important links to the main sections (and possibly subsections) within a site. They should be designed to make it as easy as possible to use. Make it obvious that your menu is indeed a menu, and make sure the link text is logical and what your users will be expecting to see.

Make sure your menu isn't too long, or people will have trouble finding what they're looking for. Seven or eight items is the most you should usually use, unless the items form a complete predictable set, or can be presented in a predictable order. (Alphabetical order only satisfies this if the link text always matches the visitors nomemclature for whatever they happen to be looking for.) If you need more than this, try to group related items under headings, and/or make them into subsections.

For accessibility and better search engine performance mark up your menus as HTML lists. Don't use flash, Java, JavaScript etc. For mouse-over effect use CSS roll-overs rather than images and JavaScript. Avoid Mystery Meat Navigation, which only serves to make things more difficult for your users. Increase clickable area with the use of display:block on the anchor elements.

If you do use dynamic 'pop-up' menus (and it's not clear that doing so is a good idea) be aware that this is no excuse for using JavaScript / DHTML. These days it's perfectly possible to have accessible and gracefully degrading pop-up menus using just CSS (well with a bit of unobtrusive JavaScript to help IE 6 understand how to :hover). For the details, you'll want to read about Suckerfish Dropdowns and Son of Suckerfish Dropdowns.

Don't change the menu ordering when entering sub-pages, or remove the item corresponding to the current section. The unexpected movement will confuse your users, and leave them with less confidence in your site. Similarly, users will be happier if the main section menu is still accessible when a section is entered, rather than replacing it with a new section menu. Opinion is divided on whether a menu item for the current page should still be a working hyper-link. (It's confusing to have links that don't go anywhere, but also confusing to find a menu link that does do anything.) What certainly is helpful though is to have the current page (and possibly section too) highlighted in the menu.

A good internal site search function is vital for all but the smallest sites, and ideally a simple search box should be available on every page of the site. Unfortunately, search is hard to do well, even when you have full control over the content to be indexed.

For a discussion of the ideals see Jakob Nielsen's Search: Visible and Simple (UseIt.com Alertbox; 2001). In terms of implementing an internal search on your own site, the options aren't ideal unless you have lots of money to spare.

Open Source internal site search engines
Not terribly good, and requires expertise to install. However, should be possible to customise to fit site style.
Free (usually) advert-supported offerings from commercial providers
Have to put up with adverts and/or rely on the philanthropy of the provider. May not be able to customise to fit in with site style, and likely to have to use an external URL. Free is good though.
Full-blown commercial products
Can be expensive, and result ranking is not always perfect. Should be able to fully integrate into site style though.

I'm afraid I don't have much experience or recommendations in this area, so I'll just provide some links to get you started:

Site Maps and A–Z Indexes

As an alternative or supplement to internal search, site owners can provide a page (or pages) of links to the other pages / sections in the site. This can take the form of a site map with an arrangement reflecting the structure of the site, or be an alphabetical A–Z index. Both can be useful if implemented well. Site maps tend to work well on smaller sites, and where there's a unambiguous structuring (i.e. it's obvious in which section any particular bit of information will be found). A–Z indexes are probably better on larger, more complex sites, and those where the structuring will be less obvious to users. Be sure to include plenty of synonyms for topics, since users won't always use the terminology you prefer.

UK local government sites seem to be a big fan of A–Z indexes. Perhaps a sign that they don't trust their other navigation mechanisms and that their search functions will return useful results? Site maps and indexes should be seen as a complimentary approach, and not a substitute for getting the other things right.

Link Validation / Checking

As a web-surfer, there is nothing more annoying than a link that doesn't work. As a webmaster, you should therefore take steps to ensure that all your links (internal and external) remain functional. It is also in your interests to help ensure that links to your site from external sites work (and continue to work).

For small sites, it's not too difficult to check your own links manually every now and again. However, automated link checkers will make your life much easier. Both the W3C Link Checker and the WDG Link Valet offer free online multi-page link-checking services. For the more technically minded, there is the Checkbot Perl script which you can run from your own server.

Another way to check for broken links which are meant to be pointing to pages within within your site is to look at the logs from your web server. Some hosts may not allow you direct access to the logs, but many will. What you're interested in is the errors (principally 404s) that result from people following incorrect or outdated links. On detecting such errors, you should consider putting a redirect in place to the correct URL, and trying to track down and fix the source of the problem.

For more details about keeping your own URLs stable, and using redirects, see Permanence and Managing Changes in the companion essay URL Design and Management.

Further Reading