How can three tiny lines engender such passion, such debate? Is it harming navigation or the solution? Love it or hate it, the Hamburger Menu is everywhere.
The Hamburger Menu is a button, usually positioned in the top corner of a webpage or app, and its function is to toggle a navigation bar between being fully displayed or collapsed within the button.
Because the three lines of the icon somewhat resemble a hamburger bun with a burger inside, it was given its nickname. But, its real name is the “collapsed menu” icon created as a space-saving tool.
The Origin of the Hamburger Menu
Back in 1981, Xerox designer Norm Cox created it as a way to communicate to users that the icon contained a list of items, the lines were meant to represent lists. Its original purpose was similar to what we see when we right click and see a menu of choices related to what we’re right-clicking over.
The Ubiquity of the Hamburger Menu
When websites were being created, the top portion of the screen was given over to what is referred to as the “navigation bar.” About, Donate, History, Store: These buttons clearly and easily guide visitors to their desired destinations. And then someone went and created the iPhone and devices got tinier and tinier. And then there was simply no room for a long row of words to guide users around the screen.
And so UX designers started using the Hamburger Menu to be a one-stop spot to hide their navigation buttons. And this seems like a fine solution to a problem. So why is it now getting pushback?
What’s Wrong with the Hamburger Menu?
It’s now more popular to hate on the once beloved menu, why? Is the Hamburger Menu really the problem, or is there a larger problem with traditional navigation? Are we unfairly projecting all of our traffic issues onto one little graphic?
No matter what’s inside the Hamburger Menu, the fact that it’s in there communicates that it’s less important than what’s outside it, making a visitor less likely to go there. That, in turn, leads to dramatically lower click rates and engagements than other buttons. Another reason for the lack of engagement is the difficulty users encounter in reaching those places where the Hamburger Menu is typically found (the upper corners).
And to make use of it, assuming that it’s reachable, a user has to:
- Come to the realization that their menu of choice isn’t visible.
- See the Hamburger Menu.
- Recognize the Hamburger Menu for what it does.
- Click it.
- Search the list of menu items.
- Find the one they want.
- Click it.
One study revealed that the use of a Hamburger Menu cuts discoverability in half.
But does this mean you should get rid of the infamous three-lined icon or are there still merits to it?
What’s Right with the Hamburger Menu?
It’s highly recognizable. Since screens got smaller, the hamburger got busy and now it can be found everywhere, on apps, websites, computer software, and video games.
We know it when we see it and can rely on it as the last place to search for what we’re looking for.
Would replacing something so well known actually improve the situation? Imagine if the little trashcan icon were changed; we’d spend hours a day in frustration.
It helps clean up your webpage while still making all the menu items available. In smaller screens, there is only so much you can highlight. Rather than diminishing that which you think is critical by making it share space with the less critical, the Hamburger Menu gives you a backup plan that everyone understands.
It’s a simple solution. It’s unassuming. And it doesn’t get in the way of your user’s experience.
While one of the criticisms is that a Hamburger Menu necessarily relegates its menu items to second-class status, you actually do need to have a place to include items that are secondary to the main goal of the page.
Conclusion
The arguments for and against the Hamburger Menu will continue as navigation issues persist in the face of smaller screens that are trying to replicate the experience of their larger cousins. It certainly has served us well and may be around for another few decades. In the meantime, UX designers may well find other solutions to our persistent and growing navigation issues.
