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.