Multi-selection dropdown list implementation best practice
Many websites do not use multi-selection dropdown lists anymore, and the reason often cited by UX practitioners is that this UI element does not 'test well' with users. An example of what I am referring to is shown here:
This is being replaced by something similar to how the tags are being added in UX StackExchange.
The first question is whether there are good research studies that can add some weight to this, because a lot of these type of observations are hard to validate accurately.
The second question is whether its perceived poor usability is due to this UI element being loaded with too much interaction/information, or if it is just not being used in the optimal way.
The issues I can see with the implementation are:
- amount of space available: in order to minimize the amount of information that the user has to remember (i.e. what they selected), it is ideal to show in a separate area the selections that they have made, which also allows them to remove the selection easily. However, there isn't always a lot of space available such as in the case of a mobile application.
- consistency of interaction: another issue with displaying the selected list in a different area is that this area is often only used to remove the selected items, which means that you are separating the add action from the remove action. This may cause inconsistency in the interaction if in other sections the add and remove actions occur on the same UI element.
- number of items in the dropdown list: for long dropdown lists, it is much more difficult to scroll up and down to find list items that have already been selected or that the user wants to select. In this case a smart search field seems to be much more practical but the user may not be familiar with all the items in the list to be able to search through it efficiently.
But perhaps there are still cases where it is practical and more suitable to use multi-selection dropdown or list?
A similar question was asked about 1 year ago (Most intuitive multi-select component for the web) but I don't think there were any standout UI design solutions (and I am hoping that someone might put up a bounty for it) so hopefully there might be some new ideas now.