Who doesn’t love a good hamburger? It’s one of the most popular food loved by so many people around the world. As popular as it is, the “hamburger” is also proven to be quite popular in the digital design world. So today, we are going to discuss the “hamburger” that is used by so many designers in their mobile web or apps design.

History of Hamburger menu

This menu was designed by Norm Cox for the Xerox Star, the world’s first graphical user interface. He’s the co-founder of Cox & Hall and has been an interaction/experience design consultant since 1982. He also happened to design the document icon for the same interface. After Xerox Star, however, the icon disappeared for quite some time.

Then it resurfaced from the dead when the new, much smaller, interface that smartphones had, designers had to look for a way to make everything fit onto a 4-inch screen. It is unclear what app used it first but this so-called “hamburger menu” has been around for a good few years now. Many apps are still using this kind of navigation even though there are a LOT of debates regarding the use of the hamburger menu. Heck, even the biggest company like Apple is against hamburger menu. For those of you guys using iPhone, have you seen any of “Apple-made” apps that use hamburger menu?

I watched a talk given by one of the Apple UX Evangelist named Mike Stern on WWDC 2014 while researching on why hamburger menu is bad for your apps. He took quite a moment to describe in detail why they thought it was a bad UX to use the hamburger menu. Since it was quite a long talk, I’m just gonna quote some of his good points here

“Hamburger menus are terrible at both of those things, because the menu is not on the screen. It’s not visible. Only the button to display the menu is. And in practice, talking to developers, they found this out themselves.” “Remember, the three key things about an intuitive navigation system is that they tell you where you are, and they show you where else you can go.”

He is a very good speaker, like really, really good. He has a lot of good points that can’t be covered in this article because it’s gonna be a long read. Watch his video talking about the hamburger menu here

Just accept it, the hamburger menu doesn’t work.

I know, I know. Hamburger menu is a beautiful and great solution to put all your navigation in one place, after all. Minimalism! And it’s still a very popular solution on most mobile web and apps around. Even though it has been a debate since 2014.

But here’s the thing, do you realize that hamburger menu actually takes more of user time to navigate around your apps? Spotify has found that by removing the navigation button on their apps, it actually increased their navigation clicks by 30%. It’s pretty significant, don’t you think? YouTube and Facebook also did the same thing and switched to a tab-based menu, which greatly improved their user-friendliness.

First, it clashes with the platform navigation pattern

Imagine this, you created a mobile app where you want the user to explore your apps, and you created the hamburger menu to put all the navigation inside. And when your user is in some particular page with the back button, how it’s gonna look? Something like this?

You want the user to be able to go through your apps without having too much trouble, so you reserved that part for the hamburger menu. But the user also needs the option to go back to the previous screen. The designer will either commit the mistake pictured above and overload the navigation bar — not even leaving some space for the screen title. This problem will particularly happen in iOS platform, where there is no other option to go back to previous screen other than tapping on that back button or swipe to go back.

Second, hamburger menu lacks efficiency

One of the most basic places of the hamburger menu is the prominent location on the mobile apps or mobile web — the top left corner. A study has found, as the phone screen grows bigger and bigger each year, that it is the hardest place to reach on a mobile device for a right-handed user, and it doesn’t exactly encourage engagement.