{"id":1176,"date":"2015-10-12T08:00:07","date_gmt":"2015-10-12T07:00:07","guid":{"rendered":"https:\/\/uxstudioteam.com\/website\/?p=1176"},"modified":"2022-05-19T14:34:59","modified_gmt":"2022-05-19T13:34:59","slug":"drag-and-drop-interface","status":"publish","type":"post","link":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/drag-and-drop-interface\/","title":{"rendered":"The 7 Commandments Of Designing Drag And Drop Interfaces"},"content":{"rendered":"

 <\/p>\n

\"\"You\u00a0would expect that in the era of JQuery, the construction of a drag and drop interface is a piece of cake. A little while back, we have been testing the drag and drop interface of a number of applications; namely, the interfaces of\u00a0MiniCRM,\u00a0Brickflow and\u00a0Protopmail. We\u00a0had some surprising results.<\/strong><\/p>\n

<\/p>\n

The more detailed the interactions are the more we have to work with it; still, it is easier for the users to handle the application and that being so they will return to use it.<\/p>\n

Based on our experience back when we started out, most of our Hungarian test users of the above apps have never met with the drag and drop solution on the web, hence they find it hard to efficiently handle it. The situation is better in the West, yet even in the American market the following seven conditions need to be taken into account in the planning phase.<\/p>\n

What is a drag and drop interface?<\/h2>\n

By the official definition, “on graphical user interfaces, drag and drop is a pointing device gesture in which the user selects a virtual object by “grabbing” it and dragging it to a different location or onto another virtual object.”<\/p>\n

It’s an interaction that is intended to be simple for users as it imitates physical movement. We UX Designers like playing with the concept but there are certain bottlenecks that might occur, and you really need to think through user flows and options.<\/p>\n

In this article, I decided to gather the 7 key points when it comes to designing drag and drop interfaces. These are as follows:<\/p>\n

    \n
  1. Drag and drop tangibility should be immediately visible<\/li>\n
  2. Decide: hover or hand cursor?<\/li>\n
  3. Define short and long clicks<\/li>\n
  4. Illustrating movement: drag and move<\/li>\n
  5. Landing area: where can I place my object?<\/li>\n
  6. The moment of dropping the item<\/li>\n
  7. Have a clearly visible palette<\/li>\n<\/ol>\n<\/blockquote>\n

    1. Drag and drop tangibility should be immediately visible<\/strong><\/h2>\n

    The moveable objects have to indicate their tangibility, even when there is no actual interaction.<\/p>\n

    The classic method to indicate this has long has been in use as the knurled surface.<\/p>\n

    Two examples of indicating the drag and drop interface:<\/p>\n

    \"drag-and-drop-1-1\"<\/a><\/p>\n

    \"drag-and-drop-1-3\"<\/a><\/p>\n

    2. Decide: h<\/strong>over or hand cursor?<\/strong><\/h2>\n

    When I\u00a0 as a user bring the cursor above the tangible object, I should get a repeated confirmation of that I can uplift it.<\/p>\n

    Partly, it is practical to use some kind of hover effect (e.g. a more vivid color), but the appearance of a distinctive cursor plainly connected to the drag and drop interface is important as well.<\/p>\n

    \"drag<\/a><\/p>\n

    The hand cursor has the advantage over the hover cursor, because there is a difference between hover and drag mode, so the user gets a feedback when dragging the given object. No wonder we suggest using the hand cursor.<\/p>\n

    3. Define short and long clicks<\/strong><\/h2>\n

    Regardless of how well the drag and drop interface is designed \u2013 with visible tangibility, hover effect and cursor \u2013 most of the users become uncertain when first running across the drag and drop interface.<\/p>\n

    Most commonly, the users\u2019 first move is a tentative attempt to see what happens if trying a click.<\/p>\n

    With continuous testing, we\u2019ve pinpointed two types of users: one who does one quick click (short click), and one who holds the mouse button for long (long click). Most of the users do either of the above before actually starting to move the objects.<\/p>\n

    The problem is that the greater bulk of latest JavaScripts don\u2019t deal with the above cases: nothing happens when doing a short click, and long click is only effective when actually moving the mouse, which most of the users are not likely to do at first.<\/p>\n

    So, our great task is to deal with these two cases:<\/p>\n