We’re literally starting at the top for our first blog post in the ‘why isn’t my website working’ series. Today our focus is on best practice for website navigation. We promise it’s more interesting than it sounds. Let us know what you think, and keep an eye out for future posts as we’re going to be covering a lot of digital content over the next few months.
Why is website navigation important?
Navigation is one of, if not *the* most important aspect of a website. Good navigation helps guide users to the content they need, the products they want to buy, or the people they want to speak with.
There’s a good reason that the first 100 pixels of most websites you see look very similar, right down to the terminology used to label pages and categories. Because humans are very good at recognising patterns, we look for them everywhere. We’re also lazy, we try to minimise cognitive load, and we’re pretty good at that, too. Which is why patterns are so important, they help us to be lazy. If you break a well known pattern, you’re adding to the cognitive load of the user. You may have heard this referred to as ‘perceptual fluency’ – things that are easy to process are thought of more positively than things that are difficult.
To put this in ‘real world’ terms; we’ve all had the experience of using taps that have the hot and cold plumbed the wrong way around, or light switches that are in the wrong room. The experience is frustrating, it takes the ‘reflex’ out of the interaction. This might not seem like a big deal, but each of these difficult interactions adds to the user’s cognitive load. And website users are fickle beings, there’s almost always an alternative product to buy or person to speak to, and they’re often only a couple of clicks away.
To help avoid cognitive load the two main aspects of navigation that should be front of mind:
Design and position- that’s what it looks like and where it is on the page.
Labelling and organisation - that’s the terminology or wording you use and how they’re grouped.
Let’s look at those in a bit more detail.
Design and position
If you didn’t know before, hopefully you do now – navigation is not a great place to be trying out fancy new things. Here are some design patterns that are worth sticking to:
- Keep it up top: there are some exceptions to this rule, but generally speaking a navigation should be positioned at the top of the page. You want to make it really, really obvious that it’s the navigation. Some websites will position their navigation vertically to the left. This is fine, but as the browser scales down the navigation will have to adapt to a mobile view sooner.
- Speaking of mobile: it’s likely that the majority of your website’s traffic is from mobile, so in most cases it’s worth thinking about mobile first. It’s also generally easier to scale a menu design up than it is to scale down. At the smallest screen sizes you’ll likely have to use what’s known as a hamburger menu. Again, this isn’t the best place to try out new design patterns, most users have become accustomed to the two or three-line icon we see on most mobile websites and apps.
Apple use a two-line icon for their hamburger menu
Another important aspect of a mobile navigation is to remember that fingers are fatter than cursors. Make sure the touch targets of your links are big enough, and that there’s enough spacing around each element to avoid accidental clicks.
- Contrast is king: contrast can be used to visually distinguish the navigation from other elements on the page, but contrast can also help users understand the hierarchy of information within the navigation itself. Colour, spacing and good typography can all be used together to create a user-friendly navigation.
- Keep it accessible: make sure colour contrast meets WCAG AA guidelines (at least), that all links are appropriately tagged to aid screen-readers, and try to stick to 16px or larger for font sizes. Even on a small site with fewer pages this last point might mean dropping unimportant pages out of the navigation entirely, or…
- Use a subnav: subnavs are great for grouping different types of content into areas of your website, e.g a shop vs a blog, but we’ll talk more about that in labelling and organisation.
A subnav should be designed in a such way that it’s obvious it’s part of the main navigation, but different enough that it’s obviously a new level. Subnavs can get big if you have lots of categories and pages, so make sure it’s easy to get out of, especially on mobile. It’s easy to get lost in big menus so having an easy reset makes that experience less frustrating.
ASOS are often held up as a good example of an eCommerce website. Their menu structure is easy to navigate and understand, helping guide users through an enormous range of products.
- Don’t use buttons: a user understands that links in the navigation are clickable, you don’t need each option to be a button. However, if you want to draw attention to a specific link, like ‘get in touch’ or ‘sale’ then having one or two buttons in the navigation can help direct users to these CTAs.
Labelling and organisation
For a standard ‘brochure website’ labelling navigation is usually pretty straight forward: Home, About, What we do, Blog, Contact etc. this is perhaps oversimplified, but you get the gist. Navigation choices become a little more complicated when you start adding products and categories. They inherently come with some subjectivity, and what seems obvious to you as the brand owner or manager, may not be as obvious to the person coming in cold.
My go-to phrase to clients, and often to myself, is “you’re telling them what you want to say, not what they want to hear” and this is usually a very important distinction to make. Sometimes those two things will line up, but more often than not they won’t.
With that in mind, here are a few key points to bear in mind when labelling and organising your navigation items:
- Keep it simple: your categories and subcategories (if you have them) should be easy to understand and clearly labelled. Be descriptive, eg. ‘bakery’, ‘dairy’, ‘fruits & vegetables’ – a user will easily understand what each of those sections is likely to include. If you need to add subcategories – eg. ‘cakes’, ‘bread’, ‘pastries’ – then follow the same rules.
- Avoid using complex language or technical jargon: whichever source you’d prefer to believe – either the UK government (2011) 14.9% of the adult population in England can read at a 9 to 11 year old level that’s 1 in 6 adults; or OECD (2015) 16.4% of adults in England have literacy skills at or below level 1 that’s 1 in 7 adults – one thing is true: your website needs to serve a wide range of literacy proficiency. If you’re using complex words where simple ones would do, or using industry jargon where standard terminology would do, you could well be alienating a portion of your customer base.
- Group similar items: it seems obvious, but you’d be surprised how often a product falls in an unexpected category – again, it’s important to understand how your customer might categorise your products, not how you would like them to categorise your products. Grouping similar items can also be great for upsell. If your customer sees a premium version of your product next to a basic version they might be persuaded to upgrade.
- Provide search functionality: for websites with a lot of products search functionality can be very useful. However, with more functionality comes more places for users to become frustrated. If you’re going to include search, make sure it works!
- Use analytics and feedback: delve into your analytics and try to get user feedback. They’ll soon tell you if something isn’t where they thought it should be. Or if they’re having trouble finding what they want. Analytics can also tell you a lot, but be careful, correlation isn’t always causation.
- Be consistent: again, this might sound obvious, but be consistent in your use of labelling and terminology. If you’ve got CTAs for popular categories make sure you call them the same thing.
Patagonia have a lot to say. Not only are they a well respected clothing brand, they also take part in many social and societal causes and have a heritage and community to consider. Their navigation is well grouped, even with a large number of products they’ve still managed to find a way to make it easy for the user to get where they need to go.
Closing Thoughts
What we’ve covered here is by no means an exhaustive list, but fixing the issues outlined in this post will get you well on your way to having a user-friendly and well functioning navigation.
Now you know the basics, how does your website navigation compare?
At DECIDE we are now offering free website ‘health checks’ where we have a little poke around under the bonnet to give you some actionable takeaways on how to improve your website’s performance. So if you think yours is in need of some TLC then get in touch to book your workshop.
Keep an eye out for our other posts in the series as we’ll be covering many areas of web design and build.
