What Makes a Good Navigation Menu on Mobile Devices?

Written by Wholegrain Team - June 1, 2014

The navigation menu is one of the most important design elements on a website, as it guides visitors beyond your homepage and gives them a sense of orientation. Its importance is magnified on business websites, because if the menu isn’t doing its job properly, your customers won’t be able to find what they’re looking for, and they will disappear somewhere else. Which means you’re practically throwing custom at your main competitors.

Over the last few years, the use of internet on mobile devices has grown at a phenomenal rate. This growth has given web designers a new challenge – with the obvious limitations of mobile devices, how do you design a good navigation menu for them?

What Makes a Good Menu?

Before we delve into the world of mobile internet, let’s quickly consider what makes a good menu.

Start with the content. You may think you know how you want to organise the content on your website, but until you have a rough outline, organised into usable, logical chunks, you won’t know how to prioritise your menu.

Use simple, precise language so it’s obvious to your customers what their choices are. Getting all fancy and clever may seem like a good idea, but if people don’t quickly understand the options presented to them, they will go elsewhere.

Don’t overwhelm people with choice. When customers are faced with a huge list of options they can feel flustered, confused, and they will simply drop out. The optimum number of options for a main menu is still a matter of debate, but between 4 and 7 is the accepted norm.

Think carefully about the placement of your menu buttons. On a desktop, it is generally a good idea to place the action items on the right-hand side because people read from left to right (the opposite is true in Arabic speaking countries). This naturally suggests momentum moving forwards.

Issues Concerning Mobile Menus

Mobile devices have obvious limitations. Their screens are much smaller and a different shape to those on your desktop or laptop, so space is at a premium. But if anything, their menus are even more important.

The average mobile user is busy, distracted and on the go. Sure, some people may browse on their mobiles while in a long queue or on public transport, but generally mobile users’ needs are different. They’re looking for something specific – directions, bank balances, public transport links. Their needs are immediate, and their attention span is short. So the best practice guidelines above are amplified.

Plus, mobile internet is relatively new in the grand scheme of things. The average computer user has used computers for some time. In fact, it’s become second nature to us. Years of browsing online means we know where to look for a navigation menu, or how to use a sidebar.

But place that average computer user in front of a mobile device, and they’re stumped. Things don’t look the same, and they don’t work the same – you can’t hover over a dropdown menu, or right-click. Your fingers aren’t as precise as a mouse and they obscure what they’re tapping. And where’s the damn back button?

To add to the confusion, because mobile internet is still in its relative infancy, designers are still tinkering with different ideas and concepts to come up with the perfect solution. Which means mobile websites aren’t yet uniform in terms of design.

Elements of a Good Mobile Menu

Fortunately, there are some excellent solutions around for designing a good navigation menu for mobile devices. Here are some of our top tips.

  1. Reduce your menu buttons to the absolute minimum and label them using clear, precise language to help guide your customers. Bear in mind that mobile users aren’t known for their patience, so limit the number of clicks to get to the product options.
  2. Make sure your site has a prominent search button, so your users don’t have to spend ages navigating through pages of products if they know exactly what they’re looking for. And ensure that you have a visible back button.
  3. Because mobile internet is portrait rather than landscape, organising your menu buttons vertically instead of horizontally using stackable buttons is an excellent way of organising your content. If you wish to add additional layers of navigation, adding a downward-facing arrow to the side of the menu indicates there are more options underneath.
  4. If you want to add a little bit of personality to your menu, consider using icons instead of a plain old list. It will give your designer the chance to be more creative and will bring a little style to your mobile website. Plus, they’re more forgiving to fat thumbs.
  5. If you prefer your mobile website to have a sleek, clean feel, place a simple ‘menu’ button in a prominent location on your page, with the nested navigation menu accessible with a click.
  6. An alternative option that’s becoming increasingly popular is the three-line menu, often referred to as a ‘nav burger’ because it resembles a burger. While it may not immediately scream to people ‘hey, I’m a menu’, its adoption by giants such as Facebook, and use on web browsers such as Chrome and Firefox, means it’s on its way to becoming the go-to option for a clean feel and efficient use of space.
  7. And whatever you do, avoid horizontal scrolling and make sure your menu options are big enough to easily click with your thumb.

The relative newness of mobile internet means that designers are still tweaking and trying different options, so there’s isn’t a ‘one size fits all’ solution. Different types of menu will work better depending on the purpose of the site – visitors to a news website will want fast access to the headlines, whereas if they’re searching for their local hairdresser they will want to find the address and contact details quickly.

Because mobile web design is still evolving, now is the perfect time to be creative and experiment with what works best for your site. Just make sure that it’s intuitive and easy for your customer to find what they’re looking for.

What sort of mobile navigation do you prefer? Join in the discussion below.