My web application contains a list of elements, which can be sorted by drag'n'drop. How should this feature be visually represented to users?
-
1You may want to have a look at Interesting Moments Designing Web Interfaces Master Class with Bill Scott and Theresa Neil provided by O'Reilly.– andy iosifescuJul 22, 2011 at 19:24
-
1Similar: ux.stackexchange.com/q/34158/17023– unorFeb 7, 2013 at 1:17
-
Which one's the best answer?– Danger14Sep 29, 2014 at 22:38
-
@andyiosifescu Bill Scott and Theresa Neil wrote a great book called Designing Web Interfaces, and they dedicated a whole chapter to the drag & drop interesting moments (there are 16, although you won't use them all). I recommend this book just for the Drag & Drop chapter!– SteveDMar 21, 2017 at 9:20
Add a comment
|
10 Answers
I've used a little "grippable" texture on stuff to show that it's draggable. Here's Gmail's texture:
answered Jul 22, 2011 at 21:15
-
A couple things to note: (1) Changing the cursor isn't enough. Users need to see that a thing is grabbable before they'll reach for it. The grippy textures show that. (2) In the case of Gmail, the texture is way over on the left end of the messages, but you can grab a message anywhere, not just on the texture. Mar 20, 2015 at 13:46
-
In the image, I find that the checkbox confuses me. Perhaps because it's so close to the grippable texture, isn't clear to me that the grippable texture is its own icon. It also looks like a small target area for your mouse to "hit". Mar 21, 2017 at 6:31
-
@AdamZerner, I don't remember if, at the time, the grippy bit was the only grabbable target, or if it indicated that the entire row could be grabbed. Today, the texture is invisible until rollover. Looks like Gmail agreed with your comment. Mar 21, 2017 at 12:50
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).
answered Aug 11, 2010 at 15:03
-
-
It was a presentation I saw in person. I think it was at an Adobe conference. Aug 21, 2014 at 20:12
-
-
Interesting point about it being a progressive enhancement. I wonder if the availability of the text boxes would make people think there aren't any other options. Mar 21, 2017 at 6:33
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.
-
3Gmail uses the same paradigm (sort of), they have grippies on the message items that indicate they can be dragged. You may want to also have a non-draggable way of doing the same action for accessibility. Aug 11, 2010 at 12:22
-
I don't think I'm familiar with this icon, is there a picture of it anywhere (or better yet, a downloadable version)? Jan 21, 2011 at 17:52
-
I found this image that shows the gmail drag handles: askdavetaylor.com/5-blog-pics/google-gmail-priority-inbox-7.png Aug 1, 2011 at 11:02
The move cursor is commonly used with dragable items in web apps.
css:
cursor:move;
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.
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.
-
That sounds like an interesting idea. In testing is it doing ok? Do people understand it without instructions or do you need to give hints to people on how to use it? Aug 12, 2010 at 8:51
-
As always, be very careful about making the UI behave in an unexpected way. My advice would be to allow dragging, but also implement the click-and-drop too. Aug 14, 2010 at 22:50
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).
answered Aug 13, 2010 at 0:22
This library of icons was designed to indicate draggable surfaces. (Requires ReactJS)
https://github.com/trickl/react-drag-handle
Disclaimer: I am the original author.
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.
Universal Whirlpool Symbol may be?.
The desktop application I work with allows files outside applications can be dragged into. Certain applications which allow drag-n-drop usually have a drop area or content pane; like a playlist in a music player. Drag-n-drop usability is a progressive disclosure but some users will never get to it intuitively. In such cases, The best I could think of advertising the drop-area is by having a whirlpool symbol background.
