What is a good visual cue for drag and drop? (for reordering a list of items)
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:
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!
I would avoid option A. Two different icons seems to imply two different possible actions to touch or drag.
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.