UI interface drop-down menu complete design guide

Editor's note: This article is written by senior designer Jeremiah Lam. He sorted out some common considerations for drop-down menus in UI. Students who do UI design can save it~

When users need to select different functions, options, and items in the UI interface, they need to rely on UI controls such as check boxes, switches, buttons, drop-down menus, etc. These UI controls have different advantages and disadvantages and need to be used flexibly according to the usage scenarios and user needs. At the same time, there are many considerations in the design of these controls.

[[334280]]

Today's article focuses on the design considerations of drop-down menus. The article will include a lot of use cases and best practices to illustrate for you. As for the rules and techniques of design, there are many articles from the most famous NN Group and Baymard Institute in the field of experience design.

The Basic Anatomy of a Drop-Down Menu

Label: Tell users what to choose

• Field Icon (optional): An icon used to illustrate the corresponding field characteristics
• Search column (optional): used to help users easily find the required options, provided that there are more than 20 fields in the drop-down menu
• Checkbox (optional): Allows users to select multiple options at the same time

Types of drop-down menus

Depending on the nature of the input being requested, the appearance of a drop-down menu may vary to facilitate handling of different types of information. When designing a drop-down menu, it is important to maintain sufficient flexibility to improve usability and account for different input types.

The state of the drop-down menu

Based on different interaction states, the UI interface of the drop-down menu has multiple different states. Each state is visually similar, but when designing, users should be able to clearly distinguish them. Drop-down menus usually have default, activated, hover, disabled, focused, and error states.

Here are some important design guidelines and best practices when designing drop-down menus.

1. Avoid drop-down menus with too many options

A large number of options in a drop-down menu is a major feature of the drop-down menu. However, if there are too many options, it may have a negative impact on the user experience. For example, when there are more than 15 options, users are very likely to feel overwhelmed.

In addition, too many options will cause scrolling problems. Users can only browse normally when the cursor is placed in the drop-down box. If the cursor is accidentally moved outside the drop-down box, the entire page may scroll, which is very annoying.

But what can we do when it is unavoidable? An extremely long drop-down box is the most common situation. When you need to fill in/select your country and region, the extremely long list is simply frustrating.

There are 2 solutions at this time:

• Use autocomplete to help users complete information
• Integrate search functionality into the input box

2. Don’t use drop-down menus when there are too few options

If there are too few options, it would be a bit wasteful to still use a drop-down box. You can use a normal button or selector control to achieve this function, which may be more intuitive and easier to use than a drop-down menu, because the drop-down box will hide information in comparison.

So, when there are not too many options, try not to use drop-down menus.

3. Make unavailable options appear in gray

First of all, it should be said that an option exists but cannot be selected (disabled) and does not provide this option, which are two completely different situations. If it is not displayed directly, it means that the logic and interface consistency are unbalanced. Therefore, it is best to keep the unavailable and disabled options, but display them in gray and make them unselectable.

4. Arrange options logically

The options listed should follow a certain pattern to facilitate user positioning and filtering. The most common situation is to arrange them in alphabetical or numerical order so that users have clear expectations and a basis for search positioning.

5. Don’t use drop-down menus if you can type faster

In some cases, typing may be faster than selecting from a drop-down menu. A typical example is when entering the expiration date of a credit card, where typing in "month/year" is faster than selecting from two drop-down menus.

Although user input needs to be verified and matched by the program, direct input is still a better choice from a usability perspective because it reduces operational and cognitive burden.

6. Avoid abusing features and interactions

When certain data and information can be matched automatically, there is no need to repeatedly ask the user for confirmation. The most typical case is that the system can match the corresponding card type based on the credit card number, which does not require the user to use a drop-down menu to select one by one.

7. Reduce the number of operations as much as possible

You can reduce the number of operations by customizing the design of the drop-down box. A classic example is the design of a drop-down menu for selecting a date. If it is a normal drop-down menu, you may need three, but using a custom drop-down menu will be much more convenient.

8. Use label text that is as concise as possible

Users mainly filter by the label text information in the drop-down menu, so you need to make the information as clear as possible in a limited space, use a combination of uppercase and lowercase spellings that are more recognizable, and express clearly and directly to the target. Here are three guidelines for writing label text:

• Whenever possible, use verbs to describe specific actions.
• For links, use nouns to help users navigate to the page.
• Write the tag content on one line, don't be too wordy

Combine some logic to sort, and then put the most commonly used and important options at the top. Of course, more specific arrangements can be combined with some user research to refine.

Conclusion

The correct drop-down menu can provide a great user experience. It can help users narrow down the scope of information filtering, maximize the use of space within the limited screen range, and improve the user's selection efficiency. It is best to figure out when to use a drop-down menu and how to use it, so as to maximize the value of the design.