Hamburg icon is not the best menu option

Editor's note: Today, our menu usually uses the burger icon to show that they are everywhere in the app, but is the burger icon really going anywhere? Today, let's go through 3 A/b tests to learn about the problems with the Hamburg icon in the design of the mobile Web page, and the implications for us.

User experience design is not a trick, maybe 5 minutes of the mouth offensive can make the receptionist feel that your design is very tall, but to let each user on the screen of the UI on the body is also required data support.

Isn't it? There is considerable uncertainty in the study of user experience design and usability. Spend the morning with colleagues arguing sweet soy milk good drink or salty soy milk good drink, are less than 5 minutes to do a statistic, determine the future of the company to sell the soy milk distribution standards. Similarly, our subjective assumptions are not necessarily accurate, only when we actually start testing and observe the user's behavior, we know how the real world users have the habit of the site and app in the Design menu icon, how to meet the "most" user needs.

How to design the menu icon? Let's look for answers through tests and analyses. I used to do a A/b test for the burger icon to collect feedback from users about different menu icons.

First A/b test

As a menu icon, three Hamburg icons vary, but they all retain the burger logo, which conforms to the basic rules of the control variable method. The test results show that the icon on the right has a higher click rate than the previous two.

The purpose of this phase of testing is clear, and we want to know what kind of burger icon is more appealing to users. As one of the most recognized icons at the moment, it's a good choice to benchmark the burger icon. But as far as the current data are concerned, the design of the Hamburg icon + border is more appealing to the user than the other two, but the conversion rate is increased by 22.4%, which may be the presence of the border, and more appealing to the user's attention.

Because the test site is a blog class site, we can obviously observe that only about 2% of the users will open the menu bar, which also reflects the relationship between the site type and menu opening rate. On social networking sites like Facebook, the menu bar is much more open than 2%. The subject of this test is still on the mobile Web page, we must always remember this test settings.

So I'm going to test the click-through difference between the sheer burger icon and the menu label, which is the second-stage A/b test.

Second A/b test

This test is for all mobile browsers on the Web page;

The test time is set to 5 days, the number of users involved is about 50000;

Statistical data show that the 25~24岁 users occupy the main body in the tested population.

The percentage of terminal types that access the Web page is as follows:

ios:64%

android:34%

WP, BlackBerry and other mobile operating systems: 2%

Then, we can use the first phase of the test results as a benchmark for the second phase of the test. So we'll use the test data from the first-stage test with the box burger icon as the basis for this A/b test.

Variant 1:menu+ Border

Variant 2:menu+ Hamburg icon + border

Mutant 3:menu

(Logically, this variant is not considered within the scope of the test design, only used as a reference to validate my conjecture.) )

Second Stage test results:

Just as the results of the prediction, the simple Text "menu" performance is not good, the number of clicks and the conversion rate is indisputable under the baseline. Interestingly, Variant 1, which is a border-plus menu conversion rate, is even taller than a border burger icon!

Based on the results of the first phase A/b test, it's obvious to us that putting a simple flat burger icon on a Web page is not the best option (note that it's a mobile Web page rather than an app), write the word "menu" on the button and then add a border (try to make it look close to the button) is the user click-through and conversion rate of the highest program.

Of course, this does not mean that users do not understand the meaning of the burger icon, it is possible that text and language will be more attractive to the user's attention.

In fact, the test here, you can see a very interesting phenomenon: users need a clear and direct identification (only put menu or Hamburg icon), but also need a border to remind them (see this box, this is an icon!).

Finally, we can do a comparison test for the menu+ border and the Hamburg icon + border.

Third A/b test

The test object is only a border-striped hamburger icon and menu:

The test results are as follows:

In fact, if you look at the overall results of the data, and the second phase of the test is not a big difference. Today, however, we need to delve deeper into the impact of the platform differences as the barriers to iOS and Android today are clear. I tracked the users on different platforms, and this is the third stage where the data on the iOS platform and the Andorid platform is very dissimilar:

As you can see from the data, users on the iOS platform are probably 2~3 times more likely to click on the menu than the Android platform user. What is the reason for this result? We are afraid we cannot fully analyze it. But it can be speculated that the impact of the system itself is affected by the difference. iOS users and Android users are very different from the use of menus, for a long time, users of the Android platform have been accustomed to the menu bar (touch, even the entity button) at the bottom of the phone, and the iOS user's menu is usually presented directly in the upper-right corner of the screen or somewhere else. This difference in usage habits may affect the way they approach the menu when browsing the web.

Conclusion

Details see the real chapter. How do we design the details of the Web menu when we design the Web page? We should have a glimpse of one or two through this series of tests. Although most of the young users of the burger menu buttons already know it, it's not obvious enough in the browsing process to attract the user's attention without Shong, which is what the UI designer needs to consider.

The three tests are based on the English language context, the proportion of iOS and Android users is not very large, but in China is very different-most mobile users are Android users ah! The difference between the two major platform users in usage habits, through the difference of user base, Eventually there will be significant differences, and this is something that Ui/ue/ux students who are involved in UI design need to think about.