What’s a hamburger menu and should I use one?

What is a hamburger menu? 

While you may not know the name ‘hamburger menu’, you’ll almost certainly be familiar with the concept – a navigation icon that looks like a trio of horizontal lines which, when clicked, opens the site navigation menu.

This is a hamburger menu – one of the most controversial icons in use in site design today.

Why are hamburger menus used?

The hamburger menu was originally implemented as a way of minimising visual clutter on apps.

The idea of concealing information behind an aesthetically pleasing minimalist icon was, understandably, popular with website designers. The icon was adopted by web developers and became increasingly popular.

There are a few situations in which hamburger menus are a practical solution, such as:

• Sites where space is top priority – the most important menu options are still visible, with the hamburger alongside them in order to maximise screen real estate for the core functions of the site
• Single-purpose apps – the hamburger menu, although not ideal, is most suitable for apps in which the core purpose is clearly displayed and other functionality such as payment information can be hidden

When shouldn’t you use a hamburger menu? 

A/B testing by Xeeboxin 2014 indicated that the use of hamburger menus halves user engagement.

Quantitative usability tests of the hamburger menu (undertaken in 2016 by Pernice and Budiu) found that concealing a website’s main navigation also halves the discoverability of the site.

Other reasons hamburger menus may be advised against include:

• They are non-indicative – it might be easy to associate a speech bubble with a message function, but three horizontal bars is an abstract symbol that could mean anything. Using a hamburger menu means that large amounts of important information is hidden behind a non-intuitive icon which is not advisable
  
• They have an negative impact on mobile optimisation – most hamburger menus are situated in the top-left corner of the screen and in a predominantly right-handed society most people find that this is out of thumb-reach. This increases the difficulty of opening the menu and if an action is difficult, users are less likely to take it
• They require two clicks instead of one – a hamburger menu also doubles the amount of actions necessary for a reader to navigate to the correct page. They must click once in order to open the menu, then use a second click to select the option they want, halving their chance of ever arriving there
• They’re often difficult to see at a glance – in order to see their options, page visitors first have to click on the hamburger menu – an action that defeats the purpose of browsing. Those who do not understand the hamburger icon to begin with may never do this

What are the alternatives to a hamburger menu?

The negative impact of a hamburger menu on usability has led to industry leaders such as Facebook and Safari abandoning the functionality in favour of a standard tab bar on their apps. Neither has done away with hamburger menus completely; instead they have incorporated them into the standard tab bar for less used options, essentially splitting the difference between usability and economy.

A more suitable solution for websites is the traditional top-line navigation, enabling browsers to see their options upfront without unnecessary clicking. Top-line navigation also keeps the website looking tidy as options are visually minimised while still present and at eye-level.

Keeping the top-line navigation frozen at the top of the screen is recommended as even as you are scrolling down the page, the menu is still displayed and constantly visible, saving the user time ensuring your products and services remain visible at all times.