Most web developers and digital professionals tend to be, for obvious reasons, quite tech-savvy people. This can present a problem when developing products for the ‘normal’ user (if such a thing exists), as things that are obvious to the expert are often far from obvious to the end user.
A good example of this is the ‘hamburger menu’, also known (apparently) as a sandwich menu, a hotdog menu or, to a large proportion of our testers, ‘that three-bar thing up there’. While the hamburger menu may be well understood by the experts, our testing experience suggests that approximately a third of users still do not understand it, and there is also plenty of other research out there suggesting problems with the hamburger icon (see references below).
Although it is likely that this proportion will decrease over time as people ‘learn’ the convention (a few years ago it was probably closer to two thirds who did not understand the hamburger), this learning process is hampered by the fact that the use of the hamburger menu on mobile sites is not consistent. We recently carried out a brief smartphone website audit of the ‘top 100 brands for customer experience’. We found that:
- 4% had a top navigation
- 16% had the navigation visible on the homepage
- 12% had a hamburger menu and a limited visible navigation on the homepage (i.e. quick links): our testing experience has shown that, even if users are aware of the hamburger menu, they will still prefer to use the homepage quick links, even if they do not give off good scent for the goal, simply because they are immediately visible.
- 48% had just a hamburger menu, of these:
- 66% were located on the left hand side, 34% on the right hand side.
- 62% of them were not labelled: 23% had ‘Menu’ beside or below them, and 15% had a different label (including ‘More’, ‘Departments’, ‘Browse’, ‘Shop’, ‘Sections’ etc).
There are a number of things that we, as the ‘experts’, can do to aid users in learning the hamburger menu. For example, adding a label to the hamburger may make it more visible, easier to understand for new users, and easier to tap on due to having a larger footprint. It will, however, take up more space on the page. Instead of adding a label, research by James Foster has suggested that putting a box around the icon also makes it more visible and increases click through.
The most important thing is to make the icon more visible on the page, so that users notice it more easily. This can be achieved relatively simply by de-cluttering the pages and the navigation bar, which should be a standard goal for improving usability anyway. Reducing the number of elements competing for attention around the hamburger icon should increase recognition and use of the icon. Another useful option is to pin the navigation bar, including the hamburger icon, to the top of the screen, meaning that users don’t have to scroll back up the page to navigate (especially important on long content pages), and drawing attention to the navigation tools as they follow you down the page.
Just because many new web designs have a particular feature – like the hamburger – it doesn’t mean that everyone understands it. Until there is consistency in the way these features are provided, they can’t become conventions at all.
References:
- How to avoid hamburger menus
- Hamburger not the best choice?
- Menu eats Hamburger
- Slide drawer navigation could cost half your user engagement
