Posted in Web Design

The design flaws of the hamburger menu

Hamburger menu - why to use/avoid this navigation solution

Hamburger menu – why to use/avoid this navigation solution

Once upon a time, it was a beautiful, elegant solution preserving precious space on mobile devices, smartphones, and tablets. But the good old days of the hamburger menu are long gone. Even now, when its implementation spread to desktop applications as well, the general feeling is that it tends to cause more harm rather than good.

Hamburger menu designs

Hamburger menu designs

It looks great, doesn’t it?

And you can easily notice the resemblance with a bun-meat-bun sandwich, right? (Really, that’s where the funny name comes from.)

Now that you’re looking at this hamburger menu, it’s obvious you’ve seen it everywhere: from the most popular social media apps to WordPress themes and pretty much on any other website that’s been designed in the last couple of years.

But that is just wrong.

How Facebook switched the hamburger menu

How Facebook switched the hamburger menu

How could something so popular still be so wrong?

The problems with the hamburger menu are numerous and, in fact, so important, that you can’t afford to ignore any of them:

  • It is hard to discover, making navigation a pain for your users;
  • It is difficult to access, therefore less effective;
  • It clashes with other design elements on the navigation platform;
  • It is not glanceable, which is essential for a menu.

In a nutshell:

This type of menu is out of sight and, therefore, out of your users’ mind.

It goes against all the good practices of user-friendliness, usability, information architecture and so on!

Still, numerous designers out there think of it as the “go to” solution for small screen navigation. It doesn’t even have to make much sense to the user, as long as they’re framing it with fun, colorful, and animated interfaces.

They are offering their users a confusing and difficult navigation experience just for the sake of a good looking menu format. Moreover, they expect the user to go through all those extra steps that a sidebar menu implies, just because everything is nicely animated.

And that needs to change.

In case you’re still holding on to that thought, let’s take a closer look at what all these problems imply:

Less discoverable – the hamburger menu stays hidden in its default state. The user, who doesn’t even know his options in terms of navigation, has to click on it to make the options hidden behind it to drop down as a list.

Since most people don’t even know the functionality of this menu, you’re giving your visitors a problem to solve the moment they land on your website: What do I do know? Where should I click?

Sure, designers often supplement the design element with a tooltip or a “menu” label. But you’d think it’s good enough for usability best practices?

Hamburger menu with direct access to the most important pages

Hamburger menu with direct access to the most important pages

 

Less effective – effective means adequate to accomplish a purpose. For a website menu, the purpose is to give users direct access to the most important pages. And users need almost twice more time to navigate on a website through a hamburger menu than through a navigation bar with tabs.

Even if your visitors are aware of this feature, designing with this practice introduces “friction” between them and the product. Who wants to click twice instead of once?

 

 

Hamburger menu on iOS

Hamburger menu on iOS

 

Clashes with other design elements – decluttering comes with a cost. While a hamburger menu makes your page look airier, it will cause you problems down the road. That’s because it sets the focus to the content rather than the navigation.

Complications vary from one platform to another. When working in iOS, for instance, trying to squeeze in a hamburger menu between the “back” button (from the left corner on top of the screen) and a title in the header is a real pain.

 

 

Not glanceable – with the menu content hidden, pushing notifications to the user gets even more complicated for the designer. Using a generic notification “bubble” could do the trick, but even this one isn’t very specific.

Whatever you do, users won’t know exactly what options they have until they’ve opened up the menu. They will only be able to take action after seeing the drop down list and analyzing the alternatives.

So in an online environment where everyone wants users to act fast, do you still feel like sending them on a journey to discover what they can actually do on your website?

Seeing the options only after open up the hamburger menu

Seeing the options only after open up the hamburger menu

Why are they still using it?

The principles of the hamburger menu seem sound. It clears up your pages, leaving more room for content.

If and when users want to see the navigation, they just click on it and it’s right there.

But that’s just theory.

In practice, only you, as a designer, perfectly familiarized with the underlying architecture of the website, can find it with your eyes closed.

Visitors have little to no idea about it, and that’s what most designers who still use the hamburger menu keep forgetting.

Think Facebook gave up on it out of the blue? They’ve been tackling with hamburger menu navigation in their app for a while. Eventually, they switched to tab navigation, for all the obvious reasons: better engagement, higher navigational speed, more revenues!

While they kept a tiny hamburger menu in the left corner, they’ve taken out the most important parts and made them readily visible as tabs. That’s what you do when you plan to make your users’ life easier.

Is there any proper context to use a hamburger menu?

To hamburger or not to hamburger remains a controversial question. And while the answer inclines to a strong not to, there are some rare occasions when the pattern is still acceptable.

For instance, a navigation bar with 8 to 15 elements, that physically cannot be organized into a tab navigation, could use this formula.

Nevertheless, the rule of thumb is to avoid it altogether.

When in doubt, lay down the information architecture of the website or app and try to structure it as you see fit. Sometimes, less is more, so reducing your menu elements to less than 8 could do more good to your users.

Raul Rusu

Experienced in strategic project planning, Raul Rusu is the CEO of Design19 web agency. With great experience in public relations and skills in examining development processes, Raul has been working with passion for every project to turn it from plans to results.