Website Design Analysis: Design Based on users' inherent habits

　　

 

The inherent operation habits come from all aspects, of which the most significant is the cultivation of users from the most common controls. In the design process, it is helpful to consider the usage habits of these general controls. If you think of an example of optimizing the friend selector, you can share it with us:

　ORIGINAL VERSION

　　

 

1. Click "select Friend". A friend list is displayed in the expanded drop-down menu; 2. Select the desired friend in the friend list (if you need to perform a proper reselect operation). 3. In real experience, you will find that you are suddenly overwhelmed by step 3. I do not know how to perform the operation.

If you think about it, you will find that

1. Next Step (gift giving, sharing ......) It has been blocked by the drop-down float layer;

2. You need to collapse the surfaced layer, but how to collapse it;

3. If it is collapsed, will my selection be saved.

After thinking about it, you need to worry about it. The root cause is that two widgets (drop-down menus and dialog boxes) that are used to by users are integrated during the design process, however, the integration is not perfect, so users cannot complete the task with their inherent habits.

　　Problem Analysis

1. First

　　

 

Before the user clicks "select friend" and selects a friend, the design of this place conveys to the user the feeling that the user is operating on a droplist (drop-down menu ). However, the drop-down menu is a single choice, and the menu is automatically collapsed after one item is selected.

2. Then

　　

 

The user starts to focus on selecting friends in the drop-down surfaced layer. Because the check drop-down menu is not collapsed, the user will automatically use the usage habits of the "dialog box" control to apply this surfaced layer. The usage of the "dialog box" must be triggered to close the dialog box after the operation is completed. However, our design does not provide such operations, so users may be confused.

Solution:

1. Try to weaken the droplist type;

2. Add an operation to collapse the floating layer.

　　Final Solution