input component
To improve the efficiency of information entry, designers keep in mind a principle - try to avoid manual input by users . Because every user expects to complete information entry in the most convenient and fast way, they are reluctant to open the keyboard and type word by word by themselves.
There are six or seven items in a form, but the input style only has an input box, and each item of information must be manually input by the user. This saves the designer's trouble, but the user will be very uncomfortable. Compared with typing, users are more willing to choose. So users prefer to see drop-down lists and selectors instead of full-screen input boxes. Of course, the input box is not useless. Some remarks or detailed addresses cannot provide options to the user, so it is very suitable to use the input box.
There are many components for users to select, but some are very small and have limited uses, such as the date picker DatePicker and the rating Rate. In my opinion, there are two main types of selectable components that are truly universal: drop-down lists and radio buttons .
Drop-down list/radio box
The main usage scenario of the drop-down list is that the user selects from many options to complete the quick entry of information. Its main style is as follows:
Then we can find that its main advantages are:
Save interface space
Unlimited impression options
So when the interface space is tight and there are many items to choose from, the drop-down list is a very suitable component. But the disadvantages of drop-down lists are also obvious:
The user has to click to see all the options;
All options are listed from top to bottom and cannot reflect priority.
After talking about the drop-down box, let's talk about the radio button. Why put them together? Because in my opinion, radio buttons and drop-down lists are like two sides of the same coin, with opposite pros and cons.
From the style, we can see that the biggest difference between radio buttons and drop-down lists is the display of options. The radio button will show all the b2b data options to the user at a glance. If you want to see the options in the drop-down list, you need to click, and there is one more operation step . Take the following figure as an example. The form items here are all drop-down list styles, and the entire interface looks neat and uniform. However, if we are more "picky", we will find that it is not very suitable to use a drop-down list for the gender column, because the total number of male/female For the two options, it is more reasonable to directly display the radio buttons.
The radio button cannot display too many options, especially for mobile design, because the mobile terminal has a relatively small screen and limited display space. In addition, compared with the drop-down list, the radio button has another defect that the user cannot complete the multi-level selection, the most common is the province and city entry.