How to make a user friendly dropdown

How to Make a User-Friendly Dropdown?

Bartosz Wiktorowicz
2 minutes read

At first sight, a dropdown is a very convenient solution: it’s lightweight, supported by all browsers, cheap and easy to implement. It also limits the number of incorrect answers and most users know how to use it. All that is true if you keep in mind a few simple dropdown rules.

People Loathe Filling Out All Sorts of Forms

It’s a fact. The longer and more complicated the form, the lower the chance of its successful completion by the user—especially when it’s viewed on mobile devices.

That’s a very good example of a form straight out of a nightmare.

Why and Where Dropdowns Don’t Work?

Dropdowns are one of the most incorrectly used solutions when making forms. The truth is, they should be used as a last resort only.

Now let’s delve into the why:

  • We’re hiding all the options from the users. To see the available options, they are forced to click and expand the dropdown list.
  • Choosing one option from a long list is a multistep process. The user has to click to expand the list, scroll to find the desired option, and then click on it to close the list.
  • Long dropdown lists are a user experience nightmare, especially on mobile devices (e.g. choosing a country).

Luckily, there are a few solutions you can use to improve the UX of your forms.

Fixing Issues with Long Options Lists

An intensive lecture on world geography.

A dropdown list containing more than 15 options becomes cumbersome to the user. A great example of such a list are dropdowns listing almost 200 countries—it’s downright cruel to ask the user to browse through them all to choose a proper country.

A better solution in this case would be to use an autocomplete feature. The user knows where he or she lives—entering a couple or so first letters of a country quickly narrows down the list.

Dropdowns also shouldn’t be used in forms where the required information is well known by the user, i.e., the day, month, and year of birth.

Sometimes it’s better to let the users fill in the required information manually, instead of forcing them to choose the option from a very long list.

Improving Short Options Lists

You can quite often encounter a dropdown list used for fewer than five choices. Using dropdowns for fewer options than that negatively impacts the UX. For such short options lists, I recommend using the radio button, which lets the user make the choice quickly and easily.

Readable and sweet—the radio button list.

With radio button lists, the user sees all the options without having to expand the list. All the user has to do is look at the options and make the choice.

Adding Labels to the Forms

The golden rule: Every form field needs to have a label that stays visible after clicking the dropdown.

In the picture below, the “Feedback Type” remains visible while the user chooses one of the options. This helps the user remember what to look for while scrolling through the “Select Feedback Type” list.

When labeling the form field, use a specific title, not an enigmatic “Please select.” Simply writing “Please select” isn’t clear enough, and you should provide the user with a clear instruction, i.e., “Select profile” instead of “Please select.”

Choosing the Quantity

Instead of forcing the user to choose the number of passengers or quantity of products through dropdowns with numbers, you should give the user the option to add or deduct the quantity by clicking only once.

Care for Your Users

In many cases, using dropdowns is indispensable, so you shouldn’t avoid them at all costs. But try implementing them only where they’re really necessary. Don’t be afraid to use more user-friendly solutions. Invest in solutions that are easy to use not only for the advanced users but also those with disabilities or those less technically versed.

On-demand webinar: Moving Forward From Legacy Systems

We’ll walk you through how to think about an upgrade, refactor, or migration project to your codebase. By the end of this webinar, you’ll have a step-by-step plan to move away from the legacy system.

Watch recording
moving forward from legacy systems - webinar

Latest blog posts

See more

Ready to talk about your project?


Tell us more

Fill out a quick form describing your needs. You can always add details later on and we’ll reply within a day!


Strategic Planning

We go through recommended tools, technologies and frameworks that best fit the challenges you face.


Workshop Kickoff

Once we arrange the formalities, you can meet your Polcode team members and we’ll begin developing your next project.