The Hamburger Icon and a Way Forward

As much as I can hate something that’s just a part of a graphical interface, I hate the hamburger icon.

If you’re unfamiliar, the hamburger icon are those three horizontal bars that you’ll find in the top corners of mobile apps, and increasingly on mobile websites. It usually represents a shortcut to a menu of some sort.

I hate it because it’s an example of designers assuming too much about what users will intuitively understand. Icons should help users find what they’re looking for faster, while taking into consideration the space given. This much discussed grouping of three bars doesn’t necessarily have a great track record of doing that.

Context

This icon was, in fact, originally designed to represent a hidden menu, which is probably how it started getting used to represent off-canvas mobile menus.

I designed that symbol many years ago as a “container” for contextual menu choices. It would be somewhat equivalent to the context menu we use today when clicking over objects with the right mouse button.

Its graphic design was meant to be very “road sign” simple, functionally memorable, and mimic the look of the resulting displayed menu list. With so few pixels to work with, it had to be very distinct, yet simple. I think we only had 16×16 pixels to render the image.

Its history is duly noted—no one made it up out of thin air. That doesn’t mean, however, that it’s doing an adequate job. In fact, two decent tests have at least given some merit to the idea that the icon isn’t performing well despite its near ubiquity (Test 1, Test 2, Test 3).

Solutions

Many people have recently written about the pitfalls of the icon and what can be done to make things clearer.

But, the thing that’s driven me craziest about this icon is that it doesn’t take much more space to use the word “Menu,” which users definitely understand.

My good friend, Matt Smith, wrote about it recently, and gave the example of putting the icon in a bounding box with the word “Menu.”

Getting there!

Now, Adrian Zumbrunnen recently explored improving the hamburger icon, and showed how the same idea Matt presented could be worked into a slick interaction.

Even better! It gives the perks of context but saves the space.

But, I have one more argument to make. We can use a better icon for what this button actually does on mobile devices.

These two icons more closely resemble what happens after a user taps or drags the icon. The icon with the dots on the left would be used on the left side of the screen, and vice versa for the right one.

It’s close to what exists now, so it wouldn’t be a huge stretch for users (they obviously haven’t all acclimated anyway), and it’s more in line with the mobile interaction. Whereas the original icon represented a totally hidden menu, these new icons represent a menu that’s technically hidden, but is really just off the canvas.

We ought to do better by our users than just relying on the precedent set for us by other designers. I’d love for this to be discussed and considered. I’d love to need to make this icon for people, or just begin seeing it soon. I’d love to see something like it, but better than what I’ve thought of.

I would just like to see us try.