Should we really kill the hamburger button?
About 2 years ago, TechCrunch wrote this post titled Kill The Hamburger Button. If you take a look at a bunch of mobile apps today, it would seem as if most of them listened, at least the iOs ones.
It may not take long for the once-favorite hamburger menus to become the <blink> tag of tomorrow — that thing despised by every designer.
But, are hamburger menus absolutely bad?
Let’s take a step back and have a quick look at how they became such a common choice of navigation on mobile.
Brief history
Though it was originally introduced as part of Xerox Star — world’s first GUI, it resurfaced in late 2000’s, when everyone was trying to make their websites “responsive”. It was further standardized by UI frameworks like Bootstrap.
It gained momentum so quickly because it was so easy to make the desktop’s top nav bar shrink to a hamburger menu on mobile, while keeping the menu accessible via one tap.
It was also adopted by apps like Facebook and Twitter. Finally it achieved official recognition when Google’s Material Design was released. It was used by most of Google’s apps themselves (even their iOS versions), and became the default navigation element of Android apps.
Why they are bad
As rightly pointed out in the TechCrunch post,
What’s out of sight is out of mind.
As a result, when you use hamburger menus for your primary navigation, most of your features end up unnoticed and hence unused.
Take the Medium example above. Until now, I had no idea that Medium has “Audio” content.
The most commonly suggested alternative is the tab bar (or bottom navigation).
As validated by Facebook, this works much better than hiding items under hamburger menu.
Why hamburgers could be good
Hamburger menus may be a bad choice as the primary navigation, but they make an excellent choice for certain use-cases.
1. When your app is focused on exactly one task
For example, in Uber, booking a taxi is the single focus. Other options like payment info and viewing your past bookings are used much less frequently.
In such cases, hamburger menu is a great choice for these peripheral options.
2. For quick filtering options
Gmail is a great example. It has neatly transitioned the sidebar from desktop to hamburger menu on mobile — for quick filtering by labels and categories.
3. As a secondary nav
Hamburger menus can complement other navigation elements like tab bars, by providing more advanced options. While the tab bar covers the primary sections of your app, a hamburger menu can provide options like settings, help/support and a quick preview of your profile.
Twitter is a good example, though it uses the profile picture instead of hamburger icon, for the same behavior.
Conclusion
While we definitely need to move away from hamburger menus for primary navigation, it might be an overcorrection to completely ditch them.
To seek to ‘kill’ or ‘abolish’ a UI tool or widget based on poor usage or implementation is both a bit shortsighted and over-reactive.
— Norm Cox, the original creator of hamburger icon
Restricting them to what they do best might be a wiser choice rather than a blanket ban.
