21

There seems to be a difference in meaning for this icon emerging:

enter image description here


For some it means 'menu', for others it represents 'draggable item' (in preference to the small dots used in GMail for instance).

Is context alone sufficient to disambiguate its meaning?

4
  • 1
    I've never seen the hamburger used to indicate draggable, it's always a menu button IME. Can you point to an example?
    – obelia
    Sep 28, 2013 at 15:58
  • Relevant questions discussing the same icon and its use: ux.stackexchange.com/questions/41712/… & ux.stackexchange.com/questions/32877/…
    – kontur
    Sep 29, 2013 at 10:53
  • 2
    I just read this question to see want the "hamburger" icon is :-) I always thought of this as a vertical list icon (e.g. used in Chrome to symbolize the menu), or a grip (a rough area) on a draggable bar (like physical draggable switches sometime have). Sep 30, 2013 at 9:21
  • 1
    Got here by Googling the term after seeing this Tweet: twitter.com/jmspool/status/441224973047574528 I think it sums it up well. "The hamburger icon is the 2014 technique for providing mystery meat navigation. (And, thus, appropriately named.)" Mar 5, 2014 at 16:33

5 Answers 5

18

The context is key, and you will probably have to learn what it means for each context. Even when you know it is a menu, it is not clear what kind of menu it is. Take Chrome. In Windows, there is only the hamburger, while on Mac OS, there is the top main menu as well, as in all Mac Apps. The Hamburger does not say what kind of menu it is.

The Draggable Handle icon is besides the scrollbar case, also common for rearranging lists, for example pressing Edit in a list in some iOS apps, when the delete icon shows up on one side, and the "draggable handle" icon on the other. What says that this does not mean there is a menu on each row? You have to try, to know.

enter image description here

It comes from that physical, draggable switches often have a set of lines, for better grip.

enter image description here

As a button icon, I would say three lines has many meanings. It is such a simple symbol and looks like a list, or a set of rows (of text).

Three lines are also used in text editing for Columns, Lists, and Justify text vs e.g. left align. There are probably more uses for it.

Its use as a menu icon comes from that a menu often also is a couple of rows of text. When the menu instead is a grid, then the menu button may also look like a grid.

enter image description here

This google grid menu used to be in the form of a horizontal menu bar on top of the page.

The hamburger's emerging representation of a menu comes from the need of buttons like these, originating from the trend of hiding the traditional "main menus", that used to reside on top of the window. Smaller device screens do not have room for all the menu options. Designs move away from "easily available on screen" and "lowest number of clicks" and move towards clarity, and more focus on the main things on screen. In those applications that do not depend entirely on the menus, the kind of users that actually are using the menus options will still be able to find them behind that button as directly on screen.

To answer your question:

  • The three lines must be situated at something that makes sense to drag, to be interpreted as a Draggable Handle.
  • In any application that is lacking menus on screen, chances are that the menu is behind that button.
  • In a text editor, if it shows up in a button next to the Left Align icon, it's probably not a scrollbar. ;) And so on.

So, it is hard to find/build apps where this comes out as ambiguous. Examples are of course welcome!

0
8

I'd observe that the kernel of the issue is that simply these are two semantically different icons, namely

Grab handle is a symbol that replicates has friction area for a thumb or finger

Hamburger Menu is a symbol that represents a list of menu items

these two icons have accidentally fallen upon the same symbol. The fact that they look the same is purely incidental, unnecessary, and rather unfortunate for UX.

Key question Is there any good reason to depend on context alone to disambiguate icons? No. Here example of drag handle that is a distinct icon.

enter image description here

1
  • 1
    While JOG has a relevant point about context, this is actually a far more valuable answer. The hamburger icon is indeed in use as a grab handle, but that doesn't mean it is a smart choice. If there were no alternative style option then context would have to do, but since a dotted grid is very common for elements that can be dragged it is the preferred choice. Also see this question: ux.stackexchange.com/questions/72516/… Jan 27, 2016 at 9:29
6

It has to be in the middle of a vertical bar (like a scrollbar) to be considered a draggable element.

scrollbar

1
6

Affordance Test

Before answering, I'd like to pose a question (hoping you are not a Mac user). How would you interact with the two arrows appearing at the top-right of this window?

a screenshot of the fullscreen icon

The fact that the icon reminds of the resize cursor, and the fact it is not contained within a button, makes many people drag it.

The Button Affordance wins over its Icon

I'm pretty sure that the icon origin was the visual similarity to the 'column view' that opens when you press the button (see below)

However, as Sara mentioned, most people will be familiar with the lines from scrollbars or other draggable items.

As affordance is defined "A property in which the physical characteristics of an object or environment influence its function", you can argue that before the popularity of hamburger icons, their affordance is draggable item.

However, the button in which the icon resides will signify to people that this is nothing but an icon of a button, and the affordance of a button is click (outside UI design software, buttons can hardly ever be dragged). So the affordance is now clickable item. This will radically change if we are to remove the button boundaries from the button - the icon will then afford dragging.

An Image showing the column view that opens when one clicks the hamburger icon on the iphone facebook app

If these icons were designed to afford drag, they would look like this (which you could argue is better design - making usage of direct manipulation):

enter image description here

2
  • Somehow I get this feeling that the last two images aren't the ones that should be there
    – Alexander
    Sep 29, 2013 at 9:36
  • @Alexander, the purpose of last image is the variation of the menu/drag icon.
    – JOG
    Jun 3, 2014 at 20:41
0

Here's a study on the conversion rate with hamburger menues: http://conversionxl.com/testing-hamburger-icon-revenue/

I think luke wroblewski stated the same result once ago.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.