Ah, the hamburger menu icon – the UI element so ubiquitous it’s nicknamed after America’s favorite sandwich. We’ve seen it everywhere from Facebook’s mobile interface to the desktop version of the New York Times. Like any design pattern, the hamburger has been subject to its fair share of feedback – both good and bad. Is it the perfect design solution, or poison to user interaction? Let’s dive into the debate.
But first, some background.
With adopters like Google and Facebook, the hamburger icon must be a pretty recent phenomenon, right? Wrong. It actually first appeared in 1981, representing the contextual menu on the Xerox Star workstation.
That’s right – the hamburger is pure old-school. However, we owe our modern rendition of the menu icon to a much smaller device: the mobile phone. Because the hamburger button addresses the space constraints of mobile design, it has become mainstream in apps and mobile-optimized websites – and it seems everyone has an opinion on its effectiveness.
The Good
On the pro side of the discussion, there’s the obvious: the hamburger button frees up valuable space. It ensures that menu items continue to be available in a responsive design – which is particularly important in mobile and app development. “Google design patterns for Android currently recommend a (modified) hamburger icon for the Android navigation drawer, and as users experience this paradigm more, I expect it to become a standard part of the interface,” says Mike Behnke, world-class software engineer and hamburger proponent at Enlighten. When users doesn’t have to worry about a navigation bar, they can focus primarily on poignant content in both mobile and desktop environments.
The Bad
On the flip side of the patty, there’s the reduction in user interaction. Some usability experts are concerned that users may not know what the icon represents, and that they therefore won’t even tap or click it. If they never take that first step, they’ll lose access to the site navigation likely miss important content. Others argue that by requiring the user to tap open a side menu, you’re increasing the number of taps a user has to make, especially if they frequently need to navigate to other sections of the site. More taps = more opportunities for someone to leave your website before they’ve seen what you want them to see.
The Conclusions
Surprisingly, given all of the opinions floating around, not much hard data exists to either support or discredit the use of the hamburger menu icon. A couple of limited studies and A/B tests, in combination with the fact that even Facebook has thrown it away, aren’t enough to definitively resolve the debate.
Sebastian Ferrari, user experience extraordinaire and our resident hamburger menu expert, believes that there’s still a time and place for the hamburger (outside of your Labor Day barbeque). “Everything depends on the context,” he says. “Consider the particular audience you might be targeting, and what your goals are – it could be that you want to encourage users to explore and discover different features and not reveal everything at once.”
Usability debates aside, the icon hamburger button probably isn’t going away anytime soon – so it’s likely that usage of the hamburger button and the expectations for its functionality will evolve over time. And remember, part of the excitement of designing for digital is that change is inevitable and relentless. Today’s hamburger icon could be tomorrow’s floppy-disk save icon.
