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.
Answer
Thoughts on drop-down lists:
I think all dropdown including the multi-select lists have probably reached the end of the line. Their versatility also proved to be their Achilles heel:
Drop-down menus are often more trouble than they are worth and can be confusing because Web designers use them for several different purposes. Also, scrolling menus reduce usability when they prevent users from seeing all their options in a single glance.
source: Drop-Down Menus: Use Sparingly
There are so many other ways of allowing users to achieve the same results. a Quick comparison below suggests that differentiating controls where and when relevant is key in reducing the need for dropdown lists, curtesy of Luke Wroblewski.
Multi-select drop-down lists on desktop
For multi-select drop-downs on desktop the first pattern that comes to mind is dual lists which does not only offer a selection mechanism but also a constant visibility of what has been selected. A variation of this pattern is a hybrid dual list that incorporates a filter to avoid scrolling.
Alternative for Multi-select drop-downs on mobile
Alternatives for multi-select drop-downs on mobile could make use of a simple scrollable checklist while making sure that layout is responsive or in the case of mobile apps use native elements.
Although the above does solve the problem of multiple selections on mobile, there are some drawbacks as in the example to the left where the use of screen space is not optimal, but this could be countered with some inovation and better styling.
No comments:
Post a Comment