2

I searched a lot but I did not get any solution.

Brief Description

I have a website which has some elements which are clickable and rest works on drag and drop funcionality.

Everything works good .

Problem

Now Question is How will I make my client realise that so and so element are clickable and so and so has to be dragged and dropped to specific area.

Possible average Solution

One solution is I can give a tour using popups (the way gmail does). But even this does not make my website very user friendly.

I just went through stackoverflow tour .. those animations are also very impressive . Can it done in my case. The moment user scrolls down ,. a basic drag and drop step is shown and restore back the step.

Any suggestions from you smart guys.?

Improve this question
3
  • Why have a drag-drop at first place? It is almost never comfortable to use them, especially on touch devices.
    – gurvinder372
    Commented Feb 15, 2016 at 13:52
  • @gurvinder372 : drag drop is the requirement of the project... the location where elements are dropped are very crutial so can't achieve that using clicks.
    – Amar Singh
    Commented Feb 15, 2016 at 17:46
  • Please share what the user is suppose to achieve with drag and drop.
    – gurvinder372
    Commented Feb 15, 2016 at 17:57

2 Answers 2

Reset to default
3

For a desktop application, I would change the mouse pointer to the move icon (CSS is cursor: move), and when the item has been grabbed for dragging, change its background-color to indicate that it has been selected and is draggable. Also give it a shadow so it looks like a separate layer.

And add animation to make it more obvious that it is draggable - perhaps a slight bounce when the page loads, or a slight movement in the direction that people are most likely to drag it.

Improve this answer
1

To add to Yvonne's solution:

  • Highlight the draggable object onMouseOver so as to indicate that it is actionable
  • Popup a ToolTip comment like "You can drag & drop this"
  • You might also (more complex programming challenge): Highlight the target area. This is most effective if there is only one target.

and Mirror the info:

  • Highlight the target area onMouseOver so as to indicate that it is actionable
  • Popup a ToolTip comment like "You can drag & drop into this"
  • You might also (more complex programming challenge): Highlight the draggable object. This is most effective if there are not a whole lot of draggable objects.

This robust UI shows you the Realm of Drag&Drop at a glance - instantly, no matter where you start.

Value-added: If you have an on-screen message like "Drag & Drop", this could be enabled so that onMouseOver it hilites both draggable objects and target.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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