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.
Conclusion
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.
