• Why drop-down Lists are bad for the user experience.
  • The Nuggets translation Project
  • Translator: Vista Shao Hui
  • Proofreader :L9m, Circlelove

A completely unreasonable industry standard

As I’ve worked on user interface and usability, especially with user input forms, I’ve become more aware of the fact that drop-down lists are almost always a bad user experience.

Drop-down lists are often used when there are multiple options and the user is allowed to select only one. It has the same effect as a radio button. The reason for using it instead of using radio buttons is that it takes up less space, but I’ve already stated that we don’t need to save space vertically on the page anymore.

One of the biggest problems with drop-down lists is that the user doesn’t see all the options directly. Instead, the user has to click to see all the options, then browse through them before making a selection. The drop-down list experience is particularly bad when the user is using the keyboard on most input forms.

Here are some alternatives to drop-down lists:

1. Replace the drop-down list with multiple radio buttons

These options should appear directly in view, not after the user clicks. This allows users to see directly what options are available and then make an informed decision. Be sure to keep the radio buttons simple and to select only one.

2. The two options should act as an on/off button

If there are only two options, should be under the drop-down menu to replace a switch, and the most common form of that option should be primary, a good example is the sex selection in a registration form, if use a drop-down menu, each user need to do two clicks – select this menu and then select this option, use the switch, Women (51 percent of the population) are pre-selected, so only 9 percent need to do a click. That’s a huge difference, and here’s a bad example, from Yahoo.com:

3. Many options should be used as an auto-complete control

A widely accepted view is most of the options in the drop-down list number should be around 15 (some say 12, others say it’s 16), if more than one range, it is easy to produce rhetoric, is a very difficult decision for the user, through a long list of options, so many options in the user’s hands. We should try to remove as many options as possible, because we’ve done a lot of work in the background, so that the user can think as little as possible.

A good example is the Country selector, which is still an absolute standard to use when selecting your country. Ludacris,Smashing Mag wrote an excellent article on this issue a year ago called “Redesigning the State Selector”, where there are many possible options, use auto-complete controls and let the system do the work, not the user.

So, are there any places where a drop-down list is the best choice? B: yes, of course, you have several options in any case, you can in your form using multiple radio buttons, users don’t know what is their current optional, but this happens very little, if this kind of thing happens, then think again, using a variety of controls to let users to use more simple is wise, As a good example of how forms should be designed, take a look at TypeForms. They do everything right.

One last thing I want to say is a little bit off topic but needs to be said: if this field is optional, it should not be in the form. Remove all unnecessary sign-up processes and things that are unnecessary to the user. This usually means that you need to add one to the required modules (if in some cases you still need optional input boxes, mark them as optional).