The Hamburger Menu: The Dreaded Second Cousin We Can’t Seem to Avoid

by | Aug 17, 2015

For web and app developers, one question has always been a top concern in the realm of user experience: “How will users navigate within — and back out of — the app?” It’s a question that seems rather simple, but nonetheless has sent some app developers spinning in to a dark oblivion as they relentlessly plan the app’s user experience. And while it’s true that most front-end users don’t understand the time, effort and planning that went in to figuring out every small detail of the app — nor should they, that is the point after all — one thing’s for certain: It’s always a struggle to discover and develop the best possible user interface for those who will be using the app.

Enter, the Hamburger Menu

At the center of the great navigation dilemma lies a troubled, three-tiered loner of an icon we’ve come to know as the Hamburger menu. And, if you’ve used any mobile app over the last year or so, you’ve probably noticed it, too. One thing it keeps is consistency, because, everyone knows familiarity is what drives good app design.    

hamburger-menu-example

Ahh, yes, there you have it: The dreaded first cousin of the app design world, of whom you try so desperately to avoid, yet, can’t seem to shake. It’s the reason some developers become clinically insane (okay, I’m over exaggerating, but not that much). The point is, it’s something that many agencies and developers have spent many hours trying to avoid. Yet, it always comes back to haunt them. So, what, then, can we do to avoid the Hamburger menu, and is it actually more effective than we think?

The Hamburger icon has, little by little, crept its way in to most consumer-facing apps. And because of this, it’s become more familiar to users, but much less familiar than would be expected by now. After all, the key to great app design is delivering a seamless user experience that directs your users where you want them to go without confusion or dilemma. yet, at the same time, it’s important not to convolute the characteristically small mobile screen with unnecessary buttons, links, images, and distracting content. A “bare bones” approach is perhaps the best way to put it. Which is why the Hamburger menu has thrived as much as it has as of late. But that doesn’t make it right.

The Facebook app is probably one of the most prominent examples of how best to present navigation to its users. But at one time, they even gave the Hamburger menu a shot; later deciding against it. And for good reason.

fb-hamrbuer-menu-example

After (presumably) much deliberation, Facebook decided on a bottom navigation that allows its users to easily navigate between the core user cases. Of course, what works for some may not work for others. Which brings us to our next point.

A/B Testing to Determine Navigation

The truth is, as an app developer, we can spend hours trying to decipher the best possible method of directing our users within an app. However, one of the best ways to figure out which method may be better would be to A/B test two, separate user experiences. One might be the Hamburger menu, while the other may be a bottom navigation bar. Thankfully, plenty of other people have already done that for us.

The Conclusion

It’s true that sometimes the Hamburger menu is the best plausible option. However, in the example above, you can see that even a slight variation of the menu icon can have a profound impact on the usability and adoptability of your app. So, the next time you see the Hamburger menu you can ask yourself, “I wonder how many app developers were sent to the crazy house ov

Recent Posts