The Truth About The Hamburger Menu

With the advent of the modern smartphone, websites faced a problem: all the great features they’d painstakingly constructed now had to fit on much, much smaller screens with touch interfaces.

One common strategy that emerged to free up screen space was to create a small, unlabeled menu icon where they could bury some of the more advanced features. The icon, comprised of three stacked bars, is known as the hamburger menu. 

The hamburger menu has been at the center of countless passionate debates. Do users even know what it means? And if they do recognize it, do they actually use it?

According to Moovweb data, there are still users who have no idea what the hamburger menu is. Simply labeling it with the word “menu” can increase interactions by 61%. Nevertheless, across the network of Moovweb sites, the hamburger menu is clicked on 20% of the time and is one of the most popular mobile interactions we measure.

It turns out, the hamburger button is both popular with many users and confusing to many others.

The Birth of an Icon

The hamburger menu — also known as the side drawer, or side menu — has a rich history, reaching back to one of the earliest graphical user interfaces: the 1981 Xerox “Star.” Its creator, Norm Cox, wanted the hamburger menu to be “road sign simple.” Its three stacked lines mimicked the look of a menu list.

After its debut in the Xerox Star, however, the hamburger menu was not seen again for several years. It wasn’t until the arrival of smartphones and their accompanying apps that the icon was spotted once again. The first occurrence seems to be the Voice Memos app from iOS. A quick tap to the hamburger icon brought up a handy list of memos and sharing options.

In 2009, the hamburger icon was also used in Tweetie, Twitter’s first mobile app. Tweetie is credited with having a significant influence on Apple app design culture.

However, the best known app to adopt the hamburger menu was Facebook. Facebook gradually progressed toward the design, starting with a two-row grid icon in 2008, evolving to a three-row grid in 2009, and finally to three bars — the classic hamburger menu — in 2010.

After that, it didn’t take long for the use of the hamburger menu to catch on in both apps and the mobile web. Within a few short years, many big companies ranging from Google to Starbucks and Disney were using hamburger menus in their apps and mobile sites.

The Hamburger Menu, Vilified

In 2014, however, a wave of designers and journalists began to question the use of the hamburger menu, in publications ranging from tech news sites to design blogs to cultural commentary magazines.

“Essentially, what’s out of sight is out of mind,” TechCrunch’s Josh Constantine explained. He declared the hamburger menu “the devil,” claiming it heavily constrained or cut-off traffic to any features it contained. “Any navigation options you hide behind the hamburger will be forgotten, or at least used a lot less.”

Some designers pointed out that the hamburger menu also made for a more tortuous user experience. It increased the number of taps required to access these features, they argued, and added to the user’s cognitive load. As Luis Abreu described, “Even if people are aware [of] and value a feature [inside the hamburger menu], this pattern introduces navigation friction.”

Last of all were the critics who claimed that even the icon’s graphic design was flawed. From Innovation Digital:

“[It] doesn’t really look like a menu, unless you already know that is what it represents. The website designer knows it is a menu, so do the developers and wider stakeholders but many users do not.”

But What Does the Data Say?

Moovweb powers hundreds of mobile experiences delivered to 60 million mobile users every month. According to our data, some mobile web users do engage with hamburger menus. But we also found evidence that many others still have no idea what the hamburger menu is.

Let’s dive into our research. We analyzed 50 high-traffic mobile sites on our platform across a number of verticals and studied the interactions of users with the hamburger menu. On average, roughly 20% of mobile site visitors engaged with the hamburger button and it’s one of the top five most popular buttons on mobile sites.

Overall, the hamburger button is extremely well-used by users and it’s almost as popular as search on mobile websites.

What we wondered next was: do users across all types of mobile sites have a similar pattern of hamburger menu engagement? Or does use of the hamburger menu by mobile sites visitors vary by industry?

We found that for content sites, no one uses the hamburger menu. That makes sense. The user is there to read a specific article or just browse the titles on the front page.

Moreover, on sites where users tend to do little browsing beyond the main page, the hamburger menu engagement is relatively low. On Auto & Construction sites, for example, where the dominant user behavior is search, the menu engagement is only ⅓ of what it is for more browse-focused sites like Home & Garden.

On the other end of the spectrum of hamburger menu engagement were mobile sites where browsing is the dominant user behavior. Apparel and Accessories sites, for example, had on average the highest hamburger menu engagement rate (26%). And within that category, certain sites had as much as 59% of mobile site visitors interacting with the hamburger menu.

How to Increase Engagement with the Menu

Next we asked ourselves: is there anything that can be done to increase the engagement rate with the hamburger menu? Yes, as a matter of fact, simply labeling the three stacked bars with the word “menu” increases engagement more than 50%.

We decided to run a test with 300,000 users of a mobile site. About half saw an unlabeled hamburger menu. And half saw the same icon except with the word “Menu” clearly labelling it.

The results of the test were shocking. Just adding the “menu” label increased the number of visitors who tapped on the hamburger menu by an impressive 61%.

Using a label makes the purpose of the hamburger menu dramatically more clear. For sites that use a hamburger, adding the “menu” label can provide quick win in terms of dramatically increasing user engagement, particularly for sites with an older demographic.

To Hamburger or Not to Hamburger

At the end of the day, the burning question is this: Is there still a role for the hamburger menu in today’s mobile world?

Arguably, its role is still a central one. As people become increasingly reliant on their mobile devices and expect the full functionality of desktop experiences on mobile, the need for delivering extensive functionality packaged within a small icon is more acute than ever.

Flawed though it may be, many users continue to use the hamburger menu, particularly within mobile experiences where the dominant behavior is browsing. Across Moovweb-powered sites, the hamburger menu is clicked on 20% of the time and is one of the most popular mobile interactions. And until a new game-changing feature comes along to address the issue of limited screen space (wearables, holograms, the matrix, etc.), the hamburger menu may live on.

So don’t write off the hamburger menu just yet. It may not be the perfect solution, but it still has an important role to play of facilitating browsing on a small screen. But if you are going to use the hamburger menu, you can dramatically increase engagement rates simply by labeling it with the word “menu.”