May 18, 2017 | Kayla Hollatz
Never has a hamburger looked so good.
We’re not talking about the one you get at your favorite local pub. (My favorite is Lyon’s Pub in Minneapolis, by the way!) We’re talking about the one that sits atop your website navigation.
The hamburger menu (seriously, I’m not making this phrase up!) features three stacked horizontal lines that act as a button to hide a website’s main navigation links. When you click or tap on the three-line menu, you’ll open a side menu with select options.
The wide adoption of these simple three lines has caused an uproar in the web design and development community, which begs the question…
Three-Line Menus: Are They Good or Bad for Your UX?
While we’ve seen a big resurgence in three-line menus thanks to widespread mobile device use, these hamburger menus are anything but new.
The hamburger icon was created by Norm Cox, an American graphic designer who devised the three-line menu for a Xerox product. That was about three decades ago but within the last 5 years, we’ve seen a sharp increase in its adoption.
Although it was utilized in various apps post-2010, it wasn’t until Facebook popularized the icon that millions of users started to intuitively understand what it meant.
Now back to the debate.
Should websites use hamburger menus? If so, should they only be used in mobile versions and apps or across desktop, too? There’s no simple, absolute answer but we can present the facts (and a few well-placed opinions).
The Pros of Hamburger Menus
Ahhh, simplicity. In a world of complicated websites with loud colors and copy, a little minimalism can go a long way. When the three-line menu was first created, it was meant to simplify the UX by hiding cluttered navigation bars.
When we launched our new website design last month, we adopted the three-line menu in our nav bar to streamline our UX on mobile.
If you visit our site on desktop, you’ll still see our full navigation sans three-line menu. Luckily, you can customize both user experiences with Responsive Website Design like we did.
Along with a cleaner look, three-line menus give website creators more room for design and ample white space, all of which are extremely important on mobile device screens. Tidy website navigation could be one button away!
The Cons of Hamburger Menus
While popular sites like BBC News, Facebook, Chrome, Firefox, and Gmail all use the hamburger icon, it would be shortsighted to say it’s an easily recognizable icon with every audience. Millennials and Gen Z may recognize the icon since they’ve grown accustomed to clicking anything and everything on screens, but what about older generations?
Without context, if you were to land on a website for the first time with three-stacked lines at the top, what would you do? Probably exit out of it or scroll through the homepage, looking for a way to find the navigation bar.
Not only that but hamburger menus have caused companies to include more links in their side menu navigation, leading to major choice overload. When you don’t have to choose between which web pages are the highest priority, it’s easy to just link to all of them in your side menu. This Paradox of Choice (again, it’s a real thing!) leads visitors to take LESS action, not more.
While we’ve talked about how hamburger icons can potentially be conversion killers, we do recommend them in certain circumstances. Yes, really.
“I’m ready to give hamburger icons a shot.”
If you’re saying this to yourself after reading through the pros and cons, there are a few best practices you’ll want to keep in mind when creating your website.
- DO make the three-line menu stand out. You don’t want your menu icon to be so minimalist that it completely blends in with the design or your logo. Then no one will click on it, which defeats the purpose. For example, when you visit our mobile site, you’ll see we put our hamburger menu in our signature high contrast red so it stands out.
- DON’T put your three-line menu on the left. This is not an outright rule but rather a recommendation. As frequent internet users, we are conditioned to think the symbol in the left is the company’s logo. We recommend placing it in the right with white space in between it and your left-aligned logo, especially on mobile.
- DO put a box around the hamburger menu if possible. James Foster, a New Zealand web developer, found that putting a thin boxed outline around the three-line menu increased clicks by 22.4%. We predict this is because it appeared to look more like a button than an image.
- DO label your icon when possible. Especially if you have an older audience, add the term “menu” next to your hamburger icon. It may seem obvious to you but it may not be to your ideal audience. Think of them first.
We’ll close with some ending commentary from hamburger icon creator, Norm Cox.
“The symbol’s longevity (since the 1980s) is a testament to its simplicity, utility, learnability and memorability. To seek to ‘kill’ or ‘abolish’ a UI tool or widget based on poor usage or implementation is both a bit shortsighted and over-reactive.”
What do you think of hamburger icons? Would you use them in your website design? Let us know in the comment section below!