Editor's Guide: For most users, you may not care about drag-and-drop interaction in your daily life, but it is an essential part of the design. The real drag-and-drop experience will give customers a better experience of use. The author of this article compares the drag design of large factories at home and abroad and introduces how to better design drag and drop from seven aspects. Let's take a look!
Recently, I was designing a drag-and-drop interaction, referring to many cases of online products, and found that it was not simple.
In order to make the drag-and-drop experience more realistic, you need to provide a lot of feedback to the user.
Most products only do a part of the feedback effect, which is enough to use, but more feedback can lead to a more "sentient" experience.
For example, the collection table of Tencent documents uses drag-and-drop interaction when adjusting the order of questions:
Source: What is detail control? Take a look at the design of the Google questionnaire
As can be seen in the figure above, this drag-and-drop interaction contains drag metaphors, hover states, drag states and adsorption functions, which is also good compared with many other products in China.
Drag metaphor: 6 dots in the top left corner of the card
Hover status: Card shadow
Drag state: After you start dragging, the card becomes shorter for easy observation and placement
Adsorption function: Automatically parked to a nearby position after being put down
However, if you compare the drag-and-drop interaction of Google Form, you will find that Tencent's collection table still has room for optimization:
Google Form is obviously smoother to drag, this is a little bug in Tencent's collection table, we don't look at the technical level for the time being.
Tencent collects the feedback effect of the form, Google Form is a lot, and it is more in place.
The main difference is in the drag state:
Tencent Collection Table: It's just getting shorter
Google Form: Not only is it shorter, but it also becomes transparent and adds shadows
Shadows are not so important, mainly more than a layer of emphasis.
Google Form' effect of increasing transparency is the focus, because it allows you to see what's underneath as you drag!
After careful study, I found that there are many details that can be found in the drag-and-drop interaction, and Google Form is not necessarily the best.
So I sorted out some drag-and-drop interaction design tips to see how it would work best.
Let's first look at the comparison of two cases:
counterexample
Positive example
The second case feels smoother and more realistic, mainly because the feedback effect is more.
Next, I will expand on the design points of the drag process.
First, drag metaphor
The most important thing about hovering is to let the user feel that it can be dragged through metaphor.
Otherwise, if you just add a hover state to the dragged object as in the following figure, it is almost impossible to see that you can drag.
counterexample
For the sake of visual simplicity, the default state can not show the drag metaphor, but there must be a drag metaphor when hovering.
Dot matrix icons are now the most mainstream way, whether mobile or desktop.
On the desktop side, it is recommended to change the pointer, preferably with the cross arrow in the following figure, which is better understood than the gripper.
Positive example
Through icons and pointers, you can also hint at the direction of dragging, reducing learning costs.
Positive example
Second, the dragging state
In the process of dragging, there are two main problems that need to be solved: the dragging object does not protrude and the dragging object obscures the background, which can be reflected in the following counterexamples.
counterexample
You can highlight or shadow a dragged object, such as the shadow of a small card in the image below.
When the background information is dense, it is recommended to reduce the transparency of the dragged object, so that the line of sight is not completely obscured by the dragged object during the dragging process.
Positive example
Third, the goal is implied
Some drag-and-drop interactions, the goal is not clear, the first use is difficult to understand.
For example, in the image below, you're not sure if you can drag it to a gray background.
counterexample
At this time, it is recommended to highlight the range of the target location after the drag starts, so that there is a lot less trial and error cost.
For example, in the image below, after starting to drag, the fruit and vegetable cards are immediately shaded, suggesting where to drag.
Positive example
Fourth, the location is confirmed
Some drag and drop interactions, drag the object away, the original position disappears, so it is easy to cause insecurity to the user, do not know what will happen if you let go in the blank space.
When approaching a new location, it is not recommended to do so in the following picture, just draw a bar indication, without reserving the new position, which does not look very intuitive.
counterexample
It's a good idea to leave the original position during dragging, and to reserve the placement space when approaching the new location.
Positive example
Fifth, adsorption confirmation
In the counterexample below, the dragged object gets stuck between two target locations, and if you let go at this point, you're not sure where it will snap.
If the target location is very dense, the probability of the user dragging the wrong place is very high, and the operation has to be careful.
counterexample
In the main example, a target position is highlighted, suggesting that if you let go of the mouse at this time, the dragged and dropped object will be sucked into this place.
It is best to have a highlighted target position throughout the dragging process, even if the dragged object is in the blank space, you can also highlight the original position.
This way the user knows at any moment where the dragging object will run if they let go at this time.
Positive example
6. Selected status
I don't know if you have ever had the experience of dragging something to another place, and then you forget what you just dragged.
Especially in this process, the page still jumps a little, and it is completely impossible to find the north.
For example, in the following counterexample, if there is no memory, you simply can't see what has just been dragged.
counterexample
Many mature drag interactions, such as file management for Mac/Win systems, have a selected state in addition to hovering and dragging.
Mac file management
Even if the drag is complete, the pointer does not hover over the dragged object, and the user can still find the object that was just dragged by selecting the state.
If you want to uncheck this check, just click in the blank space.
If the drag operation is more complex and involves many objects, it is recommended to increase this selection state to facilitate the search.
Positive example
The selected state is not suitable for use on mobile terminals, but mobile terminals themselves are not suitable for complex drag-and-drop operations.
If it is a simple drag-and-drop operation, you can also not select the state.
7. Summarize
To design a sensible drag-and-drop interaction, the feedback effects you can consider are:
Drag metaphor, drag state, target cue, position confirmation, snap confirmation, and selected state.
Considering the development cost and the complexity of the actual scene, it is impossible to do all the drag and drop interactions.
But it is best to have a number in mind and choose the feedback effect that is needed according to the situation.
Finally, let's compare the differences:
counterexample
Positive example
#专栏作家 #
This article was originally published by ZoeYZ@ Experience Advanced, and everyone is a product manager, and reproduction without the author's permission is prohibited.
The title image is from Unsplash, based on the CC0 protocol.