Should we really kill the hamburger button?

Vignesh Nandha Kumar
theuxblog.com
Published in
3 min readDec 6, 2017

--

Image courtesy: lmjabreu.com

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.

Hamburger menu in Starbucks (left) and Bootstrap (right) websites. Source: blog.placeit.net

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.

Medium app on Android (Oh, the irony!)

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).

Tabs in Facebook Android app, with last tab acting somewhat like a hamburger menu

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.

--

--