A big part of being a UX designer is knowing how and when to use web elements appropriately. Offering shortcuts and streamlining a user experience can be incredibly satisfying, especially when it also simplifies the overall look and feel of a web page.
In the five years since the 3-lined menu icon, or the “hamburger menu” as it has affectionately come to be known, was put into widespread use by the Facebook app, it has gained near worldwide recognition. Please note the phrase ‘widespread use’ – the exact origin of the hamburger menu is in itself a hotly-contested debate. No matter what your personal opinion on the design itself is, those 3 little lines seem to have won the menu-icon battle. In other words, the hamburger menu has become synonymous with the hidden-drawer menu.
Now that users have been trained to know what the hamburger signifies, UX and web designers are starting to test the waters to see if the hamburger icon can exist outside of the confines of mobile web design, and (gasp!) work successfully on desktop sites.
The very prospect has many UX experts up in arms. After all, the icon was originally born out of a sense of compromise for mobile. We would have preferred to display full navigation, but it was simply impractical to do so on such a small screen. So why would we ever need, or want to use the icon on a desktop site, where screen real-estate is plentiful?
Why UX-perts Hate the Hamburger Menu
General usability principles dictate that making users go through any extra steps to get where they’re going is a mortal sin. And for good reason. Anytime we create any kind of barrier to content, we are making things harder on our users. Seems completely counterintuitive to our job, doesn’t it?
Not only does hiding a menu create an extra click, but it creates it over and over again. Every time somebody wants to go to another page, they must go through the repetitive action of clicking the icon just for the privilege of seeing the menu.
In addition to creating a barrier, when you hide navigation, it inhibits the ability of people to discover unexpected content on their own. This isn’t always such a problem, but let’s consider this example: A website that connects families to nannies has a page full of glowing testimonials. If that page is linked to from a header navigation bar, it is very likely to be discovered by mothers and fathers looking for a nanny. Those testimonials might be persuasive enough to put the conversion over the top. However, if the same link is located in a hidden drawer menu, it may never be found. What a missed opportunity!
And to make matters worse, consider this statistic: Only 52% of users over the age of 45 even know what the hamburger icon means. So for almost half of that population, those 3 little lines carry absolutely no meaning. They would be highly unlikely to click at all, unless out of pure curiosity.
But even knowing all of this, there is still a compelling case to be made for this underdog of an icon.
A Few Inherent Advantages
Web designers and UX designers alike love to keep things simple. This includes a clean and sometimes minimal design. By utilizing a hidden menu and hamburger icon, we can strip away a utilitarian navigation bar and replace it with something clean and unobtrusive. Even though it may come at the cost of functional simplicity, one can easily see why the pure visual simplicity it brings is appealing.
Countless studies have shown that when given too many options, most people are likely to choose nothing at all. One particular study found that users are actually ten times less likely to act. So by tucking away the navigation, or even only what you have determined to be secondary navigation items, you are essentially eliminating “decision fatigue” from the equation, and putting your users on the path that you have pre-set for them.
“What path,” you ask? We all know by now that every webpage should have a goal. Whether it is to capture email addresses, generate social shares or actually making a sale, you should have a clear, bold call-to-action (CTA), directing your audience exactly where they need to go. Once you have this goal defined, it can often make sense to point your users in a single direction, toward the CTA. Think of it as the yellow brick road that leads to The Emerald City. All other routes are simply detours.
By keeping the navigation simple, eliminating extraneous options and providing a clear objective, you are pointing your users in the right direction toward making a conversion.
Best Practices for Implementing the Hamburger Menu
Since the hamburger menu can actually be beneficial under the right circumstances, it’s important to keep in mind some best practices to make the most out of it, and eliminate any possible confusion that may arise.
- Make sure it’s obviously clickable:. Where some sites fall short is designing the icon of the hamburger menu in such a way that it looks like pure decoration. By containing it within a border, or better yet, styling it like a button, people will understand that it is a navigational element.
- Pair it with a strong CTA:. The only way it is beneficial to hide your menu is if you are providing a clear path elsewhere. This can either be in the header area, an in-context button or link within the body of the page, or both.
- Pair it with a label:. This isn’t a requirement, but it can make things easier on elderly users who aren’t familiar with the meaning of the icon itself.
- Do not hide the main navigation links: In certain cases, it might make sense to leave a few highly relevant navigation links out in the open, while putting the rest in the hidden menu. This way, the most important links are seen, while not burning users out with too many options.
When it Works
Given its many pros and cons, we can see why the hamburger menu icon on desktop is so highly debated. While it is certainly not right in every circumstance, I think it can be beneficial to conversions if your site:
- Has a single, clear CTA
- Uses landing pages that contain enough persuasive information to make users click through to the in-context CTA.
In other words, it can work if your landing pages don’t rely on a lot of clicking around from page to page in order to convince people to convert. Every page might link to the same CTA, or maybe you want to direct people through several (but not too many) pages through carefully considered in-context links. To pull this off, you need to truly understand the art of the landing page, and good, persuasive copy.
If you do, it often makes more sense to lead your audience through the journey rather than having them wander aimlessly on their own.
See the above homepage for The Deep End Design. Notice the use of the hamburger icon, used in conjunction with the brightly colored CTA button. This layout has increased the click-throughs to their main landing page.
Final Thoughts
Using the hamburger menu icon on desktop sites can be risky. If you choose to use it, just make sure it is for the right reason, and done using best practices. When used correctly, with clear calls-to-action, and the right in-page content, you might just be surprised to see that it can offer your website a distinct advantage.
What do you think? Have you seen the hamburger menu icon used to great effect? Or do you vehemently disagree? Keep the conversation going and tell us what you think in the comments below!
Want to learn more?
If you’re interested in the intersection between UX and UI Design, then consider to take the online course UI Design Patterns for Successful Software and alternatively Design Thinking: The Beginner’s Guide. If, on the other hand, you want to brush up on the basics of UX and Usability, you might take the online course on User Experience (or another design topic). Good luck on your learning journey!
