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).
- 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.
- 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.
- 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.
- 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).
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!
- Abreu, L. (2015). lmjabreu.com. Accessed: October 4, 2015, obtained from Why and How to Avoid Hamburger Menus: https://lmjabreu.com/post/why-and-how-to-avoid-hamburger-menus/
- Foster, J. (2014, April 8). Mobile Menu AB Tested: Hamburger Not the Best Choice? Accessed: October 4, 2015, from exisweb.net: http://exisweb.net/mobile-menu-abtest
- Tuk, Y. (2015, June 26). Design van hamburgermenu dramatisch voor mobiele interactie. Accessed: October 4, 2015, from emerce.nl: http://www.emerce.nl/achtergrond/design-hamburger-mobiel-side-menu-dramatisch-interactie
- Wroblewski, L. (2015, April 27). Obvious Always Wins. Accessed: October 3, 2015, from lukew.com: http://www.lukew.com/ff/entry.asp?1945