10 Aug How the Hamburger Menu Might Work for Desktop Sites
The Hamburger Menu is normally frowned upon when used on desktop sites. It only tends to have a home on mobile platforms, but today’s article from Therese Moten looks at how the Hamburger menu may in fact work on desktop sites and drive conversions on certain sites.
Be sure to download the free award-winning Interview Edition of 99 Percent Lifestyle featuring interviews with designers, artists, YouTubers, photographers and much more.
How the Hamburger Menu Might Work for Desktop Sites
Designers concerned with user experience (UX) know when and how to use web elements appropriately.
And when they’re able to improve the overall look and feel of a web page as well as enhance UX, they’re in heaven!
Which brings to mind the so-called hamburger icon. You may be familiar with it even if you haven’t heard the term. You’ve undoubtedly seen the little button with three vertical lines at the top of your screen on mobile websites. Does it remind you of a hamburger?
The hamburger icon is a website navigation aid that leads the user to an otherwise hidden menu. Click on it and a list of menu options comes up.
Does everyone know that? That depends. Younger users do. Research shows that 84 percent of users 18-44 recognize and use the navigation tool. Of those 45 and older, only 52 percent have figured it out. So if you’re considering adopting this navigation technique for a desktop version of your website, you will want to keep these demographics in mind.
But I think you can expect user acceptance to grow. It’s been about five years since the Facebook app introduced the hamburger icon and it has become the standard for mobile. With the growth of mobile and Facebook, among the older demographic, more people are figuring out what it is and how to use it.
The beauty of the hamburger icon is that it’s like the key to a hidden drawer on your website, which the user can open at any time to look for menu options.
But is it a good option for desktop sites? Maybe, but there are risks.
In addition to the question of acceptance by various age groups, these are some pros and cons:
- Streamlines navigation, enhancing design.
- Leaves space on the page to feature your very important call-to-action.
- Allows you more control over UX — the menu accessed by clicking the hamburger icon allows you to simplify the choices. Too many choices may confuse users.
- Users have to click the hamburger icon every time they want to see their choices. This can be cumbersome.
- The simplified menu can work against you, limiting the number of people who see content they haven’t sought.
So, what’s the verdict?
Some UX experts won’t even consider the hamburger menu. They weren’t that happy about having to pare down navigation as increased use of mobile devices required adapting to smaller screens. So they can’t imagine using the technique on a desktop where a larger screen allows more space.
And, they want to make it easier for people to move around the site; requiring an extra click to get the menu doesn’t make sense to them.
In keeping with that, UX pros see hiding navigation as a barrier; it reduces the chances of people discovering unexpected content by themselves.
Here is an example of how this can be a problem:
A web design that helps people find nannies includes a full page of favorable testimonials about the nannies. Parents can see that there are testimonials because they are linked to a navigation bar in the page header. Being able to quickly access the testimonials aids conversion, especially if the testimonials are persuasive. But parents may miss seeing the testimonials if the link to them isn’t visible and they can only be accessed by clicking on the hamburger icon to open hidden draw menu.
Value of the underdog
I’m sure you can see by now that in the UX community, the hamburger icon is the underdog.
But don’t go away, there are some inherent advantages to consider and the navigation aid may very well have a place on your next website.
These are among the advantages:
- Simple and clean
- Guides engagement
- Supports website goal
- Visual Simplicity
There are many reasons website users will respond well to clean, minimal web design. But space for large show-stopping images, combined with stand-out CTA, comes at a cost — these elements take space on the page. Adopting the hamburger icon for simplified navigation frees up space and lets you keep the appearance of the website simple and clean. The downside — requiring your users to click more often — may be offset by the advantages and power of visual simplicity.
Studies have shown that if you give people too many options, most are likely to choose none. In fact, one study discovered that users are 10 times less like to take action if they perceive too many choices. The hamburger icon can increase conversions by guiding your users with simple navigation. An advantage of this is that it lets you control the path users will take through the website.
The path to conversions
It’s important that you’re clear on your goal for your website. Are you making a direct sale, trying to get social shares or building an email list so you can develop a relationship with your prospects? Whatever your goal, you should have a clear CTA and make sure it can’t be missed. At that point, the path you want your visitors to take is straight to your CTA. By keeping navigation simple, the hamburger icon can help you with this by making room on your site for a bold CTA and simplifying choices to guide your users to the areas of your website you want them to see.
There is a risk in using the hamburger menu icon on a desktop site. If you’re going to use it, make sure it’s for the right reasons. Used correctly with the right content on the page and especially with a very clear CTA, it may deliver for you.
If you enjoyed this article then click on the icon below to check out Therese Moten’s website: