The hamburger menu has always been contentious, with many believing its rather smug parallel lines are too abstract, not understood by all users.

Even as the icon proliferated, as more and more company websites went responsive, it has seldom been viewed as a standard.

There are use cases for the hamburger. Zoltan Kollin argues that secondary information that is rarely needed can be placed behind a hamburger, as demonstrated by Uber and Google Translate.

Uber app with hamburger. Image via @Kollinz

uber app

However, in Econsultancy's 2017 web design trends, we foresee a notable decline in hamburgers. The reasons are chiefly that:

  • a hamburger menu disguises the breadth and depth of an app or website (scuppering discoverability)
  • the hamburger icon is not recognised by all users
  • a hamburger menu takes more time to use than many alternatives
  • hamburgers often sit at the top of the screen, hard for thumbs to reach

Better alternatives include tabs (often with a 'more' option), scrollable navigation and dropdowns.

Personally, I view hamburger menus as too often an easy way out for agencies designing a responsive website, and expect many businesses redesigning their three-year-old websites this year to rethink the hamburger.

There are plenty of apps and websites that have ditched the hamburger already. Here are five...

Spotify

Spotify got rid of the hamburger menu from its iOS app in May 2016, favouring tabs at the bottom of the screen (see below).

The change led to a 30% increase in navigation clicks and was rolled out on Android in November 2016.

spotify app

NBC News

NBC News was so enamoured with the hamburger menu that it used one on its mobile and desktop website designs after a 2014 rethink.

The icon soon came with added explainer graphics and was also coloured bright yellow in an effort to increase engagement.

Eventually, NBC admitted defeat on the hamburger front and added section titles back to the header.

NBC News 2014 screenshot via James Archer

nbc news 2014

However, if you visit the NBC News website today, you'll see the current design has the section titles hidden once again, but this time behind a 'sections' menu, rather than a hamburger.

NBC News website, 2016

nbc news 2016

Microsoft Photos

Windows 10 made wide use of hamburger menus (in late 2014 and early 2015). This was controversial, especially when carried over to Windows Phone (as explained in the video below posted by an anonymous redditor who was involved in the design).

Microsoft ditched the hamburger on its Photos app on desktop and mobile in 2015, in favour of Collection, Albums, and Folders tabs.

As a pointless footnote, you might also be familiar with Microsoft 365's so-called waffle icon.

Redbooth

Redbooth’s app moved from a hamburger menu to tabs at the bottom and saw increased sessions (+70%) and returning users (+65% DAUs). 

In a post on the company blog, Rachel Kumar explains the logic behind the 2015 redesign:

Many of our teammates wanted to fit as many things as possible into the small amount of screen real estate. (We probably taught them some bad habits in the old design, by stacking so many options in the main navigation drawer.)

But the most important takeaway from the exercise was the repeating themes or items people kept adding to the main spots.

“Chat,” “My tasks,” and “Notifications” appeared over and over again, while “Settings” was the most forgotten element.

redbooth redesign

Facebook

Facebook binned the hamburger way back in September 2013. It also saw engagement increase.

Here's Facebook in 2013..

facebook app

..and a more modern screenshot.

facebook app 2016

The great irony? Econsultancy still has a hamburger. Here's hoping it will be forgotten, come our next redesign.

Ben Davis

Published 5 January, 2017 by Ben Davis @ Econsultancy

Ben Davis is Deputy Editor at Econsultancy. He lives in Manchester, England. You can contact him at ben.davis@econsultancy.com, follow at @herrhuld or connect via LinkedIn.

1067 more posts from this author

Comments (11)

Comment
No-profile-pic
Save or Cancel
Joe Pendlebury

Joe Pendlebury, Senior Mobile UX Architect at Next plc

Nicely written article, Ben. I agree, that this is the year to bin the "Hamburger Menu" - it's hanging on in there for dear life, much like hamburger chain, Wimpy.

At Next, back in January 2016 - as part of a redesign of our dedicated, mobile site, we introduced a scrollable / partially visible navigation menu (also referred to as a "Snail Trail" menu - I believe someone at Delta Airlines, first used the phrase - because UX needs more fad phrases, right?), to primarily house our key department links. This was on the back of a positive response, from a couple of rounds of usability testing.

For some of our users, this was a bit of a learning curve (it's to be expected, given it's still a relatively new and emerging, style of mobile navigation design); however, our analytics, and follow-up, usability testing, suggests the majority of our users quickly adapted to the change, and now have little to no issue, in understanding how to interact with this style of navigation. We're seeing solid click-through rates for the links hidden off the immediate viewport too, in comparison, with those visible, by default.

There are also many other examples of retailers, and indeed, other types of websites (primarily, news outlets), who have also made the move, in this direction. I've covered this in some detail, in the following article, which you may also find to be of interest - http://www.uxchap.com/blog/25/11/2016/wheres-the-beef-revisited-navigation-design-for-the-mobile-web-18-months-on

7 months ago

Chris Gibbins

Chris Gibbins, Director of User Experience & Optimisation at BiglightSmall Business Multi-user

Great post Ben, it's an area we're experimenting with a lot at the moment. And Joe you beat me to it! I was just about to mention Next as a great example. We've been very interested in what you did on Next for a while now and I was eager to hear firstly how you tested it and also the results.... so now I know, thank you :-)
BTW had you considered A/B testing it also?

7 months ago

Joe Pendlebury

Joe Pendlebury, Senior Mobile UX Architect at Next plc

Haha, great minds think alike! Thanks for the positive feedback too, Chris.

We did indeed run a straight A/B test (both at the wireframing and designs phases) - "Hamburger Menu" (our then, "Live" navigation design) vs. the "Snail Trail".

At that point, it was a very close-run battle; however, we also carried out a series of face-to-face, findability-focused, task-driven, usability testing sessions with Next customers, who in turn, responded more favourably to the "Snail Trail" pattern.

Only post-launch, did we really fully understand the impact of the change. Links that would otherwise receive much lower click-through rates, were in turn gaining much more interaction - even though they were not visible, in the immediate viewport.

What I would say, is that it's so important to ensure that the last navigational link displayed in the immediate viewport, is indeed, partially visible (the solid to transparent fade, is vital to this) - otherwise, users will have no idea that the nav can be scrolled. Not only that, consider all screen sizes - you may need to amend the padding between each link, to ensure that last link displayed in the immediate viewport, is still partially visible.

7 months ago

Joe Hawkes

Joe Hawkes, Senior Digital Marketing Executive at Charles Russell Speechlys

There have been articles predicting the death of hamburger menus doing the rounds for years (see this one from May 2014 https://techcrunch.com/2014/05/24/before-the-hamburger-button-kills-you/).

But contrary to every expert's opinion, they are more prevalent than ever. I think it's time to accept that despite their limitations, they're going to be around for a while!

7 months ago

Ben Davis

Ben Davis, Deputy Editor at EconsultancyStaff

@JoeP Invaluable stuff. Thanks so much for the detail. Those subtle cues are so important .

7 months ago

Chris Gibbins

Chris Gibbins, Director of User Experience & Optimisation at BiglightSmall Business Multi-user

Thank you Joe for the extra insight! The findability-focused task is a good idea and very appropriate. And yep it's all about showing a bit of the last visible item. What we've also been talking about is how this becomes a bit trickier when considering different languages because of the word lengths.
Personally I'm not sure "Snail Trail" is a good name for this new design pattern... I'm sure we can do better than that

7 months ago

Joe Pendlebury

Joe Pendlebury, Senior Mobile UX Architect at Next plc

@Ben - Absolutely. That visual cue is imperative to aiding the understandig of how to interact with the navigation menu.

@ Chris - You're welcome. Great point raised about International websites, and the need to consider different languages too. Given the length of words used in languages, like German and Chinese, this could well pose problems with the scrollable / partially visible navigation approach. We were actually only discussing this internally yesterday.

Many of the mainstream, Chinese retailers I looked at, were either embedding all of their key department / product category links into the body of their home page, or were using a hamburger menu - albeit, a much more image-rich approach, than we are used to seeing being used by retailers, in Europe and North America. Look at tmall.com on a smartphone, for example.

I also came across a couple of Chinese retailers, who like US-based, beauty start-up, Glossier (www.glossier.com), and movie ticket vendor, Fandango (http://mobile.fandango.com), appear to be among the first of a handful, to be using a "Tab Bar" approach to navigation - on the mobile web. Check out http://m.gome.com.cn and http://m.banggo.com. Again, this approach, doesn't come without it's disadvantages - the most prominent, being the fact that in Safari, tapping a tab, will bring in the the footer element of Safari's Ui (if not already visible), meaning two tab taps are often required, to be directed through to the destination page.

7 months ago

Lee Duddell

Lee Duddell, Founder at WhatUsersDo

Great article Ben.
@Joe thanks for sharing the detail of how you approached improving your menus (refreshing to hear how you combined AB and Usability testing to optimise the design).

You might find this research interesting: https://www.nngroup.com/articles/hamburger-menus/

7 months ago

Pete Austin

Pete Austin, CINO at Fresh Relevance

Spotify is an ironic example, considering their icon is basically a hamburger menu.
https://www.spotify.com/

7 months ago

Joe Pendlebury

Joe Pendlebury, Senior Mobile UX Architect at Next plc

@Pete - I think Esprit wins that one! They've even gone as far as using five lines to represent their hamburger menu icon - possibly, to avoid confusion with the letter "E", in their logo! :) http://www.esprit.com/mobile

7 months ago

Joe Pendlebury

Joe Pendlebury, Senior Mobile UX Architect at Next plc

It's not just retailers in the UK and North America that are utilising the partially visible, horizontal-scrolling nav, either. Here's an example from South Korean department store, Shinsegae - http://m.ssg.com

7 months ago

Comment
No-profile-pic
Save or Cancel
Daily_pulse_signup_wide

Enjoying this article?

Get more just like this, delivered to your inbox.

Keep up to date with the latest analysis, inspiration and learning from the Econsultancy blog with our free Digital Pulse newsletter. You will receive a hand-picked digest of the latest and greatest articles, as well as snippets of new market data, best practice guides and trends research.