Why You Need to Replace Your Website Hamburger Menu, and How

Mobile usage has exploded; and with it, mobile-specific design strategies have been created. Some of them are amazing, such as responsive websites. Some of them are not so amazing, such as the "hamburger" menu, which we will be discussing (and hopefully killing off) in this article.

What is the hamburger menu?

You've probably seen the hamburger menu without really knowing what to call it. It's the little 3-line icon in the top right or top left of most sites when you access them on mobile. 

(Sometimes you even see it on desktop sites; which, you'll realize is even more awful after reading this article.)

It was created a few years back, and it's simply exploded in usage. It's ubiquitous at this point; if you have a mobile site, you likely use a hamburger menu. 

Unfortunately, it's explosion in usage is a terrible thing for company website owners everywhere. If you have one, you've made a mistake--albeit one that is easily correctable.

Why is it so popular?

Well, to be honest, it is an elegant solution from a design standpoint. Desktop sites have the space to include the traditional menu you see on most sites around the web. So when designers were asked to design sites with smartphones in mind, that presented a serious problem: how can we get all these menu options on a screen so small?

This is why the hamburger menu was created; instead of trying to get all of those options on the mobile screen...why not just hide it behind an icon that allows you to access the menu when you want it? BOOM. It exploded. It seems like an obvious and elegant solution, right?

Except it's not.

A lot of designers design things because they look good, because they are easy, or because every other designer does it that way so it must be a good idea. What happens is that they don't incorporate user psychology into their design; not every designer has an understanding of the way that a user's mind works when they are using a site. In other words, a designer often designs for looks, not user experience.

The hamburger menu seems like a good strategy, but when you evaluate the way that users navigate sites, you learn that it's actually fundamentally flawed.

A fundamental way that website visitors navigate is by looking for information scents, i.e. words or phrases that reference the type of info they are looking for. 

In this article from the American Psychological Association, we hear about research conducted by Peter Pirolli, PHD and his team. They've constructed a theory called "information foraging theory"--which they've been working on since the 90s--which claims that humans sort through the mountain of information online in a way that is incredibly similar to how animals forage for food. 

The most critical concept in information foraging theory? The information scent.

An "information scent" is what a web visitor is looking for when seeking out a specific piece of information. For example, when someone is looking for pricing on your SaaS software, they're looking for words or phrases that indicate where they can find pricing on that page. In this situation, here are some examples of possible information scents for pricing info:

• The bottom of the homepage which sometimes includes pricing information or a pricing table.
• Underneath a "pricing" link on the main menu.
• By clicking a "register" or "sign up" button.

When the visitor realizes they want to know pricing, they start actively trying to sniff out the information. So they begin scrolling around and looking on the page they're on to see if they can locate the scent. They're looking for those clues.

This principle is why desktop websites are so darn effective. That big ol' menu affixed to the top of every website in the world? It is filled with information scents; seriously, it's practically stinky.

• Do you want to find out what this company does? The "services" link acts as your information scent.
• Do you want to find out who the leadership are? The "about us" link acts as your information scent.
• Do you want to find out if they're good at what they do? The "case studies" or "testimonials" links act as your information scent.

You know where they won't find information scents? A hamburger menu. Nothing about that little icon indicates that they can find pricing, services, leadership, or case studies. 

This is one reason that the menu is fundamentally flawed. The other reason is that there's evidence that your average, every-day web browser may not even totally "get" that it's a menu. Corey Smith, from fellow HubSpot partner agency Tribute Media, had this to say in his post from a few weeks ago:

Is it actually flawed, Ross? Or is it just theoretically flawed? HUH?!

I get it: i'm proclaiming that something popular is dead...real original. You think that this is a theoretical argument, when in reality hamburger menus probably work fine.

Well here is some real life evidence. 

Luke Wroblewski, who is a product director at Google, wrote an article on before/after results for apps that utilized a hamburger menu (or another type of menu that achieved the same purpose of hiding all of the menu options behind an icon). Across the board, user engagement went down.

Here are some images from the article:

Sucks, right? Luke also discusses situations were app makers moved away from the hamburger strategy, showing that getting rid of the hamburger menu resulted in better performance:

These aren't the only cases. Numerous news publications incorporate hamburger menus on their websites. This is despite the fact that the icon is clicked at least 20% less than even a basic "menu" label, and that users are still unfamiliar with the design strategy...despite it's multi-year existence.

The design idea is so bad that publishers actually have to explain it. Look at this screenshot from Time where they actually installed a drop-down tip to their visitors to explain the menu and how it works.

And it's not just Time. Many of the biggest publishers, including Slate, Quartz, and Upworthy utilize it, or have utilized it as a core design feature. 

NBC News used it. And they tried really hard to make it catch on. Look at this screenshot of their old site where they did a full-screen explanation of their new site structure:

They kept trying, even making the "radical" move of changing the icon to yellow at some point. They finally gave up and went back to the traditional menu style you'll see on their site today (as of the time of this posting).

When a design idea is so non-intuitive that you have to install tool tips to explain it, you know we have come too far in the pursuit of design simplicity and elegance.

When this design idea is a response to a fundamental need for all of your visitors--navigating your site and finding the information they desire--then we have a serious problem on our hands.

It's time to kill off the hamburger menu.

The reality is that if you have a website that is using a hamburger menu, you could be losing an incalculable amount of money.

Imagine that you have a visitor who is looking for a product or service that you happen to offer. They're building their list of companies to choose from, and they're trying to find your pricing. They end up on your homepage, sniffing for an information scent that indicates pricing...and that darn hamburger menu doesn't help them find it. They leave your site, and move on to the next. You just lost a lead who was seriously looking to buy, because your "simple" solution was fundamentally misaligned with the what people need from website design.

Let me repeat that: you just lost a customer because you hid pricing behind a hamburger menu that did not provide the "information scent" that they needed.

There are better ways to design menus on mobile browsers, and it's time that we get rid of hamburger menus and develop something that is designed in a way that is natural to our website visitors.

Okay so the hamburger menu sucks...but what the heck do I replace it with?

Luckily I have a solution for you, and it's perfect as an alternative to the hamburger. Here's why:

• It fundamentally aligns with user behavior, because it provides information scents.
• A UX designer created it, not a strict web designer. UX designers are inherently required to incorporate user behavior into their design.
• The results show that when user experiences incorporate this menu style, engagement and navigation goes way up.
• It relies on the "Content-First, Navigation-Second" theory of design that says you should emphasize content first in your design, and navigation could come second. This is especially important on mobile devices, where users have little patience for unpleasant content-reading experiences.
• They're already familiar with it, because it's pretty universal for mobile apps. It just hasn't been incorporated in web design yet.

What if I also told you that it borrows from the learnings of Facebook, who have spent millions of dollars in perfecting their user experience to maximize engagement and usage?

Sounds perfect, right? 

Learn from Facebook: Use the Tab Bar

Facebook used to have the hamburger menu; and it wasn't working for them. After countless hours spent researching, iterating, testing, iterating again, and testing some more, they officially replaced their hamburger menu with a tab bar, as you can see in the above picture. 

They put the most important navigation needs--news feed, friend requests, messages, and notifications--in a bottom tab menu. And they even use a Hamburger menu, but the key here is that it actually makes sense to the user. Remember...information scent is key here. A hamburger menu generally provides no scent. But when you place the hamburger icon in combination with the word "more", it becomes a bit different; now people know that they can access most of the things they want to do through the tabs...but if they need something else, click on "more". In this case, "more" acts as the information scent. Need pricing? Click more. Need events? Click more.

This menu structure is very applicable for the mobile navigation of mobile websites. You can simply take your four most critical sections of information (blog, services, pricing, about us, contact, etc.) as your tabs, and put everything else behind the more. This allows you to provide information scents for your most valuable pages, then clearly indicate that they can find the other information they're looking for behind the "more" button. 

The tab bar is a menu nav structure for mobile websites that aligns with natural user behavior, while leveraging the fact that users already use (and love) these navigation styles in their mobile apps.

And, it's not outstandingly complex. The hardest part is writing the CSS for it, and you can probably hire someone to write the CSS for you. 

Here are the basic steps to implementing the tab bar menu for your website:

1. Define your information architecture - you will need to spend some time thinking about your menu structure. What are the most important elements that need to be front and center? What need to go behind the "more" menu? How should that information be organized?
2. Design your menu - pretty straightforward...you just want to make the design for it. Don't get crazy, just liberally borrow from the design that Facebook already uses. It works, so don't try to reinvent the wheel.
3. Build the CSS - since it's a small area that really incorporates some basic styles, the CSS should be pretty easy to build.
4. Set up your mobile nav menu - on Hubspot, this is as simple as creating an "advanced menu" (log into Hubspot > click content > click content settings > click add another menu).
5. Sticky your new menu to the bottom - remember...content first, navigation second. Make sure your menu is set up to be at the bottom. Make sure it's sticky so that it's always present at the bottom of the screen.
6. Apply your CSS style to your menu - this is the part where you connect all that fancy-schmancy CSS to your new menu.
7. Hide your desktop menu - your desktop menu should be visible, but you want that to hide on mobile. In your CSS, you can set the class of the desktop menu as hidden-mobile. This tells the desktop menu to hide itself on a mobile size. This is a CSS class built into most CSS frameworks, and this specific class name is part of the ubiquitous Bootstrap framework. If you're using the HubSpot COS, this is actually built in to their base CSS. I've used it before with clients, it's pretty cool.
8. Show your new mobile menu - likewise, you can use the CSS class visible-mobile to show your new mobile menu when the site is being viewed through a mobile phone.
   • You'll also want to use hidden-desktop to make sure your mobile menu disappears at larger screen sizes...otherwise your users will see your mobile menu and your desktop menu. Just a little detail to remember.

Conclusion

Congrats for making it down here! If I achieved my goal with this article, I have:

• Explained what a hamburger menu is.
• Helped your understand why it is fundamentally flawed in web design.
• Further illustrated its ineffectiveness with before/after data of companies who have utilized it.
• Provided you with an alternative navigation option that your website visitors will love.
  • Which means you will love it, since your visitors will be able to find all the information they need to find as they evaluate if they should give you money or not ;)

If I haven't achieved those, let me know in the comments below. Or, just shoot me an email at rsimons@imrcorp.com. IMR can help you replace your hamburger menu with an improved mobile site map and facebook-style tab menu. Shoot me an email if you're interested.