Kill the Hamburger Menu


Have you been to Ellis Gourmet Burger already? It’s the hamburger restaurant right beside Rotterdam Central Station. If you like burgers, you definitely have to visit that place. Although I’m a fan of the hamburger menu at Ellis, there are a lot of hamburger menus I don’t like. It’s not just about the ones you can find at restaurants. You are getting in contact with a lot of other hamburger menus on a daily basis while using (mostly) mobile devices.

It all started with the rise of smartphones and tablets. Designers of websites and apps were facing a major challenge: how to fit all information that was available in traditional webpages and applications, into the smaller screens of mobile devices. Facebook is one of the first companies that started using the hamburger menu: a side-menu hidden under a button consisting of three stacked lines. By clicking on the button, a side menu appears in which users can find additional links. (Tuk, 2015)

Sounds great right? A lot of space can be saved, and all links are just one click away. Louis Abreu, mobile UX designer, published an article about the hamburger menu in which he explained the following four major problems regarding the side menu button (Abreu, 2015).

  1. Lower discoverability

Although everything hidden under the menu icon is just one click away, visitors need to identify the button first. All people that do not (quickly) discover the menu button will not find the actions that are hidden behind the button at all.

  1. Less efficient

Even if users are aware of the hamburger menu, to activate the actions behind the button users need to first click on the icon. With the increasing number of applications, mobile device users tend to choose for efficiency and natural gestures. So avoid additional clicks for the most important functionalities.

  1. Clash with platform navigation patterns

Due to the fact that some mobile navigation patterns, especially the one used by Apple, use a ‘back’ button in the left top corner, it is not possible to put a hamburger menu there. Since this is the place where users expect the button to be, designers have to replace the button or use different gestures for navigating between pages. When using the first option, it becomes even harder for users to trace the button before they can navigate to a certain page. The latter option results in the fact that users need to figure out what gestures to use for what purposes.

  1. Not glanceable

Nowadays, app users are often notified via a small icon (mostly indicating the number of notifications) on top of another icon. When using the hamburger menu, this becomes very problematic. Since there are multiple actions/destinations hidden under the button, users do not know what kind of notification they just received.

The problems regarding the hamburger icon, including the ones mentioned above, have been tested a lot. One specific research was focusing on four different ways of presenting a menu to users: 1) ‘menu’ as text without border, 2) hamburger menu with border, 3) ‘menu’ as text plus hamburger icon including a border and 4) menu text with border (Foster, 2014). It turned out that option 4 leads to the highest click through rate (CTR) and that it performed 12.9% better than the hamburger menu (option 2). Adding ‘Menu’ to the hamburger menu leads to an increasing CTR of 5.7% compared to the standard hamburger menu. This research has shown that the functionalities of a hamburger menu are not that obvious to visitors at all.

For now, let’s go back to one of the initiators of the hamburger menu: Facebook. The social media platform used to show a hamburger menu in the top left corner of users’ newsfeeds. Now they shifted towards a tab bar at the bottom of the news feed. Although there is a little less space available for the newsfeed itself, after switching to the tab bar the Facebook app scored better on: engagement, satisfaction, revenue, speed & perception of speed metrics (Wroblewski, 2015).

Hamburger menu FB

So, we can conclude that the hamburger menu is not the best option to serve users. But what do you think based on your own experiences: do designers have to stick to the hamburger menu to save valuable space and wait until users are familiar with the icon? Or do you just like hamburger menus at places such as Ellis and prefer a different solution for apps?

I am looking forward to hearing some of your experiences. Just drop me a comment or let’s meet up at Ellis!


Sources

Advertisements

6 responses to “Kill the Hamburger Menu”

  1. 343244jp says :

    Thanks for your interesting post on the use of the hamburger menu button. As creating websites is part of my side-job, I have thought about the pros and cons of the hamburger a lot before. While I certainly do agree with the problems you are mentioning, I ended up using the hamburger quite a few times.

    The main reason for this is the lack of viable alternative ways of facilitating mobile users to navigate. Yes, a tab bar is a great solution, but I think its application is limited to apps and websites where offering a small number of buttons is sufficient. Also, you should be able to design a clear icon for every button you need.

    Let’s (again) take Facebook as an example. People use the app to scroll through their timeline, send messages, visit other people’s profiles, and check their notifications: a limited number of core functionalities you can display through icons. In this case a tab bar is the way to go, as proven by the metrics you mention.

    Conversely, for websites that have many different functionalities or categories of information or products, it may be hard to use a tab bar. For example, the information on our university’s website eur.nl (which is surprisingly not even responsive to mobile devices) cannot be covered by just four or five buttons. Same goes for Amazon.com.

    Conclusion: in my opinion there is no one-size-fits-all way a menu should be displayed. Instead, it is rather case-specific. In some cases, a combination of the two may even be the way to go. Ironically, as you can see in your screenshot, that’s what Facebook did as well.

    • tlangenberg says :

      Thanks for your reply! I totally agree that it’s very difficult to come-up with a one-size-fits-all menu. Therefore it can be hardly impossible to hide multiple actions under a certain button.

      As creating websites is part of your job, I was wondering what you think about the following things:
      1. Facebook is showing the actions that are used the most in a tab bar and they use a hamburger menu as addition. Are you a fan of that as well?
      2. Adding the word ‘menu’ to the hamburger menu seems to make it more clear to visitors what the hamburger icon is about. Do you use the word ‘menu’ most, or do you prefer the hamburger icon (or even a combination)?

      • 343244jp says :

        Well, what I actually meant is that it really depends on the website/app which display method you should use. But yes, one of the challenges of the tab menu (without a hamburger) definitely is that you may have to hide multiple actions behind one button, I agree!

        1. Yes, as mentioned in the last paragraph I definitely think a combination of a tab and a hamburger is the way to go in some cases. For Facebook it seems to be the right choice. And Amazon should test how it works out for them on their mobile website!
        2. Nice idea! I see pros and cons for that solution. Yes it makes it more clear that it’s a menu, very important pro. However, in some case it may be a problem that the word ‘menu’ takes more space than a hamburger icon, which is especially the case if you want to use ‘menu’ as a complement to, rather than replacement of the hamburger. Also, it could be personal, but i find a button with the word ‘menu’ to be quite ugly, especially without the hamburger.

  2. m.zigo says :

    Thanks for an interesting article about such an omnipresent element as the hamburger button!
    Indeed, I agree with your argumentation, especially concerning the lower discoverability. New smartphone users might find it difficult to discover the options and get things done within the app. Without the past experience with smartphones, they simply can not know what do three lines, usually in the upper corner, mean.
    In my opinion, UX designers do not necessarily have to stick to the Hamburger button all the time. Especially, thanks to the higher proliferation of mobile devices with screen size of 4.7 inches or higher. The screen provides enough real estate for providing buttons for options. As a result, hamburger button might no be needed. However, if the mobile device has lower screen size than 4.7 inches, placing various option buttons brings too much clutter. Thus, I think app designers should build two different app versions: one for the “big screen” devices, without Hamburger button, and the second for the compact screens where the screen estate comes at premium and the Hamburger button comes handy.
    Therefore, I think the dynamic app scalability, based on the screen size of the device, is the key how to solve such an issue.

  3. lnfernanda says :

    Thank you for the interesting post. I am facing the hamburger menu almost every day, although I never related the three stacked lines with a hamburger before. I do agree that new smartphone users might find it difficult to discover the options. However, I believe that the designers have to stick to the hamburger menu in order to save valuable space since it is just a matter of time that users will be familiar with the icon. Nowadays, children are growing up with several devices for that reason in the end everybody will know the function of a hamburger menu.

  4. 339384fb says :

    Thanks for this post. Interesting that such a small thing as a button can be so crucial. I am an iPhone user, so a totally agree with the Facebook-tab. It is really annoying that Apple already has included a button there! I think that a lot of developers are making a mistake by the hamburger button. Not necessary the button itself, but they include too many options there. You cannot make it easier with one button; I mean at first glance it looks good. But once you click on the button, you will still get so many options! This is in line with the less efficient part, because this will lead to increasingly clicks – which are not effective. However, I am not sure if I like the tab bar, because of the annoying hamburger menu, or because it is relativity ‘new’. It is just something new we have to discover and get used to. Once we (or at least I) know it, I already discovered another annoying thing about the app!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: