Project meeting

Would you know a hamburger if you saw one?

It may have escaped your notice, but hamburgers are now a common sight on responsive websites.


The strange thing is though, that nobody has ever really explained to us what this curious little design is, or does. It’s just become part of our psyche.

Or has it?

The’ hamburger’ (because that’s what it looks like apparently) is used extensively in responsive web sites to indicate that a menu is available if clicked.

Hamburger clipart and 3 lines menu hamburger Can you spot the difference?

But unlike the globally recognised search option, which is represented by a magnifying glass navicon, web users have been found to react differently to these three simple lines depending on how they are displayed, proving not all of us are as familiar with the term as some might think.

Navigation of sites on mobile devices is vital, not just for web users, but for businesses too, as failure to make the most of a site’s potential can lead to an increase in bounce rate – as well as disgruntled customers.

So complacency when it comes to user interaction or simply not taking into account people’s perceptions of web icons can prove costly to say the least.

And to illustrate this, a series of A/B tests were carried out by Exisweb to see just how we reacted to the ‘hamburger’ icon, and the results were interesting to say the least.

They used four variations of the ‘hamburger’ icon and figures showed that the way people reacted very much depended on what it was they were looking at.


Hamburger menu icon - (Middle screen left of logo)

 The commonly used icon

Menu text button - (Middle screen left of logo)

The word ‘menu’ with border

Hamburger icon and Menu text button - (Middle screen left of logo)

Word ‘menu’ with border and icon

Menu text - (Middle screen left of logo)

Just the word ‘menu’ with no border

The results (below) showed that the word ‘menu’ with a border was the best performer with a higher proportion of iOS users being prepared to tap on a ‘menu’ icon than their Android counterparts.

Menu comparison table

Icon with ‘menu’ and border gained 347 conversions

The  obvious conclusion we can come to then is that a button with text suggests to traditional web users that it is clickable, and therefore something will happen as a result.

And if nothing else, this proves that the ‘burger’ navicon, which has fallen so easily into common use, may not be the most effective form of indicating a menu after all.

Screenshot of Quote Dave Website showing the Hamburger menu top of screenshot left of logo

The classic ‘hamburger’ icon Webrevolve used when designing Quote Dave’s responsive site

This isn’t to say that in time people will not adapt and become familiar with the icon and that it won’t be as recognisable as the magnifying glass icon in years to come.

But it does mean that web developers and designers shouldn’t take anything for granted and must always go the extra mile to ensure the best user experience if they are to achieve greater results for their website.

And the fact that Google now actively promote websites that have been developed to be compatible with mobile devices, means that time is very much of the essence.

Do you think your website would benefit from being responsive? Talk to Webrevolve today to see what we can do for you by calling 0845 163 1616.