The Hamburger Icon - menu or drag affordance?

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?

Answer

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:

• 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!