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.

Apple and Google are going head-to-head to define meaning of the three-horizontal-bars icon: enter image description here

In iOS this icon means "drag me to rearrange items in a list" while Google Chrome's version means "click me to bring up a menu".

Is one of these two meanings already widely established in mobile, web, or desktop software? Also, which popular apps (on any platform) use this icon and what does it mean in those apps?

I'm asking because we're building an app that has a "list re-order" feature (using the standard iOS icon of course!), but several iOS-familiar folks I talked with didn't recognize the re-order icon. This led me to wonder how popular either variant is. Even if an icon is iOS standard, if it's not used much and the other variant is very popular, then we'll have some user education challenges we want to prepare for.

Here's pictures from the newest Google Chrome:

enter image description here

From iOS design guidelines:

enter image description here

From a sample iOS app:

enter image description here

share|improve this question
    
It's great to ask how the item is used in the majority of cases, but don't forget to test test test :) –  Valeria Spirovski Aug 25 '12 at 1:43
    
You may want to rephrase the question to ask something closer to "how to best indicate re-orderability". A popularity phrased question does not really indicate the challenge you are confronting and may cause downvotes or closing. –  Luke Charde Aug 25 '12 at 1:58
    
Different icons can mean different things in different contexts. If you're not using iOS there's not much reason to assume the three lines will be read as "drag here" unless they actually look grippable (IMO they don't really, the dots are a more standard drag and drop queue) –  Ben Brocka Aug 27 '12 at 15:46
2  
    
A coworker said it was a "tri" (try me)button, which I thought was pretty clever. –  sunny Nov 20 at 23:42

3 Answers 3

up vote 16 down vote accepted

Three bar icons are now being used widely to indicate a "show list/menu" function - it's not just Chrome. Below are screenshots from Day One and PlaceMe (I only had to open a couple of apps to find examples of this usage).

Day One Screenshot PlaceMe Screenshot

I believe the icon was a poor choice by Apple (in hindsight) - it does not give a clear interaction cue, it's more of a reorderable state indicator. But, let's remember that Apple made this choice before all this app-madness happened.

On iOS, both uses may be able to co-exist without confusion - since use as a menu/list indicator would have a single icon and "reorderable state" would have an icon beside each list item.

A better choice may be to move toward something similar to the "draggable" icon to indicate reorder-ability and let the three bars be a "show list/menu" function cue - as it is gaining traction.

icon sketch

share|improve this answer

I agree that the three-lines icon is being established as a place to pull something. (See in particular the lined tab that appears if you drag down from the top of an iOS screen to show notifications, or on the lock screen when multiple notifications are waiting, or on the camera icon on the lock screen.)

Matching that icon to the real world examples of the battery door / sliding plastic widget makes sense to me. The Google Chrome icon confuses me for that reason, and I always thought a "gear" or similar "settings" related icon would have worked better there.

share|improve this answer
1  
The meaning of a gear-icon is more like having a look into the "guts of the machine", so it fits for a settings menu, where one will manipulate stuff. The Chrome button on the other hand leads to a variety of functions, not just settings (new tab, bookmarks, printing, etc.) so a more general "list" or "menu"-icon makes more sense. –  J_rgen Feb 14 '13 at 9:44

drag'n'drop nearly always has bad affordance.

The current model in gmail is the following:

gmail's new dd affordance

Albeit I'm not sure if they're really serious about it, esp. as it only appears to the hovered element.

The previous one was this:

gmail's old dd affordance

More dragg-ish, but still bad.

I think in order to reach good affordance with a drag-n-drop control, it either has to be explicit action (up and down arrows, that's pretty explicit), or it has to be "bumpy" (in case of a touchscreen): I guess the apple version looks more like a kind of air venting holes than something to get a hold on.

The drag-n-drop affordances usually come from hardware switches and battery cover lids, and this is what those three "lines" mean (they're the "receded" type). But even if you do miss them for 3 lines (compared to Chrome, which are three lines), then we shouldn't expect the users to understand...

Here are a few examples from 'real life':

A kodak battery lid

A bumping-out battery lid (from here)

A fuji (dotted) battery lid

A dotted battery lid (from here)

A kodak receding battery lid

A receding battery lid (from here)

You can also create the following interaction if you don't fear of breaking out of native:

iOS affordance mockup

Because of the arrows, the users will immediately understand what is it for (I hope so, this is just a mockup, no user tests yet), and they'll try to tap on it as part of exploring the interface. If you do it well enough, they'll notice the displacement (likely if it happens somewhere between 150-250msec after touchstart), and will understand that it's a tap movemenent.

This is just a tip. Norman's classic "The Design Of Everyday Things" might help you out on this.

share|improve this answer
    
The 3 little lines go back at least as far as Windows 2000 as the 'rough' (ie draggable) area in the bottom right corner of a Window. Xp switched to using the dots –  PhillipW Aug 25 '12 at 12:28
    
@PhillipW: I bet there were battery-powered remote controls even before windows 95... and Design Of Everyday Things appeared in 1990. Gnome/Gtk had dotted design at the end of the 90s (before win2000 as I remember). BTW, in OS X Snow leopard it's still 3 diagonal stripes. My point was about resemblance to physical devices. –  Aadaam Aug 25 '12 at 14:55
3  
@Aadaam +1 for bringing in the physical device history - very interesting. Seems like the lines/dots may have been more for grip/traction at first - developing into an affordance over time. –  Luke Charde Aug 25 '12 at 15:43
1  
@LukeCharde grip/traction is an affordance! –  Kit Grose Oct 9 '12 at 9:33
    
@Aadaam do you happen to know the name of the designers who had impact on setting loose the current wide-spread virtual usages? would be a nice touch to honor them. / cheers :) –  naxa May 29 at 11:22

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.