Everyone has a chair in their house where they just throw random things. Coats, bags, sunglasses, books – you name it, it’s on the chair.

In the digital world, the hamburger menu is that chair. Don’t know where to put a link to the login page of your website? Hamburger menu. Want to allow people to contact support quickly? Hamburger menu. Where shall we put account settings? Hamburger menu.

The hamburger menu is where random sections of the site go to live, much like your random socks ending up on the chair.

And users aren’t phased by it.

Where did the hamburger menu come from?

Hell.

I’m joking. I think. I don’t like the hamburger menu much.

Its origin goes back to Norm Cox, who designed the icon for the Xerox Star (the world’s first digital GUI). It was – in his words – “meant to be very ‘road sign’ simple, functionally memorable, and mimic the look of the resulting displayed menu list.” And for that purpose it did very well and makes sense.

The hamburger menu in use on the Xerox Star (credit: Brad Myers on Vimeo and PlaceIt)

But then the hamburger menu dropped off the face of the Earth for a while. It wasn’t really until Apple launched the iPhone in 2007 that it made its comeback – and the menu was situated in the voice memos app.

Return of the ham

The popularity of the small screen meant that clunky interfaces had to be distilled down into something more minimalistic and small so that they could fit into view comfortably.

The hamburger menu kept popping up again and again, in social media apps, organisational apps, fitness apps — it was everywhere.

The Bad UX of the Hamburger Menu

“Like a cheap fast food chain, it got designers addicted to its convenience, and now serves millions each day” — Nielsen Norman Group

In 2016, the Nielsen Norman Group (a world-leading research group for user experience) wrote about how the hamburger menu is hurting the discoverability of an app’s content. Their key finding from the research they conducted was:

Discoverability is cut almost in half by hiding a website’s main navigation. Also, task time is longer and perceived task difficulty increases.

They also go on to mention that as a design element, the hamburger menu is not in itself the problem, the problem is with designs that work well on mobile which are immediately translated to desktop screens without any changes. To quote them again:

Mobile-first should not equal mobile-only.

So the main problems here are the fact it’s hiding potentially important navigational elements from the user, and the fact it’s so convenient and quick for a designer or developer to throw anything in there, that what’s typically expected to be in there varies.

The Good UX of the Hamburger Menu

Google still heavily encourages the navigation drawer — and the hamburger menu

If we consider Jakob’s Law (Jakob Nielsen co-founded the Nielsen Norman Group that just told us the hamburger menu is killing discoverability), it states:

Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know.

Let’s go back to the quote used in Nielsen’s analysis of the hamburger menu. “Like a cheap fast food chain, it got designers addicted to its convenience, and now serves millions each day”.

The hamburger menu is now in use by millions each day.

This means that the mental models of the users you are trying to serve are now being formed to know that important navigational elements are under the hamburger menu.

There is an argument that because of this, and because of the ubiquity of the usage of the hamburger menu across the mobile web, that it isn’t bad UX at all, and in fact it has — through sheer force, usage, and designer-laziness — become a good option.

Is the hamburger menu really the answer to all our problems?

Personally, I don’t think so. But hear me out.

Since the launch of the iPhone and it’s tiny screen in 2007, phones have gotten quite a bit larger, and other navigation options have appeared.

For example, if we have three sections to our site, would we want to hide those under a hamburger menu, or could we do something simpler, like split the options into tabs?

Tabs offer a more modern and useful method to navigate around an app, and the core sections of your application are immediately visible to the user.

If you’re concerned about space, you can implement hide gestures where the tabs disappear when you scroll down but reappear when you scroll up — as is common with a lot of navigation bars on mobile sites now.

And if you’re really not satisfied with tabs, Google frequently uses a combination of tabs and a hamburger menu — so you could try that too.

So, should you use a hamburger menu?

A while ago, I would definitely have said no. In fact, I just had a long discussion with my colleague Oliver as to why we should try to keep away from hamburger menus in a new design we’re creating.

However, I no longer feel that hamburger menus can be outright labelled as poor UX. Users are now aware of what those three lines mean. Google can’t get enough of them. Millions of people are working with that menu every day.

If your back is against a wall and you’re pushed for space, a hamburger menu might be a viable option.

However, what I would suggest is that you take the time to analyse your information architecture, see if there is any way to simplify it, and think about other common design trends (like tabbed navigation) that could also solve the problem while also keeping your main navigational elements visible.