Mobile Web Navigation Optimization (2 Recent Success)
- Transfer
Menu-hamburger is synonymous with mobile web design. Why? It can make you equally the object of ridicule and celebrity. With all its convenience, the tendency to abandon it is gaining momentum.
Ironically, Facebook - the “hamburger revolution” of 2008 is attributed to it - revolted against it after tests showed that navigation encourages deeper involvement.
And Spotify, an application based more on the search process than on its accuracy, reportedly increased interest by 30% in the menu when it began using the tabs system. So that.
Being a sharp critic of a hamburger, I am happy to share with you the results of my latest research, which show that Facebook, Spotify and I may be right.
In our recent experiment, we retained a hamburger and a hidden menu, but introduced one small amendment that helped improve its usability. I think this is a terrific example of how to get a relatively quick win almost immediately.
I and my colleagues from Door4 were assigned to improve mobile navigation on the site in accordance with the scheme developed under the leadership of the government.
Here is what we knew:
A fairly standard navigation bar was used on the computer for the site. However, on mobile devices, it disappeared, and instead of it appeared the icon-hamburger and the menu "Explore".
I suggested that the inscription "Explore" can cause harm. This word usually applies to what I call the “explored” content — things that you are clearly not looking for, but the developer hopes that you will want to click on the material if you stumble upon it. Our menus, on the other hand, kept only the “required” content — things that users are looking for to solve their own particular problem.
I also recalled the results of some studies, according to which almost half (47.6%) of people between the ages of 45 and 65 do not know what the hamburger icon means.
We suggested that changing the word “Explore” to “Menu” might show better results.
Of course, the level of use of our menu increased by 57%.
Given the minimal changes — just replacing one word — that’s just great.
Explore is perhaps a more attractive label, but it is not closely related to user expectations. Sometimes it's better to be boring.
In addition, we also changed the main menu items to more closely match the menu for the desktop version, which gave us another 19 percent increase.
I was amazed at our results - just like the client.
However, although we made a big step towards improving usability, we still retained the hamburger. So if we could ...
Soon we were asked to optimize another mobile menu. This time we went ahead and completely removed the hamburger.
Unlike the previous project, there were only 3 top-level navigation points on this site, so there was no point in removing them.
What we knew:
Here we checked 2 options. In the first, inspired by the previous experiment, we added the word “Menu” to the hamburger icon.
The second option was more courageous - to bring 3 main navigation points directly into the heading . There were still some auxiliary menu links that needed to be included, but they were not very important, so we left them on the side of the menu called “more”.
The first option showed a good increase in performance - 13% more clicks and 13% more sessions containing clicks.
However, the second option - with designated menu items - “blew up” the site (and our expectations). We received 106% more clicks and 120% more sessions containing clicks .
That was incredible. Moreover, we were surprised to see a phenomenal increase in conversion by 20%. Conversion was not the goal of this experiment, so it was amazing to see the increase in this indicator. This is probably due to the fact that the transition to the purchase page and the transition between the pages of different products has been greatly facilitated.
Add a menu-hamburger is convenient, but the rejection of it ultimately led to increased business efficiency.
In both cases, using the data and risk-free checks, we received the following:
Both tests strengthened my belief that, if possible, barriers to mobile navigation should be eased .
Regardless of whether to make the appointment of a hamburger more obvious or to completely abandon it, the gain can be significant.
After examining the test results, we try to avoid the menu-hamburger, where possible. One recent example is a rather complex e-commerce site, for which we have developed a framework for mobile navigation. This allowed us to put menu items in the header by default.
Have you tested mobile navigation technologies? What did you find?
Ironically, Facebook - the “hamburger revolution” of 2008 is attributed to it - revolted against it after tests showed that navigation encourages deeper involvement.
And Spotify, an application based more on the search process than on its accuracy, reportedly increased interest by 30% in the menu when it began using the tabs system. So that.
Being a sharp critic of a hamburger, I am happy to share with you the results of my latest research, which show that Facebook, Spotify and I may be right.
The inscription "Menu"
In our recent experiment, we retained a hamburger and a hidden menu, but introduced one small amendment that helped improve its usability. I think this is a terrific example of how to get a relatively quick win almost immediately.
I and my colleagues from Door4 were assigned to improve mobile navigation on the site in accordance with the scheme developed under the leadership of the government.
Here is what we knew:
- successful navigation was crucial for the purposes of this site;
- interest in navigation in the desktop version was 500% higher than in the mobile version;
- users probably used the site in an attempt to solve their particular problem;
- users were representatives of a more adult demographic group (but this is not certain).
A fairly standard navigation bar was used on the computer for the site. However, on mobile devices, it disappeared, and instead of it appeared the icon-hamburger and the menu "Explore".
I suggested that the inscription "Explore" can cause harm. This word usually applies to what I call the “explored” content — things that you are clearly not looking for, but the developer hopes that you will want to click on the material if you stumble upon it. Our menus, on the other hand, kept only the “required” content — things that users are looking for to solve their own particular problem.
I also recalled the results of some studies, according to which almost half (47.6%) of people between the ages of 45 and 65 do not know what the hamburger icon means.
We suggested that changing the word “Explore” to “Menu” might show better results.
Of course, the level of use of our menu increased by 57%.
Given the minimal changes — just replacing one word — that’s just great.
Explore is perhaps a more attractive label, but it is not closely related to user expectations. Sometimes it's better to be boring.
In addition, we also changed the main menu items to more closely match the menu for the desktop version, which gave us another 19 percent increase.
I was amazed at our results - just like the client.
However, although we made a big step towards improving usability, we still retained the hamburger. So if we could ...
Complete rejection of the hamburger
Soon we were asked to optimize another mobile menu. This time we went ahead and completely removed the hamburger.
Unlike the previous project, there were only 3 top-level navigation points on this site, so there was no point in removing them.
What we knew:
- only 1 in 10 users worked with the mobile menu;
- mobile version conversion lagged behind the version for computers;
- the computer menu was used mainly as a key source of conversion;
- ... but not on mobile devices.
Here we checked 2 options. In the first, inspired by the previous experiment, we added the word “Menu” to the hamburger icon.
The second option was more courageous - to bring 3 main navigation points directly into the heading . There were still some auxiliary menu links that needed to be included, but they were not very important, so we left them on the side of the menu called “more”.
The first option showed a good increase in performance - 13% more clicks and 13% more sessions containing clicks.
However, the second option - with designated menu items - “blew up” the site (and our expectations). We received 106% more clicks and 120% more sessions containing clicks .
That was incredible. Moreover, we were surprised to see a phenomenal increase in conversion by 20%. Conversion was not the goal of this experiment, so it was amazing to see the increase in this indicator. This is probably due to the fact that the transition to the purchase page and the transition between the pages of different products has been greatly facilitated.
Add a menu-hamburger is convenient, but the rejection of it ultimately led to increased business efficiency.
Promotion
In both cases, using the data and risk-free checks, we received the following:
- strengthened in intent to make changes;
- weakened customer concerns about making significant changes to their sites;
- Got the confidence that you need to try something more daring.
Both tests strengthened my belief that, if possible, barriers to mobile navigation should be eased .
Regardless of whether to make the appointment of a hamburger more obvious or to completely abandon it, the gain can be significant.
After examining the test results, we try to avoid the menu-hamburger, where possible. One recent example is a rather complex e-commerce site, for which we have developed a framework for mobile navigation. This allowed us to put menu items in the header by default.
Have you tested mobile navigation technologies? What did you find?
Drop in on VPS.today - a new site for finding virtual servers. 1500 tariffs from 130 hosters, convenient interface and a large number of criteria for finding the best virtual server.
