{"id":9902,"date":"2017-06-09T11:00:14","date_gmt":"2017-06-09T10:00:14","guid":{"rendered":"https:\/\/marvel7077.wpengine.com\/?p=9902"},"modified":"2017-06-09T09:42:58","modified_gmt":"2017-06-09T08:42:58","slug":"death-by-hamburger","status":"publish","type":"post","link":"https:\/\/www.shopjessicabuckley.com\/blog\/death-by-hamburger\/","title":{"rendered":"Death by Hamburger"},"content":{"rendered":"

Why three little lines are hurting your\u00a0UX<\/p>\n

\"\"<\/a>
\n<\/p>\n

Oh, the hamburger menu.<\/h2>\n

Recently, I was reviewing my work on a mobile app with another designer, when he asked me why I didn\u2019t use a hamburger menu for the app\u2019s main navigation.<\/p>\n

The question caught me off guard. I paused for a second as I asked myself, \u2018Why didn\u2019t I do that?\u2019 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\u2019re looking for. For the specific app I was working on, the content was not complex enough to warrant a hamburger menu.<\/p>\n

After this conversation, I couldn\u2019t 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.<\/p>\n

<\/div>
<\/svg><\/div>

\"The question caught me off guard. I paused for a second as I asked myself, \u2018Why didn\u2019t I do that?\u2019\" <\/p><\/span><\/blockquote>\n

The Pros and\u00a0Cons<\/h2>\n

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<\/a>.<\/p>\n

<\/div>
<\/svg><\/div>

\"Was I wrong? The designer reviewing my work was more experienced than I was.\"<\/p><\/span><\/blockquote>\n

With any project, your design choices should be informed by a strong understanding of the people you\u2019re 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?<\/p>\n

The hamburger menu is one of those trends that designers often don\u2019t question often enough; they just do it without further ideation. It\u2019s 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.<\/p>\n

So, I did a little investigation to see what other major companies use a hamburger in their mobile apps. Spoiler alert: there aren\u2019t as many as you\u2019d think.<\/p>\n

Live Examples: When It\u2019s Okay, and When It\u00a0Isn\u2019t<\/h2>\n

Let\u2019s take a closer look at a few different solutions to mobile navigation, and the pros and cons of each design.<\/p>\n

<\/div>
<\/svg><\/div>

\n\"The hamburger menu is one of those trends that designers often don\u2019t question often enough\"<\/p><\/span><\/blockquote>\n

\"\"<\/a>

FitBit\u2019s tab navigation, closed and expanded<\/p><\/div>\n

<\/p>\n

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 \u201cAdd\u201d button at the bottom of the screen, which expands to show which types of information the user can add. But this works! It\u2019s thumb friendly and doesn\u2019t hide any key information. The core action \u2014 \u201cadd\u201d \u2014 is still clearly communicated and readily accessible from the main navigation.<\/p>\n

\"\"<\/a>

Twitter\u2019s mobile app, view of Home (left) and Moments (right)<\/p><\/div>\n

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 \u201cmore\u201d options.<\/p>\n

\"\"<\/a>

Uber (left) uses the hamburger menu; Lyft (right) uses your profile picture<\/p><\/div>\n

<\/p>\n

Both Uber and Lyft use a hamburger (or in Lyft\u2019s 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.<\/p>\n

\"\"<\/a>

Amazon\u2019s mobile app, with hamburger menu closed and expanded<\/p><\/div>\n

Amazon uses a hamburger, but let\u2019s 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\u20135 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<\/a> than you might think, especially when on the go<\/a>.<\/p>\n

\"\"<\/a>

eBay\u2019s current mobile app (left) features tabbed navigation, a move away from the hamburger menu, as seen in their 4.0 app (right)<\/p><\/div>\n

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\u2019d be interested to know the analytics and\/or user insights that drove these changes, and how their current design is performing in comparison.<\/p>\n

There are tons more examples of the hamburger flip-flip on this great post from Luke Wroblewski<\/a>.<\/p>\n

Conclusion<\/h2>\n

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\u2019s goals and end users. It\u2019s important to thoughtfully consider the hamburger menu\u2019s use, rather than choosing it automatically because it\u2019s trendy, or \u2018that\u2019s what everyone does.\u2019<\/p>\n

<\/div>
<\/svg><\/div>

\n\"Hidden navigation is very often harmful to the user\"<\/p><\/span><\/blockquote>\n

And to that point, I\u2019ll close with my favorite design argument: \u201cBut XYZ Huge Company does it.\u201d<\/p>\n

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\u2019re figuring it out just like we are.<\/p>\n

Forge your own path. Question everything.<\/p>\n","protected":false},"excerpt":{"rendered":"

Why three little lines are hurting your\u00a0UX Oh, the hamburger menu. Recently, I was reviewing my work on a mobile app with another designer, when he asked me why I didn\u2019t use a hamburger menu for the app\u2019s main navigation. The question caught me off guard. I paused for a second as I asked myself, \u2018Why didn\u2019t I do that?\u2019… Read More ￫<\/a><\/p>\n","protected":false},"author":144,"featured_media":9917,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[],"class_list":["post-9902","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-viewpoint"],"acf":[],"yoast_head":"\n\n\n\n\n\n\n\n\n\n\n\n\n\t\n\t\n\n\n\n\n\t\n