At Throneware we are constantly re-evaluating our website and looking for ways to improve our conversion rates in order to help our clients to get in touch with us. Our website is based on a customised version of Twitter bootstrap. Bootstrap is a set of reusable common HTML and JavaScript components that you can use to reduce the amount of time it takes to build your web pages. If you use their navigation bar component and the user’s display is not large enough for the links to be displayed in a single row, then the default behaviour is for the links to collapse into a menu drop down, hidden behind a hamburger icon. We had always just assumed that this was the best way to do things and that it was an industry “standard” for a reason.

What is a Hamburger Icon?

The hamburger icon consists of three parallel horizontal lines that is used as a button to display a navigation structure in a user interface. It is often displayed in the top left or top right of the screen. Its name comes from the its resemblance to a hamburger. The top and bottom lines represent the bun and its middle line represents the burger.

A previous version of our website using the hamburger icon.

We have used it in apps we have designed and created too. Our Practice QTS education iOS app for example.

The hamburger icon in the Practice QTS App

The menu contains a lot of extra functionality, but this isn’t obvious from the root screen that is displayed to the user.

Removing the Hamburger Icon

It’s well known fact that the vast majority of people in our industry do not step back often enough to look at things from their user’s perspective. If you had never seen a hamburger icon before and you were viewing the webpage displayed in the screenshot above, think about what information that icon with three little lines gives you? Is it even clear that it is a button? We decided to take the plunge and get rid of our hamburger icon.

Alternatives

So we had discovered that the hamburger icon is bad for your site’s health. Our next question was then how to display the information hidden behind the menu unobtrusively, while making it obvious that there was more content for the user to interact with. We explored drop down menus, listing all of the links in a large menu area and various different bits of text and icons that we could replace the hamburger icon with.

Finally, we decided to follow the research and keep it simple. We remove the icon and added “MENU” text to replace it. We also decided to change the colour of the button, making it even more obvious that it actually is a button and not just a short piece of text.

The Results

On mobile devices, our site wide bounce rate was hovering at around 48% before we removed the hamburger. We marked when the removal of the icon in our Google Analytics data. After removing the hamburger and replacing it with a new “MENU” button, the bounce rate went down to around an average of about 41%. Although this seems small, we’ve heard of others having even better results when doing the same.

Based on this and my previous AB test, a flat hamburger icon may not be ideal on a responsive website (remember this is a website not an app). Using the word MENU (and making it look like a button) could be more helpful for visitors.

That little three-lined button is the devil. Whether you call it a side menu, navigation drawer, or a hamburger, hiding your features off-screen behind a nondescript icon in the corner is usually a poor mobile design choice. Interaction theory, A/B tests and the evolution of some of the top apps in the world all support the same thesis: The hamburger button is bad for engagement and you should probably replace it with a tab bar or other navigation scheme.

Even the BBC has recently published an article about the hamburger icon and how it mystifies most people.

However while the button may provide a consistent way to find extra information, research suggests it is not as functional as some might like to think it is. Adding the word "menu" underneath the three lines increases the button's use by 7.2%, according to Foster's tests. Putting the hamburger inside a box, so it looks like a button, increases use by 22.4%. Switching the lines for the word "menu" makes 20% more people click, Foster found.

In future, we will certainly be carrying out more A/B testing to see if we can further optimise our website’s menu on mobile devices and we’ll be sure to post any updates that we find here on our blog.

Conclusions

While improving our own website and increasing the number of page hits we receive, we learnt several things which we are sure to apply to all of our projects going forward.

  • Never assume that the standard, most used way is the best way. Just because something is the default and widely accepted doesn’t mean it will work for you.

  • Hamburger icons are not the answer to all of your problems. We can certainly see the hamburger icon becoming more and more popular, meaning users are becoming more accustomed to its use. Right now though, it wasn’t working for us and lots of other evidence seems to say the same.

  • Every use case is different. Conduct user testing and A/B testing to find the best solution for you. If you’re building a mobile app for members of the technical community then it’s likely they all know what the hamburger icon is. If it’s for people with no technical expertise or extensive use of apps and websites, then you may wish to consider your position.

We would love to hear from you if you have had any experiences with hamburger or other types of navigation structures for your app. Just leave a comment below!