The interactive thinking about simple drag operation

A very simple topic: design an interactive way to move an icon from a to B.

Usually the most direct way is to hold the icon with the left mouse button in a, then move to B to loosen. Well, that's a simple interactive operation.

In fact, there are a lot of problems need to be considered, in order to allow a simple drag to feel calm and smooth, so that users without obstacles to complete his goal, just a simple drag operation.

Simply enumerate the problems users may encounter:

The user may not know that this icon can be dragged

The user dragged the icon don't know B can drop the icon will stay in B

When the user is dragging, he will worry whether the icon will fall off halfway.

The user's mouse is not very easy to use AB two locations and to drag the icon is not very big time is very easy to point to the wrong position

In this process there will be other problems affecting the user to do such a simple operation is not listed after all this is to explore how to design the post is not to ask the question haha

How do you solve these problems?

I personally like to restore this design to life, first find the model of life. Designing an interaction based on the model of your life makes the user very familiar with the goal of accomplishing his goals without even feeling the best of your design.

Experience a scene like this:

There will be plenty of cups and plates on the table when eating out. When the waiter comes to serve, I need to move the glass before me.

I will naturally pick up the wine with my hands and put it in another part of the table.

This is one of the models that drag an icon to move from A to B in life

Before I took the cup, I was pretty sure that the cup was easy to take with a hand.

I can also fit the cup to another place on the table that doesn't interfere with serving the food.

This cup has a lot of states in this moment.

The state of being parked on the desktop A; My hand touched the moment of the cup, at which point my hand would have a feeling that the cup was really there; The cup is in a state that I am about to leave the table desktop, at this time my hand will have another feeling this cup is very light, can easily pick it up; There is a state in the process of moving the cup away from the table to B, and the wine in the hand of the cup may be slightly shaken; the cup touches the table B of a moment of a state, my hands know OH cup touched the table, can be ready to let go; The cup is stationary at B and it is a state, at this time my hand has left the cup and I am quite sure that this cup can be put here is safe here.

Design the entire drag-and-drop process to simulate the process of moving a glass by hand

1. Before moving the mouse to the icon, let the user be sure that the thing can be dragged without hesitation.

To solve this problem, you need to give the user a strong heart hint before the user makes the drag operation, this thing can be dragged

As shown in the figure

When a 2d icon is placed on a plane, it is difficult for the user to feel that the object can be dragged with the mouse.

If it is designed to be 1, it is easy for the user to feel that the icon can move (or restore to a time when there is usually a small hole in the plane that is not deep) if there is a small thing in this hole, a lot of people will not naturally stretch their fingers to buckle something inside.

2. When the mouse moves to the icon on the icon to have a response, similar to when the hand touches the cup when it feels that this thing is very light can be easily moved.

This design is not necessarily the best design, but at least this process allows the user to know before dragging that this thing is alive and can move.

3. Hold and drag the icon to be very good with this mouse movement, if in this process can have a size or shadow change is the most reliable, but many times in the technical conditions of the web game difficult to achieve.

4. Position b The simplest solution is to make a consistent feeling with a, so that users can not have the brains to know. B can place this icon, the same icon in the whereabouts of the process can have a certain change is the most reliable.

5. If this icon is relatively small, then the user mouse response security location to do a little larger, the whole area of the mouse to move up the response is good, this area can not be too large, if a region outside the user will feel this is not and common sense, the problem.

Said so much. In fact, in order to achieve a very basic drag operation, like this simple basic interactive operation there are many. Every one has a lot of truth in the inside, the deeper the understanding of these reasons for the more detailed life observation, the design of the things will be more easily accepted by users.

Don ' t make them

There may be many better ways to achieve this move. However, try not to play tricks on such things as the user's goal at this point is to move the icon, that's all. Don't try to show off technology or creativity on this, don't interfere with users, let them finish their goals calmly.

Two digression.

Now the phone screen is very large, but still because there are too many icons, a screen does not open, so there are a variety of sliding screen operation.

But as long as you feel it carefully you will find that, whether it's sliding around or sliding up and down, the best sliding experience is the pre and iphone, the entire andriod system and the BlackBerry system's mobile phone. Can not do so calmly smooth feeling, WP7 mobile phone I did not use, hope to do better.

It's just a seemingly incredibly simple sliding operation. In fact, there are many can be dug and in-depth design. As long as the heart to observe, design carefully.