Hamburger Menu Pocket Guide: Pros, Cons, and Best Practices

UX designers usually choose the hamburger menu navigation style to save screen space, and to keep the users from getting overwhelmed with too many choices. This solution works best when you put your most important options on your main screen and organize the secondary options in the hamburger menu.

It does sound like a safe option and this is why a huge portion of apps and responsive websites choose to implement the hamburger menu. Even so, there is almost a decade-long debate surrounding this small three horizontal lines icon. This is why today, we’re going to review the strengths and weaknesses of the hamburger menu, when and how to implement it. 

Hamburger Menu Pocket Guide: Overview

• What is a Hamburger Menu?
• When to Use it?
• When to Avoid it?
• Strengths and Weaknesses
• Best Practices and Usage Tips

3D Button by Aaron Iker

 

 

A hamburger menu is a navigation tool that opens up to a side menu. You will find it in the form of an icon with three horizontal lines at the top corner of the screen on apps and responsive websites. Once you click that icon, it will reveal hidden navigation with menu options that will grant you direct access to their respective pages.

Icon Concept by Minh Pham

The delicious name of this navigation style comes from the icon’s resemblance to a tasty hamburger. And just like the hamburger you can eat, the hamburger you can click stores all its features well organized and hidden to save space on the plate.

 

 

Hiding your navigation on desktop and mobile might be good for some websites and damaging for others. To prevent misusing this UI element and delivering bad UX, let’s first make sure when is it appropriate to use a hamburger menu.

• Non-essential Items: Not all websites have the minimum number of items (Work, Services, About Us, Blog, Contact). In fact, most websites include a lot more menu options, most of which don’t attract as much traffic as their main pages. Including these items in the main navigation will only clutter the page. The best solution is to put them off-screen in the navigation drawer
• Profile Settings and Lists: When it comes to apps that require the creation of accounts, the hamburger menu is the most intuitive and logical place to store all profile settings, favorites, likes, saved items, and other lists. They also won’t go in the user’s way of executing repetitive usage patterns.
• Navigation Items for eCommerce Websites: With eCommerce, there’s always a second level of interaction with the profile, cart, wish list, and searches. Usually, it’s best to keep those items in a hamburger menu so they won’t clutter the page.
• Content Dead Zones: Content isn’t always built around conversions and education where you put your conversion strategy all out. Some websites need to have their navigation available at all times. In this case, there are content dead zones that heavily rely on primary navigation exploring.
• Single CTA: For landing pages with a single clear CTA.

 

Icon by Stefan Ćirković

 

 

• Core Features: Don’t make your users go to the hamburger menu to search for the most important items. The core features should be a direct discovery upon landing, or else you might risk your users never finding them.
• Very Interactive Website: If your website or app is already heavy on interactions (ex. animations on scroll) it’s a good practice not to inconvenience them with an extra step. For such websites, sequential access is more appropriate.
• Native Navigation Elements: In some cases, such as the case with iPhone’s native navigation, the hamburger menu might hide these options which would impact the usability.
• Desktop: Of course, there are exceptions where the hamburger menu fits the desktop design and experience perfectly. However, the hamburger menu shouldn’t be the only option for a desktop website in general for a couple of reasons. First, on desktop, the navigation adds to the UX by instantly communicating what the website’s about and grants immediate access to its content. Second, Without clear user paths, there’s plenty of room for missed conversions.

 

 

Some UI/UX designers love the hamburger menu, some absolutely hate it. Whatever the case, those three delicious horizontal lines in the top left corner constantly manage to spark debates, inspire bashing and remain popular nonetheless. In order to understand both sides, let’s have a look at the strengths and weaknesses of the hamburger menu.

Animated Menus by Jurre Houtkamp

5 Major Strengths of the Hamburger Menu

 

Ever since 2014, the world of UX recognize the downsides of the hamburger menu and keep calling its downfall. In articles such as Kill the Hamburger Menu on TechCrunch and all around the tech world, UXperts consistently talk in favor of eliminating the trend for the sake of improving the user experience. Although many major apps moved to other navigation styles and patterns, the hamburger menu still dominates the majority of apps and websites to this day. Now let’s see the reasons why the hamburger menu remains synonymous with a hidden-drawer menu.

Interactive by Tubik

1. Universally Recognized Symbol

Many users might not even know it’s called a hamburger menu. However, they will instantly recognize the triple bar icon as it’s universally known as a navigation symbol. This makes it easier for visitors to locate the menu at first glance.

 

2. It Grants Direct Access

As an addition to the recognizability which allows users to access it quickly, the hamburger menu also offers direct access to the preferred option without the need for users to process content before arriving at the screen they’re looking for. This is especially good for mobile where the users will find their screen directly in the menu with one click instead of scrolling through all the steps.

 

3. It’s Clean and Organized

No matter how many navigation choices you might need to offer, the hamburger menu helps you keep them well organized in one place in the order you want users to view them.

 

4. It Can Store Secondary Options

The mobile menu can fit all the secondary access to options that you haven’t included on your main screen. This means you can drag the user’s attention to primary navigation by fitting secondary options from the main screen into the hamburger menu. For example, your game app will feature the CTA options, characters, and play options on the main screen, while setting, account, and payment options will be accessible in the hamburger menu.

 

5. Saves Precious Screen Space

In addition, especially if you use your hamburger menu for secondary options, this saves a lot of screen space.  Since you wouldn’t want your screen to be cluttered with anything unnecessary and drive your viewer’s attention from the main goal of the app or to overwhelm them, this is a smart solution.

 

5 Major Weaknesses of the Hamburger Menu

 

After we took a good look at the pros, let’s head to the cons of the hamburger menu.

Awesome Animation by Calin Balea

1. Signifying Lesser Importance

One of the biggest concerns for using a hamburger menu is that whatever options or features go into the menu will immediately seem less important. You would want to put your best conversion options in the front and make them the first thing your visitors see when they land on your page or app. If these options, however, go to the hamburger menu and require an extra click you’re communicating to your visitors that these pages or screens aren’t that important.

 

2. Possibility of Lower Engagement

Now, we got a bit of a contradiction. On one hand, users recognize the hamburger menu icon and know exactly where to find it. On the other, however, the click rates for the hamburger icon are way lower in comparison to other buttons. The reason for this is that mobile devices, especially phones, get bigger. The bigger they get, the more inconvenient becomes for users to reach the top left or top right corners where the hamburger icon is usually located.  Naturally, this might lead to lower engagement.

 

3. Requires More Actions

When it comes to creating UX, we all need to make sure the experience is as convenient and engaging for the user as possible. Unfortunately, the hamburger menu requires extra actions. First, the users realize they can’t see the menu and they come to the conclusion your website or app has a hamburger menu. Second, they locate the hamburger menu icon and click it. Third, they scan all the options to find the page or screen they’re looking for. And last, they click it. This small additional cognitive load doesn’t seem like a big deal at all, however, studies show that it affects engagement almost by half.

 

4. Doesn’t Translate Well into Desktop

Hamburger menus might be a great solution for mobile devices with limited screen space, however, translating the same mobile-first design into your desktop without any changes may cause a bad user experience. Putting your most important pages in hidden navigation could sabotage them.

 

5. Easy to Forget

This is related to the other weaknesses, but it’s worth mentioning. When you store your pages in hidden navigation, you’re storing them out of your visitor’s sight. They may completely forget to look for them when they first land on your website and don’t get immediate engagement.

 

 

With the theory out of the way, let’s focus on how to make your hamburger menu an effective part of the experience.

1. Try a Custom Icon

The easiest way to make your hamburger menu instantly noticeable is to use a custom icon. You can make it bigger, colorful, or slightly different. Just make sure it still resembles the original universally-recognized three-horizontal-lines symbol.

 

Delicious Foods by Arifin Yeasin

 

2. Use Animation

Menu toggle-close animation makes a seemingly standard menu more interactive and interesting. If your app or website doesn’t have many animations, a couple of UX micro-interactions for different menus and buttons can come a long way.

 

Micro Interaction Vatsal Mehta

 

3. Change the Design for Desktop

The classic hamburger menu is great for mobile users as the vertical sliding feels natural. However, for desktops, consider a more detailed menu with rows and vertical links. Plus, you have to opportunity to go wild with that much free space.

 

M.video Annual Report by Tatiana Skorobogatova

 

4. Make it Obvious

Most of your users know where to look for the hamburger menu, however, even for them, the icon isn’t that visible at first. What about elderly users who aren’t familiar with this navigation style and the meaning of the icon? To make it obvious, you can design your hamburger icon like a button that will help your uses know its clickable navigation. You can even go further and team it with a label.

 

Meetback – Mobile view by Simon Rico

 

5. Combine Navigation Styles

Using your hamburger menu for secondary features means you can still have visible primary navigation. Put your most important links on the screen as tabs, CTA, or other methods you prefer; while leaving the less important links and account settings as hamburger ingredients.

 

Liquid tab bar by Cuberto

 

6. Left or Right?

Placing your hamburger icon on the left is intuitive for speakers of LTR languages. Most websites and apps use the top left alignment for simple convenience and it’s where most users will look for them. The right placement, on the other hand, is better for smartphones with bigger screens as it’s a little bit easier for the thumb to reach the far right corner rather than the far left. This is not a crucial decision, as the hamburger icon is universally known and users will find it either way.

 

Alzavino Website Side Navigation by Jay Walter

 

Final Thoughts

In conclusion, the hamburger menu is so popular and widely used, that most users will expect to find it on your website or app. It’s a great solution for a secondary menu for account setting, less important links, or websites with a single clear CTA. To end the debate, just as every other navigation style, the hamburger menu isn’t universal for all cases, and misusing it can create bad UX. However, it is far from a bad navigation decision and even further from a dead trend.

In the meantime, why not check 45 Great Mobile Menu Design Examples [+Best Practices] or other related insights on web development and web design?

• [UI/UX Design Insights] Wireframe VS Prototype: What’s the Difference? (with Examples and Tools)
• [UI/UX Inspiration] 35 Interactive Website Designs That Will Make You Lose Track of Time
• [UI/UX Design Resources] 15 UI Color Scheme Tools and Generators for the Perfect Interface