Interactive design experience Sharing: Web Drag-and-drop interaction design

Article Description: Interactive design experience Sharing: Web Drag-and-drop interaction design.

Zhao Benshan and song Dandan's sketch joke:
How many steps will it take to put an elephant in the fridge?
It takes 3 steps to cram an elephant into the fridge: 1 to open the fridge door, 2 to load the elephant, and 3 to bring the fridge door.
This is a brain-teasers joke, but it refines the 3 steps that we normally take to put an object into another object in our lives.

1. The world of combination of actual and reality
With the advent of the information age, our life is not only limited to the touch of the natural environment, but also expand to the intangible virtual environment. Then, real-life behavior, such as shopping, making friends and entertaining, can also be mapped to virtual environments. In the virtual world, the mouse, keyboard and even part of the body can help us accomplish things in our natural environment. Our life has also been enriched by the "combination of reality".

　

2. The "Put in" Operation course in the virtual world
Just now, the way people behave in nature is mapped to virtual environments. The question is, does the behavior in the virtual environment coincide with the natural environment? If not, should there be a different trait in the virtual environment?
Since the use of the mouse, keyboard operation of the computer, we have been taught the operation of the habit of experiencing such a process: the right mouse click (copy, paste)-keyboard shortcuts (CTRL + C, CTRL + V)-mouse drag and drop. Every innovation has made us understand that computers are becoming smarter and more aware of human language.
The desktop environment as an example, talk about how to achieve the virtual environment, "Put the elephant into the fridge," that is, to put an element into another element.
Factor set: Element A and Factor B.
Goal setting: Put factor A into factor B.
According to the different operating habits, this article lists the following steps:

　　

The action of the diagram above maps out:
The "right mouse button" operation requires the user to spend a lot of time on the right mouse button click selection;
The "Double click and Keyboard" operation is more focused than the right mouse button, and can be done quickly for people who are familiar with the keyboard.
The "mouse double-click + drag-and-drop" operation is straightforward, and the user can witness the whole process of factor a entering factor B.
The evolution of the operation mode from left to right is the progress of the Man-machine interface to more and more natural and simple interactive ways.

3. Drag and Drop Trilogy
"Double click + drag and Drop" must be the most direct, natural and convenient way for people to put an object into another object.
Maybe you can do this:
　　　　

The above three steps are only for the "drag and drop" process, omitting the mouse double-click to open and close. The user simply drags the icon to the specified target's icon and completes the operation of putting an object into another object. Because in the computer's virtual space, as long as the power supply, the computer is an open space, almost no closed area. Users also do not need to have the same action as "open" in real life. Only from the icon of Factor B (folder), it implies that it is not completely closed.
But this is very simple, direct action, the user how to know can drag? What can I do to drag? When to drag, drag to where?
The above seemingly simple three drag-and-drop process, carefully read, in fact, developers to do the article, the following drag and Drop trilogy on the grand debut.

Drag and drop one--invite drag
When the user moves the mouse to the dragged element, the background color and border change of the dragged element is intended to tell you that this can be done.

　　Drag and drop two--drag
When the center point of the dragged element enters the placement area, a message box appears, telling you what you can achieve-the moving element. It should be explained that if the drag operation is done in the same disk, the system defaults to "move", and if it is not on the same disc, the system defaults to "copy".

　　Drag and drop three--place
When the user releases the mouse, the elements go directly to another element, where you can view the thumbnail of factor a directly from the folder. If the moving element occupies a large space, the system pops up a progress bar showing the time it takes to move.

4. Comparison between desktop drag-and-drop interaction and Web drag-and-drop interaction
The application of drag-and-drop has long been extended from desktop applications to Web applications, and drag-and-drop function is not limited to the above examples of the put functions, but also include elements rearrangement, start EXE files. Due to the limited length of this article, there is no detailed description of all the features here. The following are the details of the drag-and-drop interaction based on the desktop application and the representative-igoogle of the Web application.

From the above desktop and Web drag-and-drop interactions, the drag-and-drop interaction of the web does not enrich the drag-and-drop interaction in the desktop environment, which is related to the limitations of the browser environment itself. But in the Web environment, the cursor change has a strong drag hint, which is also to help people achieve the most important start to drag. From the above mouse operation and drag elements of the comparison diagram, designers can also find more drag-and-drop interaction design Reference.

5. Limitations of drag-and-drop
Admittedly, in the virtual world, drag and drop gives us a strong sense of experience, but its own limitations also need to draw the attention of designers.
First, the drag-and-drop action is suitable for the drag target to be visible, if the target is not visible, the user may be mistakenly dragged to another location. Usually, drag-and-drop behavior occurs in a screen.
Second, in the drag-and-drop process, the user needs to always press the mouse, if the starting position and the target location is far away, and the target is very small, the user may not know where to drag. Therefore, the interaction design of drag-and-drop requires reference to Fitzpatrick law.

6. PostScript
Perhaps the user completes the drag-and-drop on 1 seconds, the function is also small to the user will not be aware of the rich changes, even some people think that the author used thousands of words to explain the drag and drop is a fuss. But designers can not see this small function behind the hidden user's long-term use habits and needs. As designers, we may need to think about how to refine the user's needs and usage habits, so as to design a natural and convenient way to interact with the user's daily habits.

Thank you for watching ~