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.
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.
The commonly used icon
The word ‘menu’ with border
Word ‘menu’ with border and icon
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.
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.
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.