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 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

6 Answers 6

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 '13 at 18:55

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

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. –  OverMachoGrande Aug 14 '10 at 1:18
    
@Robert - I was just pointing out a common idiom ;) –  ChrisF Aug 14 '10 at 15:35

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

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 '13 at 18:58

Typical workflow for dropping is:

repeat while mouse is down

    dragEnter -> mouse pointer has moved into some new area.
                 Highlight the area if the dragged data is valid for dropping into it,
                 adjust cursor (forbidden, copy, symlink, or move)
                 adjust the drag image (e.g. when dragging from icon view in file picker
                 to list view in another file picker, now's the time to animate the
                 drag image to look like the list view items would when dropped.

    dragLeave -> Undo any previous highlight.

end repeat

if we were over a valid drop location
    drop
else
    show an animation of the drag image snapping back to its
         point of origin to make it clear the drag was canceled.
end if

Undo any previous highlight.

Typical types of drop highlight are:

  • Outline around a container (e.g. scroll view) to indicate something is a valid drop target
  • Insertion marks to indicate which list items or text characters the item will be dropped in between, or after
  • Selected variant of an icon (or "folded open" variant of e.g. a folder icon) to indicate a drop will end up inside an item, not before or after it.

Note that insertion marks are not just useful for lists where you can freely re-arrange item order, but also for sorted lists, where e.g. a drop between or on two files in a sorted list is perfectly valid, but you want to indicate that, after sorting, the file will show further down.

Just for completeness' sake, the typical workflow for dragging is:

detect whether a click-and-hold or click-and-move is really intended to be a drag:
 - Is it obvious? (e.g. dragging a file by its icon -- there is nothing else you can do
 - Or: Wait for a while, has the mouse moved by at least 4 pixels in some direction
       and has the mouse still not been released? (Accounts for most peoples' less-than-pefect motor skills
 - Or: Is the drag in a certain direction that doesn't make sense for anything else?
       (E.g. dragging sideways over text may be an attempt at a new selection,
       OTOH a vertical drag > 4px on a selection is pretty guaranteed to be a drag attempt.

Set up a drag image that is attached to the mouse. This image usually looks exactly
    like a 70% opaque version of the selection (giving the illusion you're moving
    the selection) and if you haven't moved the mouse yet, should invisibly overlay
    the actual selection. (I.e. move it relative to the mouse, don't center it
    under the mouse)

Start the drag! (following this we do the workflow for dropping)

(At least this is how drag'n drop usually happens in modern Mac OS X apps, though updating the drag image during a drop is a fairly new thing)

share|improve this answer

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.