Sure, here’s the translation of the text while maintaining the same structure:
—
In many user tests, the burger menu raises questions. This is true for both our clients and users. However, we are not talking about a BigWhopper or a McSteakhouse, but about the three horizontal lines stacked on top of each other. Some people see them as two bun halves and a patty.
The burger menu is a variant of so-called hidden navigation. In plain language, this means that the elements of the main menu only become visible through a user action (clicking on the burger icon).
But now let’s get to our first question:
Is the burger icon even recognized?
Unfortunately, I cannot answer this question with a clear yes or no. On smartphones, the burger icon is very well accepted. However, there have been more problems on desktop sites. The reasons for this are relatively simple:
Findability:
Smartphone displays are, of course, much smaller than desktop computers. The burger icon can easily get lost among other elements on large screens.
Understanding
When the first smartphones with touchscreens came out, designers and developers had to think about how to display large navigations on small screens. The burger menu was perfect for this. But there was a problem: No one knew this icon. It had to be learned by each individual. Nowadays, due to the widespread use of smartphones, we no longer have this problem. There is no one who hasn’t come into contact with the burger icon on their smartphone. However, there are still many people who have never used a smartphone and therefore have no prior knowledge of the burger icon. This can lead to confusion.
Design
The burger icon comes in various forms. These are some typical variants:
In all usability tests, the variants with “label and frame” and “burger with label and frame” were the most intuitive for users. In other words: The menu was recognized as such and used.
What are the disadvantages of the burger menu?
The burger menu has many advantages. However, we will take care of these later. Let’s start with the disadvantages:
1. Users overlook the icon or do not know its meaning
As just mentioned, some people (especially older individuals without access to smartphones) do not know the burger icon. Additionally, the icon is very small and can be overlooked. But the biggest disadvantage of this hidden navigation is its poor visibility. Important functions or content are hidden under the icon and only become visible after a click. This is another hurdle in the conception of the website and requires very good planning.
2. An additional tap or click is required.
Assuming that people have immediately understood the icon, it still always needs to be clicked or tapped. This requires an additional user action and is inefficient. After all, the menu (navigation) must first be opened with an additional click before the desired content becomes visible.
3. Problems with implementation
There are always complications with certain operating systems, like iOS, when implementing the burger menu, as the standard navigation structure suffers. Unfortunately, there are cases where some iOS app developers overload the navigation bar so much that there is hardly any space left for the title. In iOS, there is always an arrow for going back in the left corner of the navigation bar. Add to that the search symbol, the burger menu, and the app title. Quite cramped!
What are the advantages of the burger menu on desktop sizes?
We know that the burger menu runs fantastically on mobile devices, is immediately recognized, and is practically without alternative. Our biggest concern is the desktop. Because the burger menu was not designed for it.
However, there is a massive advantage for websites where random browsing is the focus: On websites like Google-Plus, YouTube, or Pinterest, the menu plays no major role, as users scroll through the site content or use the search function. Since menus are not used in the typical user journey, such sites can hide the navigation behind the hamburger menu. In web design, it’s primarily about arranging content elements according to their priority to guide users through the site. If the goal of the site is to perform a specific action, such as signing up for a newsletter or registering for an event, etc., a large navigation with many elements would be distracting. Here, the small and fine burger icon ensures that the user’s eye falls on the actually desired elements.
Does the principle of “mobile first” also apply to navigation?
The principle that a website must first and foremost be optimally displayed on mobile devices has been ingrained in the minds of most web designers. Personally, however, I am not a fan of “mobile first” or “desktop first”. People use more than one device and don’t just let the other gather dust. A website must look great on all devices. For this reason, both mobile and desktop should be considered in the conception and design of the website. Many users use their smartphone during the day, see an interesting product, write it down, and look it up again in the evening on the laptop or computer.
A website should therefore never be designed for just one device. A great mobile site does not automatically provide the basis for a great desktop site. The same applies vice versa. Small elements on the desktop can be easily targeted with the mouse. On the smartphone, however, this becomes significantly more difficult. A space-saving burger icon on the desktop may prevent all content from being perceived, and the classic navigation does not fit on any smartphone display.
Which type of navigation is right for your project depends primarily on the content of your site. Because these contents determine how important a visible navigation is. Equally important is the goal of your site, as well as the target audience of your site. User research remains indispensable here as well.
Conclusion:
The burger menu is contemporary and can fit perfectly into the concept depending on the target group, the goal of the site, and the content. However, there are significant disadvantages that a designer must keep in mind. Every UI element must subordinate itself to the central goal of your site.