Monday, May 18, 2015

The hamburger icon

The BBC recently ran an article about the "hamburger icon" and how these three lines mystify most people. You can find the hamburger in a variety of modern user interfaces: phones, websites, and desktop environments. The common use of the "hamburger" is to bring up a menu. Even GNOME uses the "hamburger icon" to represent a menu for program options.

I've commented in my hands-on review of GNOME 3.16 that in GNOME, the "three lines" icon replaces the gear menu for the drop-down menu. This "three lines" menu icon is more common in other applications, including those on Mac OS X and Windows, so the new menu icon should be easier to find. I still believe that the "hamburger" is a good choice. Visually, the "three lines" icon represents a menu.

gedit 3.16

Nautilus 3.16

Epiphany 3.16

However, it's important to note that the "hamburger" icon is a learned representation. It is a very abstract icon. In contrast, a "boldface" icon (typically a bold "B") or an "italics" icon (typically an italics "I") represents the icon's action by showing you a sample result, so is easy to learn and easy to remember. But the "three lines" icon doesn't exactly look like a menu; you have to learn what it means, then remember it.

Blogger's edit bar, with "boldface" and "italics" buttons on the left

I wonder if the "hamburger" icon can be improved by including some other marker to suggest an action? In the BBC article, a web developer conducted some tests on his own, and found:

  1. Adding the word "menu" underneath the three lines increases the button's use by 7.2%.
  2. Putting the hamburger inside a box, so it looks like a button, increases use by 22.4%.
  3. Switching the lines for the word "menu" makes 20% more people click.

GNOME might benefit by examining this further. GNOME already includes a box around the "three lines" menu icon, which helps. What if we added a "∨" indicator (or "∧" if the menu is on the bottom of the screen) to the icon, to suggest the icon presents a drop-down menu? I recall older versions of GNOME used a similar indicator, in the form of a small triangle.

Perhaps this is something we can explore in the upcoming GNOME Outreachy. But I think this round of usability testing in Outreachy is already full, so I'm not sure we will be able to examine the "hamburger" icon's usability in any detail, at least in this round. Instead, I encourage others who are interested in GNOME usability to try their own prototype usability test, using mock-ups or paper printouts with test volunteers to see how users respond to the "hamburger" icon with and without a "∨" indicator.

(And if you are interested in participating in a future round of Outreachy for usability testing, this would be a good first project for you.)

2 comments:

  1. How did the menu bar (File, Edit, View...) do in the test? Compared to the other alternatives, seems the best option by far.

    ReplyDelete
  2. I don't know how the three lines icon compares to a traditional menu bar. The BBC article mentions research done by James Foster, which seems to be a two-part blog article here: Mobile Menu AB Tested: Hamburger Not the Best Choice? (April 2014) and Do Users Understand Mobile Menu Icons? (February 2014). Looks like Foster did A-B testing on different styles of the three lines icon, but didn't compare to a traditional menu bar. Foster was looking at mobile apps, where a menu bar may not make much sense contextually.

    ReplyDelete