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
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 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.
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
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
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’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.
Facebook binned the hamburger way back in September 2013. It also saw engagement increase.
Here’s Facebook in 2013..
..and a more modern screenshot.
The great irony? Econsultancy still has a hamburger. Here’s hoping it will be forgotten, come our next redesign.