2

I'm working on a web project where a user will be able to edit the ordering of a list. I'd like to update the visuals for the items that are draggable so that there is a a clear indication of each of the elements that are in fact draggable. I'm having trouble trying to nail down any standards that may exist for this sort of thing. I've seen a state change to the cursor but I think this would be too subtle for this particular project.

Does anyone have any resources or ideas about how to clearly communicate to a user that a specific page object is draggable?

Improve this question

4 Answers 4

Reset to default
5

enter image description here for vertical dragging. Standard on mobiles so it should communicate well.

Or enter image description here for completely draggable.

Improve this answer
3

I would highly recommend using the open/closed hand cursor when manipulating on-screen objects. The open hand on hover, and the closed hand on mouse down and when dragging.

enter image description here

This standard is used in many popular applications, not the least of which is every Google app where dragging one or more objects is required (e.g., G-mail message list, a Google Map).

It is also the most forward-thinking standard. As touch-based interfaces become more prevalent, using hands instead of other types of controls (which are becoming archaic) is going to become more intuitive for people.

On a side note, I would also consider making sure that the dragable objects stand out as objects. In other words, they should have some volume and not just look like text on a wall, which in real life cannot be moved. The non-draggable object on the other hand, well they should appear like text on a wall, or like something else that cannot be moved.

I am also assuming that this application will be used by people continuously, not in a walk-up-and-use situation. Otherwise it's best to isolate the dragging step and give a little instruction like "Drag items to sort them".

Improve this answer
1
  • I like the idea of a cursor indicator, but was looking more for some kind of indicator before the user hovers over the draggable object. Textual instruction may be the best approach as there doesn't seem to be any reliably communicative standard design treatment or icon that I've found yet.
    – Brian Flanagan
    Commented Jan 9, 2012 at 14:24
2

If you can only drag them up or down, what I'd suggest is, on hover, to show an icon next to it along the lines of two arrows. Bad ASCII version:

/\

\/

Alternatively, a common cue is the 'grippers' you see to resize things like in the bottom corner of your web browser. Bad ASCII version:

///
Improve this answer
1
  • I like these ideas. They'd even work without needing to wait for a hover event (which makes them usable for touch interfaces like iOS and Android).
    – Brian Flanagan
    Commented Jan 9, 2012 at 14:25
1

How about a dotted-line box around the item? You can always add a key at the top of the page.

Improve this answer

Your Answer

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

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