Answering the Eternal Question: To Hamburger Menu or Not?
Should you use a hamburger menu for your mobile navigation?
That’s a matter of ongoing debate here at Sandstorm®. It’s a debate we carry out in email chains linking to the latest articles, with subject lines like, “Hamburger menus were (bad/good).”
So I’m here to finally end the debate and offer a definitive answer on whether you should use hamburger menus by saying, “It depends.”
Because that’s the truth: Hamburger menus aren’t uniformly bad or good. It all depends on your audience, your goals, and how best to structure your information so that it serves your users and your needs.
The Myth of the Hidden Menu
In his article Why and How to Avoid Hamburger Menus, Louie Abreu lays out a thoughtful argument against the pattern of using sidebar menus. For him, the biggest issues are:
- Low Discoverability—the menu is out of sight and, therefore, out of mind.
- Reduced Efficiency—it creates navigation friction for the user.
- Navigation Clashing—it clutters up and overloads the navigation bar.
- Lack of Glanceability—information about specific items is harder to surface.
But I don’t quite buy the rest of his argument.
Since 2014, when the article was published, hamburger menus have become a common pattern for some of the most highly trafficked sites on the web, including Google and Facebook. And in countless usability studies, we’ve seen that most people don’t mind the ‘hidden’ menu on mobile devices.
The main issue we’ve seen in usability studies is some users don’t understand the three-horizontal-lines ‘hamburger’ icon. This is consistent with an A/B testing experiment conducted by Sites for Profit, which suggests that the three-horizontal-lines ‘hamburger’ icon is less effective than the ‘menu’ label. So there is definitely evidence that supports adding a menu label underneath the icon or simply using the word ‘menu’ instead of the icon.
What users really want is something that’s designed for them, whether it includes a hamburger menu or not—and I’d argue that most users don’t know that this is even a debate.
So how do you effectively use a hamburger menu without alienating users?
Considerations Before Using Hamburger Menus
1. If your navigation structure is small and simple, why not just show it?
Websites with a deep menu structure—like large enterprise software companies—can benefit from hamburger menus. But small websites, like those for a local business, have limited functionality and can display their full navigation. Or you could use one of these emerging patterns for mobile navigation.
2. Label your menu with the word menu.
Our own tests and others have shown that just adding the word ‘menu’ below the hamburger icon increases user engagement. Or ditch the icon and just use the ‘menu’ label.
3. If you have the screen width to display your menu, you should do it.
Avoid hiding your navigation on larger screens. If you don’t have to use a hamburger menu on tablet, then don’t.
4. Nesting can be a problem, if your menu structure is too deep, there’s probably something wrong with your architecture.
The hamburger/offscreen navigation pattern can get tricky if your menu structure is deep and wide. It’s probably not a good pattern to use if this is the case, but the first thing you should do is consider revising your site architecture so it’s less complex.
If you need help with your mobile navigation, Sandstorm can help. From usability testing to user experience design, we’ll help you find the solution that works best for your users.
