Jump to main content

Where's our Burger King?

  • Published:
  • Category: CSS

The Hamburger Icon ain’t all that bad…

The hamburger menu debate has been going on for some time now, and I thought I’d throw my two cents in and see where they land.

See the Pen Burger Time by Scott (@scottohara) on CodePen.

A simple demo of a Hamburger Menu Icon Button.

See the Pen Burger Icon w/Menu Label by Scott (@scottohara) on CodePen.

Another demo of a Hamburger Menu Icon Button with an added __Menu__ label and a border around the entire clickable area.

You see, I don’t think the hamburger icon / sidebar menu combo is all that bad for usability. I think it makes a lot of sense actually but I do understand why many others don’t quite get it yet.

Relatively speaking, it’s a pretty new type of icon. Not to say that it didn’t exist prior to a few years ago, but with the advent of more and more mobile apps needing a place to put their complex navigations, it has clearly been gaining more prominence on both small and even larger screens. More room for content above the fold! amirite? (ugh…)

Now, being such a ‘new’ icon to the general populace, it makes perfect sense as to why implementing a hamburger menu can be misunderstood. Many visitors to your site/app may not have seen it before and the designers, developers and product owners that have implemented the new menu have not adequately educated these visitors as to what it is, and where their conventional navigation has scurried off to.

It all comes down to education

Now I don’t believe that the loss of engagement when a burger is put in place has anything to do with the fact that it’s a bad icon. As I was saying, if anything it is due to poor education of the users that engagement is down.

Education doesn’t even need to be that big of a deal (unless you’re super worried that your user base will just lose their minds if you don’t completely spell it out for them).

Simply adding the word Menu or Sections, maybe even Pages (maybe not. I don’t really like that option) next to the icon would give people the necessary label they needed to understand what that icon was. (Just make sure you also make that label clickable, as some users may simply gravitate towards the label as an interaction item and still be a bit slow on the update of the icon).

Some sites (the nytimes.com I believe) temporarily had an entire overlay on their site when they first changed their navigation system over to the hamburger / side menu combo.

As silly as that may have been to those of us in the industry, or those familiar with what the icon meant, it was more than likely the perfect call on how to easily educate users on a significant change in how they navigated the website.

Know your audience

Knowing your audience will really help determine how much you have to emphasize education on the burger or not. If you’re audience is pretty tech or design oriented, you probably have little to no work to do. If your audience isn’t from that demographic, or you’re customer service department dreads every new UI update, you may want to stay away from moving towards the burger for now.

Like all icons, it needs time to seep into the pool of common knowledge. And honestly, there probably needs to be a more consistent implementation of the icon and it’s intended UI/UX to have it really gain some steam.

Let’s look at it like this…

A stop sign is simply an octagon

But what makes it a stop sign is the color, it’s consistent white border, it’s label and it’s consistent placement on roads.

Alter pieces of that formula and I bet you that this tried and true icon would start confusing people.

For instance, put the stop sign 50 feet away from an intersection. People would probably stop at the sign, and then blow through the intersection. Not optimal UX there…

Change the color or shape, and the sign isn’t as recognizable. Take away the label, and just hope that people with color blindness recall the shape.

Again I ask, where's our Burger King?

So I propose, to move this icon forward, we should come up with a general consensus of how the burger icon / menu should act.

Until it’s as iconic as the stop sign, maybe the icon should have a consistent height, width, and labeling? Maybe the actual three lines of the burger should be more consistent. Sometimes they’re quite think. Sometimes they’re ultra thin. Sometimes I’ve seen four lines. I guess the fourth line is bacon or lettuce?

I’m guilty of inconsistent styling of the menu myself. Fortunately, it’s mostly inconsistent in demos I’m making rather than in any actual consumer facing project.

But what do you think?

Does what I’m saying make sense, or am I simply spouting off yet another opinion on the matter? (I mean, I’m clearly doing that…)

Let me know what you think on Twitter. And thanks for reading.