Jean du Plessis

Website Usability: Navigation Made Easy

by Jean du Plessis

2009/07/21

In my previous post on usability we discussed the importance of modern design in the user experience. I mentioned that in part 2 we would look at navigation and accessibility, but with so much information to share I thought I’d first focus on navigation. If your users cannot find their way around your website all your information becomes redundant. 

Navigating a website

There are four main methods for finding your way around the pages of a website, namely: main navigation (menu), on page navigation, breadcrumbs and search. Let's look at each of these methods and discuss how to make them as usable as possible.

Main navigation

The main navigation of a site provides paths to its main sections. Menu options should be kept uncluttered and predictable to avoid confusing or losing visitors. The three most common menu items, expected by almost all visitors, are: Home, About and Contact Us.

Quirk Navigation

These navigation points each meet an important need for your visitors – easy access to an understanding of who you are and how to contact you are naturally a priority. The Home link is especially crucial as it will allow a visitor to restart their journey should they get lost along the way (Tip: make sure your logo or graphic in the header of your website also links to the home page).

Here's a list of best practice guidelines for your main navigation:

  • Keep the main navigation consistent across your website
  • Make sure the link label is clear, concise and links to a unique section of the website
  • Use the language of your customer, not internal jargon or organisational terms
  • Highlight the current active section in the menu to indicate to the visitor where they are
  • Provide different visual representations for the three states of the menu link i.e. normal, active and hover
  • When using expanding menus, manage the visitor's expectations by providing a clear indicator that the menu will expand
  • Provide tool tip information (use the title attribute) to expand on the visitor's understanding of where the link will lead them

On-page navigation

On-page navigation refers to links outside of the menu. These links play a vital role in allowing a user to navigate to the different pages of a website section and to control the flow of a visitor's journey. These links are not only text representations but can also be displayed as images.

The golden rule with on-page navigation is to make it clearly visible and understandable. The link, whether it be text or an image, needs to clearly tell the user where they will be taken without them needing to think about it. As recommended for the main navigation, providing tool tip information can assist in informing the user where they will be heading next.

Breadcrumbs

We all remember the childhood story of Hansel and Gretel using breadcrumbs to find their way back to where they came from. Breadcrumbs on a website serve a similar purpose.

Consider the following breadcrumbs: You are here: Services > Web Development > Blogs

Providing breadcrumbs on your site not only helps the user understand exactly where they are, but also allows them to jump back to any sections higher up in the hierarchy. Breadcrumbs might not be as necessary on websites with a flat hierarchy, but on large sites with multiple levels of content they can prove a great help to the visitor.

Best practice guidelines when it comes to breadcrumbs are:

  • Place the breadcrumbs at the top, usually just below your main navigation
  • Use the greater than sign (>) to separate levels
  • Use a font size that is smaller than the normal text size of the website
  • Use the words “You are here” to assist the visitor in understanding the breadcrumbs
  • Make the last breadcrumb bold to indicate to the visitor where they are
  • Do not use them as a replacement for a page heading

Search

Search

The modern Internet user has become so accustomed to search that they expect to find it as an option on every site. With the wide range of open source search software available, website developers have the ability to add complex searching capabilities to their websites. If that seems to be a daunting task the Google Custom Search option is a good alternative. It even allows you to customise the look and feel of search results to fit into the design of your website.

Remember to place your search box in the familiar top right hand side position of your site design. Making sure the search function is accessible from every page of your site will ensure it is easy for your users to find.

Further reading

You will find valuable information regarding navigation best practices and usability at the resources below:

The next post in this series will focus on designing your site with accessibility issues in mind. Please let me know if you have any questions!

Other Posts In this Series

Also Check Out:

 

Comments

Great post Jean, I look forward to the next one in teh series.

Posted by Kat on 2009/07/21

Just came across your blog but got some useful information, keep posting.

Posted by Webplore on 2009/10/30

Make a comment

To prevent GottaQuirk from becoming spam central, we block the use of certain words like porn, sex etc. We apologise for any inconvenience, but can't spend our lives deleting messages left by spammy friends.

Captcha