The hamburger menu is without a doubt the most enduringly popular navigation bar. And why not? It saves space, it’s neat looking, and users know what it means — three things that are always high up on any UX designer’s ‘must have’ list.
But, as with all UX tools, there are downsides, many of which have caused designers to start turning their back on those three little lines. Why? Maybe they prefer working with tabbed menus. Or maybe they’re just trying to be different. After all, just because everyone’s doing it, doesn’t mean it’s necessarily right for you.
Let’s take a closer look at the pros and cons of this ubiquitous hamburger menu and run through some popular alternatives.
What is a hamburger menu?
It’s those three horizontal lines in the top right or left corner of most apps. Tapping or clicking the button results in a wider drop-down menu expanding to fill the screen. Tap it again and the menu collapses back behind the icon.
The hamburger menu has been around since the ‘80s when interaction designer Norm Cox designed it as part of the interface for the Xerox Star. But it wasn’t until 2009 when mobile apps became popular that it really took over; the limited screen space on phone screens made this little space-saving tool ideal. In fact, the primary reason it’s still used to this day is its space-saving capabilities, among other things.
It makes navigation a breeze
Ever heard of decision fatigue? It’s that feeling of disorientation and paralysis you get when presented with too many options. It also happens on websites when there’s too much going on.
We’ve all landed on a homepage that’s just stuffed with TMI and clicked immediately away because, quite frankly, who has the time or patience to sift through all that information?
This is bad for two reasons: number one, you’ve lost the reader/subscriber/buyer before they’ve even had a chance to see what you’re offering. And number two, it sends the bounce rate of your website sky-high, which will result in Google’s algorithms booting you off the front page (or further).
The hamburger menu is a nifty little solution to this: it tucks surplus information out the way, letting users get their bearings on the landing page before exploring further.
Everyone gets it
The hamburger icon is as easily recognizable as the meat patty and bun combo it’s based on. This is no small feat; it takes time for symbols to reach an instantly-recognizable, unambiguous status.
According to Nielson Norman Group, the average user stays on a page between 10-20 seconds before leaving. This is why it’s important to make your page fast to load, clutter-free, and as intuitive as possible. If you’re going to use symbols, make sure they’re easy to interpret.
It boosts functionality
The hamburger menu leads your user directly to the information they want. This means they don’t have to drag themselves through your site or app chronologically or fish for information through a trail of links. This saves time, which is even more crucial in the context of an app, where space is tight and users want information fast.
It hides information
One of the biggest downsides of a hamburger menu is that it hides information. This means some users don’t get the chance to see how much value the app will provide before those 10-20 seconds are up and they’ve clicked away or deleted it.
You can mitigate this by making your homepage as helpful as possible: show the features off at first glance, so visitors can see it’s important information. It also means they don’t have to go searching through your menus to find what your app’s all about.
Click rates are low
Hamburger menus aren’t the most clicked part of the app. Users tend to focus on the info in the middle first, then scroll down. And then, when they can’t find what they want or want to learn more — and you still have their attention — they’ll turn to the hamburger menu. People assume it’s reserved for additional, less important stuff.
Another reason click rates are low is this: hamburger menus are hard to reach. They’re usually tucked away in the top right or left-hand corner of your phone, which, if you’re using anything from an iPhone 6 to a OnePlus 6, is really hard to reach with your thumb. Users want the easiest path, so if clicking the hamburger menu involves a grip adjustment or the use of another hand, then they’ll choose a different route.
Three popular alternatives to the hamburger menu
As we mentioned earlier, not everyone’s a fan of the hamburger menu, nor is it appropriate for every app situation. So without further ado, here’s our take on the most popular alternatives out there.
Floating/prominent hamburger menu
As with regular hamburger menus, they’re space-saving, neat-looking, and intuitive. The difference is the floating menu is moved to a more prominent position on the user’s screen, showing them the information in there is important and easy to reach.
The downside is, floating hamburger menus still conceal information. And they can take up more space than the original static version.
Facebook, Buffer, and Instagram all make use of the tabbed menu. It allows users to see core features immediately and switch between pages without having to navigate back to the home page. The buttons are easy to access, and users can clearly see which page they’re on at any time.
The downside is, there’s only space for four or five tabs. Although one way to get around this is to make one of the tabs a hamburger menu.
Slide-out navigation tab
Slide-out navigation tabs do just what they sound like: you swipe to reveal a menu in the same way that a hamburger click expands out into options. They’re visually clean and break information down into easily accessible sections. They’re also easy to access, without the user having to stretch their thumb up to a corner.
The downside here is you need to have had experience with swipe menus in the past to know its there or how to use it. And the interface can sometimes be a little clunky.
So… should you use one?
Now we’ve reached the killer question. And the only real answer is: it depends on what you want your users to see and do.
If driving users towards content within your menu is a high-priority, then you might want to consider an alternative. But if your menu mostly contains miscellaneous info that you know users will specifically search for, then a hamburger menu is definitely a viable option.
Make your hamburger menu an asset, not a flaw. Here are 8 things to consider:
- Are your app’s core functions immediately viewable? Make sure users can see your key features on the homepage.
- Does it directly take your users to the core features you want them to see? Make it simple and don’t bury information behind too many links.
- Are the menu items clearly labeled?
- Is the hamburger menu easy to reach on the bigger phone models?
- Is your menu visible, clickable, and in a prominent place, so users know there’s more to discover?
- Make sure your important info — such as CTA links and subscribe buttons — aren’t placed underneath your hamburger menu. Otherwise they’ll only get obscured when the user expands the list.
- Be logical. Set everything out in wireframes to make sure your user’s journey is clear and easy to interpret.
- Then, if possible, run some user tests and A/B test a couple of different variations to ensure the design choices you are making are having a positive impact on app navigation for your users.
And finally… The more collaboration and input your designs get, the more likely it’s going to resonate with a wide range of users. Try out working with a collaborative app that lets you try out multiple menu options and present them to your team for feedback and considerations. The more perspectives you have, the better your outcome will be.