UX Design: To Hamburger, or Not?

Ever had the pleasure of being in a user experience (UX) planning sessions? No?

If not, them you would never, I repeat NEVER, suspect the nearly religious fervor a certain navigation element has on people.

Because there are simply two camps. You love the hamburger or you hate the hamburger.

And I am not talking about the delicious type of meat traditional packed into the shape of a patty, grilled and then served on a bun with number of other delicious treats.

No, the hamburger menu icon is what we are talking about here, and it isn’t a new conversation.

A 34-Year-Old UX Idea

Do you remember the Xerox Star computer? Me neither, but this machine was the progeny to the Xerox Alto, which was the computer that inspired Steve Jobs to create a computer with a mouse and graphical user interface.

The Xerox Star, with the hamburger menu item in the top right corner of each module. 

The Xerox Star, with the hamburger menu item in the top right corner of each module. 

Tangent aside, the main menu on the Xerox Star was hidden underneath an icon that had three equal length lines stacked on top one another, called the hamburger menu.

Time moved on and the hamburger icon faded in and out of popularity. It simply appeared where it was deemed “necessary”, but in today’s world, there aren’t to many other icons that render the same user reaction in responsive design.

Popularity born of the (necessity) of responsive web design

Take the traditional desktop web site design. Now, scale that down. Scale it down some more. And some more. A little bit more. Ok. Neat, we are on a mobile device.

That top level navigation that traditional desktop web site designs usually have, how cramped does it look? If you don’t have as active an imagination as I do, let me help you out. It is CRAMPED.

Odds are the words used to allow users to navigate your site are unreadable due to how small they have become, and if you have a drop down style navigation, good luck trying to get your fingers to select the things you actually want to select.

Thus, Responsive Design was born.

And with the birth of responsive design, came the difficult question of where to put the web site navigation?

A great solution was to have, at a certain screen dimension, the entire navigation was condensed to the hamburger menu.

The space saved in this solution was immense and was a great resource for those of us who have had to find a way to cram a giant navigation with complex hierarchy.

But as space-efficient as this solution is, it has not found universal love in the UX community. So, to borrow an inflammatory phrase (but use it properly), let’s review some of the prevailing opinions on this element and “teach the controversy.”

Does less obvious mean less effective?

What beats the hamburger menu icon? How about the word “menu”?

A large-scale A/B test (240,000 users—but limited to a single web site) showed the “menu” button was clicked almost 20% more than the straight hamburger.

So, you should just use the word “menu” and move along in your UX planning session. Right?

Not so fast

The other side of the table will tell you, that using simpler UX elements, like a traditional hamburger icon (no text), is less visually distracting, which can actually increase conversion rates among users.

One Christian children’s entertainment site went as far as to hide all of their main navigation under a hamburger, even in standard desktop viewing. They found, after A/B testing the new navigation with their old site, a 105% increase in conversions with the less distracting UX.

To hamburger or not to hamburger?

So, what should you do? Use the hamburger? Not use the hamburger?

With the exception of Norm Cox original icon on the Xerox Star, nothing about the hamburger menu is strictly black and white.

Without question, it provides a straightforward method for reducing the screen footprint of your navigation system. Yet, there is also no question it does so at the cost of loss of information presented to the user.

What you have to assess is whether that trade off will have a net positive or net negative effect on user engagement and/or conversion. You can certainly make educated assumptions based on what you know about the sophistication level of your user base or the nature of your content.

But, as we saw in the two examples above, the best way to be sure is to A/B test any significant user interface elements.

And remember everyone, opinions are great, but user data is better.

Curious to learn more?

A history of the Hamburger Icon

A quick primer on the math of A/B testing

A cloud-based A/B testing platform

A look at the top 7 UX trends of 2015