Hamburger Icon
Hamburger Icon
Definition
The hamburger icon or button is a common mobile menu navigation icon made up of three horizontal bars. It was designed by Norm Cox in 1981 for the Xerox Star, the world’s first graphical user interface. It became popular after Facebook adopted it as a navigation icon in 2010 for their side menu.
The Evidence:
The hamburger icon has repeatedly been found to be sub-optimal by conversion rate optimisers. It consistently performs poorly in A/B tests against alternatives (e.g. a Menu label). In addition, usability research by Nielsen Norman found that hidden menus (such as the hamburger icon) are less discoverable than visible or partially visible navigation. This often leads to reduced levels of engagement and could be because what is out of sight is also be out of mind.
Here are two examples of A/B tests we conducted on casino.m.partycasino.com. For logged out visitors the navigation to take users to registration was hidden behind the hamburger icon, together with other informational pages. We replaced the hamburger icon with a “Join Now” call-to-action (CTA) in the header and an “Info” link where the hamburger icon had been located. As a result we saw a huge uplift in users going to registration and also a two digit uplift in those completing registration.
For logged in visitors the navigation for the cashier to make a deposit was also hidden behind the hamburger icon. For the test we replaced the hamburger icon with a “Deposit” button in the header. This also resulted in a big uplift in visitors going to the cashier and an increase in users making deposits.
Recent Trend
A recent trend is the hamburger menu being used on desktop sites to hide the primary navigation. The example below is from a landing page on Cymphony.co.uk, a call answering service. The horizontal navigation is hidden behind the hamburger button. I assume the designer or webmaster are doing this as part of a minimalist design, but this is counterproductive and unnecessary for a desktop site. It also break a major web convention and so doesn’t conform to user’s expectations. The evidence suggests this could seriously harm your conversion rate.
Image Source: Cymphony.co.uk
Conclusion:
The evidence is conclusive that hidden or partially hidden navigation reduces discoverability and conversion. Placing key CTAs behind an icon is a bad idea. In almost all A/B tests I have come across labels perform better than icons because they are instantly understood. The hamburger icon is not optimal, so ditch it.
So, why is the hamburger menu so popular? Simple, our herd mentality means that designers often follow the crowd. I once asked a product manager why they had implemented the hamburger icon. The response was “Facebook use it and it’s used by lots of other mobile sites”. There was no other thought or rationale about the decision.
Cognitive Dissonance
The other reason is that it is an easy way for designers avoid difficult questions about mobile navigation. They simply hide everything behind the hamburger icon. This is more understandable on a mobile site because of the small screen size, but as the research indicates this can badly reduce site engagement. For desktop sites though there is no need to use a hamburger button and so don’t do it.
None of these reasons shows any desire to consider the user of course. This is a classic example of when cognitive dissonance of designers and decision makers leads them to ignore the evidence because it conflicts with their existing beliefs and behaviour. As UX designers and optimisers, it’s important we use data to inform our decisions rather than following the latest trends.
Resources:
Conversion marketing – Glossary of Conversion Marketing.
Icons and conversion – Are icons without labels conversion killers?
Over 300 tools reviewed – Digital Marketing Toolbox.
A/B testing software – Which A/B testing tools should you choose?
Types of A/B tests – How to optimise your website’s performance using A/B testing.
