Web Solutions Blog: The Hamburger Menu Is Stupid and Worth Killing

If you don’t know what the “hamburger menu” is, it’s a mobile app design icon used to indicate the presence of a hidden menu. The familiar icon includes three horizontal lines of equal length stacked on top of each other, representing an abstracted, flattened hamburger in its most basic elements. Its cutesy name has stuck hard. The hamburger menu is a fixture of mobile app design. Like any iconography, the hamburger menu has taken on a meaning for the user. When folks see that menu, they know to tap here for extra stuff.

It’s Mystery Meat

The first time you see the hamburger menu, it’s mystery meat. It’s only by the frequency of use that users came to recognize the hamburger menu and representing “more here.” Nothing about the icon conveys information about what’s inside: only that it contains something additional. If you saw that icon for the first time, you’d be hard-pressed to figure out what it’s for. The three-stacked-lines icon of the hamburger menu is also frequently used to indicate “grab points” for dragging around user interface elements, so it’s pulling double duty and potentially confusing users.

Because the hamburger icon is essentially meaningless, it gives you no indications of what to expect when you tap it. Will it reveal navigation items, app options, account information, or all three? The only way to find out is to tap the menu. While exploration is required to understand the full range of function in your application, “blind stumbling” shouldn’t be part of your user experience design. And that’s exactly what the hamburger menu icon encourages.

Good app and website navigation shares a lot with real-world wayfinding: icons and text need to be clear, obvious, and relevant. Without those indicators, users cannot understand what they’re looking at, and can’t reach their goal or complete their task. This breakdown should represent a major failure of navigation design, and yet the mysterious hamburger menu has endured—despite obvious failing to convey any information about what secrets it holds.

This is a problem beyond the app’s first launch. When information is buried in a hamburger menu, even experienced users can easily forget what’s there. As they say, out of sight, out of mind. This obscures crucial app functionality and limits usability. These problems lead to lower engagement, shorter user sessions, and limited understanding of the app’s scope and capability. Users might never discover functions stuck in a hamburger menu, or they might regularly forget the functionality exists.

It’s Hard to Use

hamburger menu hard to use

The hamburger menu is, most frequently, the junk drawer of an application. It’s like the door to the attic, containing all the occasionally useful items that developers added but weren’t sure where to place. It shares a lot with an attic, in fact: poorly organized, badly lit, partially constructed, and stuffed with old junk.

Typically, the only connection between menu items is that the developer couldn’t figure out where else to put them. That’s a terrible way to organize your interface, and no one would intentionally plan to base a navigation system on that kind of technique. It’s clunky, clumsy, and sub-optimal as a user interface element.

First, users can’t remember what it contains when they want to use that functionality. Is it in the hamburger menu, or do I swipe somewhere, or tap another menu icon? The chaotic collection of otherwise unrelated functions are difficult to recall and wrangle, especially if you don’t use the app that frequently.

Even if you know exactly what’s in the menu, using the menu is still a sub-optimal process. Finding the right item from the menu requires significant hunting, and the “slide over” menu most often use takes a moment to reorient to. This creates friction and hangups in user flow, degrading the user’s experience and encouraging them to ditch your website or app.

What’s Better?

The hamburger menu has stuck around for so long that it just seems like the “right” way to organize an application. But designers have begun to migrate away from that. Take a look at Facebook’s modern app. There’s a ribbon on the bottom that contains icons, which allow you to navigate between different views. These icons include text labels and descriptive imagery. The user immediately knows what they can do with the app. Better still, what they’re supposed to do with the app.

Once upon a time, these functions lived in a hamburger menu. According to Luke Wroblewski’s breakdown in engagement numbers, Facebook saw better engagement, user satisfaction, and user flow with the icon ribbon. It’s clear and obvious, quickly presenting the user with their most important options right up front. While some functionality is still in a “more” menu, this is somewhat unavoidable with the huge array of functionality provided by the Facebook app.

What Should Be Visible?

When designing your app or mobile website, you need to think carefully about what the user’s primary goal will be. Are they looking for stores, pricing information, products, new posts, messages, or updates? Find out what users need and want and include obvious navigation links for those elements. You can aid user navigation by using the terminology the user is most familiar with. Don’t skip usability testing or interviews: this will tell you what you need to have front and center.

You might also like the following user experience posts: