The Hamburger Menu Should be Killed

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 titled 12 Ways To Increase Conversions From Your Mobile Website In 2016.

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.

Want more Rocket Resources?

Get free digital resources and articles direct to your inbox to boost your business.

Privacy Policy