UX – The Dreaded Hamburger Icon

Hamburger Hotdog Whatnow?

The “Hamburger” Icon, as it has semi-affectionately been nicknamed by the design community, will be well-known to some of you and completely foreign to others.

The hamburger, dear readers, looks like this.

“How, pray tell, does that look like a hamburger?”, you might be asking.

Here. Imagine you start with a hamburger, then simplify it, then simplify it even more.

Bam. Hamburger icon.

Show of Hands

How many people know what they can expect to happen if they click on the hamburger icon in an app or website?

No shame if you don’t know what it means — it’s a relatively new introduction to the User Interface world.

For those who don’t know (or are unsure), the Hamburger icon is typically used to indicate that a MENU of options will appear when you click it. You’ll definitely notice it more often in mobile-friendly sites than you will normal web browsing, but even as I type this, I can see it in the upper-right corner of my screen. Just a little gray hamburger. If I click it, I get document options — including things normally found in a web toolbar.

Does seem awfully tiny to cause as much trouble as it does.

That is the Question

To Hamburger or Not To Hamburger, that is the question. (You’re welcome for my not including the rest of my half-baked web design revamp of Hamlet’s Soliloquy) (get it? Half baked? Hamburger? I am HILARIOUS)

The NICE thing about the Hamburger is that it allows us to hide navigation in favor of content when we know that users are on a very small screen and neither have room for a giant menu nor have the time to scroll past it on EVERY page. It allows our primary content to take center stage, so to speak, while allowing the user to call up the menu at the click of a simple button.

A way, to be flippant, for the user to say “accio navigation!” when they need it, instead of us shoving unwanted choices at them from every angle.

The BAD thing about the Hamburger is that it’s not common knowledge yet. I’ve got a pretty tech-savvy readership here, but the general public doesn’t yet know what that little three-line icon means. It’s nowhere near as recognizeable as the envelope for email or the handset for phone or even the gearwheel for settings.

If the user doesn’t know what it means, they don’t click it. And THAT means they can’t find the content they’re ACTUALLY looking for when they need it. Often, landing pages for websites are our best guess as to what the user is looking for. (Or, in the case of for-profit websites, it’s often what we want to make sure the user is looking at.)

We can’t possibly get this right for every user, which is where navigation comes in. When we hide navigation behind some arcane symbol, we’re doing what I’ve commonly heard referred to as “Mystery Meat Navigation” which is a HUGE no-no. A user should know why they want to click on a button/icon/link before they even move their mouse to it.

Skirting The Issue

Some sites work around this issue by using the hamburger ONLY on mobile versions of their sites. Recognition of the hamburger is MUCH higher among mobile-heavy users. Even the gmail application on my iPhone uses the hamburger.

Still, the number of new mobile users is increasing by the minute. Hoping that we only get users who already understand the hamburger is kind of pathetic.

Some sites add helpful text below their hamburger. “MENU” or something along those lines.

Personally, I like this particular choice, but there’s still the issue of people SEEING the tiny hamburger button and reading the text, which … let’s be honest, is still kind of a crap-shoot.

So some sites add a little popover window to point to the hamburger, letting you know that it’s where your menu is hiding.

This can be disruptive to the user’s flow … and from a pure UX standpoint? You want to build an interface that needs no explanation. Something that feels comfortable and intuitive from the getgo.

… If you need not only an icon, but also text and ALSO a popover … one could argue you’ve lost inuitiveness a long time ago.

The Great Hamburger Wars

The internet’s full of vicious arguments both for and against using the hamburger icon.

“If your navigation is that complicated,” argues one side, “then your NAVIGATION is what’s flawed!”

… Okay, well. MOST websites do not have a maximum of five top-level navigation points, and no user wants to dive through level upon level of sub-navigation to find something that really ought not to be buried.

“Simplify, simplify, simplify! Reduce the number of choices a user needs to make and hide unnecessary elements!” argues the other.

… Okay, well. How do we hide unnecessary elements, but make them super-easy for folks to find on demand?

The End Result

Mostly, this results in a lot of blog posts like this one, talking about the issue without really nailing down a solution.

I think the hamburger isn’t going away. Instead, I think it’s going to be used more and more often, and we’ll pass that crucial tipping point where ENOUGH web users can find and correctly use the Hamburger.

And then it’ll be everywhere and we’ll all look back and laugh at how fervently we argued about whether or not to use the Hamburger.

Someday.

Discussion

Have you noticed the Hamburger in your browsing? Do you like it or hate it?

If you hate it, can you think of other ways to accomplish the same goals?

Related posts:

UI vs UX and Why You Should Care
UX – Screen Size Breakpoints
Buffalo Chicken Pizza Taco Burger