The problem: a user needs to select multiple items from long list. When confronted with this in a recent project, we searched for the most user-friendly solution.

 The ‘Default’

An example would be selecting your favorite fruits from a list of 25 fruits on a web form. What UI element should be used? The W3C recommends using the SELECT element with MULTIPLE attribute turned on: “If set, this boolean attribute allows multiple selections. If not set, the SELECT element only permits single selections”

Here’s what it looks like:

We included a “Hold CTRL to select multiple” message in our example so users know that multiple selection is available. One reason this UI element is problematic because users don’t expect to need to use keyboard shortcuts to reach end-goal. Web UIs, for the most part, are left-click focused, so a user could easily click on only one element and think it’s sufficient. This element also lacks a way to see a summary of selections made and it’s very easy to lose all your selections by clicking an item while not holding control.

Advantages: Simple to implement
Disadvantages: Not intuitive, selections hidden on scroll, must scroll to find an item, easy to make an error.

Solutions

Depending on the needs of your users and the characteristics of your list, any of the following can be a viable alternative to the default multi-select.

1. Checkboxes

Checkboxes have an advantage over the previous example: the user just has to make their selections with one click and can see all the options they’ve chosen. However, checkboxes break down once there are too many items to choose from and it becomes difficult for users to find what they’re looking for. This is actually a relatively short list and you can imagine how a list two or three times as long could be overwhelming to a user.

Advantages: Simple to implement, intuitive
Disadvantages: Difficult to scan, can take up too much space

2. Scrollable Checkboxes

By combining the previous two options we get a better solution. It’s easier to scan the options and takes up less space than the checkboxes, but still retains the problems of hiding selections on scroll and requiring the user to scroll to find an item.

Advantages: Intuitive, more compact
Disadvantages: Selections hidden on scroll, must scroll to find an item, more difficult to implement

3. Dropdown with Scrollable Checkboxes

For an even more compact version of the previous, we can hide the list in a dropdown but it retains the disadvantages as well as hiding the information under another layer of interaction.

Advantages: Intuitive, very compact
Disadvantages: Selections hidden on scroll, must scroll to find an item, more difficult to implement, requires extra interaction

4. The Dual List

A slightly different approach to making multiple selections is the dual-list aka list-builder. With this element the users select an item from the list on the left and it’s moved to the list on the right by clicking the arrow button. This pattern shows up occasionally in desktop applications but not very often on the web.

Advantages: Selections clearly visible, intuitive
Disadvantages: Must scroll to find an item, less compact, requires two clicks to add or remove an item, more difficult to implement.

5. Hybrid Dual List with Filter

By combining the best of all the above solutions and adding a dynamic filter we get (what we think is) the best solution for many cases.

The user clicks once to add items to their selections on the right and can click them again in either place to remove them. Providing user an ability to both recognize (list) and remember (quick filter) interested items from a long list makes the selection process easier. Redundancy in keeping selected items in both lists allows the user to quickly remove items but also see a summary of what they’ve selected. 

Typing in the search box immediately filters the list, allowing users to quickly find an item without scrolling through the entire list.

Advantages: Selections clearly visible, intuitive, easy to find items
Disadvantages: Less compact, more difficult to implement

What about touch-based interaction?

Developers of mobile OSs clearly saw that the default implementation of a multi-select was not only difficult, but impossible to use when there is no control key to hold down. iPhone, iPad and Android mobile browsers reformat default multi-selects into a pattern similar to #3 above. So in the case of a mobile-only UI it’s actually safe to use the default element.

 

This post was written with Timur Zaynullin, our resident user experience specialist. Does your site need UI help? Drop us a line.