The burger menu has always been controversial, with many believing its rather smug parallel lines to be too abstract and not understood by all users.
Even though the icon has proliferated, as more and more business websites have become responsive, it has rarely been seen as a standard.
There are use cases for the hamburger. Zoltan Kollin argues that rarely needed secondary information can be placed behind a hamburger, as Uber and Google Translate have demonstrated.
Uber app with hamburger. Image via @Kollinz
However, in Econsultancy’s 2017 web design trends, we predict a noticeable drop in burgers. The reasons are mainly that:
- a hamburger menu conceals the breadth and depth of an app or website (overwhelming discoverability)
- the hamburger icon is not recognized by all users
- a hamburger menu takes longer to use than many alternatives
- burgers are often placed at the top of the screen, hard to reach for the thumbs
Better alternatives include tabs (often with a “more” option), scrolling navigation, and drop-down lists.
Personally, I find burger menus too often the easy way out for agencies designing a responsive website, and I expect many companies that are redesigning their three-year-old website this year to rethink the hamburger.
There are many apps and websites that have ditched the burger before. Here are five …
Spotify removed the hamburger menu from its iOS app in May 2016, favoring tabs at the bottom of the screen (see below).
The change led to a 30% increase in navigation clicks and was rolled out to Android in November 2016.
NBC News was so in love with the hamburger menu, he used one on his mobile and desktop website designs after a 2014 redesign.
The icon quickly came with additional explanatory graphics and was also colored bright yellow in an effort to increase engagement.
Eventually, NBC admitted defeat on the burger front and added section titles to the header.
Screenshot from NBC News 2014 via James Archer
However, if you visit the NBC News website today, you’ll see that the current design again has the section titles hidden, but this time behind a “sections” menu, rather than a hamburger.
NBC News website, 2016
Windows 10 made extensive use of hamburger menus (late 2014 and early 2015). This has been controversial, especially when it moved to Windows Phone (as explained in the video below posted by an anonymous editor who helped design).
Microsoft ditched the hamburger on its Desktop and mobile Photos app in 2015, in favor of the Collection, Albums, and Folders tabs.
As an unnecessary footnote, you may also be familiar with the so-called Microsoft 365 waffle icon.
Redbooth’s app went from a burger menu to tabs at the bottom and saw an increase in sessions (+ 70%) and repeat users (+ 65% DAU).
In an article on the company’s blog, Rachel Kumar explains the logic behind the 2015 redesign:
A lot of our teammates wanted to fit as much as possible into the small amount of screen space. (We probably taught them a few bad habits in the old design, stacking so many options in the main navigation drawer.)
But the most important takeaway from the exercise was repeating themes or items that people kept adding to the main points.
“Chat”, “My Tasks” and “Notifications” popped up again and again, while “Settings” was the most forgotten item.
Facebook removed the hamburger in September 2013. It has also seen increased engagement.
Here is Facebook in 2013.
..and a more modern screenshot.
The great irony? Econsultancy always has a burger. Hoping it will be forgotten, come our next overhaul.