Hamburger menus
The Hamburger menu is a navigation element which you find mostly within mobile apps. Its name comes from its design of three horizontal lines which resemble, well, a hamburger.
Hamburger menus are a much debated topic amongst designers and developers, whilst we mostly agree when it’s appropriate to use a navigational draw and when not to, it usually boils down to one thing - space.
There’s often not enough room to place a full navigation menu on a small screen because it lacks a well thought out information architecture or just because content is fundamentally most important and takes priority.
I’ve been researching why the hamburger menu is such a divisive element amongst us and some of the key issues which make this controversial design so challenging.
One of the biggest issues I found was that designers and developers believe that it makes whatever is available within the menu less important.
With every digital experience you’re designing it’s important to have your main assets and features displayed in the most important place - right? Relegating these important assets to a hamburger menu is communicating immediately that these items are of less importance.
Making important pages and content harder to find without clicking multiple buttons can make the experience for the user frustrating. Think of it like being at a restaurant you want to view the menu, make your choice and order. Imagine how frustrating it would be if you had to go to one room to view the menu, then go to another room to order but only the main meal, drinks are in another room. This makes the process overly complicated and frustrating, which leads me onto my next point.
Hamburger menus have less engagement and they have a drastically lower click rate which can be attributed to a few reasons which I’ll go into a little bit more detail below.
Firstly they’re harder to reach, with mobile phone screens getting typically larger with every generation it’s actually becoming harder to reach places where the hamburger menu is usually found (in the top right or left hand side of the screen).
Secondly when users don’t immediately see navigation options they’re far less inclined to actually engage with them. Think about the process when using a hamburger menu - it’s complicated.
Firstly the user has to realise that the preferred form of navigation isn’t available.
Then they will likely see the hamburger menu.
You’re then reliant that the user knows what a hamburger menu is and that it is clickable.
The user then has to click it and scan the list of additional menu items.
Find the item they’re looking for - then click it.
I think you’ll agree this is actually a lot of processes for something so simple?
Insert Stats
In conclusion users might be having a worse experience when navigational elements are hidden and users might have more difficulty in completing tasks and journeys on our sites.
Often it can be inefficient, every UX designer knows that making users go through extra steps to reach an objective is a massive no no.
And unfortunately the hamburger menu does exactly that.
Nobody wants to have to search for what they’re looking for. For example you want to order a pizza, would you rather the menu and contact information be displayed on one screen together or hidden within pages in a hamburger menu?
However saying this there are a few reasons why a hamburger menu might be right for your product.
They’re recognisable, audiences have become aware of what the hamburger element symbolises and they can be found on a multitude of mediums from websites, apps, video games and even print.
It is an icon that has been embedded into our consciousness, that gives users a certain expectation. Users know they can rely on the hamburger menu for a certain task - to access a navigational draw. Just like when we see the home icon and the trash icon - we instantly know what it’s purpose is.
The hamburger icon is clean and non intrusive. There’s nothing worse than a messy overly complicated webpage.
In instances where real estate is at a premium like on a mobile app, the humble hamburger menu is incredibly valuable.
With the screen being so small it’s really important not to overwhelm your user with too many options at once. We’ve all been in that situation where there’s so much choice we can’t make a decision and we’re often left feeling frustrated.
Research about choice here
This is why the hamburger menu provides the perfect solution, It clears up what could potentially be a messy page. It’s a simple solution and doesn’t hinder the user experience with irrelevant information in the first instance.
The hamburger menu can be a great place to house a secondary access menu and the perfect place to house buttons which might not directly service the goal of your page.
For example….
Thes buttons still hold value, but they might not be required on your main page when you might want the user to complete a much more important task. Placing these items in a hamburger menu is ideal as they don’t need to take up all that space on your main navigation or homepage.
As you can see there are plenty of arguments for and against the use of the hamburger menu, ultimately it’s up to you as the designer whether you’d like to implement this within your website or project. Like all things in the world wide web they have their time and place, and I’m sure in this fast paced environment information architecture will change and how we as users interact with websites and apps will also change. With this it might eradicate the use of the hamburger menu altogether, but for now it still reigns as one of the most prevalent uses of navigation within mobile applications today.