by James Lawrence on August 16, 2016 | Design, Writing and Video

The Hamburger Menu Should be Killed


As the importance of mobile design has grown over the years, designers have fallen in love with the hamburger menu icon. For many in the industry it is seen as a simple, elegant and intuitive icon that saved space and something that eases navigation on small devices.

We have tested whether the hamburger menu improved or hindered navigation of a website by the everyday user. Our results have found that the Hamburger is a barrier to user-experience, not an aid. This likely supports the trend of platforms such as Spotify that have recently made changes to their navigation by removing the hamburger icon from their iOS app and implementing a tab bar. Spotify revealed they saw an increase of clicks by 9% in general and 30% more clicks on actual menu items. - Source: Tech Crunch.

spotify's new navigation bar

Source: Tech Crunch


Why Dispense Of The Hamburger Icon?

We advocate that for websites with English as the sole target language that the hamburger menu should be dispensed with. There is still not a 100% recognition amongst mobile users that the hamburger icon (three horizontal lines) is actually an icon representing a menu. Until this is the case the hamburger should be replaced with either the word menu (with a subtle line around the word) or a combination of the hamburger icon with the word menu combined. The new menu icon should then be given a colour and weighting that draws sufficient attention in the hierarchy of the page as is appropriate.

A study by ConversionXL of 240,000 user sessions saw a 4% increase in e-commerce revenue when moving from a hamburger menu to a text only menu on an e-commerce website. This jumped to 6% when combining the word Menu and the hamburger icon (whilst turning the entire menu section pink.)


hamburger menu variations

Exis Web saw a 12.9% increase in conversions when experimenting between a hamburger menu and the word Menu with a thin border.

It seems logical that until 100% of users know what the hamburger icon represents that including the word menu (which takes the same amount of real estate) is the preferred option. The minority of users that don’t understand the hamburger icon are potentially of a highly profitable demographic for many businesses.

If you would like to learn more about increasing conversions through your mobile website, you can download a complimentary copy of our recent eBook.

As always, don’t hesitate to reach out to us if you have any questions about the information above. And, please feel free to share this article on social media and/or within your personal network.

Download your eBook

Learn how to drive leads through digital marketing from our practical guide.

We respect your privacy and will never share your details with anyone. Read our Privacy Policy for more details

Your content's almost here. Please wait a few more seconds

Join 5,000+ subscribers

Get fast, useful and no-nonsense digital news from our industry experts.

Other Articles you might be interested in…

Thanks for your Subscription
& Welcome Aboard!

You've made our little friend's day here at Rocket...

For each new subscriber, we give a treat to one of our four-legged friends. Please check your inbox and confirm your email to be sure you don't miss anything.

What next?

Continue Reading
Book A Consultation

You can get the latest agency news and follow us
on all our social media platforms below.

Let's Talk!

Complete the form below and
we'll be in touch nice and fast.

Privacy Policy

Get Your Proposal

Complete the form below and
we’ll be in touch nice and fast.

Privacy Policy