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

    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.

    I would avoid option D. It looks too much like a context menu, especially with the line separating it out from the content.

  • Aadaam

    Aadaam Correct answer

    9 years ago

    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: https://ux.stackexchange.com/a/25032/16685

License under CC-BY-SA with attribution

Content dated before 7/24/2021 11:53 AM