Using a dropdown for every single value select is just lazy. You end up with bloated, long forms and a disastrous UX. You’ll bring pain and agony into the user’s life and make the whole experience tedious. Nobody likes to fill out forms, and nobody likes long, monotonous processes.

Luke Wroblewski writes about why Dropdowns Should be the UI of Last Resort and gives a couple of great examples.

What can you do to improve your forms?

Depending on the size of the dataset the user has to choose from, you can use a different UI controls instead of always relying on a select.

If it’s a binary choice use a switch, if you have less than or around 5 choices use a radio button list or segmented control. In some cases even a slider works. If you have more items, but not a whole lot use select menus.

Know the tools

If the only tool you have is a hammer then every problem you come across seems to be a nail. Or something like that… I may have butchered this, but you get the point.

Don’t use and reuse your “dearest” control because you like how it looks, put yourself in context and think of the question, see how you can help the user give an answer the best way possible. Use the appropriate UI.

Select

This is usually the go-to control for a lot of folks, however not always the best. If you have 15 items to choose from it is OK to do it with a simple dropdown. Your users will know what to do with it. If you have 3 or a 3000 values, the good ‘ol select might not be your best choice.

View interactive example

Radio button list or segmented control

The radio button list and the segmented controls are very similar. They give you a series of related but mutually exclusive choices that you can lay out horizontally or vertically. With the segmented control you can save serious space and shorten the physical length of a form. This has an impact on completion because all of a sudden your form is shorter and the user perceives it as less work to fill it out.

View interactive example

Slider and switch

If the user has to choose from a discrete set of values, the slider makes sense. It visibly sets the boundaries, sets the range and the user knows where she can choose from, it can also be displayed inline which means you can reduce the number of interactions required to make a choice.

Use the switch for binary choices. This is the equivalent of the checkbox on mobile. From a UX perspective it’s easy to know what to do with it. The light is either turned ON or OFF.

View interactive example

Enhance the choices

Sometimes adding iconography or images that are recognizable to the user help in finding the appropriate value. You should only use it if it actually helps the user to make a choice quicker. Think of a list of accounts to log in as with the photo of a person next to it, or a list of car brands that are available.

View interactive example

A lot to choose from

If there are a lot of choices, help the user find the right one by dividing the list into logical groups. This works with hierarchies. The user will have an easier time scanning the groups and finding the right choice.

View interactive example

There are many ways to render data selection, putting it into context can help pick the fitting solution.

If you are looking for quick, no-hassle solutions that can be literally implemented in minutes, check out the products we provide at Mobiscroll.