The 4 Most Frequently Asked Questions About the Hamburger Menu
Do people even recognize the hamburger icon, what are its downsides – and when does hidden navigation actually make sense?
The hamburger menu raises questions in a lot of user tests – both from our clients and from users. And no, we’re not talking about a Big Whopper or a McSteakhouse, but about those three stacked lines. Some people see two bun halves and a patty in them.
The hamburger menu is a type of so-called hidden navigation. Put plainly, the items in the main menu only become visible through a user action (clicking the hamburger icon).
But let’s get to our first question:
Do people even recognize the hamburger icon?
Unfortunately, I can’t answer this question with a clear yes or a clear no. On smartphones, the hamburger icon is very well accepted. On desktop sites, however, problems came up more often. The reasons are fairly simple:
Findability:
Smartphone displays are, of course, much smaller than desktop screens. On large screens, the hamburger icon can very quickly get lost among the other page elements.
Comprehension
When the first touchscreen smartphones came out, designers and developers had to figure out how to display large navigations properly on small screens. The hamburger menu was perfect for that. But there was one problem: nobody knew this icon. Every single person had to learn it from scratch. Today, thanks to how widespread smartphones are, we no longer have this problem. There’s nobody who uses a smartphone and hasn’t come across the hamburger icon. But there are still plenty of people who have never used a smartphone and, logically, have never come across the hamburger icon either. So these people have no prior knowledge to fall back on and are confused at first.
Design
The hamburger icon comes in all sorts of shapes. These are some typical variants:
Across all our usability tests, the variants “label and border” and “hamburger with label and border”
were the most intuitive for users. In other words: the menu was recognized as a menu and actually used.
What are the downsides of the hamburger menu?
The hamburger menu has a lot of advantages. But we’ll get to those later. Let’s start with the downsides:
1. Users overlook the icon or don’t know what it means
As just mentioned, some people (especially older people without access to a smartphone) don’t know the hamburger icon. On top of that, the icon is very small and easily gets lost. But probably the biggest downside of this hidden navigation is its poor visibility. Important features or content hide behind the icon and only become visible after a click. This adds another hurdle when planning the website and requires a very well-thought-out concept.
2. An extra tap or click is always required.
Let’s assume people understand the icon right away. It still always has to be clicked or tapped. That requires an additional user action and is inefficient. After all, the menu (the navigation) has to be opened with an extra click before the desired content even becomes visible.
3. Implementation problems
On certain operating systems, such as iOS, implementing the hamburger menu repeatedly causes complications, because the standard navigation structure suffers as a result. Unfortunately, there are cases where some iOS app developers overload the navigation bar so much that there’s hardly any room left for the title. On iOS, there’s always a back arrow in the left corner of the navigation bar. Add to that the search icon, the hamburger menu, and the app’s title. Pretty cramped!
What are the advantages of the hamburger menu on desktop screens?
We now know that the hamburger menu works fantastically on mobile devices, is recognized instantly, and has practically no alternative. Our biggest problem child is the desktop. After all, the hamburger menu wasn’t designed for it.
Still, there’s a huge advantage, especially for websites where casual browsing is the main focus: on sites like Google+, YouTube, or Pinterest, the menu doesn’t play a big role, because users scroll through the content or use the search function. Since menus aren’t used in the typical user journey, sites like these can collapse their navigation behind the hamburger menu. Web design is primarily about arranging content elements by priority in order to guide users through the page in a targeted way. Say the goal of the page is for users to complete one specific action, such as signing up for a newsletter or registering for an event. Here, a large navigation with lots of items would be distracting. In this case, the small, subtle hamburger icon ensures that the user’s eye lands on the elements you actually want them to see.
Does the “mobile first” principle apply to navigation, too?
The principle that a website must first and foremost look great on mobile has been burned into the minds of most web designers. Personally, though, I’m not a fan of “mobile first” or “desktop first.” People don’t just use one device and let the other gather dust. A website has to look great on every device. That’s why both mobile and desktop should be taken into account when planning and designing a website. Many users use their smartphone during the day, see an interesting product, make a note of it, and then look at that product again more closely on their laptop or computer in the evening.
So a website should never be designed for just one device. A great mobile site is far from a solid foundation for a great desktop site. And the same goes the other way around. Small elements on desktop are easy to target with a mouse. On a smartphone, that becomes much harder. A space-saving hamburger icon on desktop may prevent users from noticing all of the content, and a classic navigation won’t fit on any smartphone display.
Which type of navigation is right for your project depends above all on your site’s content. Because that content determines how important a visible navigation is. Your site’s goal and its target audience are just as important. Here, too, user research remains essential.
Conclusion:
The hamburger menu is modern and, depending on the target audience, the site’s goal, and the content, can fit perfectly into the concept. But there are significant downsides that a designer needs to keep in mind. Every UI element has to serve the central goal of your site.