How to solve the Hamburg icon (three bar) problem

@ 10 Realities Why: The burger icon, or three dashes, has been used to indicate links to menus, one of the most controversial techniques in today's Web pages. It is said that designers hate it, and the client hates it. So why is it everywhere?

The Hamburg icon can be easily scaled to match the pixel grid exactly. It was originally an icon for the expression list and was forcibly crowned by the present role, but since the menu is a column of options, it is correct to use it from above.

On this subject, there are countless controversies, A/B testing, blog venting, user research, but these studies are almost all concerned about app design. When the burger icon is used for Web page design, it presents a bigger problem.

Problem with Hamburg icon

There are many designers who question the value of the burger icon itself. It appears frequently as an iOS-style icon, although it has been used so much before Apple used it.

World-of-swiss

Hugeinc

In fact, there is a lot of conflicting evidence about whether it is available as a menu icon. Some designers argue that young people can easily recognize the icon, while others say older people can recognize it if they have Internet experience. In this evidence, we can only conclude that usability test results are uncertain, and similar tests often produce conflicting results.

It is generally accepted that users do not treat the burger icon as a single link, most likely because it is designed as a set of links rather than as a single link. To support it is to surround the surrounding border, or a piece of background color to make it look more like a button, I dare say, some more things can increase the number of clicks.

Futureinsightslive

Hamburg icon and more questions

Aside from the icon itself, the way it is used is fraught with problems.

First, and perhaps most obviously, the burger icon adds extra action to the navigation, and it takes two times to get to the specific page once in a single click. According to the experience of the Web designer, 3 clicks to be able to reach (anywhere), so far, the navigation problem has not been resolved, the Hamburg icon this technique, but to turn a problem into another problem. Of course, this is not just a question of the burger icon, it's all about this style of navigation. You can use the word "menu" instead of the burger icon, and the block still exists, except that the burger icon can't be used anywhere else.

Middle-earth.thehobbit

Jam3

The burger icon also hides its contents. From the perspective of the user experience, users should not make any moves to understand what they can do. The "share to Twitter" or "payment" operations are too easy for users to ignore if they are not in the offing. Users don't even look for links they don't know about.

Finally, the Hamburg icon hides the current status of the Web site, as well as the location of the user. The pressed state in the menu provides the user with contextual information, while the Hamburg icon makes it obscure.

London-se

What can the burger icon do?

Given the widespread aversion to burger icons and the resulting series of problems, why is it ubiquitous?

In my experience, of course, in a particular age, the burger icon has won the essence of discernment in recent years. The research that refutes it is often a year ago or earlier, and a year is a long time for the internet.

In fact, link icons are far more recognizable than "link" or "share", but the decisive form is not yet apparent. The burger icon is consistent across a variety of designs.

Most importantly, the burger icon keeps its original purpose: it saves us a lot of valuable screen space resources. If customers give you a lot of things to add to the menu, then remove them from the screen and give a link, is a simple rude but very effective way to make room for the same content customers want.

I'd say the burger icon is better than any other solution on this issue, but not necessarily. It should be said that the burger icon is not as bad as other solutions.

The root of the problem

The Hamburg icon was adopted, or the designer (more often the client) did not fully follow the mobile-first design approach. They wanted a "regular" site, but shoved it into the granddaughter's cell phone.

Opponents of the burger icon tend to replace it with the word "menu," and they don't really get it. Whether or not the shape of the burger icon has now reached its meaning, but the user understands what the button is, and does not solve the biggest problem, it hides the navigation, hides the user's choice, which is quite serious self-inflicted.

To put it simply, the burger icon is a symbol of our collective failure in our single-minded embrace of moving priorities.

PonoMusic

Mccollcenter

A better solution

To solve the burger icon problem, we have to accept the fact that the pages we used to know are no longer useful. The rise of mobile Web pages is far from reducing the number of columns and removing some heavy picture files.

Unlike old-age pages, mobile Web pages take a different approach. Mobile Web-born in an app-focused environment, users want to have a similar fashion experience with traditional Web pages.

In a notable example, Facebook's app changed their burger icon to a tab bar, and the results showed that the conversion rate was improved. But Facebook has done a lot more than just changing the menu design. The great thing about the recent release of Messenger is that they already have a popular app that can integrate the information function. Facebook has split these features so that each app focuses on its role and gets two simple apps, rather than a complex app. Reduced functionality leads to fewer menu items and less need for burger menus.

Excellent apps are extremely focused, and they are evolving through a much tougher user test than the web. To create an app-like experience, we have to simplify the site, simplify it, and simplify it a little bit more. If necessary, break the building structure into manageable pieces, similar to the mini site. When we present a simple set of choices for our users, the problem of complex menus never comes up again.

Using a hamburger icon is like putting a bandage on a wound: although it was wrapped, the following wound is still there.

We only have a full embrace of mobile priority, not only for design, but also for our content and information structure, the burger menu becomes history.