Updated on February 18, 2024
The hamburger icon is a popular icon used by designers to represent a hidden navigation menu that will appear when the user clicks on the icon.
Many designers believe that the icon has achieved universal status and that users understand what the icon represents. Many large websites and brands rely on it from Google to Starbucks.
I believe the icon is far from being universally recognized. If we must use the icon we need to take some additional steps to make it more clear to the user where the hidden menu is located.
What does the hamburger icon look like it represents?
Forget what you know about the hamburger icon for a moment. Forget that you are a savvy web user and try to imagine yourself looking at the icon for the very first time and tasked with identifying what the icon represents.
The fact that we call it the hamburger icon tells me it doesn’t do a great job of visually representing a hidden navigation menu.
The search icon looks like a magnifying glass. The home icon, well it looks like a home. These are examples of icons that visually do a great job of representing the action that they perform to the point where it’s difficult to imagine any other icon representing the same action.
When the user does not know what the hamburger icon represents we are leaving it up to chance that they will discover the hidden navigation for themselves.
Are other icons used to represent a hidden navigation menu?
Making matters more confusing, we have not come to the consensus on which icon represents a hidden navigation menu. In addition to the hamburger we have the grid, arrow, and plus sign. The hamburger icon is just one of a handful of icons used to represent hidden navigation.
Google currently uses two different icons to denote the hidden navigation. In the screenshots below, the hamburger and the grid display a hidden menu when the user clicks on them.
Above, the hamburger icon displays the navigation menu in a list. The grid icon displays the navigation menu in a grid. This appears to be more semantically correct but I would argue that for all intents and purposes that they still perform the same action. Do we really want to put the burden on users to learn different icons depending on the type of hidden menu will be displayed?
How can we claim that the icon has achieved universal status when us designers have not come to a consensus ourselves?
Making it clear
To make it clear to users that there is a hidden navigation menu, I recommend taking a few steps.
- Add a label to the icon like MENU
- Make the icon look like a button
- Give it enough space so it does not get lost among other elements in your header
What do the usability studies say?
Exis Web recently ran two studies to put the icon to the test. The tests were specifically testing conversion rate with a few different ways of hiding the navigation.
The top performing option in terms of conversion rate was MENU + border. The second best performing option was the hamburger icon + MENU + border. It would appear that, according to this study at least, making it look like a button and using a MENU label is the best way to present a hidden navigation.
Read about the tests here: Do Users Understand Mobile Menu Icons? and Mobile Menu AB Tested: Hamburger Not the Best Choice?
Send me your usability study and I would be happy to add it if it is informative.