What’s on the hamburger menu?

The hamburger icon has come to represent menus for most mobile sites, but how well understood is this icon, and how can we make it better?

An interesting tweet by Luke W, a leading thinker in mobile interaction, made me think a little bit more about something we often take for granted - the hamburger icon.

Just as the floppy disk has come to signify save, and the trashcan has come to signify delete, the hamburger icon has been established, at least in the minds of designers and savvy users, as the icon for off-canvas mobile menues.

Computer interfaces have changed dramatically over the past thirty years, but the humble icon has remained; and with good reason. Users have been shown to comprehend shapes and forms easier than equivalent sentences and perhaps more importantly, with regards responsive design, icons have been used in interfaces where space is at an absolute premium.

While a picture may speak a thousand words, when it comes to icons research shows that ones that actually look like the actions they are supposed to signify are the most usable. Better yet are icons that are accompanied by text.

But on a mobile screen we rarely have the luxury of supporting graphic elements with text. So with our hands tied, I wanted to see how well the hamburger icon is understood.

To do this I conducted a quick user test last week to see how users interacted with the hamburger icon on responsive layouts.

The Guardian's mobile navigation

The burger on the grill

Using both The Guardian and The Irish Times homepages as my examples, I asked participants to navigate to the Life & Style sections of both websites on the mobile device they were most comfortable using. Some 12 users participated, and I evenly divided them between both websites. All had owned a smartphone for at least six months, and typically browsed the web for at least 15 minutes a week.

The Guardian

Out of six participants, only two clicked directly on the Guardian’s hamburger icon. Two participants searched, while one user scrolled down the page to the Life & Style section stub.

The final participant was particularly interesting, first clicking on the flag icon and then on the hamburger icon. When asked why he had pressed the flag first and the hamburger second, he said that he didn’t know which icon indicated menu, but that one of the icons in the top right hand corner did. This participant’s actions would appear to confirm other research that suggests that it is the location, more than the icon itself, that users remember.

The Irish Times

The Irish Times mobile navigation

The Irish Times fared slightly better. Four of our testers pressed the hamburger icon that had a label. One participant scrolled, while one clicked on the dropdown underneath the hamburger icon. However, three of the four participants also said they would have clicked the icon without the word menu. As there was only one button they were reasonably sure that it would lead to some sort of navigation action.

It seems that participants were more comfortable interacting with the hamburger icon on interfaces where there were few other clickable elements. The text label played its part, but so did the singular navigation option.

On an interface such as The Guardian’s where there were a number of unlabelled clickable icons, some of which were open to interpretation, such as the flag icon, the hamburger fared poorly. While it was apparent that it was an actionable icon, the absence of any text labels meant the user was unsure what it actually did. It’s worth noting that The Guardian has since streamlined its mobile nav.

Demographics also played their part. Only one user from the 50+ demographic clicked on the hamburger icon, compared to three users from the 18-30 category, suggesting a lack of familiarity amongst older users with the icon. Those who searched (one from the 30-50 category and one from 50+) appeared comfortable with the interaction and recognised the magnifying glass as a search icon.

Users who scrolled down the page to find the Life & Style section were both in the 18-30 demographic. Both seemed familiar with the layout of a mobile news site, with the latest news content at the top and thematic sections underneath. What is interesting is that users chose to navigate through the content rather than interact with top-level navigation. Interacting with a menu or search function was not part of their user journey.

Garnishing the burger

There are some good reasons why text labels are frequently forsaken. Quite often there is simply not enough screen real estate to support a text label; this is all too apparent on The Guardian’s site. And, to be pragmatic, the cost of localisation may also be prohibitive.

But Microsoft has shown that text labels were central to redesigning the Outlook toolbar, ensuring that those of all skill levels were able to use it. Basecamp also went for clarity over cleverness when they redesigned Basecamp in 2012. Ditching their multiple navigation tabs they settled on a single, text only navigation structure.

While the hamburger may not be as cryptic as some of those contained in Outlook’s original toolbar, there is a lot to be said for removing uncertainty from users’ minds. We should be designing to help quick decision making. Proper labelling can provide a clear information scent, lessening the distance of comprehension between icon and user.

If the word ‘menu’ were totally off the cards, another suggestion would be to educate users. Pocket outlines the hamburger icon as a part of its navigation in the onboarding process. Similarly, Buckle takes an educational approach, calling attention to the icon for first time users.

Buckle mobile navigation

Borders around the hamburger icon can also help define it as a clickable object. These have performed very well in A/B tests when compared to their borderless counterparts or even plain text ’menu’ labels. Calling your hamburger out as a button seems to help users understand its use, even if its function remains a mystery to novice and first-time users.

The context pickle

Icons are not fixed entities, but malleable representational objects whose meaning shifts from context to context. While the hamburger might mean ‘menu’ on the homepage to one person, it could mean ‘requests’ or ‘settings’ on a dashboard to another.

Users do not arrive to a site intent on clicking an icon. It is only when context and visual representation align that an action occurs. Understanding what the user is trying to accomplish is central in establishing the success or failure of the hamburger in an interface.

While we can standardise icons, we cannot standardise our user’s responses to them. And as there’s no right or wrong response, it is essential that we determine these contexts and test our icons such as the hamburger within them, establishing what works best for our particular interface.

Relishing responsive

As the smartphone and tablet markets enter a more mature stage, we should be aiming to design with sense of simplicity and inclusivity that allows absolutely everyone to interact with our interfaces. We should aim to make our interactions as simple and natural as possible; and icons play a massive part in this. The smaller the leap of comprehension needed to connect icon and meaning the better.

For it’s easy to lose sight of the essence of responsive design - to support users in accessing the same content and complete the same tasks - regardless of whether they’re on a desktop, mobile or tablet. The hamburger icon is a tool that can help do this, if we apply it properly.