Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I'm working on sortable tree component. Sorting and moving of leaves and branches is done using drag-n-drop. One of my users has pointed out that once you've started dragging an item you have to drop it somewhere in the tree even if you change you mind and don't actually want to change item's position. The only way to leave things intact is to drop the item exactly on it's former place.

Will it be enough to just "cancel the drop" when the item is dropped outside the tree? Is there any guidelines or examples for such functionality?

To get the idea of how it looks now, you can see this demo: http://dbushell.github.io/Nestable/. My tree works the same way.

share|improve this question
add comment

2 Answers 2

up vote 12 down vote accepted

There are a number of options that can ease this, as the onus should not be on the user to feel they have to go and drop it in its original position - assuming they can even remember where that might have been.

Undo/Redo

One is to provide an undo redo capability. This puts users much more at ease in that they know even if they do drop something somewhere where they don't want then they can just undo it right away.

It doesn't have to be a long and complicated undo history - even a simple 'Undo last action' would put users at ease.

Change cursor outside drop area

Another option is to change the cursor when the user moves the mouse somewhere that they can't normally drop.

Typically this is a 'forbidden' style of cursor, but that kind of puts people off dropping outside at all, so you could experiment with different cursors that indicate better that you can let go of the mouse and nothing will happen Something that indicates 'cancel drag'.

Escape

In many mainstream applications, users will be used to being able to press escape to cancel the drag operation.

You should provide that as a way out for users familiar with that. I notice your linked example does not allow escaping of the drop.

Drop safe zone

For users less familiar with drag and drop or who may not discover the undo mechanism, then when the drag operation starts you can show an area at one edge of the region which you can label 'Drop here to cancel the drag'.

This is a great 'just in time' mechanism as it's only displayed when the user has actually started a drag.

It makes it clear to the user without then even having to explore what happens when they go outside the droppable area, although in essence that is exactly what they are doing when they drop in your 'safe-zone'.

Use the original item space as the drop safe zone

An alternative to showing a special drop safe zone in a common location is to leave the space where the original item was dragged from rather than dynamically removing it and shuffling the tree. Typically a dotted line around the source position is enough and you could still label it 'Drop back here to cancel the drag'.

This does have the down side that the tree may have scrolled the original item out of view during the drag.

share|improve this answer
    
Thanks, Roger. I've also came across this answer suggesting to "show an animation of the drag image snapping back to its point of origin to make it clear the drag was canceled" which is nicely connects with your point to use original item space as a drop safe zone. –  Troggy Feb 5 at 20:34
1  
I was just about to suggest allowing the users to Escape out of a drag/drop process. It makes perfect sense and there is nothing to be confused about. I mean, what happens when you're in a situation and you're in danger? You feel the need to escape! AHHHH!! ESCAPE!!!!!!!!!! –  delete this account Feb 5 at 20:35
    
+1 Though I would say: copy exactly how the platform's main file browser does it. Ie Windows Explorer on Windows. If there are inconsistencies between platform's: pick the platform that most of your users are on. –  Marjan Venema Feb 6 at 15:29
    
@Marjan I agree with the sentiment... a bit :) But imagine if we always copied exactly what explorer does - instead of perhaps innovating and improving on it. It has to be said, with explorer, that sometimes I do worry mid-drag about how to prevent my file going somewhere I don't want. Escape is my exit route there, so yes copy that...but also we shouldn't necessarily stop there, but should think about other improvements over that. –  Roger Attrill Feb 6 at 15:43
1  
Well yes of course :) improve away, but what you should not do is go against the platform... (as in not offering the platform's way of doing it) Sort of a Liskov Substitution Principle for UI/UX. –  Marjan Venema Feb 6 at 15:52
show 1 more comment

My opinion:

Drag and drop can be very useful, but it can also be troublesome for the very reason your user mentions. I'd do two things.

  1. confine the draggable region to only the list itself. That say, if a user drags outside of it and drops...
  2. it can be treated as a 'revert' action and dropping it outside of the hot area simply puts it back to where it was prior to the drag.
share|improve this answer
    
Yes, that exactly what I thought about. I was wondering if there is some established approach as I can't remember any working example of such drop cancel. –  Troggy Feb 5 at 20:40
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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