UX Best Practices: Don’t Use Hamburger Menus When You Have Room to Display Primary Navigation Menu Items
It has become popular to use hamburger menus—an icon with three parallel horizontal lines, kind of like a sandwich or hamburger—to hide navigation menu items. On devices with less real estate (like smartphones), using a hamburger menu is sometimes a necessity. When a hamburger menu is used in these circumstances, it should be accompanied by a clear “menu” label above or below the horizontal lines.
A hamburger menu should not be used when there is plenty of real estate to display menu items. Users rely on navigation menu items to understand what site they are on and what they can do on the site. Many users still do not know what the three lines indicate—which is why the icon should be labeled “menu” when used—and, even if they do, it’s an extra step to see information that is critical to understanding the website or app. Making the menu obvious will only serve to help users accomplish the tasks they set out to do. And helping users accomplish their goals also helps you achieve your business goals, right? Even on devices with limited real estate, when you are able to display the most important items, you’ll notice that users engage with them more than items that are hidden.
Sometimes hamburger menus are used to hide an unwieldy list of navigation menu items. If that’s the case, your digital product is going to deter users regardless of whether you hide the navigation or not. So be sure to carefully craft menu items based on user research. The menu items—and the entire structure of the digital product—should align with the mental model of the people using the product.
To recap:
Don’t hide menu items when there is plenty of real estate to display them.
When you do have to use a hamburger menu, clearly label it with the word “menu.”
Ensure any menu item—and the site’s overall information architecture—are based on user research, not the preferences of your product or marketing departments.
We discuss UX best practices in our UX Strategy for Successful Digital Experiences workshop. Check out all of our corporate workshops.