Apple and Hamburgers
What Apple has to say about the ‘hamburger menu.’
The so-called ‘hamburger menu’ has been around for a few years now. Just open up your iPhone and you will probably notice that a lot of your apps are using this technique to display their menu items. If you viewed this site on your phone, you will see that I am using it as well. But is it really effective and the best way to display your site or app’s navigation?
Hamburgers Make for Bad UX
I’ve been told that Apple has always been against using the hamburger menus for their apps. In fact, I watched a talk given by Apple UX Evangelist Mike Stern during the WWDC 2014 and he took a moment to describe in detail why they think it’s bad UX to use the hamburger menu. (Designing Intuitive User Experiences) I’ve included the entire transcript of his talk below, in case you wanted to read it.
I promise I’m going to talk about other things. But I feel like I would be remiss if I didn’t use this opportunity to talk with you about hamburger menus, aka slide out menus, aka sidebars, aka basements, aka drawers.
Now, these controls are very common on iOS, and on other platforms. And I’m sure many of you here work on apps that have these. You guys made the decision to put it in your app. And I’m sure that you did so with the very best of intentions. And I will say that these controls do a couple of things very well.
For one thing, they save space. So rather than taking up a bunch of room at the bottom of the screen for a tab bar, you’re just taking up a little bit of area in the top left corner for the hamburger menu. And you practically have the entire height of the screen to show options to people, and if that’s not enough, you’re going to cram more awesomeness into your app, people can scroll, right.
I actually haven’t played around with the latest version of Xcode, so I really hope that they haven’t changed this, I don’t believe you’ll find a hamburger menu controller inside of Xcode.
Now, typically we don’t provide design advice about the things that we don’t offer to you guys, but I can’t help myself, right? I’ve had so many conversations with people about this control, spending hours and hours and hours talking about it, and you know, I think it’s important that we talk about it here today. And again, I’m not going to say that there’s no place for these controls categorically. I think there are some apps that could maybe use one. But I will say that their value is greatly over-stated, and they have huge usability downsides too.
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.
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.
That people who use their app don’t switch to different sections very frequently when they use this menu.
And the reason for that is because the people who use their app don’t know where else they can go. Right? They don’t know because they can’t see the options, or maybe they saw it at one point in time, but they have since forgotten. And if you use this control, you have to recognize that the people who use your app may not realize the full potential of your app. Hamburger menus are also just tedious, right?
If you want to switch sections from the Accounts tab to the Transfers tab, all you need to do is tap the button and you’re there instantly, and if you want to go back, you tap the Accounts button, and you’re back where you started from.
Doing the same thing with the hamburger menu involves opening the menu, waiting for the animation to finish, re-orienting yourself, finding the option you’re interested in, tapping that, and then waiting for the animation to complete, getting back to where you were before, and if you want to go back, you have to open the menu again, go through that whole process, and there you are, again.
It takes at least twice as many taps to change sections. Something that should be very easy and fluid is made more difficult.
And the other thing the hamburger menus quite frankly do badly is that they don’t play nicely with back buttons. Right? I’ve seen this a lot. Back buttons are supposed to go in that top left corner position, but instead there’s this hamburger menu there, so people put the back button right next to it, but no longer does this look like a back button anymore, it just looks like this arrow which is pointing to the hamburger menu, looks ridiculous, and sometimes people recognize that it looks ridiculous, so when you drill down into the hierarchy of an app, the hamburger menu goes away.
Now it takes even more steps to switch to a different section.
You have to go back up enough times to get to a level in the hierarchy of an app to get to a view that contains the hamburger menu. Now, sometimes people will try to solve this by putting the menu on the right-hand side, but that’s not advisable either. That location is a really important location. Usually you can put some kind of action there, you know, like a plus sign to add something, or an edit button.
And finally, the downside of being able to show a lot of options is that you can show a lot of options. Is that you will show a lot of options. The potential for bloat and misuse is tremendous. They allow you to add all sorts of stuff that your users don’t really care about. Like information about the app. Or version history, or credits. I hate to break it to you, but no one cares.
And the other thing is that people wind up taking ads and special offers and making them look just like regular sections and putting it in there too. That sucks. No one wants that either.
Look, drawers of any kind have a nasty tendency to fill with junk.
Further Reading
It seems like there has been quite the stir lately about these hamburger menus and why we shouldn’t use them. I found a few more articles that makes a similar case.
