Summary: Hamburger menus are a more familiar pattern today than 10 years ago, but the same old best practices for hidden navigation still apply.
Few icons in digital design have sparked as much debate over the last decade as the hamburger. The hamburger menu — which earned its nickname because of its abstract, stacked, hamburger-like appearance — was originally embraced as a clever way to save space on small screens by hiding the main navigation behind a single button. While this approach decluttered the interface, it also contributed to poor usability: Users overlooked it and took longer to complete tasks on both mobile and desktop.
Though it was a novel pattern then, today, most users recognize the hamburger menu and know what it means. Still, many of the same design risks apply. This article revisits our early hamburger-menu findings, shares research about the recognizability of the hamburger today, and offers visual-design best practices for the hamburger icon.
Then: The Hamburger Lowered Interface Usability
Back in 2015–2016, we conducted a series of qualitative and quantitative studies comparing hidden-navigation patterns (like hamburger menus) to visible, always-on navigation. The results were clear and consistent:
Users engaged less with content hidden behind a hamburger-menu icon.
Task success rates dropped.
Time on task increased.
Overall satisfaction decreased.
These issues were true on both mobile and desktop interfaces (though they were exacerbated for desktop).
... continue reading