Nine commonly used control specifications in UI design are sorted out in this article!

What are the common control design specifications in UI design? This article summarizes the design specifications of 9 controls: button, multiple selection, single selection, switch, text input box, drop-down selection, list box, drop-down button, and slider.

When we design UI interfaces, there are some controls that are almost always used. Users are familiar with their interaction patterns and therefore build mental models, knowing clearly how to use these controls to help them achieve their goals.

So as designers, we must be clear about the design specifications of these commonly used UI control elements. This article is relatively basic, but it is recommended that you fill in the gaps.

The input controls we need to pay attention to include the following:

1. Button
2. Multiple Selection
3. Single Choice
4. Switch
5. Text Input Box
6. Drop-down selection
7. List Box
8. Drop-down button
9. slider

1. Button

Buttons convey to users that when they press/click, an action will be triggered.

1. Best Practices

① Button structure

When we design a button, we need to consider multiple components: rounded corners, inner spacing, projection (possibly), filling (solid color or gradient), text. All these elements together form an effective button control that sends the correct interaction information to the user.

② Button rounded corners

The larger the rounded corners, the more friendly the button will be. But remember that the human eye tends not to like very sharp objects, so it is usually not recommended to use a button style with a rounded corner of 0. It is recommended to use a minimum of 3px rounded corners.

③ Padding

The padding can expand the clickable range of the button, helping users to click the button more easily. A good design experience is to design the horizontal padding of the button to be twice the vertical padding. Of course, you can also make appropriate adjustments based on the actual situation of your design. The rules are not rigid.

④ Projection

We use shadows to indicate certain states. The button must appear to be on top of the page, so keep the shadow smooth and use soft colors. It is recommended to use a color close to the button and reduce the transparency, which will make your shadow look more natural.

The button's shadow uses the same color as the button itself.

⑤ Filling

Whether we use a solid color or a gradient, we want to make sure that the button is easy to understand for the user. In addition, the color chosen for the button must reflect the matching color. For example, when you design a red save button, it will make users hesitate to click it.

⑥ Text

Similar to color, you also want to use text that is easy for users to read. Use no more than 5 words on a button (1-3 for important buttons).

⑦ Operation

Buttons can be categorized based on the type of action they perform when interacting with them. They are divided into three categories:

• Primary Buttons
• Secondary Buttons
• Third secondary button

⑧ Status

You can also consider the design style of buttons from another perspective. The most important button states include the following 6 types:

1. Default
2. Click state
3. Focus State
4. Unclickable
5. Active
6. Waiting state

2. Checkbox

A check box control allows users to select multiple options in a list at the same time.

Best Practices

① When you have a lot of options in a check box, grouping these options is a good way to categorize them.

② Although you may have created a pattern for users to check multiple options when checking a checkbox, it is also helpful for users to accurately display the multiple-choice option title. For example, in a multiple-choice question, if we ask "What books do you like?" instead of "Which book do you like?", the answer we get is likely to be completely different, because we know that users are likely to select multiple options.

③ Increase usability by allowing users to click on the label itself to check the options.

3. Radio Button

A check box tells the user that there are multiple options in the list that can be selected, while a radio button tells the user that only one option can be selected.

Best Practices

① Similar to checkboxes, if you have a long list of options, remember to group them to make it easier for users to choose.

② Provide a default option. Users can choose other options by themselves, but if the default option is what the user wants, it will save them the trouble.

③ The way to increase the usability of radio buttons is to allow users to select the option by clicking on the option label (expanding the click range).

4. Switch Controls

Often used in switch options to allow users to easily select between 2 options.

Best Practices

① Toggle buttons usually have a default value. Users can decide whether to change the toggle state.

② When the user interacts with the toggle button, the impact on the result should be immediate, without having to click Save.

5. Input Box

Simply put, an input field allows users to enter text. Although the design styles may vary, they should all display a label.

Best Practices

① Always display the label so that users can always know what option they have filled in. If the label is only displayed in the input box, the label will be hidden when the user is typing. Therefore, there should be a label prompt when using it outside the input box.

② Keep labels concise and representative.

③ Display prompts to ensure that the text content allows users to fill in correct information.

6. Drop-down list

Similar to radio buttons, drop-down lists allow users to select only one option at a time. In fact, they are expandable, essentially a compact radio button.

Best Practices

Because they are essentially a compact radio button, it’s probably quicker to expand the selection when it’s not really necessary, so try to avoid using them.

7. Drop-down checkbox

Similar to a checkbox, it also allows the user to select multiple options at the same time.

Best Practices

If you have a long list of options, remember to group them to make it easier for users to select.

8. Drop-down button

Essentially, a drop-down button consists of a button that, when clicked, displays a different list of contents.

Best Practices

① Remember to add hover effects to options to show that users can navigate to another page by clicking.

② Add a separate icon to the right side of the button to tell users that it also has a hidden drop-down menu.

9. Slider

Sliders allow users to change or set a value

Best Practices

Use sliders only when necessary, when the range is more important to the user than the exact value.

Pay attention to the click range of the control to ensure that users can easily select different values.

Summarize

The controls mentioned above are often used in our daily design work. I hope you can understand the specifications and guidelines for correct use in order to bring the greatest value to users.