The Great Hamburger Debate

If you’ve never had the pleasure of participating in a user experience (UX) planning session, you’d likely never suspect the near-religious fervor with which certain interface navigation elements’ relative merits are evaluated. And no element is more debated than the seemingly insignificant hamburger menu.

A 34-year-old idea

When Norm Cox designed the interface for the famous Xerox Star computer (well famous to nerds and geeks as the progeny of the Xerox Alto, the computer that inspired Steve Jobs to create a computer with a mouse and a graphical user interface), the main menu was hidden under the exact hamburger icon we use today.

The earliest incarnation of the hamburger icon, as seen on the Xerox Star.

The earliest incarnation of the hamburger icon, as seen on the Xerox Star.

Popularity born of the (necessity) of responsive web design

As one scales a traditional desktop design metaphor down to smaller and smaller mobile screens (which ironically have massively higher pixel counts than their desktop counterparts), one loses the option of having the names of every potential navigation channel splayed out without making that said navigation the only thing one could see on a device. So, at a certain screen dimension, the entire navigation was condensed to three stacked rounded rectangles, a.k.a. Norm Cox’ “hamburger.” But as space-efficient as this adaptation 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?

As ubiquitous as the hamburger icon is as a replacement for an actual menu in responsive (and adaptive) design, it may not be as clear as simply using the word “menu.”

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

Not so fast

The other side of the table will tell you, that using simpler UX elements, like a traditioan; 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’s the takeaway? With the exception of Norm Cox original icon, 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. But 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. Opinions are great, but the user is always right.

Curious to learn more?


Curious about Magnani?

Since 1985, Magnani Continuum Marketing has made it easier for organizations selling in highly technical and complex markets to deliver the most effective and seamless traditional and digital brand experiences. We’re more digital than your advertising agency. More strategic than your digital marketing shop. More creative than your management consultants. And a heck of a lot easier to work with than almost all of them.