Changing a visual object as it is dragged

Question

Imagine that you have an interface with two principal panes: a map and a timeline. We want to enable our user to be able to select a job displayed on the map (for instance, "repair washing machine at a location") and drag it to the timeline thereby turning it into an event ("do repair at a given time") whose duration might be represented by a rectangle.

Because the drag operation in effect "converts" one visual object into another as it happens, I think that the user might be confused by the transition.

Of course I plan to run some user tests, but I just wanted to ask whether others consider this to be a legitimate concern and, if so, whether anyone can point me to good solutions to this problem?

Answer 1

I would:

As the item is dragged set transparency to X%:

Windows 7 Dragging transparency

Highlight the 'droppable' area until the mouse enters

GMail Drag Drop Target

Once the mouse enters convert the dragged object to the final appearance (eg rectangle) and maintain transparency Also as the mouse enters the droppable area remove the highlighting and display the final position/details of the object that is created if the mouse is released

Answer 2

The transition from one shape to another can be done in steps to mitigate the confusion. You have 2 shapes, an initial shape and a destination shape. When the drag begins, step 1, the shape is the initial shape. At some point (when the drag enters a significant region) the shape becomes an overlay combination of the initial shape and the destination shape (step 2). Upon drop the initial shape fades away leaving just the destination shape (step 3).

Hopefully this 3 stage transition will indicate to the user the conceptual transformation that's occuring.