Hamburger menus are ubiquitous in mobile web design, but the jury is out on whether the little three-lined icon actually works.

A lot of people hate hamburger menus because they feel not everyone knows what it means and that menu options are hidden from view.

However much of the negative feeling seems to be based on a vague notion that the icon harms the user experience, without any actual evidence to back it up.

Last week Booking.com released the findings of its own study into the use of hamburger menus and it turned out to be good news for fans of the three-lined icon.

I’ve summarised the results below along with the results of several other studies into the uses of hamburger menus, so you can make up your own mind.

For more on this topic, read our posts on 14 inspiring mobile commerce websites and 11 ways to improve the navigation on your mobile site.

Booking.com

Travel site Booking.com ran an A/B test to see whether the use of a hamburger menu harmed the user experience in anyway.

Having previously tested different variants of the icon (e.g. with a border, without a border, different colours) it was decided to see if the word ‘menu’ proved to be more user-friendly.

The original hamburger menu looked like this:

While the variant looked like this:

Both versions were exposed to millions of users around the world, in every supported language and across a variety of devices.

The results... Booking.com found that changing the icon to the word ‘menu’ had no significant impact on user behaviour. So there you have it.

The sage advice from the blog’s author:

What works for Booking.com may not work for you and your users. This is the reason we A/B test in the first place, because the findings of others, be they expert opinion, data from other websites, or hypotheses dreamt up in the pub while eating a hamburger, are all unproven until they’ve been tested against our customers, on our platform.

Exisweb

Web developer James Foster conducted the same test as Booking.com – a hamburger menu vs. the word ‘menu’.

The test ran for five days and was served to around 50,000 mobile visitors who were predominately aged under 35 and using an Apple device.

But in this test there were four different variations:

1. Bordered hamburger menu (Original, baseline design)

2. Bordered ‘menu’ button

3. Bordered icon with both hamburger and ‘menu’

4. ‘Menu’ with no border

These are the results, which show that the word ‘menu’ was clicked significantly more often than the hamburger menu, but only when it had a border.

But just because it achieved more clicks, does that necessarily mean it improved the user experience?

As James notes, it could be that the ‘menu’ button simply draws more attention.

Exisweb 2

In another A/B test James Foster trialled this bordered hamburger menu:

Versus this bordered ‘menu’ button:

The A/B test was run among 240,000 unique mobile users, with results showing that the ‘menu’ button was clicked by 20% more unique visitors that the hamburger button.

Interestingly, the difference was even more stark among Android users.

Those using iOS devices clicked the menu 0.77% of the time, while on Android this fell to just 0.27%.

James does note several caveats with this study, namely that the results are only from one website and that it only measures clicks on a webpage rather than intent.

Zeebox

Zeebox is a mobile app that works as a dedicated social network around TV. Its CTO Anthony Rose wrote an excellent article on The Next Web where he detailed the company’s experiment with a hamburger menu.

It should be noted that this example is slightly different to the other case studies, as it involves a side menu (also known as 'navigation drawers'), so the hamburger icon was only partially visible in the top right of the screen.

Also, Zeebox is an app whereas the other examples are all from mobile websites.

But anyway, Zeebox initially had its menu options as tabs across the top of the screen, but the decision was made to switch to a hamburger menu as it was felt that this looked cleaner.

These are the two designs:

It seems like a simple change, but in fact Zeebox found that engagement time was halved, with the conclusion being that it was a simple case of “out of sight, out of mind.”

Or to put it differently, users need to be shown the different options available to encourage them to click on things and play around with the app.

To validate these results Zeebox ran an A/B test where 15% of users saw the side navigation and 85% saw top navigation.

The results... weekly user frequency, daily frequency and time spent in app all decreased.

David Moth

Published 29 September, 2014 by David Moth @ Econsultancy

David Moth is Editor and Head of Social at Econsultancy. You can follow him on Twitter or connect via Google+ and LinkedIn

1707 more posts from this author

Comments (5)

Avatar-blank-50x50

Ailsa McKnight, Senior Marketing Director at GTECH

What are your thoughts on using the hamburger menu in web design? I have seen this and I don't think it's a good idea at all. Would be interetsed in your view

almost 3 years ago

David Moth

David Moth, Editor & Head of Social at EconsultancyStaff

@Ailsa, it's definitely becoming more common on desktop sites. Like you, I'm not a fan - it's unnecessary and will only confuse the user.

Hamburger menus are used on mobile due to size constraints, so there's no real need to implement it on desktop.

almost 3 years ago

Avatar-blank-50x50

Oliver

I still find it amazing that everyone (including Android & Apple, all browsers) insist on menu buttons at the top of pages. When all mobile users have easier and quicker access to buttons at the bottom of the screen.

I understand it would be a big behavioural change but when it does happen it will be like looking back to a time of suitcases without wheels.

Obviously some testing to prove this theory would be needed.

almost 3 years ago

Avatar-blank-50x50

Phil Vallender

Interesting, although inconclusive, study. Interesting comments too.

I certainly think this is a worthy topic for investigation but that perhaps the approach should be adjusted. After all, do we really care what percentage of users interact with a menu, or just how many visit key content? In actual fact, shouldn't mobile web users be able to navigate their favourite sites and apps without using a menu at all?

Perhaps one conclusion we can draw from this is that if you really want visitors to navigate to certain content, these options need to be presented outside the menu, but for everything else the hamburger menu will do?

almost 3 years ago

Avatar-blank-50x50

Stephen Wilson, Director at Digital Dots

An (anti) opinion here http://techcrunch.com/2014/05/24/before-the-hamburger-button-kills-you

I use them but only if the audience is internet 'savvy' i.e. more familiar with these types of UI elements.

over 2 years ago

Comment
No-profile-pic
Save or Cancel
Daily_pulse_signup_wide

Enjoying this article?

Get more just like this, delivered to your inbox.

Keep up to date with the latest analysis, inspiration and learning from the Econsultancy blog with our free Digital Pulse newsletter. You will receive a hand-picked digest of the latest and greatest articles, as well as snippets of new market data, best practice guides and trends research.