The Hamburger Helper Icon

Hamburger menus are popular and easy, but are they any good?

If you have a smart phone, then you are probably familiar with the hamburger icon hanging out in one of the corners on your screen. Even if you don’t have a smart phone, or tablet, you may see them on full screen websites. Still confused? OK, here is an example from BLStream. Check out the upper right-hand corner. Tapping the hamburger makes the hidden menu on the left appear

Why is it called a hamburger menu?

I don’t believe the icon was meant to look like a hamburger. Could three parallel lines look any less appetizing? But I think people tend to personalize tech images. I also haven’t seen any better options. Triple-layer menu? Parallel squared? Small menu thing-y?

So what is it supposed to look like?

Well, there are a couple of origin stories. But the prevailing one is that it was designed to look like a list for a Xerox Star computer, from 1981.

According to Gizmodo, its designer, Norm Cox, “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.”

However, in UX stack exchange ‘s post “The Hamburger Icon – menu or drag affordance?”, people point out that it could be based on a draggable handle, as seen in the following image. This actually makes sense since the hidden menus can be dragged open and closed.

Are hamburger menus good for my website?

Much like real fast-food hamburgers, this menu icon became more popular as people wanted to take their content to go. Mobile phones became smarter and could load more information, but they couldn’t display all of that information comfortably. While the menu is important, it should not dominate the page. You could shrink the menu, but each link would have to be big enough for a finger to distinguish it from the other options. Smashing Magazine states:

“Apple advises making anything tappable the size of a fingertip, which it defines as 44 points square, or approximately 57 pixels square. This is a lot bigger than a link in a text-based menu, which might be only 14 pixels high. Thus, the clickable area of a link on a mobile website should encompass not only the text but the area around the text, and ideally this would be apparent to the user.”

Since the hamburger icon usually sits in one of the top corners of a mobile screen, users can access it even if they have scrolled down to the bottom of the page – which is usually much longer in order to account for the lack of width.

But do users know what the hamburger icon is?

I am really pushing this hamburger analogy, so please bear with me. Imagine someone who had never heard of McDonald’s came to the U.S. and was served a hamburger. Would they know what was in it? Would there be hesitation in trying it?

At thenextweb.com, Zeebox showed that switching over to a hamburger icon and side menu decreased their number of views and the time spent using their app. They theorized “if most of the user experience takes place in a single view, and it’s only things like user settings and options that need to be accessed in separate screens, then keeping the main UI nice and clean by burying those in a side menu is the way to go.”

In usabilla.com’s artible, “Why so much hate for the hamburger?”, Oliver McGough explores the pros and cons of using the hamburger icon. He states “Facebook’s initial mobile application hid the majority of their app’s functionality under the hamburger. Hidden from view, and increasing the interaction required to browse – an amateur mistake. Only recently did their redesign fix this. Promoting common interactions to ever-present locations. Replacing the hamburger with icons directly to these locations. Space lost, but the user experience improved.” But he notes that the hamburger icon is still present and necessary for less vital items.

I’ll take those hamburgers to go

As I adapted to responsive web design, I frequently used the hamburger icon. I use it on the mobile version of this site. I was surprised by all the recent articles that want to get rid of it – at least for mobile viewing.

I am confused when I see it on sites on my home desktop computers, where there is plenty of space for a menu. When there is time and room to have a 3 course meal cooked for me at home, I don’t ask for a hamburger instead. At digiday.com designer Ben Garratt states

“It makes absolutely no sense to me from a UI or UX perspective, if your menu really needs to be so insanely large that you can’t display it nicely without hiding it behind a click of a fairly nondescript icon, you should probably be having a closer look at your content strategy.”

But I believe that it is ubiquitous enough that anyone who would look at my site on a mobile device would know when and how to use it.

Other menu options

Still, there are other better solutions that I need to try out, such as a tab bar, a scrolling tool bar, or even a simple button that says “menu”. The hamburger will tide me over for now.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.