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.

I'm wondering if anyone has any opinions on what is the best visual cue to indicate to the user that list items can be reordered via drag and drop?

Here are a few options I've been playing around with: drag-and-drop visual cues, some options

I know a lot of iOS mobile users would have been exposed to option B, and taking into account the rapidly expanding user base of iPhones and iPads, I'm tempted to use this option. However I think options A and F are a bit more explicit. Option E is interesting because it removes the 'grab' visual cue but puts emphasis on the move up/down movement. Obviously any of these options can go either on the left or right of the items and the icons would have a tooltip saying something like 'drag to reorder'

What do you guys think? I would be very curious to see if anyone has any real usability testing data on drag-and-drop cues!

share|improve this question
    
I would avoid option A. Two different icons seems to imply two different possible actions to touch or drag. –  Heng-Cheong Leong Sep 26 '12 at 1:04
1  
Of the suggested options, option F looks best to me. Perhaps you could also make sure that if you hover above the "grab" image, the cursor shows the grabbing hand. Cfr: gmail. –  Bart Gijssens Sep 26 '12 at 6:30
    
I would avoid option D. It looks too much like a context menu, especially with the line separating it out from the content. –  Brian Jul 15 '13 at 19:54

6 Answers 6

up vote 4 down vote accepted

Personally I'd go with option B on iOS, and would look what do Androids show.

On desktop, I'd use some kind of "bumping", it's important, you can see why here in this answer: http://ux.stackexchange.com/a/25032/16685

share|improve this answer

I would say that the most important criteria is affordance: which one will your user recognize right away? With that in mind, I would go with Option B.

I find Option E to offer the least affordance, whereas options A and C add clutter via the use of arrows that are likely unnecessary for the first time user, and definitely unnecessary once the user has figured out the visual clue that Option B offers.

I don't see the point behind Option D: do the dots (vs. lines) mean that you can rearrange horizontally as well as vertically? or is it just a style? I would avoid D.

share|improve this answer
    
Regarding option D, it is simply a grab cue (surface texture), it doesn't imply any matrix layout. –  M.A.X Sep 27 '12 at 22:02

I would go with option E - most people read from left to right. They examine things from the left and then slowly move to the right, if you have played games in the heydays of 8-bit you would see that most games have you start on the left and moving towards the right.

So it is easier to notice you could drag the items if the icon is on the left. However, I would make the icon more emphasized, I'd recommend a darker shade of gray. It is hard to see even for me on a widescreen that it is an arrow pointing up and down, it could look like a 1 or an I to someone using a smartphone with a (smudgy) touchscreen.

I suggest looking at this: http://jqueryui.com/demos/sortable/

This example is really clear and intuitive.

share|improve this answer

Option "D" unlike all the other options, provides meaning without necessarily forcing direction.

For example, many mobile UIs allow the user to turn the device. So there are two orientations, landscape and portrait. If an item were draggable in portrait, it would be up and down. In landscape, it might be left and right (I've actually had to deal with this). I've seen some examples where the designer uses the 4 arrows in all directions, but that doesn't really work because its only two directions at a time.

A symbol that can mean "grip-able" and can convey any direction seems like it would be the most versatile option. Options "B" and "D" are the only two that do this. Option "B" though is being ram-rodded on the world by Google to mean "Settings". So like it or not, I think that one is headed for retirement (for moveable item).

share|improve this answer

Maybe you don't need an icon to indicate the affordance. Try to change the shape, color, etc. of the lists. Let them have some visual reaction when finger touches them. See app example with Trello.

share|improve this answer

Came across this post today and wanted to provide a response based on some developments in the past couple of years (since 2012).

Google offers a good solution signaling its Gmail users of sortable elements by using two rows of stacked dots on hover (desktop)

Gmail's sort iconic cue

share|improve this answer

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.