Shulou(Shulou.com)06/02 Report--

The main content of this article is to explain "what is the method of complete design of UI interface drop-down menu", interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Next let the editor to take you to learn "what is the complete design method of UI interface drop-down menu"?

Basic Analysis of drop-down menu

Tags: tell the user what to choose

Field icon (optional): an icon that describes the characteristics of the corresponding field

Search column (optional): used to help users easily find the options they need. There are more than 20 fields in the prerequisite drop-down menu.

Check box (optional): make multiple options available to the user at the same time

Type of drop-down menu

Depending on the nature of the input you want, the appearance of the drop-down menu may change to facilitate processing of different types of information. When designing drop-down menus, it is important to maintain sufficient flexibility, improve usability, and take into account different input types.

Status of the drop-down menu

The UI interface of drop-down menus has several different states based on different interaction states. Each state is visually similar, but at design time, users should be able to distinguish it clearly. Drop-down menus usually have default, activation, hover, disable, focus, and error states.

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

1. Avoid having too many options on the drop-down menu

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

In addition, the problem of scrolling will occur if there are too many options. Users can browse normally only by placing the cursor in the drop-down box, and if you accidentally move the cursor outside the drop-down box, it may make the entire page scroll, which is a very annoying thing.

But what should I do if I can't avoid it? Overly long drop-down boxes are the most common situation, and when you need to fill in / select your country or region, the overlong list is simply collapsing.

There are two solutions at this time:

Use automatic filling to help users complete the information

Integrate the search function into the input box

2. don't use the drop-down menu when there are too few options.

If there are too few options, but still using the drop-down box is a bit wasteful. You can use normal buttons or selector controls to do this, which may be more intuitive and easy to use than the drop-down menu, because the drop-down box also hides the information.

So, try not to use the drop-down menu when you don't have many options.

3. Let the unavailable options be grayed out

The first thing to say is that an option exists but is not optional (disabled) and does not provide this option are two very different situations. If it is not displayed directly, it means that there is an imbalance between logic and interface consistency. Therefore, it is best to keep the unavailable, disabled options, but grayed out, and not optional.

4. Arrange options logically

The listed options should be in line with certain rules to facilitate user positioning and screening. The most common situation is to arrange them in alphabetical or numerical order, so that users have a clear basis for expectations and search positioning.

5. If you type faster, do not use the drop-down menu

In some cases, typing may be faster than selecting from the drop-down menu. A typical situation is to enter the validity period of the credit card and enter information such as "month / year" faster than choosing one by one from the two drop-down menus.

Although user input requires the program to validate and match, from a usability perspective, direct input is still a better choice because it reduces the operational and cognitive burden.

6. Avoid misuse of functions and interactions

When some data and information can be matched automatically, there is no need to repeatedly ask the user to confirm. The most typical of this situation is that the system can match the type of card according to the credit card number, which does not require the user to use the drop-down menu to select one by one.

7. Minimize the number of operands

You can reduce the number of operations by customizing the design of the drop-down box. A classic case is the design of a drop-down menu that selects 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 the label text as concise as possible

Users are filtered mainly through the label text information in the drop-down menu, so you need to make the information as clear as possible in limited space, with a higher recognition rate of uppercase and lowercase spelling, and express it clearly. straight to the target. Here are three guidelines for writing tag text:

Whenever possible, use verbs to describe directional operations.

For links, use nouns to help users navigate to the page

Write the tag in one line, don't be verbose.

Sort with a certain amount of logic, and then put the most commonly used and important options at the top. Of course, more arrangement, can be combined with some user research to refine.

At this point, I believe that everyone on the "UI interface drop-down menu full design method is what" have a deeper understanding, might as well to the actual operation of it! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.