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.
Tame em the hell of your website!
Mark Stern from Apple said ….
“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.”
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.
The user is also not able to see what the options are. The user will try his best to reach the navigation and tap on the hamburger menu, then tap again when they find the right option.
If they don’t, they have to swipe back or go “back” through multiple screens to get back to the hamburger menu before continuing their navigation through the site.
And third, unclear information architecture
When you are underlying the architecture of apps or a website, it’s easy to forget that the user has no idea about it.
This might be one of the examples of a harmless conversation you had with your fellow designer:
You: What if the user wanted to find their account?
Fellow designer: It’s easy, tap the hamburger button, then tap the profile, boom! There goes all information regarding their account!
Yeah, it totally sounds logical. But what your fellow designer did was assuming that the user would know what was in the menu and that he/she would know exactly where it was when they opened the apps for the first time.
Seriously, that is not how users think. So please, don’t assume things.
Most people navigate based on what’s called “information scent”.
When they are being faced with a set of options, they will choose the option that gives the strongest indication that it will bring them closer to what they want.
For example, when a user is looking for their account on a website, they’ll look for words like “profile,” “accounts,” “name,” etc.
They’ll scroll down the page looking for these words, then scroll back up. If they can’t find anything, they will revert to plan B: look for words that might be a superset of accounts, like “sign up,” “sign in,” etc.
They’ll continue to expand the concepts they’re searching for until they either find something that looks promising or give up entirely.
And hamburger menu doesn’t look even close to what users actually want.
It’s a small three-bar icon tucked on the corner of the apps. It has no information scent even after the user has gone through every other option.
It might still not occur to them that the answer that they are looking for is hiding behind those three bars.
The user generally isn’t inclined to click on it.
Click Rates for Hamburger Menus in the Top Left Are Low
The top left of a phone screen is generally reserved for meta information (name of device, wifi indicator, back navigational button, apps running in the background, battery life, search, etc.).
It’s not a core section of the screen like the center (where your eyes naturally fall) or at the bottom (which are the easiest spots to reach with your fingers).
Naturally, the implied message is that things at the top of the screen are to be glanced at, not clicked on.
What should we do then?
Yes, mobile navigation is pretty hard in nature, it has to fit on a 320px screen, but at the same time has to be large enough to deal with fat thumbs, and also be able to handle multiple destinations.
But that doesn’t mean you can’t do anything with your web or mobile apps right?
Review your Information Architecture
People use hamburger menu because they can simply add more things to it without having to worry which section these belong to, without direct consequences.
But that’s only until your users actually use it and get confused. Think about it, as soon as your apps grow older with more features over time, your apps’ Information Architecture gets more confusing as well.
Start using tab bars
So far, the best solution for mobile apps seems to be a tab bar. Either you place it on the top or the bottom of the screen.
When you have your new IA, you can prioritize to use 4–5 icon + text button for your primary navigation options.
This is the approach that Facebook has settled for their mobile apps and their apps navigation structure.
The main benefit of using the icon + text structure is that it allows you to fit in all text while keeping the button size large enough to deal with the big thumbs.
On top of fixing the IA problems and other issues, we can also also save some vertical space by hiding the navigation bar while scrolling direction. And, it’s still approachable when the user navigates deep inside your apps.