The Principles of Good Web Design Part 2: Navigation

by Tom Kenny (@tkenny)

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.


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


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

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.


Mia & Maggie use supplemental text to aid navigation

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

Improve your design knowledge in just a minute or two a day, for free


You'll get a free email every Monday to Friday with actionable design details that will increase the effectiveness of your designs. Each one only takes about a minute or two to read.

Free. No spam. Unsubscribe anytime.

by Tom Kenny

I’m a freelance web designer and front-end developer with 9 years of experience designing for the web. Follow me on Twitter here.