Notice: Undefined index: order_next_posts in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 194

Notice: Undefined index: post_link_target in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 195

Notice: Undefined index: posts_featured_size in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 196

The Hamburger icon. How should it be used?

Do people really know how to use the hamburger icon? Alex Berg takes a closer look


The hamburger menu, once the darling of the UX community, has recently come under fire. Its initial allure was understandable. In an increasingly mobile world, the hamburger icon presented a handy solution to shrinking screen sizes.

Within a short period of time, it became common to see the hamburger menu implemented on lots of different sites. But, guess who got lost in the shuffle? The customer.

First, despite widespread usage, there are still some users who don’t know what the icon actually means. Second, while most users know to look to the icon for their needs, the less directed customer needs to be persuaded, even wooed. Third, and finally internet users are a lethal mix of lazy and impatient. Test after test has shown the more data you ask for from customers, the lower your corresponding completion rates are.

“Despite widespread usage, there are still some users who don’t know what the icon actually means”

Of late several blog posts from authorities on UX have called out our industry-wide delusion. After reading a few of these damning posts, we decided to conduct an a/b test to supplement our user testing. We limited the audience to just desktop users. Our control would get the current experience with the hamburger menu, while our test group would receive the navigation options expanded by default. This was just a head-to-head test pitting the hamburger icon vs. a revealed state-listed menu on the same plane.

We set up our test using Optimizely, an optimisation and testing platform. Optimizely offers an engagement goal, which can sum up the total session clicks in the control vs. our experiment. Our challenge was one of traffic. The exposed navigation outperformed the hamburger menu in both total clicks, as well as the more broadly defined engagement goal.

With the exposed option, navigation clicks were up 47 per cent and overall engagement 16 per cent. Of note, it took fewer than 750 visitors to prove this out, an indication the outcome was arguably so obvious we shouldn’t have bothered with the test in the first place.

The test exceeded Optimizely’s default threshold for relevance (90 per cent) and hit 99 per cent plus.Engagement was up with a 16 per cent improvement.
So, does this mean the hamburger menu is dead? I doubt it. Like it or not, the hamburger icon solves a very real problem. And, it typically usability tests pretty well as most users understand its meaning. However, that doesn’t mean it will necessarily perform as well in the wild, as, at least in our test, exposed options are simply more compelling than hidden ones.

Our conclusion? For simple navigation schemes, exposing part of your navigation is a good idea. However, for sites with more complex navigation, extracting two to three categories might not work. In these cases, we recommend at least supplementing the hamburger icon with a ‘menu’ label for extra clarity and, of course, testing with your target customers. Every audience is different.

BIO: Alex Berg | Director of Strategy & Analytics |