The Principles of Good Web Design Part 2: Navigation

21st September, 2009
Tom Kenny
Articles

This is the second part in this series of The Principles of Good Web Design. The other parts are listed below:

Navigation is one of the most important things to consider when designing a website. After all, it is one of the main ways that will determine how a user interacts with a site. It is also an important thing to consider as it has an effect on usability. Poor use of navigation can cause confusion which has a negative effect on usability. We will discuss the principles of how this can be avoided in this article.

navigation

Location, Location, Location

Navigation by design, needs to give the user awareness of where they are in the site’s structure. The most effective way of achieving this is to highlight the current section in the navigation itself. A great example of this can be seen below at Kingpin Social:

An example of navigation clearly communicating location

Breadcrumbs

Another way of communicating where a user is on a site is through the use of breadcrumbs. Breadcrumbs are especially needed for more complex sites that have multiple levels of navigation. The name comes from leaving a path behind from which you can follow back to your original location. So essentially it shows the exact point where you are, while giving you options to go back to other previous steps in the site’s structure.

Breadcrumbs example at dabs.com

Clear, Simple and Easy to Understand

One of the easiestÂ ways of having a positive effect on usability is to make the navigation itself clear, simple and easy to understand. Some of this overlaps with good use of whitespace as discussed in part one of this series as that will certainly help make navigation easier to read.

Mimeo uses colour to help make the navigation clear and easy to understand

Clear wording is another critical part of navigation. By communicating clearly through wording, you reduce any confusion as to where the link will take the user through to.

Another technique is to use supplemental text to reinforce the navigation. This is often used in the main navigation but as you can see in the example below, Mia and Maggie also use it in the secondary navigation in the sidebar on the left.