41

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!

Improve this question
3
  • I would avoid option A. Two different icons seems to imply two different possible actions to touch or drag.
    – Heng-Cheong Leong
    Sep 26, 2012 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, 2012 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, 2013 at 19:54

7 Answers 7

Reset to default
8

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

Improve this answer
13

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

Improve this answer
5

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.

Improve this answer
1
  • This assumes that affordance of the drag component has higher priority than the actual text of the list items, which is probably not desirable
    – danwild
    Jul 27, 2020 at 3:26
2

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).

Improve this answer
2

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.

Improve this answer
1

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.

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

I also agree with the "grippy dots" (option D) as they are documented here:

What is the best icon to show that something can be dragged and reordered?

Think that the hamburger could be misinterpreted easily and the other options aren't as clear as they could be.

Improve this answer
1
  • Welcome to UX.SE. In the future it would be best if you would cut and paste the relevant aspects of a link into the post.
    – Mayo
    Apr 21, 2015 at 10:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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