📹 New! Remote User Testing - Get video + voice feedback on designs and prototypes
Read more

Death by Hamburger

Posted 5 years ago by Fiona Foster
Death by Hamburger

Why three little lines are hurting your UX

Oh, the hamburger menu.

Recently, I was reviewing my work on a mobile app with another designer, when he asked me why I didn’t use a hamburger menu for the app’s main navigation.

The question caught me off guard. I paused for a second as I asked myself, ‘Why didn’t I do that?’ It almost felt like a trick question. I briefly explained that the hamburger menu obscured navigation and made it harder for users to find what they’re looking for. For the specific app I was working on, the content was not complex enough to warrant a hamburger menu.

After this conversation, I couldn’t stop thinking about it. Was I wrong? The designer reviewing my work was more experienced than I was, but I felt certain that a hamburger menu was the wrong way to go.

"The question caught me off guard. I paused for a second as I asked myself, ‘Why didn’t I do that?’"

The Pros and Cons

A hamburger menu is great because it saves a lot of screen space, which allows for a simple, clean design. On the other hand, this requires that the user do more work to move between sections of the app, increasing the interaction cost to the user. Though a hamburger menu can visually simplify a design, it complicates the app structurally because it obscures information behind three little lines that provide no information scent.

"Was I wrong? The designer reviewing my work was more experienced than I was."

With any project, your design choices should be informed by a strong understanding of the people you’re designing for. Do they understand that three horizontal stacked lines means menu? Have they interacted with a hamburger menu before and is that experience extensive enough for them to quickly understand what it means?

The hamburger menu is one of those trends that designers often don’t question often enough; they just do it without further ideation. It’s dangerous to implement any design trend without considering if that choice makes sense in context of the app experience and its users. This is especially so if the trend in question applies to primary navigation.

So, I did a little investigation to see what other major companies use a hamburger in their mobile apps. Spoiler alert: there aren’t as many as you’d think.

Live Examples: When It’s Okay, and When It Isn’t

Let’s take a closer look at a few different solutions to mobile navigation, and the pros and cons of each design.

"The hamburger menu is one of those trends that designers often don’t question often enough"

FitBit’s tab navigation, closed and expanded

FitBit takes a lot of complex data, and through great design, makes it simple and easy to understand. And guess what? No hamburger! The closest they get is the teal “Add” button at the bottom of the screen, which expands to show which types of information the user can add. But this works! It’s thumb friendly and doesn’t hide any key information. The core action — “add” — is still clearly communicated and readily accessible from the main navigation.

Twitter’s mobile app, view of Home (left) and Moments (right)

Twitter has a LOT of features, yet every single one is accessible in a single tap. Amazing. Even the Moments section, which features popular Tweets by category, utilizes a scrollable menu to effectively display multiple content categories at once. Though I suspect that the navigation could be improved further, the existing structure packs in a ton of functionality without giving in to the hamburger or “more” options.

Uber (left) uses the hamburger menu; Lyft (right) uses your profile picture

Both Uber and Lyft use a hamburger (or in Lyft’s case, your profile photo) for the main navigation. However, it works in both scenarios, because the primary goal of the apps is to schedule a ride, which is immediately accessible from the main screen. Any additional items behind the hamburger menu are secondary actions, like Ride History and Payments. These features are unlikely to be used every time a person opens the app.

Amazon’s mobile app, with hamburger menu closed and expanded

Amazon uses a hamburger, but let’s be real here. Amazon is an exception because Amazon sells literally everything. It would be crazy to try to narrow down their board range of offerings into 4–5 menu items for a tab bar OR a scrollable horizontal menu. Here, the hamburger menu is a smart choice to simplify the interface. Amazon made another great design choice that makes the hamburger menu ok: the app uses a fully expanded search bar. A predominant search bar makes it quick and easy for a user to type in exactly what they want. And as research shows, users are more search dominant than you might think, especially when on the go.

eBay’s current mobile app (left) features tabbed navigation, a move away from the hamburger menu, as seen in their 4.0 app (right)

eBay, like Amazon, sells a bazillion things. Though their mobile app used to feature a hamburger menu, their most recent iteration has moved away from that, and now uses a tab bar. I’d be interested to know the analytics and/or user insights that drove these changes, and how their current design is performing in comparison.

There are tons more examples of the hamburger flip-flip on this great post from Luke Wroblewski.


Moral of the story: think before you burger. Navigation is a vital part of usability, and deserves careful thought and consideration. Hidden navigation is very often harmful to the user, though any design choice must always be considered within the overall context of the app’s goals and end users. It’s important to thoughtfully consider the hamburger menu’s use, rather than choosing it automatically because it’s trendy, or ‘that’s what everyone does.’

"Hidden navigation is very often harmful to the user"

And to that point, I’ll close with my favorite design argument: “But XYZ Huge Company does it.”

So? The design team at any big company is made up of humans just like you and me, who deal with technical constraints, business goals, and executives above them who often make the final call. People make mistakes. They’re figuring it out just like we are.

Forge your own path. Question everything.

Follow us on Twitter and Facebook!

Stay connected – be the first one to get interesting updates from Marvel and the design world.

UX Architect at Critical Mass in San Francisco.

Related Posts

Making good component design decisions in react when it’s hard to see how an existing component can still be reused

Disney’s 12 Principles of Animation is one of the inestimable guides when traditional animations are considered. It was put forth by Ollie Johnston and Frank Thomas in their book – The Illusion of Life. These principles were originally designed for traditional animations like character animations. However, these principles can still be applied in designing interface animations. So, this is just… Read More →

Design is no longer subjective. Data rules our world now. We’re told all design decisions must be validated by user feedback or business success metrics. Analytics are measuring the design effectiveness of every tweak and change we make. If it can’t be proven to work in a prototype, A/B test, or MVP, it’s not worth trying at all. In this… Read More →