3

I'm wondering what is the best practice of designing select / drop down lists. In some projects I've worked in the select on a form was filled with first value from the list. In other project we had always "-- select --" option chosen before user selected something else. I can imagine also empty field.

Is there any guideline about it? What is state of art in this matter?

1
  • 2
    It's totally based on the importance of the dropdown. If you have a bunch of pre-selected options which rarely need deviation then pre-select the common choices. If this dropdown needs cognitive attention every time the form is filled out or else a kitten could die then make it required and pre-select an empty choice so that the user must make a decision.
    – MonkeyZeus
    Sep 14, 2018 at 14:43

3 Answers 3

6

I wouldn't say there are guidelines as such, but most design systems provide an insight on how to use dropdowns. Here are a few examples:

Material Design: Exposed Dropdown Menu

IOS - Pickers

Sidenote, Apple generally doesn't like dropdowns, they take you to a whole other page with selections.

Microsoft Fluent Design Guidelines

Not exactly what you are looking for but worth taking a look.

General Guidelines (from my experience):

Default Dropdowns: Explanation - Dropdowns that have a default state. Examples - A dropdown that allows you to select a font. The default font is always selected. Guideline - Provide a placeholder with the default option selected.

No state Dropdowns: Explanation - A dropdown that has no way of knowing the default state of selection. Examples - A dropdown that is used to select your nationality. Guideline - Use an explanatory placeholder. For the example above, the placeholder would be "Select Nationality" or even "Select" would do.

Field Specific Dropdowns: Explanation - Dropdowns that have a predefined purpose. Examples - Calendars, Time selectors, Username/ Profile selection. Guideline - Use field specific placeholders. If I am designing a calendar input, then the placeholder will specify the day's date. Time selectors will have a similar placeholder displaying the current time. profile selectors for selecting a single profile from a list of profiles will have the current profile being used as a placeholder (see: facebook).

Hope this helps ^_^

3
  • Nationality seems like a poor example; a reasonable default guess might be chosen based on the user's culture setting (although it would be dynamic). Maybe something like year of birth or credit card brand would be better. Come to think of it, a drop down with a "dynamic" guess based on other information might be worth mentioning as a type of default drop down.
    – jpmc26
    Sep 14, 2018 at 23:53
  • Credit Card brand - Can be set based on the starting numbers that have been input by the user. The dynamic guess based dropdown is actually a good idea. I'll do more research on it! Cheers ^_^ Sep 15, 2018 at 5:29
  • Can be, but isn't always. If you're gonna compute it, it shouldn't even be a drop down period.
    – jpmc26
    Sep 15, 2018 at 7:32
5

There is no "best practice" here, those two options are completely different.

Pre-selected - use if you have a reason to believe one of the options is most likely (this can be based on most popular / probable option, or on data you know about the user) or you know the default or current option (something that you can choose to change, but an option is already in effect), or if you want to push the user for that option.

Blank or "please choose" - use this, if you don't know or if you need to make sure the user makes a conscious choice. Whether to label or leave empty is another choice.

1

Include instructional text as a dropdown item? No

All fields should have labels and that dropdown label should always be visible, so that should provide enough context for the user that a selection can be made. Instructional dropdown choices will disappear after selection anyway and will add redundant noise compared to what a label already provides.

According to UX Collective - Don’t default to "please select" in drop-downs:

Users don’t need to be told to "please select" if there’s a field that’s empty. Even more importantly though, users scan forms looking for empty fields.

Add default value to form input? Probably Not

According to UX Planet - Drop-Downs in Forms:

You should avoid having a default value unless you believe a large portion of your user’s (maybe 90%) will select that value. Particularly if it’s a required field.

Why? Because you’re likely to introduce errors because people go through forms quickly — don’t assume they will take the time to parse through all the choices and may accidentally miss something that already has a value

See Also:

Not the answer you're looking for? Browse other questions tagged or ask your own question.