Understand at a glance, help you fully understand the drop -down menu

Editor: The mode of drop -down menu is the most common in design. Do you have any dependence on the drop -down menu? The author of this article has comprehensively sorted out and analyzed from four angles to help you learn more about the design of the drop -down menu in detail. If you are interested in the design, come to see it.

The drop -down menu is a commonly used component in the interface design. The following ways are displayed at the same time and helps users reduce the selection range to quickly meet the needs of users. Especially for some navigation, the designer will depend on the use of the drop -down menu. Essence

In the UI design, although the drop -down menu is often used, many designers do not know it well. If they are overly used or abused, they will also have a negative impact on the user experience. It is important that designers need to have a more comprehensive understanding of it.

So, how do you distinguish the design of the drop -down menu reasonable? What are the advantages and disadvantages? In any scene, you need to use the drop -down menu. The author will start with the drop -down menu and summarize the composition, type, use scenario and precautions of the drop -down menu. I hope this article will help everyone.

1. Basic introduction and structure combing

1. What is a drop -down menu?

The drop -down menu is a way of presentation of the option. When the user clicks a trigger icon/arrow, a list of projects will pop up. The user needs to select one or more to meet his choice needs.

一看就懂,助你全面了解下拉菜单

The drop -down menu is often used in the interface module such as form options, screening conditions, navigation conditions, and navigation. The content pop -up after being triggered includes, not only is it limited to the single selection list, multiple choice lists, sub -options, search, etc. The situation depends on the actual quantity of the option.

一看就懂,助你全面了解下拉菜单

2. The composition of the drop -down menu

一看就懂,助你全面了解下拉菜单

The drop -down menu seems to be almost consistent with the option box in the form, but in the real form page, the drop -down menu may be the drop -down menu, or it may be a pop -up or page jump. In the same way, the drop -down menu is often used in other interface modules except the form. On the surface, it is the same as the form, while the actual elements and interaction effects are very different, but this article is mainly for the drop -down drop -down in the form. The menu (non -navigation) is introduced, and the following ten parts are composed:

Tag: to inform users what the content of the drop -down menu item needs to be selected;

Container: Used to carry the information prompts (place occupied) before selection and content after selection;

Pulling arrow: Remind the user to have a click -through extension item, click the drop -down box after clicking, turn the arrow vertically, and click the arrow or select the content again. In addition, some products use the inverted triangle instead of the drop -off arrow, which has the same role;

一看就懂,助你全面了解下拉菜单

Location symbol: describe or supplement the label to reduce the possibility of user errors. After selecting the content, you will directly replace the placement symbol;

Drop box (container): containers used to carry the drop -down options. After clicking the drop -down arrow, the drop -down box will pop up;

Options list: content for users to choose;

Differential lines: When there are many options in the list, adding septum can better distinguish each separate option (depending on the situation);

Selected: After the drop -down menu pops up, it usually uses a single -selection/check box, subject color, bold and other styles to prompt the user’s default option or the selected content;

一看就懂,助你全面了解下拉菜单

Rolling bar: The height of the drop -down box will have a maximum value. When the height of the selection list exceeds the height of the drop -down box, the scroll bar will appear;

System feedback: When the user submits the task if the user must be submitted without operating, the system will give a prompt.

3. Several states of drop -down menu

一看就懂,助你全面了解下拉菜单

Regardless of whether it is systematic or user reasons, whether the drop -down menu can operate or have any restrictions, users should give users timely feedback. Although there are various interaction status and are visually similar, they need to be distinguished obviously when designing. The common state is default, suspension, focusing, completion, disability, and error prompts. Let’s take a look at the designer together. How to feedback to users through different visual styles.

一看就懂,助你全面了解下拉菜单

1) Default status

That is, the initialization status, before the operation, the user can obtain the theme content of the drop -down menu from the tag content, and foreshadows the operability of the content by the drop -down arrow. For some options less drop -down items, the system will select one of the most matched with the user, or the highest selection rate among the target user group as the default option, thereby reducing the number of users’ operations and reducing the operating cost of the task process Essence

2) Hanging status

When the mouse passes or stays in a drop -down menu item, the container will remind users of the content of the content by changing the fill color, border color or other styles that are different from initialization. The suspension status only appears on the computer. Because the touch screen device is directly interacting with it, it will cross the state directly.

3) Focus status

一看就懂,助你全面了解下拉菜单

Focusing the state means that the user is interacting with it. After clicking, while the option list is expanded, the container reminds the user in the operation through projection, border bold or main color tone, and the drop -down arrow will be vertically flipped (upward). In many other module components, the expansion/collection is also a prompt that stems from the direction of the arrow.

4) Completion status

After the user completes the selection, the container is filled in the selected options and replaced the placeholder. For the non -required drop -down menu item, one -click removal icon “⨂” later appears. Other elements are the same as the initialization state.

一看就懂,助你全面了解下拉菜单

5) Disable status

For the drop -down menu item that is disabled or currently does not meet the operating conditions, in order to maintain the visibility of the content, some elements are set ash to remind users.

6) Error feedback

一看就懂,助你全面了解下拉菜单

Compared with the input box, there are fewer errors in the drop -down menu item. When the user has two mutually exclusive options when there are missing options in the number of users, or the task process will warn the user through a strong reminder. red.

一看就懂,助你全面了解下拉菜单

Second, the condition that the drop -down menu needs to be met

一看就懂,助你全面了解下拉菜单

1. Determined by the number of options (mobile terminal)

First of all, the number of options should not be too small or too much. To speak, the number of options is 5-9 is the best choice to use drop -down menu. Due to the limited space of the drop -down area, considering the difficulty of the user’s operation, in most cases, the single option can be satisfied by using the single -selection button below 5 options. More than 9 of them require more display space. Use the operating bar pop -up window Or the page jump is better. Of course, this is not absolute, it is just a reference value. Using the drop -down menu as an example, it can meet most of the design needs in the work.

一看就懂,助你全面了解下拉菜单

Secondly, under the condition that the number of options is met, the number of words in the option text also needs to be shorter. If the text is too long, the user experience will be greatly reduced. It is better to discard the drop -down menu and replace it.

2. Determined by convenience

Do not let the user be allowed to enter. For example, when users choose the reason for refunds, there are so many common reasons. The style of the use of the drop -down menu is much higher than the operational efficiency of the code word. Satisfy.

In addition, it should be noted that this solution can only meet most design needs and use scenarios, and there is no absolutely good design. When the input may be faster than the selection, then the user input is decisive. This situation generally appears in the calendar control. If the user’s age span is large, imagine that you need to find your own in dozens or even hundreds of groups of data. The year of birth is also a very painful thing, it is better to enter 4 numbers faster.

3. Decision of the later extension

一看就懂,助你全面了解下拉菜单

If there are fewer current options (less than 5), because the content is a planned background configuration and has been increased in a short period of time according to product demand, the final quantity can be controlled. At this time, even if there are only one or two options, it is possible Select the drop -down menu.

Third, drop -down menu type

Depending on the needs of users, the nature of the content, it is more convenient to process various information, and the visual style and interaction method of the drop -down menu will be different. For example: Use the drop -down menu and the form in the navigation, the drop -down box, and even in some special scenarios, the drop -down box and the down menu can be swapped, but in order to take into account different types and improve the availability, you still need to pay special attention to these types and types and these types and types of these types and as well as the availability. Variety.

1. Navigation type

一看就懂,助你全面了解下拉菜单

Almost all websites are inseparable from navigation type menus, divided into horizontal navigation and vertical navigation. Horizontal navigation generally appears on the top of the website, such as the functional classification of the top of the official website, the product classification of the e -commerce website; and the vast majority of vertical navigation appears on the left side of the background management system. No matter what type, the main purpose is to provide provided by the provided by what it provides The navigation link brings the user to a new position.

一看就懂,助你全面了解下拉菜单

2. Command menu type

一看就懂,助你全面了解下拉菜单

The command menu is mainly used for the top of the computer desktop software and applications. After clicking, many option buttons will be expanded for users to perform the next step. Some of the more complex function options will be accompanied by the second grade (sub -menu) option list, which is convenient for users to right. Software and applications better control.

一看就懂,助你全面了解下拉菜单

3. Form type

As we all know, when conditions permit, the speed of the user’s choice is far greater than the speed of code characters, and it is more conducive to the system data statistics. Therefore, in many forms, a option field will be designed to allow users Formula selection. There are also many types of modeling menu for the form type of form type. The following will be introduced one by one:

1) Standard style

一看就懂,助你全面了解下拉菜单

The standard drop -down menu is the most primitive and simplest type of operation. Without any bending around, after triggering the pop -down option, one content is selected to complete the interaction with the current form item.

2) Keyword matching

This type often appears in more options. In order to facilitate users to complete the selection tasks faster, the input function is added on the basis of standard styles. During the input process, the system matchs and screens according to the input keywords in the existing options. Users can quickly find the options they need in the screening result. Look back and forth to complete the task.

一看就懂,助你全面了解下拉菜单

3) Search box

This is a relatively old -fashioned approach. After triggering the drop -down menu, it usually adds a search box above the option list. The user enters the keywords and searches. Compared with the keywords mentioned above It becomes complicated and increases the operating cost of users. Some PC website selection addresses are also used in the address control, but more products are directly used to classify the first letter of the urban pinyin for classification and screening, which is obviously more efficient than the search method.

4) Multi -selection/re -election

That is, the user selects multiple options in the same form item. Although this design method is more complicated, it is still very practical in the management system with more content and spatial resources that is not sufficient. For example, user permissions configuration, second -level/third -level linkage agencies or address options, multiple choices saves space than tideline, and many of these users are trained and relatively professional groups.

Fourth, common problems and pits guidelines

一看就懂,助你全面了解下拉菜单

1. Do not exceed the two levels

The more sub -levels of the menu, the more complicated the operation, and the worse the user experience. Try not to exceed two levels. If there are two levels, secondary analysis, deletion, and merging classification will be performed under the condition of conditions permit to reduce the burden of user operation. Essence Of course, this is not absolute. It can only be avoided as much as possible in the relative situation. For example, when selecting the address (province, city, district/county), it cannot be cut.

2. Use of default values

一看就懂,助你全面了解下拉菜单

The default value is mainly for the drop -down menu of the form type. In the predictable scenarios, the user selects the most commonly used, the highest selection frequency or the current user is most likely to choose from through the predictable scene, which is convenient for users who are most likely to be selected. You can complete the task without any operation, and also improve efficiency. However, according to the various products I have experienced, and various information descriptions of relevant parties, whether the default options need to be provided are half of their own, it has become a situation of two oppositions. Please use it with caution.

1) Select and fill in

Provide the default value for the selection form. The user is likely to directly skip the item. In the end, the default value is not the real needs of the user. This will become meaningless. Even in subsequent data analysis Go. In addition, even if the user noticed, he does not want to choose any content, and he has to be manually removed. This requires the user to pay more time and operating costs, which is contrary to the user experience.

一看就懂,助你全面了解下拉菜单

2) Moderate equilibrium

When the utilization rate of multiple options is relatively balanced, providing the default options will indeed reduce the operating costs of this small part of the user, but in most user groups, as long as it does not affect its interests or users think it is not important, the option will default the option. The availability also occurs the above problems.

3) User attributes blurred

This is mainly aimed at the recommendation setting of thousands of people. Among some new registered or erratic user groups, the recommendation of the default options will also increase the probability of errors.

3. Avoid rolling mistakes

一看就懂,助你全面了解下拉菜单

For the drop -down menu with more options, rolling is inevitable, but is there any possibility. We clearly need to roll down the list, but the entire web page can be rolled, while the mouse leaves the drop -down area to roll the page. It is a drop -down list, which is miserable.

To solve this problem, the programmer needs to define the position of the cursor during the rolling interaction. At present, the pull -up menu is only in the focus of the focus (highlight/main color/shadow) state. In addition, the rolling page can be scheduled. It should be explained here that the cursor can be canceled to the focusing state after leaving the drop -down menu. Users do not have to wait for users to complete the selection task before canceling. The purpose is to make the drop -down menu and the page rolling and not interfere with each other and switch at any time.

4. Number of options

1) Too few options

一看就懂,助你全面了解下拉菜单

Can I use the drop -down menu too little? The answer is “Of course”. But why is this bitter? If there are only two options, is it not fragrant with a single button? Users only like to complete what they need in the shortest time in the shortest time, and each operation may leave.

一看就懂,助你全面了解下拉菜单

2) Too many options

Excessive drop -down options may have a negative impact on users, but sometimes it is unavoidable, such as choosing a state, address, area code, etc., no matter what you do, you cannot simplify. At this time, adding the keyword matching and search box function mentioned earlier can improve the completion efficiency of users and make it easier for products to use.

一看就懂,助你全面了解下拉菜单

5. If the input is faster than the selection

In some special scenarios, the input is obviously faster than the choice. Imagine that you have only four numbers in your birth year, but you need to rolle in dozens of options. It is really time -consuming. The validity period of choosing a credit card is also the same. It is only one digital keyboard to solve this problem. Entering it is much easier.

6. Reduce operation

一看就懂,助你全面了解下拉菜单

There is a very classic example here is the date component. For the choice of year, month, and day, it seems acceptable to use 3 drop -up menus, but it is really complicated, and the changes in the previous content of each time Play a decisive role. It is convenient to combine the three sets of content and make users customize, which can reduce some excess operations.

7. Streaming option description

If you can make it clear in one sentence, don’t use two sentences. The more text, the higher the cost of understanding. In the area with limited space, the options should be as short as possible and directly hit the core content.

8. Priority to options

The options in the drop -down menu are not arbitrarily placed. To cater to users and make them have a better experience, it is necessary to comply with a certain law. The most commonly used options, the related combinations, and the time are sorted by priority according to the subsequent letters and regions, so that users can see it at a glance before operation.

9. Do not use options to set ash

When a certain option is disabled or the user fails to meet the selection conditions, try not to hide these options to prevent users from mistakenly believed that the content of the content or the system itself does not have certain options, laid disadvantages for follow -up.

The ash that exists but unswervingly is not only available to maintain the integrity of the content, reminds users to choose from, but also allows users to actively activate optional conditions in some special scenarios and improve the depth of the user’s use of the product. In addition, if the space resources are sufficient, the reason why the unsatisfactory reminder can be used to ensure that the user uses smoother (mouse hover is in unsatisfactory content, and temporary prompts are a good way).

5. Summary

The proper use of the drop -down calculation can not only maintain the aesthetics of the interface, but also use space resources to improve the efficiency of user selection through reasonable use of spatial resources, but do not abuse or use it.

The method and technique of the drop -down menu are far more than that. As long as we consider when to use, how to use, how to use it better before designing, plus the continuous optimization and leakage of the lack of the lack of the lack of the drop -down menu can be used to exert the drop -down menu can be used. The maximum value.

#Columnist#

Desert Flying Eagle; Public account: Energy eyeball, everyone is a product manager columnist. Driven by product demand and the excavation of product experience, the use of design methods brings a better experience to audience users, that is, good -looking, easy to use.

The original published in this article is a product manager, and reprinting is prohibited without permission.

The question map is from UNSPLASH, based on the CC0 protocol.

In order to answer your doubts, the above is what we have organized about touch pad module, hope it can help you.