In the past year, many designers have started using the hamburger menu to hide a website’s global navigation on smaller screens. It’s quickly becoming a convention, and I’m often asked questions about it like “should it go on the left or right?” “do users really know what that means?” and “is there another way to show navigation?” And the short answer is that there’s no definitive research (yet) proving one solution is better than the other. So what to do? As with most design problems, it’s best to first understand the context and then design from there. It also helps to know the research, even when it’s not conclusive.

Before we begin… what’s a hamburger menu?

If you know what a hamburger menu is, feel free to skip this section.

A hamburger is an icon with three horizontal lines that represents a button that opens the menu of a website or application. It’s most commonly used on mobile websites and apps, but some companies have recently started using it on their desktop websites too.

Example of a hamburger icon that's closed
Example of a hamburger icon that's closed
Example of a hamburger menu that's open
Example of a hamburger menu that's open

It’s called a “hamburger” because if you really stretch your imagination, you can see the top and bottom lines as buns with the middle line as the burger. This symbol wasn’t born a “hamburger” though. It has a couple of origins, one as a math symbol known as a “triple bar” that means absolute equivalence and one as a container for a contextual menu (like right-clicking to open a menu today) in a software application by Xerox from 1981 (yes, 30+ years ago).

Despite its origins, however, the hamburger menu’s future is likely as a global navigation item for websites and mobile apps.

Challenge the norm.

Whether users understand what the hamburger icon means or whether it should be on the left or right are fair questions, but they’re very low level. There are bigger questions to answer around navigation as a whole, particularly when designing for mobile. “Designing for mobile” doesn’t only mean “make my current website work on mobile.” It’s not (or shouldn't be) our goal to blindly cram a desktop size experience into a small screen. That experience was never designed for a small screen to begin with, so why would we try to conform it?

The hamburger menu was born from our attempts to make a large navigation (and all content) fit onto a small screen without first thinking how it should be designed for the small screen. Luke Wroblewski notes that we’re a generation of designers “obsessed with layout.” It’s hard not to be when your earliest interactions with content are through print layouts: books, magazines, posters, flyers, and so on. Paddi MacDonnell also notes how our focus on layout is not solving the mobile design problem:

“In order to solve the hamburger issue, we have to accept that the Web as we know it doesn’t work. The rise of the mobile web means far more than reducing the number of columns we use and dropping some of the heavier image files.”

But designers aren’t the only ones at fault. Users crave menu systems too, because that’s what they’re used to. Rachel Hinman notes in her presentation “The Mobile Frontier”:

“Even in situations in which a spirit of exploration and freedom exist, where are free to experiment and work beyond physical and social constraints, our cognitive habits often get in the way.”

So before asking left or right, we need to ask…

  • What can be removed from the current navigation? Is everything needed in the main menu area? Does this content need to be accessible from every page on the site? (This is not to say you should ever cut content solely for the sake of cutting it.)
  • Is the full desktop experience needed on mobile?
  • What navigation pattern is most dominant or makes the most sense for the experience? In other words, how reliant on the main navigation are the users?
  • What role can apps play in helping to transition website functionality to mobile?

Answering these questions is a process and too big for a single blog post. If you’re struggling with your mobile strategy and how to start, I recommend two great resources to help jumpstart the conversation:

  • Mobile as a Medium – User Interface Engineering podcast with Luke Wroblewski and Jared Spool
  • The Mobile Frontier – presentation at Interactions 2012 by Rachel Hinman (she also wrote a book on the same topic)

But once you’ve figured out your mobile strategy, you may still have a global navigation on your website that needs to fit onto a small screen. So…

Do people recognize the hamburger menu? Do they understand what it does?

The short answer is people who use the web a lot likely recognize it (even if they don’t know it’s called a “hamburger”), and over time more people will learn its use because of its ubiquity.

Designers and usability experts are researching the hamburger menu, but they’re arguing over its usability. Here are some of the arguments for and against using the hamburger menu.

Argument against: People don’t know what the hamburger menu does.

Jared Spool (User Interface Engineering) said on Twitter in 2014:

The hamburger icon is the 2014 technique for providing mystery meat navigation. (And, thus, appropriately named.)

— Jared Spool (@jmspool) March 5, 2014

In other words, it’s like having a menu in your navigation that’s labeled “Stuff.” No one knows at a glance what to expect from it.

A popular A/B test conducted by Exis (a web publishing company) for one of their websites concluded that the click rate for their menu button increased by 20% when they replaced the hamburger icon with the word “menu.” Basically, the experience performed better when a more literal label was used instead of the icon.

Often designers and developers assume users will know what the icon means, because it’s so ubiquitous and because they talk about it often. However, studies show that recognition of the hamburger icon as the “menu” button is generally low.

Arguments against: Designers can’t decide what the hamburger should be used for.

Complicating the matter further, similar icons have different meanings in other contexts, thus clouding the user’s understanding of hamburger as menu. Here are a few examples:

In the favorites section of the iOS phone app, the icon tells you a list item can be moved:

phone list icon
phone list icon

In Google Play, a similar icon directs users to the music queue. This icon is present on their website and corresponding mobile app:

google play hamburger
google play hamburger

Google also uses the hamburger in their browser Chrome, but it’s used as a context menu rather than the main menu:

Google Chrome menu
Google Chrome menu

Argument for (or at least not against): Its ubiquity will continue to increase recognition.

A Nielsen/Norman Group (NN/g) article offers that the hamburger is recognizable to users who commonly use the web stating, “Although design standards for mobile icons are still evolving, experienced mobile users now recognize the 'horizontal bars' icon as a way to launch a menu.” (This NN/g article is primarily about whether to use the hamburger on a desktop site, which is another topic worth thinking through.)

The ubiquity is not just from designers using it in their web designs.

Bootstrap, a commonly used (probably the most common) toolkit for responsive web designs, defaults the NavBar component to using a hamburger on small screens. This is important, because many developers are building mobile websites with this toolkit, which means the hamburger will be seen even more often as responsive design continues to become the standard in web design.

Android’s “navigation drawer” uses the hamburger icon and is a common menu option for apps built on that platform. Android users are certainly accustomed to seeing this icon, but it’s not clear if that understanding translates to websites. Given that Android is the most dominant mobile platform in the world, however, it’s reasonable to suggest that many people will encounter the icon more often.

And despite Google’s varied use of the hamburger, it is using it in more and more apps and websites, including YouTube, the Google Play store, and more. This is furthering the potential for people to see the icon and begin to form expectations around how it works.

Regardless of the arguments for or against, it’s most important to remember that you and your designer are (probably) not your audience. For example, one of our clients at Launch has a user base that’s age 50+ and fairly risk averse to ecommerce. While these folks are more tech savvy than you may think, they may not be familiar with the hamburger icon yet due to their limited use of mobile websites. Know your audience. Know your context. Design from there and test often.

But really… right or left side?

Considering how people hold their phones, and that the majority of people are right handed, the right side of the phone is easier to reach than the left:

touch areas
touch areas

This suggests the icon should be on the right. However, many people use their phones with two hands or in landscape orientation. And what about tablets?

A quick scan of the web suggests that placing the hamburger on the left side is more common, and that surely plays a role in setting users’ expectations of how something works (or should work).

And don’t forget that most (if not all) mobile apps that use the hamburger menu place it at the top left of the screen. While apps behave differently than websites, the precedent for top left placement is likely being set.

Want to go vegan?

If you decide the hamburger is not a good fit for your website, there are alternatives to using it:

  • Use a button with the word “menu” on it instead of the hamburger icon. Functionally, it’s the same (it still opens the navigation) but its presentation is more literal. This approach can be problematic if your site’s header already has a lot of text or if you’re running a restaurant website where “menu” takes on a different meaning altogether. And don’t forget that “menu” will have to be translated if your site is multilingual.
  • Reduce the navigation so it can fit on the page. If this approach makes sense for your content, great. But don’t force this approach or cut content irresponsibly.
  • Use contextual navigation options to supplement (or replace) a main menu. For example, support random browsing by offering related links on all pages, or offer subnavs that only appear while the user is in the parent section. Another example is using content pods on landing pages that direct users to content deeper within the site.
  • Teach users with animation or visuals. For example, when the website first loads, show users a peek at the menu before sliding it back off screen. It will alert them the menu is there in case they need it later. This is already a recommended process for Android apps to teach users how to interact with the navigation drawer.

Final thoughts

While it’s important to think through even the smallest details of your website—microinteractions sometimes make all the difference—make sure you’re getting the bigger picture right. What’s the strategy behind the design decisions? How well does the design perform with your users? Is the design appropriate for your content?

And know your audience. Your audience is not Amazon’s audience. It’s not your design team. It’s not you. It may not even be your own customers a year ago. Time in the digital world moves quickly, and people are learning at a faster pace every day. Your users today are probably more web savvy than your users a year ago. So test often. Monitor those analytics. Watch the trends. Make informed decisions. Rinse. Repeat.

References

6 Comments