10

In our application we're working with dropdown lists that may contain many options (sometimes around 200). Usually, these lists allow the user to select multiple entries whereas in other places of our application only a single selection is possible. To ease selection for the user, they may type to search through the list.

My question now is: Should the option(s) the user has already selected (a) still be shown and highlighted in the list or should they (b) be removed from the list and only displayed in the container box? Also, should this behavior be different for single-select and multi-select dropdown lists?

Show selected options:

Remove selected options:

Improve this question
4
  • 1
    How many items can be selected by the user? What happens when the pills overflow in the input control? If your users are able to select (many) more items than the component is able to display at a given moment, then this pattern may not fit your case to begin with.
    – Ro Achterberg
    Oct 10, 2022 at 11:40
  • Do you really show the drop down before the user types anything? Or do you show it only once they have started typing (and only display matches)?
    – jcaron
    Oct 11, 2022 at 16:34
  • @RoAchterberg The number of items that can be selected is not restricted although in most cases the user will select only a few. If the container overflows, not all pills are shown and there's a text that says "+3 more". Once the user opens the dropdown list, the container box grows and shows all pills.
    – Maurice
    Oct 12, 2022 at 7:29
  • @jcaron I show the dropdown list once the user starts to type or when he clicks on it. When the user types something, only the matches are shown.
    – Maurice
    Oct 12, 2022 at 7:33

1 Answer 1

Reset to default
21

Good question, also props for differentiating the two different scenarios. I think that you are in luck because there is indeed just a simple correct answer:

Do not remove selected options from the dropdown!

Reasons

  1. Moving elements of the UI is always dangerous. If you remove elements from a dropdown when something happens, the options of the select "move around". That can very easily upset the user, as it makes the interface feel fiddly and unstable. Like trying to swat a particularly agile mosquito. So unless you have a very good reason (e.g., an option does not exist anymore) try to keep the UI steady and unchanging.
  2. Conform to Standards. Unless your app is innovative in this exact area, it is always a good idea to adhere to the standards the user is used to. In this case, it is a good idea to check how HTML's select works out the box: It does not remove the selected option.
  3. Consider all use-cases: Maybe I just click a dropdown again more or less accidentally but don't want to change my answer. The most reassuring interaction here is to allow the user to just click the selected option again (so I am sure I didn't change anything). Especially when we are talking about the multi-select, people might often open the dropdown to get an overview of what they selected and what is possible - that doesn't work if they can't see all options, selected or not.

Extra: Multi-Select dropdowns may be dangerous

I know you didn't ask this, but I just want to ask: How do you handle the user clicking an option on the multi-select? Does it close again and the user has to open it for every option? If not, when does it close? Is the user clear that she can type or does she feel prompted to search through the (possibly quite long) dropdown every time?

If you feel like the answers to these question might hint at some problems, you may think about a checkbox list or a more complex solution that is really clear that you should type instead; something like the Deviantart tag input:

Deviantart tag input showcasing a text input with dropdown options on typing

TLDR: Do not change the way the dropdown works natively (or imitate the HTML way if building it yourself), which means not hiding options.

Improve this answer
2
  • 1
    Thanks for the extensive answer! Keeping the options seems like a reasonable solution. Currently the multi-select closes when the user clicks outside of the dropdown list, it does not close when selecting an option. For our single-selects, the dropdown closes after making a selection. The possibility to type to search is indicated by having the text field automatically focused (the caret is blinking). This happens when the user selects an element in the UI that causes the multi-select box to appear in the first place. Perhaps it could be even clearer by having a specific placeholder text?
    – Maurice
    Oct 12, 2022 at 7:23
  • 1
    That sounds alright! As always, you should get some users in front of your prototype ASAP, but from a theoretical standpoint I don't see any problems
    – Kolja Sam
    Oct 15, 2022 at 16:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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