Design:

How to Ensure Your Website has a Successful Navigation Scheme

Sarah Porter
  • Senior Designer
Text Block

Navigation is one of the most important aspects, if not the most important aspect, of a website. Without it, you can’t access a site’s content. Information Architecture (IA), while a much bigger topic in itself, is what’s used to inform the navigation…

Large Quote
Information architecture is the practice of deciding how to arrange the parts of something to be understandable.
Information Architecture
Text Block

IA is the starting point for any website. Broadly speaking, this is where the audit of current content, and the planning of future content and functionality takes place. By thinking about the quality and consistency of content, and how different elements can be grouped together, decisions can be made about a website’s structure.

My favourite quote at the moment is:

Large Quote
As an analogy, unless you’re Superman or a radiologist, you won’t see the skeletons when looking at a horse or a chicken, but those skeletons nevertheless make these animals very different creatures. Don’t try to ride the chicken, because the skeleton won’t support you.
Jennifer Cardello, Nielsen Norman Group
Text Block

In basic terms, the structure needs to fit the purpose of the website – and there’s no ‘one size fits all’. Defining the IA is essentially the research and planning stage of a website, informing the creation of the navigation scheme, whilst making sure it’s appropriate.

When I’m designing a website’s navigation, there are three words I always call to mind – simple, contextual and consistent.

Simple

A simple navigation can be achieved through limiting the number of navigation options and grouping them logically. In general, 3 is the maximum number of levels recommended. However, I know this is not always possible!

Fulfilling your users’ expectations is key for a successful navigation. Placing the main navigation somewhere obvious and expected, such as at the top or left-hand side of the webpage, means that users don’t have to spend time and effort searching for it.

Navigating around a website shouldn’t be hard work for the user either, and if it is, the website will likely experience a higher bounce rate. As always, the aim is to reduce the bounce rate and encourage more page visits – a simple navigation will help to achieve this.

Descriptive titles for navigation items can also help users access the content they want, easily. Generic labels may not lead users to the content they were expecting, so using more specific titles will reduce wasted clicks and in turn, reduce the amount of people giving up and leaving your site altogether.

Miller’s (1956) ‘The Magical number seven’ psychology study suggests that short-term memory can only store about seven items at a time, plus or minus two. Therefore, it makes sense to limit the number of items in your primary navigation to seven, as this means that users are less likely to scan over important items. If you can reduce this further to say, five, then you’re flying! It’s important to remember that less is more, so the fewer items you have on display, the more people are going to notice and remember them.

The way in which you order the navigation items also plays a role in emphasising the most significant item. The items placed first and last in a list should be of highest importance, as they will stand out the most to the user. For example, it is often the case that the ‘Contact’ link is placed last in the navigation list (and you can see why this would be a vital item to highlight).

Going one step further with the theme of simplicity, the navicon, or ‘hamburger icon’, has become a best practice in recent years. The navicon has its pros and cons. On one hand, it bridges the design gap between mobile and desktop navigation systems, and can create a cleaner design. Whilst on the other hand, it requires an extra click to access the content – hiding the full extent of the site on first view and relying on the user to understand what the icon represents. Most users are familiar with it, due to its use on mobile sites, however there is still a demographic that are likely to find it confusing. The decision as to whether a navicon is appropriate or not will therefore depend on the likely users of that website. This reiterates my earlier quote about the chicken and the horse – every choice made should depend on its relevancy to the audience and the purpose of the site.

Large Centred Image
Large Centred Image
Text Block

Contextual

Contextual clues are signposts to indicate where you are in the site. As vital as they are when you’re driving on a road that you don’t know, these signposts help orientate you within the surroundings of a website. Colour-coding sections and integrating a breadcrumb are great ways to provide these visual clues for the user.

Consistent

Consistency is my biggest focus; in fact, it sometimes borders on obsession! Making sure your navigation works the same way across the whole website is the best way of helping users know what to expect. Positioning the navigation in the same place on each page and in the same order will satisfy your users’ expectations.

Functionality should also be consistent. For example, if bold red text is used for hyperlinks in one place, it shouldn’t then be used for an un-clickable quote in another place, as it creates confusion and frustration. Setting rules will keep your navigation intuitive and ensure your users always know how things work. Plus it makes good design sense!

Navigation is about leading the user to where they intend to go. Follow the rules of simple, contextual and consistent, and this journey should be as straightforward as visiting the corner shop!

*All fields marked with an asterix are mandatory

Contact Form

By submitting a Contact Form enquiry, you confirm you have read our Privacy Policy.
    • Accepted file types: pdf, doc, docx, ppt, pptx, xls, xlsx, jpg, gif, png, csv.
      Max Filesize Upload is 5 MB
    • No File Chosen
      By ticking this box, you confirm that you have read and understood our Privacy Policy

Latest News

We examine why brands work with influencers...

If you’ve recently seen one of your favourite bloggers, YouTubers or Instagrammers explicitly promoting a product on their platform, then you’ve come across one of the latest trends in digital marketing: influencer marketing.

In the age of the Internet, and with increasingly effective ad-block technology, brands have had to become ever more creative with their marketing strategies in order to reach their target audience. Collaborating with so-called influencers is just one of the methods that brands have adopted to achieve this.

Newsletter Sign-up

Sign-up to our newsletter

Inspired by the world of creative design and content marketing? Keep updated with seasonal highlights from our blog, events and projects. By submitting your details, you confirm you have read our Privacy Policy.
    By ticking this box, you confirm that you have read and understood our Privacy Policy
Columns