Designing website navigation is a minefield; how many items, which choices, what design … it’s no surprise many companies get it wrong and end up frustrating customers. We take a look at some of the most persistent navigation myths, and at some evidence-based alternative approaches.
1. Our customers want more choice!
Your customers don’t want more choice. That might seem heresy in an online retail world driven by ever-expanding consumer choice, but it’s been proved again and again in studies. To cite just one, in 2000, two psychologists showed that customers were happier (and spent more) when a selection of jams available with their breakfast was reduced from 24 to six.
The same applies when you’re designing online navigation; the fewer choices the better. Packing your menus with every possible function slows your customers down, frustrates them and will ultimately cost you in sales. The key to clear website navigation is to start by validating the terminology and structure you use to make sure people understand them, and to keep choice limited and clear.
2. My design can fit X menu items, so that’s how many I can use!
Users come to websites to accomplish something, whether that’s having fun, buying something or consuming content. They’re there to achieve a goal and don’t generally take pleasure in hunting for the right page. So, just because you can show them a huge list of options, doesn’t mean you should. Menu options should be split into logical ‘layers’, preferably no more than two layers, with the top layer the user sees being short, unambiguous, clear and relevant.
Limited choice simplifies decision-making and that makes users happy shoppers.
3. I heard (somewhere or other) that 7±2 is the right number of options
This one just refuses to die, but it’s based on a misunderstanding of a well-known piece of psychology research. Dr George Miller was originally looking at working memory, and came up with the ‘7 plus or minus 2’ figure to describe how many pieces of information we can hold in our brain simultaneously while we process them. He was referring o stuff like musical pitches; the method doesn’t apply to written text like menu items. Even Dr Miller himself was annoyed by how far people misinterpreted his research.
The basic rule to remember that the fewer top-layer options you offer, the quicker users can get where they want to be. Six top-level menu items usually works well, or five for mobile users restricted by screen size. Additional content can be included in sub-menus, again in small groups of no more than six.
4. Burger menus! Loads of items hidden in one handy icon, let’s use those.
Ugh... burger menus. They first showed up in 1982 as part of the Xerox Star user interface which later inspired MacOS. Now, they’re everywhere, used by lots of the big players on their mobile sites, including Facebook. But the problem is, while you might be able to use a burger menu to hide loads of unsightly and complex menu items neatly away, they negatively affect user engagement. People either don’t’ see the menu or get frustrated with it, and companies who keep a close eye on their analytics have subsequently removed it.
If you have to use an ‘off canvas’ navigation menu, (one where the items are hidden until you click something), then drop that dreaded burger in favour of a button showing the word ‘menu’. Simple but effective because it clearly signals to users how to activate navigation.
5. It’s hard fitting it all in on mobile; let’s just not give all our content to mobile users.
We don’t think it was ever a very good idea to restrict content or services for mobile; you’re bound to end up frustrating users one way or another. But it’s certainly becoming a very bad idea since google announced its new stance on prioritising mobile-friendly search results. So we strongly recommend you make all of your content available to all users, however they choose to visit. That means that your navigation structure must work across mobile, desktop and tablet.
One alternative to messy nested menus that might help is the design concept of a ‘tab bar’, now part of mobile human interface guidelines for Apple and Google. Tabs appear as a single row of options giving users clearly labelled access to related pieces of content, such as different views or functions. The BBC Good Food website uses tabs to allow users to toggle between ingredients and method for a recipe, for example.
Tabs meet the criteria of being visible, obvious and succinct, and can be placed at the bottom of the screen for mobile devices, making them easy to navigate on a smartphone. (Evidence shows that target sizes for menus should be for multi-target tasks like navigation.)
The downside of using tabs is that they can only accommodate up to five items on a mobile display, but as we’ve already seen, restricting the number of navigation items has other benefits.
The starting point for navigation design is to define your site structure around five key areas. For example, on an ecommerce site you might have 'shop', 'blog', 'basket', 'contact' and 'home' represented on a tab bar. Consider opening one those five areas as default and presenting it differently on desktop and mobile. For example, further categories of 'hats', 'boots', 'gloves', 'scarves' and 'accessories' could be visible on desktop but contained within a “shop” tab on mobile.