Should I use a Hamburger menu for my website?
We’ve heard this question a lot over the last few months, so we thought we’d provide some clarity on when and why ‘hamburger menus’ are useful, and what you should be considering when making this decision.
But first, let’s recap the question:
“Our team have proposed using a hamburger menu for desktop which I'm unsure of from a content discovery perspective. Would you be able to give me a summary of the pros and cons of this approach from a UX perspective, and from a development cost perspective?”
Now, I know a bit about UX thinking, but certainly not enough to provide the value needed by the client who asked this question, or to you the reader of this post. Instead, I asked James Fox our Lead User Experience Specialist for his thoughts and insight on this topic (feel free to connect with James on Linkedin).
Over to you James…
It’s not a simple answer
Well, the use of the burger menu on non-touch screen devices is a contentious issue and it’s been cropping up with increased frequency. Ultimately, the question we should be asking is ‘What is the most appropriate navigation pattern for our site?’ This isn't intended to be a cop out, but essentially the only way to answer this question for your business and your audience is to test, learn and optimise.
Design and development cost
The decision to use a hamburger menu, especially on an ecommerce platform, should be solely focused on future revenue potential, not stylistic preferences or development costs. It should be about ensuring customers can find the content they are looking for; supporting the structure, content and purpose of the site; and ensuring the user can complete their goal.
You don’t want to miss out on potential revenue in the future because the usability and user experience hasn’t been properly tested. Marginal increases, even 0.2%, could have financial impacts well into six figures, so testing early and testing often (both pre and post launch) is a no brainer.
When to use a burger menu
The emergence of the burger menu stemmed from the need to hide a navigation when on a mobile device. Designing for screens with tap interactions and less real estate presented designers with different interaction design problems to solve.
As a result, the answer for when you should use a burger menu is: when you need to.
Design is about solving a problem, something the burger menu has been successful at (though arguably there is still some debate about this). But using it purely to improve an aesthetic or as a different approach to using a mega menu isn't the right reasoning.
Here are some of the common instances when people think they should use a burger menu, and our take on their reasoning:
DESIGNING A MENU SYSTEM FOR MOBILE OR TABLET
You would think this is the obvious answer, but there have been shifts in industry thinking lately. Current Android and iOS guidelines differ on the types of menu that are recommended for navigation on each operating system. Android recommends the burger menu while iOS considers the tab bar the best pattern to use. It’s important that these guidelines are considered when designing native apps.
For mobile websites, the burger menu is somewhat of a staple. As it’s so widely used and recognised by users it can be harder, and often detrimental, to design a pattern that does not need to use it. This is especially true for deeper or more complex navigational structures.
However, it’s still important the pattern you use fits a purpose and is recognisable as a menu by your customers. And, at the risk of sounding like a broken record, the only way to know this is to test it.
DESIGNING A DIGITAL EXPERIENCE WHERE THE PRODUCT HAS A YOUNGER OR DIGITALLY SAVVY TARGET AUDIENCE
This is a fairly simple decision to make. Younger generations, or a more digitally savvy audience (I won’t use the ‘M’ word - it doesn’t necessarily apply here) are more likely to recognise what the menu symbol means, therefore the burger menu is more likely to feel more intuitive as a pattern. But once again, it's better to test and learn when the issue is something as fundamental as navigation.
What if we can’t test our solution?
Unfortunately we don’t live in an ideal world. Testing budgets aren’t always where they need to be, and deadlines and time frames don’t always allow for thorough usability testing time.
In this case, just go out and show people. Anyone you can find in the street, in the office, at a coffee shop or down the pub (but not too drunk) who will give you five minutes of their time will do. Guerilla testing like this might not give you the definitive answers a lab test would, but it will give you an indication for if your navigation pattern is suitable for the case you have designed it for.
Don’t even have the time for that? Here are some key questions you can ask to understand the risk of using more modern design patterns without testing the solution:
What is the demographic of your audience?
Is there is a proportion that are older or that are likely to be less digitally savvy? Then we might recommend against using the ‘burger’ menu as it’s not always understood to represent a menu or navigation.
If you don’t know the demographic of your audience then we can help - Get in touch.
IS THERE A NEED FOR A BURGER MENU?
On desktop or larger screen sizes there is more real-estate, therefore falling back on a mobile centric navigation pattern needs to have a solid reason. Designing an ‘exposed’ menu (that isn’t hidden) that also works for touch screen interaction is probably the safer and more recognised approach for desktop websites.
If you do use a ‘burger’ menu, it’s also worth considering if the burger icon is enough of a visual cue to your users. We would recommend you include an in-line label that reads ‘Menu’ or something similar. This will clearly identify the icon to users and could lead to success where a lone icon did not.
So should I use a burger menu?
If you’re trying to drive people to a key part of your website/app, or want them to browse the site more generally, then it’s probably best to use an exposed navigation with a ‘view more’ link visible for lower priority pages.
If it’s an immersive campaign page or experience that is driving to a specific CTA then you can consider “hiding” the navigation in a typical burger menu, just be aware some people still don’t know what it is.
As for the ultimate recommendation for the client who asked us, we recommended that they used a traditional navigation for the desktop experience. Your audience may be different though, with different needs and digital maturity, so there really is no definitive answer.