Are Users Ready for the Desktop Hamburger Icon?

You know the old saying ‘brevity is the soul of wit.’?

It seems that saying is evolving, and brevity is also the soul of the web. As a UX designer, I am always looking for ways of simplifying things, and using shorthand indicators when it makes sense to do so.

When mobile browsing made us rethink how we can simplify user experience within the constraints of minimal screen sizes, the “hamburger” icon was put to the test. Whether or not you believe another icon, shape or even text would do a better job, those three little horizontal lines seem to have won the menu icon arms race.

Originally, the hamburger icon was born out of pure necessity. A desktop-style fixed navigation bar didn’t make much sense on a phone screen. So we started using hidden menus and indicators together, allowing the hidden to become visible. More and more mobile sites got on board with the icon, even before it was widely recognized as the universal symbol for "menu."

Now practically everyone browses on mobile devices. Practically all mobile websites use the hamburger icon. Voilá! Near-worldwide recognition. Now we are put in an interesting conundrum: If everyone universally recognizes the hamburger’s meaning, can we jailbreak it from mobile and set it free onto our desktops? Or more to the point, will users accept it?

Let’s examine the arguments for and against the hamburger on desktop, and ultimately see where it is likely to work best, and where to avoid it altogether.

The Good

The "clean factor"

For designer/developers, the main draw for using the hamburger icon in a desktop application is the "clean factor." Minimalist design continues to gain popularity, so of course the impulse would be to strip away everything but the most basic elements.

Navigation is traditionally the workhorse of a website, not adding much in the way of visual flair (in most cases.) If we could swap out something cumbersome and obtrusive with something minimal yet recognizable, the overall effect would undoubtedly be much simpler.

But let’s be careful not to confuse visual simplicity with functional simplicity. More on that later.

Let your CTA be the hero

One of the biggest jobs any UX professional faces is creating a hierarchy that makes sense. We must place more emphasis on certain elements just to make them stand out. But when we scale something up, unfortunately, other elements must end up being minimized.

Hiding the navigation elements away behind a hamburger icon is a great way to call more attention to whatever action you want the end user to take. As an example, in a simple portfolio site, the ultimate action you want from your users is to hire you. So, if your landing page has enough information for them to go on, it isn’t unrealistic to expect them to click your CTA directly from that page. The goal is to highlight your main CTA button, since the other menu items are probably secondary anyway.

By utilizing the hamburger and hidden menu, you have successfully prioritized your main goal, while lessening the distractions of other choices.

The power of popularity

Of course the one element that makes the hamburger icon usable at all is its sheer recognizability. The fact is, users have been interacting with it since roughly 2010, when it started spreading in mobile applications. A/B tests show steady improvement in engagement every year, which can most likely be attributed to increased exposure.

Although the hamburger is widely recognizable, it’s not yet reached complete saturation, which brings us to...

The Not-so-good

Not Universally recognized by users

The hamburger is well-known, but it still has a few blind spots, making it a riskier choice than a straightforward navigation menu. Anecdotally, it is believed that users who browse on mobile the least are also the least familiar with the menu icon as we know it. Generally speaking, this is especially true in older demos, specifically people 65 years and over.

Another click, another barrier

Perhaps the biggest drawback to using the hamburger icon in lieu of a more standard menu is the extra action a user must take to get where they want to go. One of the guiding principles of good UX dictates that we eliminate as many barriers as possible between users and content. Remember when I brought up functional simplicity earlier? This is it.

Continue reading %Are Users Ready for the Desktop Hamburger Icon?%

by Wes McDowell via SitePoint