The Hamburger Icon

I’ve read a lot on the web that designers hate the universal hamburger icon you find on mobile websites. This strikes me as odd, and I would like to open the door to fellow web designers and developers. I’d love to hear what you think about this. Personally, I’ve come to accept the hamburger icon as the universal symbol for a mobile navigation menu. I don’t know what could possibly be any better than this icon to represent a hidden navigation menu. Let’s take a look at some of the reasons why it is useful and practical.

It’s universal

Everyone has come to know and accept the hamburger icon as the symbol for a hidden navigation menu. When people see this symbol, they know that they can tap it with their finger to reveal a hidden navigation system. Whether that navigation menu slides in from the side or the top, people know that this icon represents a list of links that are important for the site. Want to know where the hamburger icon originated? Check out its history.

It doesn’t take up a lot space

The hamburger icon is perfect for mobile screens. It fits almost anywhere, which is important. Tablet and cell phone screens don’t leave a lot of room for much else. A tab or a button takes up a lot of real estate, so if you use that instead, it’d better be important.

It’s a perfectly fine visual representation

I’d like to know what somebody thinks would be a better representation of a vertically stacked list of menu items other than this icon. Theoretically, you could use a directional arrow, but even something as simple as that would still be confusing. The average user would know whether they were supposed to slide their finger across the screen, or if content would slide over the content that there currently viewing.

The image above shows the hamburger icon on a desktop screen. Sometimes it’s just applicable. It’s less obtrusive than an ugly menu bar spanning the entire width of the screen.

It’s intuitive

Everyone just seems to know that this icon will reveal a navigation menu. Intuitively, people click on this icon with their finger for instant access. Even with a native app, custom buttons for switches still leave room for user error. Anything other than the hamburger icon leaves users guessing. Isn’t the whole point of web design and development to create the best experience for all users? Whether we like it or not, we should use anything that users universally understand until we discover something better

It’s built into frameworks

Many frameworks such as Foundation 5 use the hamburger icon for tablet and cell phone screen sizes. The reason is because it just makes sense. I personally can’t imagine anything that would work better, work better, or be is easily understood as this simple three line icon.

Conclusion

What do you think? Do you think the hamburger icon is ugly? Have you come up with a better solution? If so, I’m all about discovery and finding new information. That’s part of being a professional web designer. I would love to see it, and so would my readers. If you’ve come up with a solution, feel free to leave a link to it in the comments section below so we can check it out.