Multi-selection dropdown list implementation best practice

Question

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 1

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.

Answer 2

Nielsen Norman Group wrote a great article about mega menus - I'm not sure if it addresses your particular needs or not, but they do say that drop down menus are user friendly, so long as they are multi-dimensional and robust, instead of just a block of text. They also mention the use of tags and tag clouds in that article, so I hope it's relevant to your issue!

That said, I think the main road-block in that particular iteration of the design is that the tags sound really confusing. Perhaps you could figure out a clever way of naming them without having to put such a long description explaining what they do at the bottom?

Answer 3

In same real world applications you use multi-select drop-down list implementation because:

-as you said "there isn't always a lot of space available" -The user doesn't know the items in the list...

Regarding that, I'll show you an example:

Here the user has a list of unknown file types coming from the server dynamically, so there is no option to use smart search field...

Using the same example -related to what Okavango says about sliders-:

I did try to use sliders to select a range (on File Size), but because the range was so wide (from bytes to Etabytes) then was impossible to select small ranges (e.g. 20MB to 37MB).

So, if your range is to big, I think is better to avoid sliders

Answer 4

You ask about multiple select dropdown but picture a multiple select list

You cite as a reason you could not find multi select dropdown

You don't find multi select dropdown because in a collapsed state a dropdown does not depict multiple selections. A drop down is poor UI for multi select for this reason.

As for List versus a select like SO the difference is if the terms need a description. If it is known terms like states in the US then no reason for a description.

If you allow users to add dynamically add terms then you almost have to allow description so they can explain to each other what they mean. A List is still effect for speed of selection and real estate for known (set) terms. I think you are seeing more SO like dynamic with description as sites are using dynamic user based content. 20 years ago you just plain did not have collaborative sites like SO.