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!)


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.


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.


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.


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

15 Best New Fonts, May 2024

In this month’s edition, there are lots of historically-inspired typefaces, more of the growing trend for French…

20 Best New Websites, May 2024

Welcome to May’s compilation of the best sites on the web. This month we’re focused on color for younger humans,…

Exciting New Tools for Designers, May 2024

This year, we’ve seen a wave of groundbreaking apps and tools. AI is reshaping the industry, enhancing productivity,…

Using AI to Predict Design Trends

Design trends evolve at a blistering pace, especially in web design. On multi-month projects, you might work on a…

15 Best New Fonts, April 2024

Just like web design, type design follows trends. And while there’s always room for an exciting outsider, we tend to…

3 Essential Design Trends, May 2024

Integrated navigation elements, interactive typography, and digital overprints are three website design trends making…

How to Write World-Beating Web Content

Writing for the web is different from all other formats. We typically do not read to any real depth on the web; we…

20 Best New Websites, April 2024

Welcome to our sites of the month for April. With some websites, the details make all the difference, while in others,…

Exciting New Tools for Designers, April 2024

Welcome to our April tools collection. There are no practical jokes here, just practical gadgets, services, and apps to…

How Web Designers Can Stay Relevant in the Age of AI

The digital landscape is evolving rapidly. With the advent of AI, every sector is witnessing a revolution, including…

14 Top UX Tools for Designers in 2024

User Experience (UX) is one of the most important fields of design, so it should come as no surprise that there are a…

What Negative Effects Does a Bad Website Design Have On My Business?

Consumer expectations for a responsive, immersive, and visually appealing website experience have never been higher. In…