Design & UX
Article

Are Users Ready for the Desktop Hamburger Icon?

By Wes McDowell

Illustration: Hamburger menus at a resturant - Alex Walker

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.

Screenshot: We Are Wild

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.

Screenshot: R/K

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.

When we make somebody click an icon just to get to the navigational choices contained within it, we are making them go through an extra step. This may not seem like much, but if someone is going to spend much time on your site, they probably won’t want to take this extra step over and over again. If you’re going to make your users take an extra step, it needs to be for a good reason, and only under the right circumstances.

Out of sight, out of mind

What if your hidden navigation contains something delightful and unexpected? What if because it is hidden away, nobody will ever see it? Decreased discoverability can be a major problem when you have interesting content that might push a conversion over the top.

For example, a website that has a testimonials page might rely on said testimonials to connect with potential customers, and convince them to convert. If that is a clearly visible choice in the navigation, users will be more likely to "accidentally" discover this page. Since it isn’t an overtly obvious section that every website has, it is likely to be unanticipated and overlooked if hidden.

Best Uses

With no clear universal answer to the hamburger question, let's look at the different cases you might want to use it, as well as how to make the most of it.

Simple sites with few pages/little content

If your site is on the smaller end, and you really want to make good use of white space, you can probably get away with hiding your main menu behind the icon. Since you aren’t expecting users to click through page after page, the extra clicks are probably worth the clean aesthetic you’re after.

Screenshot: Outdated Browser

When it’s obviously clickable

Studies and countless A/B tests have concluded that menu icons perform about 20% better when they are contained within a button. Therefore, you would be well-advised to take this approach, and put a border around it.

Screenshot: KLM site

Hamburger menus: If you like it you shoulda put a ring on it.

Traditionally, hamburger icons never needed a hover state since they were purely for mobile applications, but if you’re going to include it in your desktop design, make sure to give it some visual feedback for users who mouse over it, so they know it is indeed clickable.

While you’re at it, make sure it is clearly visible. Keep contrast, size and placement in mind. Generally, anything that is placed on the left side of the screen gets more action, so you might opt for the upper left side, rather than the right. It is also advisable to keep it sticky, so it stays anchored to the top of the window as your users scroll down.

Paired with a CTA

Perhaps the very best case to be made for using a hidden menu is that when used in tandem with a strong CTA, you are effectively telling users exactly what is expected of them. Doing so places the emphasis on your CTA, while minimizing the risk of your users getting lost in extraneous content. This generally works best if you have dedicated landing pages that are all relatively self-contained, eliminating the need for users clicking around to get the info they want.

Mute. Mic. Rabble

Worst uses

On the other end of the spectrum, here are a few of the worst cases for a hamburger/hidden menu combo.

On a site aimed at older demographics

As stated earlier, the 65+ demo is the least familiar with the meaning behind the hamburger icon, thus the least likely to interact with it. So if you are designing a site that skews toward that age group, you would be much better off keeping all navigation clear and out in the open.

Sites with unexpected content

Any site that relies on spontaneous discoverability would be a bad candidate for the hamburger icon, simply because these elements are much less likely to ever be discovered. Anything fun and/or unexpected that might add to the site’s overall conversion should be explicitly displayed by default. People are not likely to discover something they don’t even know exists.

Final Thoughts

As with web design itself, there are no "one size fits all" answers to the desktop hamburger debate. Ultimately, you need to weigh out all factors, and determine if the visual simplicity it affords is worth the potential UX risks. It is certainly not advisable in all cases, but I think I can safely say that as time goes on, it will become less and less risky.

What do you think? Is it ever advisable to use a hidden menu with a hamburger icon on desktop sites? Have I overlooked a good use or obstacle? Please chime in with your thoughts below, and keep the conversation going!

  • http://onsman.com/ ronsman

    I’d suggest anyone considering a hamburger menu on desktop or anywhere else should be careful to take accessibility needs into consideration. If your hamburger menu can’t be accessed or operated via a keyboard, for example, then it is inaccessible and excluding people who use screen readers and other assistive technology. An inaccessible site menu is equivalent to no site navigation at all.

    • http://uk.linkedin.com/in/karlbrownactor Karl Brown

      It’s also worth considering people with learning, cognitive and educational difficulties. Just because technologically savvy people know what the hamburger icon and a hidden menu are, it doesn’t follow that everyone does. “Menu” doesn’t accurately describe what users are going to see unless you know the context. I’d only ever recommend hiding things that aren’t primary concerns, and having the main navigation visible at all times. For responsiveness, you can always have the navigation “hide” items that don’t fit onto one line.

  • M S i N Lund

    Verdict:

    I have a 27″ QHD-screen, soon i will have a 40″ UHD.

    If you CANT fit your navigation on that space,
    (but you CAN fit several huge blurry images of people smiling like morons)
    …then I’m not buying whatever it is you are selling.

    I dont do business with incompetents.

    • Jacob Alvarez

      “If we could swap out something cumbersome and obtrusive with something minimal yet recognizable, the overall effect would undoubtedly be much simpler.”

      Using the expandable menu isn’t about not being able to fit the navigation on the screen. It’s about de-cluttering the page so users are drawn to what they came to see.

      • Wes McDowell

        Yes, Jacob has it right here. It’s not about not fitting it in, but rather raising the question whether or not simplifying a menu behind a hamburger icon is justifiable in 2015. I am by no means saying it’s right for every application, but I think it can work under the right circumstances.

      • M S i N Lund

        Proper navigation on a webpage, lets you know at a glance where you are, where you can go, whats available to you, encourages you to explore further etc.

        Hardly cumbersome and obtrusive.
        Unlike the stupid fad of the day: “if you can see it, and it has a function, its ugly”

        If space is an issue, sure.
        If not, why replace it with just even more white-space or filler-faces?

  • Jacob Alvarez

    I’m all for the expandable menu on desktops. Navigations are always a pain when making responsive sites. As long as you make it obvious to users that the nav is hiding behind that little hamburger, I think it’s the best choice. Also, I think it’s refreshing for users because it gets all that navigation junk out of the way, yet makes it available when they actually need it.

    • M S i N Lund

      … and breathing down YOUR neck, is the next generation, saying:

      – Also, I think it’s refreshing for users because it gets all that
      navigation and content junk out of the way, yet makes it available when they
      actually need it.

      All hail the nice clean 100% empty page.
      (Except for the icon that shows the navigation and content when you swajjp it, that’s for the next next gen to get rid if)

      • Jacob Alvarez

        I didn’t say anything about hiding content.

        • M S i N Lund

          Why not hide everything?

          • http://www.andymercer.net Kelderic

            Every web page has a primary goal. You want the user to do something. That could be reading your content, that could be signing up, that could be buying something, etc. Navigation is NEVER the primary goal of a page, it is a helper functionality, to get the user to the primary goal.

            Hence hiding navigation until needed is completely different than hiding content. You should never hide the primary goal, but hiding things that distract from the primary goal can sometimes be okay. Not always, but sometimes certainly.

          • M S i N Lund

            But if you hide the navigation “until you need it”, that means its hidden when you need it.

            Get it?

          • http://www.andymercer.net Kelderic

            Yes, at which point, a single click unhides it. Depending on content, it can be a good thing to de-emphasize navigation, to then emphasize primary content.

  • M S i N Lund

    Why on earth would you have every nav item visible at all times?
    And why only use drop down menus?

  • Ds

    Here is a thought….don’t?
    UTFSA (Use The F*ing Space Available)

    24-32″ inches across 1024-4000px wide and you want use an icon to represent something in a space that it could be easily filled with the navigational links you wish to replace?

    Same with those ugly ‘toolbars’ on every f*ing page. Yes works on a tablet/phone. No it looks crap on my desktop.

  • briankrenz

    Users don’t know what the hamburger icon means. In most cases it should not be used on desktop or mobile or anywhere else without a label. If you’re dying to use it, stick a label on it (mobile too).

    Even with a label, it probably isn’t normally justified on desktop, where there is ample room to both show the navigation and have a clean design.

    I’m all for simplifying design but not at the expense of the user’s ability to understand that design. Sometimes our efforts to simplify end up complicating things further.

    • http://www.andymercer.net Kelderic

      Most users under 50 do know what it means at this point. And that knowledge is increasing as time goes on. I agree on the label, though, especially if your demographic is older.

Recommended

Learn Coding Online
Learn Web Development

Start learning web development and design for free with SitePoint Premium!

Get the latest in Design, once a week, for free.