Tell me more ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.
up vote 9 down vote favorite
2

I'm only concerned here with the other half of a D%D operation, the drop. What are the common idioms to communicate to a user they can drop? And which are the "best" and in what situations?

In particular I would like to know ones that communicate something to the user both before the drag occurs and after the drag occurs. These can be visual or 'tactile' (mouse cursor changes).

share|improve this question

5 Answers

up vote 4 down vote accepted
  • Indicate possible drop targets
  • Show a live preview of the results
  • Show what's being dragged in real-time

alt text

  • If you can't drop something somewhere, explain why to the users in a popup near the cursor:

alt text

  • Keep your drop targets big! Drag and drop is already an egregious violation of Fritz's law; no need to make it worse.
share|improve this answer
1  
ooohhhh.... pictures! – shemnon Aug 16 '10 at 20:42
o-oh... broken picture :( – awe Oct 6 '11 at 7:57
You mean Fitts' Law? – Muers Jan 7 at 18:55
up vote 8 down vote

I have seen apps that show an outline where you can drop.

This is from the wordpress widget page

Wordpress widget page

share|improve this answer
up vote 7 down vote

A common approach is to turn the cursor into a "can't drop" cursor when you're over everything else.

The logic would be:

  1. Start Drag.
  2. Turn cursor into "can't drop".
  3. While dragging check if over something that can accept the drop then turn cursor into "can drop".
  4. Drop & reset cursor.

NOTE: I'm not necessarily advocating this, but it does show the user that they are in the middle of a drag/drop operation as well as indicating where the drop is valid.

share|improve this answer
3  
Normally there's a default cursor and either a "can drop" or "can't drop" cursor. I think the "can drop" cursor is better. Positive reinforcement. :-) – Patrick McElhaney Aug 13 '10 at 2:46
Yup, this is standard, but that cursor is really offensive to me. Showing it right away might be even worse, since it tells the user they've done something wrong as soon as they click. – Fraser Aug 14 '10 at 1:18
@Robert - I was just pointing out a common idiom ;) – ChrisF Aug 14 '10 at 15:35
up vote 5 down vote

You can slightly highlight the drop-locations as soon as the user is dragging an item. This way you can draw the attention to the drop-locations.

The prerequisite for this is of course that you show what's draggable in the first place. There this questions with answer for that.

share|improve this answer
I generally do the same but use a dashed line around the place holder location. I highlight whichever drop zone is closest to the element being dragged. As you move the element around, you highlight which ever drop zone is closest. – LoganGoesPlaces Aug 12 '10 at 19:19
And that comment is what happens when you are typing while having a conversation. Anyway, I meant exactly what Sruly has a image of. I like to make the placeholder (which has the border) the same size as the element being dragged. This way the user can see how the page will be laid out before they drop. – LoganGoesPlaces Aug 13 '10 at 2:37
up vote 3 down vote

Sometimes the drop target is within a set of linearly arranged objects. After the item is dropped, objects following the drop target will move to make space for the new object. In that case, the insertion point is typically indicated by a thin line between the two objects that will separate to make space.

For example, in almost any GUI that uses a mouse, text can be selected and dragged from one part of a document to another. The insertion point is indicated by a thin line between two characters.

That's also the case with the Netflix queue discussed earlier. In addition to a thin line, Netflix uses a black arrow to indicate where the movie will go.

 Thundercats: Season 1: Vol. 1: Disc 3     
 .....................................     
 Thundercats: Season 1: Vol. 1: Disc 4
>------------------------------------- 
 Thundercats: Season 1: Vol. 1: Disc 5
 .....................................
 Thundercats: Season 1: Vol. 1: Disc 6

(I can't figure out how to grab a screenshot while dragging.)

share|improve this answer
1  
If you're using a Mac, I recommend Captur -- you can have it take a screenshot after a timed delay. No affiliation, just thought it'd be helpful :) – Muers Jan 7 at 18:58

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.