Loving & Hating the Hamburger Icon

Carrie Cousins.
September 17, 2018
Loving & Hating the Hamburger Icon.

I love the hamburger menu. I hate the hamburger menu.

I am constantly contradicting myself about this tiny website element; whether I think it works beautifully…or just makes a mess.

And I’m not alone. While this icon has exploded in popularity, there’s still significant debate as to whether it is the right choice for tucking navigation menus into websites. It’s a debate I have with myself (and team) every time we approach a new project as well.

Because while I love the simplicity of the hamburger menu and the clean canvas it provides, there are some lurking usability issues that just keep nagging me. That’s why I have a distinct love-hate relationship with the hamburger menu.

Love: Clean Design Canvas

The extra space provided by using a hamburger menu icon can create a cleaner, sleeker, more modern feel to the design. I love the look of a minimal design without clutter and layers of elements piled on top of each other.

This design element can encourage your team to actually think about and make certain content and usability decisions as well. Because the hamburger icon doesn’t contain the space to expand to those all-encompassing mega menus that were popular for a while, you have to determine what’s important enough to be a part of the main navigation. And this is an important discussion to have.

Having a limited amount of space for navigation can help the team focus on website goals and what users are doing and what you want them to do. (Gotta love that!)

ascend

Hate: Challenging for Some Users

That tiny little icon with three stacked lines still isn’t wholly familiar to some users. If you manage or are building a website with a distinctly older audience or one that’s not so mobile savvy, a hamburger icon can be confusing.

This segment might not ever click or tap the icon, leading to abandonment of the website.

While this tool tends to work well with more “techie” audiences, it’s not for every user group. If the primary users of your website are on desktop devices, it’s worth reconsidering.

Love: Acceptance as a Mobile User Pattern

It’s fun to watch something happen before your eyes. When the first few websites started using hamburger icons, many of us thought it would never catch on.

The opposite has been true.

On mobile devices, use of the hamburger icon to signal hidden navigation is generally accepted. Most mobile users understand what it is and how it works.

This user pattern also solved a problem with mobile navigation – those tiny little words were difficult to tap. With pop- or slide-out navigation from the hamburger icon, designers are leaving more space around each element and even designing individual navigation links to have the look of buttons, making the style highly usable.

iconvillas

Hate: There’s a Tendency to “Overstuff” Them

Because navigation from a hamburger icon looks and feels like its own page, there’s this tendency to overstuff it with information.

This drives me crazy! I don’t want to scroll in your navigation page. Pick a few important navigation elements, show them to users and move on. Don’t overstuff the navigation because you don’t want to make content and goal decisions.

Every website should have a few pages that are a priority for users to find and visit. Those should be in navigation that opens from the hamburger menu.

Love: Easy and Direct Access to Key Links

Elements in hamburger navigation provide direct access to content.

According to the Nielsen Norman Group, direct access allows users to click or tap right to a “preferred item, instead of forcing users to go through your content in serial order.” The alternative is sequential access, where users have to see multiple elements before getting to the one they want (think carousels for navigation or multi-level mega menus).

Direct access is important because it makes it quick and easy for users to get where they want in the website architecture. Fewer clicks to access information is a good thing.

I know what you are thinking: I already recommended that menus be streamlined to the most important information, so how is this quicker and easier for all users?

Simple: Include search in your navigation if you can’t highlight everything you need to. If users don’t see exactly what they are looking for, there’s a way to find it.

baja

Hate: Lack of Immediate Information

One of the things I hate about hamburger menus is that they can hide some of the context of a website. A good navigation menu provides cues about the content of a website right away with keywords and information at the top of the screen.

It’s not always the case – especially if the design is well planned – but often these cues are missing when navigation is tucked inside a hamburger.

It’s important that the design doesn’t lose this context with that information written into the visible copy on pages.

Love: Extra Real Estate on the Hamburger Screen

The pop- or slide-out nature of the hamburger icon navigation screen gives designers an extra space and bit of real estate to be creative.

Take advantage of that space to do something that will delight users. I absolutely love clicking that icon and getting something special that contributes to my overall user experience.

Use that space to provide extra information, re-emphasize an important fact or create a delightful interaction.

hedgehouse

Hate: It Takes Multiple Clicks to Discover New Things

Is your attention span as short as mine? If I have to click all over the place to find things on a website, I tend to just check out.

Sometimes a hamburger icon can lead to “multiple click/tap fatigue.” Navigation elements are hidden. You have to click to find them. What you are looking for isn’t there. You have to click somewhere else to search. You have to click into and out of the navigation.

All of this clicking can get tedious – even if it does happen in a matter of seconds. (And the average attention span isn’t getting any longer.)

Wrapping Up

So what’s the verdict? Do I love or hate the hamburger menu icon?

It’s both. I’ll continue to love and hate it until a better solution comes along. How do you feel about it?

Carrie Cousins

Carrie Cousins is a freelance writer with more than 10 years of experience in the communications industry, including writing for print and online publications, and design and editing. You can connect with Carrie on Twitter @carriecousins.

Read Next

LimeWire Developer APIs Herald a New Era of AI Integration

Generative AI is a fascinating technology. Far from the design killer some people feared, it is an empowering and…

20 Best New Websites, March 2024

Welcome to our pick of sites for March. This month’s collection tends towards the simple and clean, which goes to show…

Exciting New Tools for Designers, March 2024

The fast-paced world of design never stops turning, and staying ahead of the curve is essential for creatives. As…

Web Tech Trends to Watch in 2024 and Beyond

It hardly seems possible given the radical transformations we’ve seen over the last few decades, but the web design…

6 Best AI Productivity Apps in 2024

There’s no escaping it: if you want to be successful, you need to be productive. The more you work, the more you…

3 Essential Design Trends, February 2024

From atypical typefaces to neutral colors to unusual user patterns, there are plenty of new website design trends to…

Surviving the Leap from College to Real-World Design

So, you’ve finished college and are ready to showcase your design skills to the world. This is a pivotal moment that…

20 Mind-Bending Illusions That Will Make You Question Reality

Mind-bending videos. Divisive Images. Eye-straining visuals. This list of optical illusions has it all. Join us as we…

15 Best New Fonts, February 2024

Welcome to February’s roundup of the best new fonts for designers. This month’s compilation includes some innovative…

The 10 Best WordPress Quiz Plugins in 2024

Whether it’s boosting your organic search visibility or collecting data for targeted email marketing campaigns, a great…

20 Best New Websites, February 2024

It’s almost Valentine’s Day, so this latest collection is a billet-doux celebrating the best of the web this month.

Everything You Need to Know About Image Formats In 2024

Always trying to walk the tightrope between image quality and file size? Looking to branch out from JPGs and PNGs this…