September 25, 2015

Why the Hamburger Menu Is so Controversial

Chances are you’ve already seen it: those three stacked lines, usually placed in the top right or left corner of a mobile site. Commonly referred to as “the hamburger” because of its resemblance to a patty of meat sandwiched between two buns, the tiny icon is generating some controversy in the UX/UI and web design worlds. Once considered a standard solution to the problem of restricted navigation space on responsive sites, many are beginning to wonder if the hamburger menu is becoming a problem in and of itself.

So what exactly is the hamburger menu and what’s all the fuss about?

The hamburger–also called the side menu or navigation drawer–is a small icon that, when clicked, will reveal a website’s navigation. The navigation typically will slide down from either the side or top of the screen, and will remain visible until the user clicks on one of the page links in the menu or on the open page behind it.

As the hamburger menu continues to gain popularity–with some companies now choosing to employ it on both their mobile and desktop sites–people are raising issues about its effectiveness as a navigation tool. As with most web design or UX trends, there’s no real definitive right or wrong answer either way, and user-testing on the whole has turned out to be largely inconclusive. But arguments remain on both sides, and it’s worth taking them into consideration when deciding whether a hamburger menu is right for your site.

Three anti-hamburger menu arguments:

  1. It’s not intuitive – Although for some people the hamburger icon has become nearly as ubiquitous as, say, an eject symbol, that’s not the case for many others. A number of user-testing studies have shown that the majority of internet users still don’t know what the three stacked lines represent, and therefore may have significant trouble locating the menu and navigating your site.
  2. It’s not efficient – By default, hamburger menus conceal navigation links, forcing users to first click on the icon before they can view their options and pursue their goal. While this may not seem like a big deal, in the world of web design every click counts. The average internet user is notoriously impatient, so an extra step could easily lead to someone abandoning your site before completing their desired action.
  3.  It decreases discoverability – Again, because the hamburger menu is hidden by default, that means that users are less likely to quickly and easily discover additional pages and information. Most site traffic tends to come from links that direct to a specific page within the site, not the homepage itself. If someone comes to a page on your site and the rest of your site navigation isn’t easily visible, chances are pretty slim that they’ll actively seek out the menu and click around for a while.

Three pro-hamburger menu arguments:

  1. It saves space – The main reason the hamburger menu was created in the first place is also the main thing that it does best: saves valuable screen space. When it comes to mobile design, screen real estate is at a premium, and navigation layouts that work on desktop can look clunky and overwhelming when translated to a phone or tablet. The hamburger menu solves that problem by consolidating a significant amount of information without sacrificing aesthetics.
  2. It’s widespread – Despite the recent controversy, the hamburger menu remains incredibly popular. As the go-to icon for some of the most respected names in the online world (The New York Times being one of them), if you do choose to use it on your site you know you’ll be in good company. While “everybody else is doing it” shouldn’t ever be reason alone to implement a certain feature or functionality on your site, the widespread popularity of the hamburger indicates that something about it must be working well.
  3. Recognition is on the rise – Although the hamburger menu isn’t quite as intuitive to users as some might hope, recognition is definitely on the rise. While some websites are beginning to try out more direct alternatives (creating an icon with the word “menu,” for example), the hamburger icon shows no signs of slowing down anytime soon. The more pervasive it becomes, the more likely it will work its way into the collective conscience of internet users, negating at least one major argument against its effectiveness.

If you want to learn more about whether a hamburger menu is the right option for your site, get in touch! We’re always happy to help.

Stay Connected

Sign up for our eNewsletter to stay on top of all things strategy, design and WordPress