Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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?

share|improve this question
    
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 '13 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 '13 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). –  Danny Varod Sep 30 '13 at 9:21
    
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.)" –  Nathan Long Mar 5 at 16:33

3 Answers 3

up vote 8 down vote accepted

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!

share|improve this answer

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

scrollbar

share|improve this answer

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

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

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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