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

Demo 1:

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

Demo 2:

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

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

It’s a pretty new icon for many users. Not to say that it didn’t exist prior to a few years ago, but with the advent of more and more mobile apps and websites needing a place to put their complex navigations, it has clearly been gaining more prominence on both small and even larger screens.

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 placement on roads in relationship to where one needs to stop.

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, where’s our Burger King?

To move this icon forward, we should come up with a general consensus of how the burger icon / menu should behave and generally be designed.

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

I’m guilty of inconsistent styling of the control 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.