The hamburger icon is used by many apps but many conversion experts believe it is suboptimal

Hamburger Icon

Definition:

The hamburger 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.

Image of Facebook mobile site with hamburger icon
Image source:

The hamburger icon has repeatedly been found to be sub-optimal by conversion rate optimizers because it consistently performs poorly in A/B tests against alternatives (e.g. a Menu label). Indeed, usability research by WhatUsersDo in 2016 found that hidden menus (such as the hamburger icon) are less discoverable than visible or partially visible navigation. This may be because what is out of site, is also out of mind.

Image of A/B test of hamburger icon for logged out visitors

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” 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.

Image of A/B test of hamburger icon for logged in customers

For logged in visitors the navigation to the cashier to deposit was 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.

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 and in almost all A/B tests I have come across labels perform better than icons because they are instantly recognised and understood.  The hamburger menu is not optimal, so ditch it.

So, why is the hamburger icon so popular given the evidence? Simple, our herd mentality means that we follow the crowd. I once asked our 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”. 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.

Neither 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 beliefs and behaviour.

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.

 

Digital Marketing and Insight