When You Buy A Burger You Are Going to Get The Pickle Too!

Who doesn’t enjoy tucking into a good hamburger? A popular food loved by many around the world, and easily recognizable. Just like the food, the hamburger menu has become very popular in the digital world, but should we just accept it? Is it a good option?
What is a hamburger menu?
The hamburger menu, whilst it hasn’t been around the same amount of time that this food has, was introduced because as users we prefer mobile devices over laptops and desktops. App developers responded to the need for a better user experience on phones by trying to find ways to shrink their content while not losing functionality.
This button has become synonymous across apps as the icon with the 3 horizontal lines, shown below.
Looks just like a hamburger to me!
Image source: CDN CSS tricks
This icon is referred to as a hamburger menu because the three lines appear to resemble two buns with a juicy burger patty in between. I often wonder if the artist was subjected to an ink blot test while hungry at the time.
Image source: CLKER, Clipart
How it is meant to work
Apps that overwhelm us with too many options are never a good idea as it detracts from our experience and let’s face it, would you want to use something like the software below on a mobile phone?
Image source: Invisionapp, Inside Design
The hamburger menu is intended to be used in apps to clean up the user interface by managing or hiding what we don’t need to see. When we do need more options, it is usually easily available and universally recognized as the go to for more content.
A study from Stanford University states that people are 10 times more likely to make purchasing decisions when presented with fewer options, so it stands to reason less is more in these apps and everything should be hidden away then, right?
Not quite.
How the hamburger menu actually functions
A hamburger menu declutters the screen and offers a pathway for us to access other content. However, it also introduces some problems that we will explore here.
Firstly, as by its’ very nature it hides away detail, you never clearly know what is in the menu or how to access items when buried under layers. Navigating around the menu when content has been stored in layers challenges most users when it is out of sight and hence out of mind.
Secondly, having features hidden away in a menu also adds more steps for the user to go through to access that content. It creates a longer and more laborious journey for the user to navigate around the app and often users will just not bother.
Because of this, some companies are now removing hamburger menus as their main navigation menu. For example, Spotify found that it was preventing nearly a third of their users from exploring the other features and using the navigation at all.
Lastly, as pointed out by UX Evangelist Mike Stern at Apple’s 2014 Worldwide Developer Conference,
“… a good navigation system should simply tell you where you are and show you where else you can go”.
The hamburger menu doesn’t do either of these things. By keeping everything hidden away, you don’t know what there is to visit, where you were and where you should go next within the menu. Trying to find where you want to go when presented with as many options, sub-options and then sub-sub-options as the image on the left is like being lost in a maze?
Why stick with it?
So, given these issues with the humble hamburger menu, why is it that so many app developers still employ this feature as their main navigation method?
Or better yet, why do we not test user preferences and the experience it delivers?
Even Apple agrees the hamburger is often a bad design choice. Why do we still use it? More importantly, how can we fix it.
Alternatives to the hamburger
1. Labeling the hamburger
A step in the right direction would be to take away the ambiguity of the identifiable icon and what it represents. Many of us may know its a menu but certain demographics of users may not. Adding a label “menu” to the app will at least clarify this option to the masses
2. Floating hamburger menu
Moving the menu icon to a more prominent position could also increase the usability of the menu function. As the example here shows, the hamburger icon remains available and on the screen ‘floating’ while the user is scrolling.
3. Tabbed menus
A popular and more recent adoption is the tabbed menu. Social media apps have embraced this alternative as they move away hamburger menus. It is a front facing menu of 4-5 icons that remain at the bottom or top of the screen allowing for core features and functionality to be immediately available. No crowded menus and sub-menus to find what we want. The example here shows how the simple and easy the buttons make for a better user experience.
4. Swiping
Providing for a clean and popular user interface the swiping mode on the phone to access content could also replace the hamburger menu. Tinder has successfully used this action and it is now even a common term used in everyday language.
Image sourve: UXPlanet
Whilst the hamburger menu sounds tasty and promising, it often just leads to more problems than the benefits it provides especially when it comes to end user experience.
Due to these problems, developers and designers need to start looking at alternative ways to display their menu data that are not simply ‘good enough’ to work for the app.
What works for one app may not work for another, but there are a lot of options that could be explored instead to improve this experience for us all.