Hidden website menus hurt revenue
During the last few years there has seen the growing demand for mobile interfaces that have poor compatibility with desktop versions. The hidden navigation is one thing that confuses UX designers and corporate website owners.
We repeated some tests to prove to our clients that using the hidden navigation in UX design is less user-friendly on the desktop. Results were surprising. That is why our team of web designers decided to share their experience to help in understanding the need for hidden navigation.
About our method of testing the hidden navigation
Our UX specialists reviewed several studies which were published to create own method.
To gauge the effectiveness of various menus in UX design, usability test was performed on smartphone and desktop versions of different websites that use different types of navigation layouts.
Following are some of the navigation that was considered
Visible Navigation. Navigation links were visible in the navigation bar and can be easily viewed with a simple glance.
Hidden Navigation. Main navigation links were situated under an icon or button that required the user to take explicit actions to be visible.
Combo Navigation. Some of the main links were visible while others were hidden under buttons or icons.
Only hidden and combo navigation was tested on smartphones.
For understanding the effectiveness of the UX design, the following these metrics is were assessed
- Navigation use: how people to use navigation
- Navigation time: time taken from the beginning of the task to the use of navigation in the task
- Discoverability of content: finding the content on the site by users
- Time of task: time taken by users
The first two factors have an impact on the navigation usefulness while the remaining is responsible for enhancing the user experience.
Lesser use of hidden navigation
To define the utility of navigation, the following factors are considered.
- Navigation use: use of navigation during the task
- Time of navigation: time taken from the beginning of the task to the use of navigation in the task
Both on mobile and on desktop, people prefered to use the navigation when the navigation options were visible (that is, in the visible navigation and combo navigation). As our UX designers noticed on desktop devices people used visible or combo navigation almost twice as much than a hidden navigation.
On mobile people used the visible navigation and combo navigation in 1.5 times more than hidden navigation.
It is expected result. If the navigation options are visible (even some of them), people will notice it more. So, people use visible options of menu more than they use options which were hidden. Some people even said that the sites with hidden navigation didn’t have a menu.
On desktop, when the navigation was hidden, it took users longer to use it than when it was visible or partly visible. It is interesting, on mobile devices, when the menu elements were hidden people use also longer than when these elements were visible or partly visible.
On the other hand, our UX specialists recognized that people were significantly more likely to use the navigation (whether hidden or partially visible) on mobile than on desktop.
Our UX designers explained it using several facts
- The screen of mobile is smaller that is why hamburger menu is more visible. That is why, people are more likely to notice it and use it.
- Hidden navigation is more common on mobile than on desktop. In other words hidden navigation on mobile is the common practice for the user experience.
- Specifics of using mobile (mobile pages slower to load, require more scrolling) drives people to use a navigation instead other UI elements of a page.
- You can see that visible menu elements are better than hidden. If user spend additional time to get an information, he or she may leave a site. The greater competition the more visitors leave a website. In fact, user will prefer to go to another site.
Hidden navigation and the quality of the user experience
Our UX designers established causality between hidden menus and a bad user experience. The hidden navigation significantly decreases user experience both on mobile and on desktop. See more details.
Content discoverability. It was a simple task to find a page of business service by using navigation when the content was not directly linked from the homepage. It can be page of guarantee or an additional service of the installation of equipment.
That was unexpected, but both on mobile and desktop, the content discoverability was significantly lower when the navigation was hidden. Every fifth visitor couldn’t find a specific page. You may imagine the business results because users didn’t find an information that affects on a purchase decision. In other words, loosely speaking, corporate websites with hidden navigation lose 20% of potential customers.
Task-difficulty. The task difficulty is a subjective metric that based on users rating (a scale from 1 to 10). This metric allows to measure the users perception and indirectly indicate actual difficulty of site navigation.
You guessed it, hidden navigation led to higher difficulty ratings than visible or combo navigation.
All users ranked visible navigation as least difficult. They noticed that it was easy to discover and to use a visible navigation. A visible navigation allowed them to spend less time to find an information.
Time on task. This metric represented the time it took participants to complete the task. It is obviously that a menu can add task time, if it is difficult to find, open, or use. So longer task times means a less usable navigation.
Both on mobile and desktop users took significantly longer to complete tasks on sites with hidden navigation than they did on sites with visible or combo navigation. Compared with the combo condition people used hidden navigation 20% slower on mobile devices. On the desktop, users were 45% slower when the navigation was hidden (compared with the visible or combo conditions).
So, hidden navigation is less effective than visible navigation and combo navigation. Our UX designers explained causes.
Extra work. As we all know people don’t like to do extra work. It makes users less likely to do it, or, if they do it, they may take longer. So, users will get a bad experience.
Low salience with low informative. A small icon is harder to notice on a desktop screen size (and even on a mobile one). When people can to notice menu icon they have no idea if they’ll find what they need by clicking on it.
These two points make a hidden navigation less effective than a visible or combo navigation.
It was a time when some web designers used hidden navigation (hamburger menu) for desktop. Fortunately, many web designers stopped using this trend in web design. But if you still use a hidden navigation on desktop for your business website, you must stop doing it immediately.
From our experience minor improvements can help to improve conversion rate and drive sales on a website. How to improve a menu on your website?
To test your navigation from user’s perspective, try to find some information on your website. Use indicators: a content discoverability, a task-difficulty and time on task.
Avoid to use tiny menu and small icons. In other words, to ensure that have enough visual weight for visitors. Also use navigation link colors that contrast with the background color.
Use MENU button instead hamburger menu on mobile. Tests showed that people clicked on MENU at least 15% more than the hamburger button. You can increase using of navigation if you make MENU button a bright color.
Make navigation links look interactive.
Make navigation easy to manipulate.
Avoid to use cool-effects for navigation on a business website. Many users don’t like innovation in a menu.
Use a terminology that clearly describes your content, services and features.
Coordinate menu with user tasks. Don’t forcing people to ‘pogo stick’ up and down menu hierarchy.
When you use more than 4 top-level navigation links, the only reasonable solution is to use combo navigation for both mobile and desktop.
Also we recommend you to look at the best practices to improve navigation on your website.
If you doubt your ability to improve a menu of a website, you can get professional UI/UX design service.