fox.agency b2b marketing

Blog

Year archive

Is it time to throw away the hamburger?

Posted by: Robert Marshall on 26 May 2017

The point of a good user interface is to help the user get the information they want as fast as possible with the least amount of work. It is a fine balance between attractiveness and interactivity. Most users are used to seeing certain elements in certain places and have created habits around specific icons. One element that has been adopted in mass by websites and apps is the burger menu. The idea is that it can be used to hide navigation on smaller screens, only revealing the menu when a user clicks the icon. It means that screen real estate is kept clean and available.

A bit of history

The burger menu originates from Xerox Star, designed by Norm Cox in 1990. He said “Its graphic design was meant to be very “road sign” simple, functionally memorable, and mimic the look of the resulting displayed menu list. With so few pixels to work with, it had to be very distinct, yet simple. I think we only had 16×16 pixels to render the image. (or possibly 13×13… can’t remember exactly).” Remember that date, 1990.

Xerox Hamburger Menu Icon

The Xerox Menu – Source: Brad Myers on Vimeo

The burger disappeared for a while until Facebook brought it back in 2010. However, seemingly Apple was the reason for it gaining popularity. The introduction of the smartphone and the need for a compact display lead to its reintroduction. From here everyone else jumped on the bandwagon. 7 years later I think it might be time for some people to get off. A lot of designers and developers believe that the burger menu is the only way to handle navigation on small screens. I won’t disagree that it is an elegant solution, but I believe there are other more effective ways of displaying a menu.

Just a few facts

In 2015 James Foster ran multiple A/B tests on engagement levels between a Burger icon, and the word “Menu”. He found that there was no difference between the two icons. Users are aware that a hamburger is a menu. Unfortunately, the problem does not lie within the understanding of the icon, rather the issue of discoverability.

Experiments have shown that exposing menu options in more visible ways increases engagement (seems like common sense, right?), user satisfaction and profit. Only three years after Facebook used the burger, they switched it out for tabbed navigation.  I could not find any figures to justify the change for Facebook, but the project management company Redbooth banished their burger menu and found a 70% increase in session time and a 65% increase in daily activity almost overnight. The music streaming service Spotify also threw in the burger towel when redesigning their iOS app and found a 30% increase in menu item engagement.

So what is the solution?

Like anything in digital media, there is no one size fits all solution. It very much depends on the market segment, the purpose of the website/app, and how many items are in the navigation (which doesn’t help, I know). Sometimes the burger might be the right choice. Although it probably shouldn’t be used for primary navigation, secondary navigation such as FAQs or News would be a perfect fit. As long as your main Call to Actions are visible and have a good click through rate, a burger menu may help to reduce that extra clutter.

If the navigation items are able to be put into categories, or there are not many then tabs could be a good replacement. A lot of apps are moving in this direction, with the primary navigation located at the bottom of the screen. This reduces the number of interactions the user has to make, and because of this increases engagement. Facebook uses a combination of tab and burger to help reduce clutter.

Facebook App Tab Menu

Facebook App Tab – Source: apptimize.com

I recommend that when designed a website or app interface you really think about what the end user wants out of it, and what engagement you want from the end user. If you give them too many options they may end up with analysis paralysis and leave. Also, remember that it’s never too late to change your navigation. A/B test everything to find out what really works for you!

Categories: Design

Want to work with Fox?

Whether you’re buying or selling, we’d love to hear from you.
Why not drop us a line and say hello?

Contact us