Navigation usability

Ben Logan - Published: 23rd Feb 2009 16:48 GMT

Navigation is absolutely critical to any website and getting it wrong will have fairly negative effects on your end users and their experience on your site.

Don't make your end user think too hard

As web site designers and architects you should be looking to simplify the navigation and make it intuitive to the end user.

Your web site user should not have a difficult time finding their way around your site and they could become extremely frustrated and never want to return to your website again if they do.

Navigation systems on the web

There are lots of different navigation systems on the web, and the most intuitive designs seem to follow trends or patterns in the areas they are presented on the page.

Inverted "L"

A typical model on the web is often referred to as the Inverted "L" navigation system. This places global navigation horizontally across the top of the site, and sub section navigation vertically along the left hand side of the page. This model is also referred to as the "C" clamp navigation system as this includes navigation horizontally across the bottom of the site, typically a footer.

The screenshot below shows the Barclays website making use of the "Inverted 'L'" navigation system.

Breadcrumb trail

A well thought out site should make use of a breadcrumb trail to allow the user to identify what section they are in and also to highlight where they have come from.

The screenshot below shows the breadcrumb trail in use on this website

Breadcrumbs are typically added to all sub pages and not the homepage itself, and are situated nearer the top of the page. The last item in the breadcrumb trail is not normally linked as it will indicate the page you are actually on.

Site map

Site maps are still very beneficial to a lot of user groups. They provide an overview of the site's key sections in a single glance. You should make sure you link to the site map from every page in the site. The site map itself does not need to cover every single page but should show a structure up to three levels deep in order to get the user as close to the specific page as possible.

Text links

Where possible you should try and apply the following in your site:

• All textual hyper links should be underlined
• Differentiate between internal links (links within the web site) and external links (links to other web sites)
• If you are linking to an external web site, try to include the full web site address (e.g. http://www.othercompany.com/) in the text
• Don't make links open in a new window by using target="_blank"
• When linking to large files, such as .avi or .pdf, try and provide in brackets the file size
• Make sure visitors know when they have been to a link by changing the colour (particularly useful for elderly people)

404 Link navigation

If a user clicks on a broken link you should try and reassure then by presenting them with a branded page from your site informing them that the page they are trying to get to is not there, and offer them some links to get back to key areas of the site. It is also really important to not overload the user with links on the custom 404 error page, as they can end up not realising the page they were trying to get to was not available due to the volume of links.

Try not to list the word "error" in the page either. Its is better to say "Page cannot be found" in order to not concern or scare the end user.

The screenshot below shows the 404 error page for CNN.com. This is a good example of a 404 error page as it does not try and list too many link options.

Title pages appropriately

It is still very important to give your web pages individual titles within the (x)HTML as this is used by search engines and assistive technology to differentiate pages. This is also useful for people who want to bookmark a specific page in your site.

back to top