3

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?

| improve this question | |
  • Just try to be more consistent (use same visual object) and don't use fire, smoke and magic in transition effect. – Alexey Kolchenko Aug 21 '13 at 11:51
  • Do you mean something like this or like a video editing UI? With the difference being the map holds the objects rather than a list or table. – user1757436 Aug 21 '13 at 14:27
  • @user1757436 (catchy username!) Yes, the 'Plunket Plus' concept demo exactly addresses the problem and its solution. Thanks! – Phil Parry Aug 27 '13 at 8:57
2

I would:

As the item is dragged set transparency to X%:

Windows 7 Dragging transparency

Windows 7 Dragging transparency

Highlight the 'droppable' area until the mouse enters

GMail Drag Drop Target 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

| improve this 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.

| improve this answer | |
  • This seems like a good approach. Visually help the user understand that the Event is being wrapped in a "Conversion" without losing its identity. You could do it gradually (fade in a rectangle around it), or by location (the rectangle is clipped by the destination region.) – Alex Feinman Aug 22 '13 at 16:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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