How to visualize the possibility of drag'n'drop?

Question

My web application contains a list of elements, which can be sorted by drag'n'drop. How to visualize this feature to users?

Answer 1

I saw a presentation by Sean Kane from Netflix a few years ago, in which he described how the DVD queue works. You should study it if you can (if you have an account or know someone who does).

A couple of points to note:

• He said the default move cursor didn't test very well, so they switched to a grab cursor, as suggested by GoodEnough.

• The drag-and-drop is a progressive enhancement. You can still sort by filling in text boxes in the list order column. Many users never notice the drag-and-drop feature is available.

• There's no drag handle. You can start the drag with mousedown anywhere in the row (except where another object, such as a link, is in the foreground).

Answer 2

There is a standard icon of three horizontal lines one on top of the other that implies items can be dragged and dropped.

It implies "friction" or "handle" and is a bit similar to the diagonal lines in the bottom right corner of windows or text boxes that allows resizing them.

Answer 3

The move cursor is commonly used with dragable items in web apps.

css:

cursor:move;

Answer 4

I suggest you use the little gripping hand (open when hovering, closed while dragging). Have some sort of gripping icon (a handle) that looks like something that can be grabbed (in Gmail it's a pair of dot columns (4 dots per column).

I would also suggest that you add a little animation showing the behavior to new users (or existing users if it's a new feature), just don't constantly show the animation every time a user is in your app.

Answer 5

I've used a little "grippable" texture on stuff to show that it's draggable. Here's Gmail's texture:

Answer 6

Have a look at http://www.bbc.co.uk/ - they have a nice hover effect over the draggable area, along with the move cursor.

Answer 7

Dragging is a drag. After having recently finished revamping a couple of drag-and-drop UIs, I’ve actually come to the conclusion that next time I’ll change them to a sort of “click and drop”. Have a widget on each item that you click to select it for moving. Then you click where you want it to go. This seems to be going well in testing so far.

Answer 8

When moving the cursor over draggable objects, it should be changed into a open hand. When an object is grabbed, it should be changed into a grabbing hand. While grabbing an object, the allowed drop zones could be emphasized from the other background (i.e. through shading, or coloring).

Answer 9

You may want to have a look at Interesting Moments Designing Web Interfaces Master Class with Bill Scott and Theresa Neil provided by O'Reilly.

Answer 10

I'm coming to this problem myself with a desktop application. The best solution I can come up with at the moment is to have an arrow on hover, which simply points to where the object can be dragged to, with some text saying drag and drop, or similar.

Answer 11

I like what Google are doing when they add new features. When you enter the page you see a popup pointing at the relevant section with a short explanation. You can either "Read More", "Remind Me Later" or "OK".

I also agree with others that the "handle" image is widely used for drag-able items.