User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
There seems to be a difference in meaning for this icon emerging:
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?
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.
It comes from that physical, draggable switches often have a set of lines, for better grip.
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.
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:
So, it is hard to find/build apps where this comes out as ambiguous. Examples are of course welcome!
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.
It has to be in the middle of a vertical bar (like a scrollbar) to be considered a draggable element.
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?
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.
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.
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):
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.
