The Hamburger Icon.
The Hamburger Icon – it’s everywhere. All around you. In web apps, mobile sites, desktop sites, and computer software. The ubiquitous three-line icon is now so common it feels as if it is universally understood to mean "Navigation Menu." But is it?
Recently, discussion on the efficacy of the hamburger icon has reached new heights. Articles by prominent designers, and on several sites including The Atlantic, TechCrunch, The Next Web and the Nielsen Norman Group have concluded that this is a UX-antipattern, a trendy and simple to implement icon which regressed from simpler and more expressive alternatives. But antipattern or not, the use of the icon has ballooned, making it an almost ubiquitous fixture on most websites, particularly when presented on a small screen.
Given my position as a designer on the m.booking.com team, and our usage of this icon with its accompanying slide-out "drawer" menu, I decided to investigate the subject. I started by examining the origin of the icon to try to understand its path to infamy.
“The hamburger icon is a classic. Even if you don't know it by that name, its three black bars are as familiar as your mouse's cursor—a constant companion on your cyber journey since the day you got your first computer" - Gizmodo
That sounds promising. But even though the icon is a classic and has been around forever, web designers have been less than consistent in their usage of it. It has been used for lists, dragging and reordering, aligning, and plenty more. Perhaps this misuse goes some way towards explaining the criticism of it as a menu icon. Maybe through this widespread and varied usage it has lost the ability to convey a single metaphor and, in turn, leaves users confused.
This whole line of questioning started me wondering: “Are we wrong, and is everyone else right? Is this hurting our users? Do people actually understand what these little three lines are suppose to represent on our website?”
Long-time readers of this blog will not be surprised to learn that our next step was to test these questions in the form of an A/B test. Like everything else, the hamburger icon was about to be exposed to our vast customer base, which would tell us through its engagement with the menu whether the icon was the best solution. By this time, I had read enough articles and data points to be sure that no consensus existed, and that even if it did, it had not been derived from the behaviour of the customers for whom I design. I decided to follow the method outlined by James Foster and referenced by many, including one of our favourite mobile experts, Luke Wroblewski.
"I then decided to test the hamburger icon against the word MENU"
https://t.co/80iJTN34jS
— Luke Wroblewski (@lukew) February 18, 2014We had previously tested several placements and styles of the icon (with a border, without a border, with an icon, different colors, and so on), but had never tested the word ‘menu’ – a proposition complicated by our desire to test in all of our 41 supported languages. Nevertheless, we moved forward, sourced translations from our team of in-house language experts and setup the test:
Base: Our original hamburger menu icon on the left of the header and its right-aligned white border.
Variant: The word ‘menu’ inside a rounded square also aligned to the left.
We ran that experiment against our whole user base, and given the prominence and omnipresence of this UI element, it didn’t take long for this change to be exposed to millions of our customers all over the world, in every supported language and across a multitude of devices.
So what was the final outcome? Would words outdo fast food as it did in James Foster’s experiment, or would the bun-and-patty win out?
Findings
In our experiment, changing the icon to the word "menu" had no significant impact on the behaviour of our users. With our very large user base, we are able to state with a very high confidence that, specifically for Booking.com users, the hamburger icon performs just as well as the more descriptive version.
Of course, we measure “all the things”, and that being the case, we can extrapolate some nice data about which countries or languages, and on which devices, this would have worked best or worst; but on a global scale we can conclude that the much derided hamburger is, on the whole, just as recognisable to our users as the word ‘menu’. In the spirit of data-driven design we should perhaps consider our options and maybe try adding cheese, fries, and a slice of bacon to our hamburger icon, but for now we are happy to report that our three-lined friend is sticking around. Its actual placement, shape, size, position, and color are of course a subject for future tests.
There is a lesson here for all of us on the nature of A/B testing. You are never solely testing a UI element, pattern, or feature. You are testing these things against a very specific user base in a very specific scenario. 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.
Not to get lost in our own metaphor here, but like a good hamburger recipe, even if you write down all of the ingredients in the exact way I did, you will end up with a completely different burger – this is, of course, influenced by the market, the quality of meat available, the flour used on the bread, and a thousand other factors. In our view, a good idea is only a good idea for Booking.com if we can replicate it exactly on our site and if it works for all our customers.
Our opinion: It’s always worth testing your ideas and seeing for yourself what the data tells you and what questions arise. My advice? Take a bite, see what happens.