One of the biggest constraints on mobile is screen size. Due to this reason, multi-select controls can be the hardest ones to nail down. In this article, I’ll describe what the key characteristics of a multi-select are. I’ll also breakdown multi-select solutions to help you decide which to use.
Developing a way for users to select many items on mobile can seem trivial at first glance. It’s a pattern used often but very tricky to get right. The problem is compounded by including filters, longer lists or hierarchy.
In fact, through some research I came to the conclusion very few have nailed down this user experience in their apps. Below I will breakdown the different implementations in hopes you can use it as inspiration on your next project.
Characteristics of multi-select controls
Before we get into it, what are some general characteristic of multi-select controls? When do they apply?
Definition: A multi-select is composed of many items and allows a user to select one or more items.
The list can vary in size depending on it’s function. Regardless of the function, you want to be able to know what the state of the selection is. Systems should always keep users informed about what is going on, through appropriate feedback.
Depending on the type of list, the functionality of the control will change. Does the user know what items will be in the the list? For example, if you have to select which days you are available you know what your options will be.
In contrast, when narrowing down your search for a hotel by neighbourhood you might not know what the options might be.
Will the user enter the list looking for very particular choices or will they need to scan the list? This might affect whether a search bar is available by default and how you display the data.
Once the user selects the items, will they be able to remember his/her selection?
Desktop UX ≠ Mobile UX
There are many different multi-select implementations on desktop. These as expected don’t translate perfectly to mobile. On mobile there is less room to make use of some of these solutions. But aside from this, item states and the interactions with them are different.
Another issue on mobile is that it’s hard to see what you’ve selected from a large list. If you are inviting a large number people to an event, it can be hard and frustrating to keep everything in your head. The reason? Cognitive load.
Cognitive load is the amount of thought you need to exercise to complete a specific task. The higher the load, the harder to use. We should aim to minimize the user’s memory load by making objects, actions and options visible.
Mobile user experience (UX) solutions: Multi-Select
What solution you use will depend on your user, workflow and context. Depending on the situation, you might want to add a search bar or maybe a simple list will suffice.
If the list is too long, then finding ways to make list shorter will help the user.
According to Hick’s Law, the time it takes for a person to make a decision depends on the choices available to him or her. So if the number of choices increases, the time to make a decision increases. Some ways to reduce list size include: tabs, filters, groups or search.
With all that in mind, what are your options when designing multi-select workflows on mobile?
Checkboxes
The simplest case of a multi-select control. They are simple to implement. May be difficult to scan. They also may take too much space.
Background
- User needs to see all available options side-by-side.
- Not a very long list
Typical Uses
- Filtering a list
- Answering a multiple choice question within a form
Scrollable list
The scrollable list is your typical mobile list. Here a user checks the row and clicks the ‘done’ button when finished selecting. Again simple to implement and can work in many scenarios.
Multi-Select with token
One common implementation on web and now on mobile is to use a multi-select combo-box. The field looks like a normal text field, but once in focus the user can use a typeahead to find the options available. The user can then select as many items as needed. Items show up on the text box as bubbles. The field gets taller when you add more options than can be displayed in a single row. One common example is composing a new email in gmail and selecting the user.
Background
- Can work with large sets of options
- User needs to know what they are looking for
An extension of this solution is to display all the available choices when the field is in focus. Depending on the size of the list, this might not useful to the user. It also might cause performance issues (if data is not paginated). For example, if the list is thousands of items, then showing the list right away might not be very useful to the user.
In my opinion, this solution feels awkward on mobile especially once you have added one person. Also, once you have added a couple of people the input grows and the list below ends up taking half the screen.
Unlike the previous example, this implementation is more clean and clear. You can type to search for a user and see the options available. Once you select the person, you can clear the search and can see the list of people invited. You can also remove them easily. This solution has an extra wrinkle to it. Clicking on the plus sign, takes you to a full list to select multiple people at once.
“Dual-list or List-builder”
With this element you select an item from the list and it’s moved to another list. In a desktop, it is usually moved to a list beside it. On mobile, that’s not really possible.
Here the system is giving feedback to the user about what items have been selected. This is the most complete implementation because the user can see progress and interact with selected items. It’s great for lists that are long and situations where you might select many items. For example, inviting people to an event. Below are two different implementations
The main difference between the two is how you can interact with the selected list. In the first example, a new row is created that you can scroll horizontally to review who will be in the group. For Whatsapp’s use case, that might be fine. I assume most people don’t create groups with many people in them. So scrolling horizontally suffices.
In contrast, a person might invite hundreds of people to a Facebook event. Scrolling horizontally would be really tedious and not very useful. Which is why Facebook gives users a way to view selected users. By clicking on the list, it brings up a modal to show you the selected items. Here you can review, remove items or finish the invite workflow.
Forward thinking examples
During my research I found a couple of different approaches. Their main goal was how to unload cognitive memory as a way to improve user experience. See below for explanation.
… one of the most limited human recourses is cognitive memory. That made me thinking about how we, as a designers, might try to evolve our user’s experience within different directions, including online shopping, pizza ordering, or generally selecting items located in different categories.
While these look impressive I’m still not sure about how well they would perform with an average user. In fact, I did test one of these designs with a user and it wasn’t very clear to them what was going on. I came up with a couple of conclusions from that experiment.
- Inventing new workflows is hard. People expect things to work a certain way. Referring back to cognitive load, one of the reasons we use patterns is because users are already programmed to do something by default. So it’s easier for users to learn and use your app if they recognize the pattern. This is a reason why it’s good to stick to platform guidelines like iOS and Android.
- The other is that when testing a new workflow it’s best to have very high fidelity prototypes. Otherwise, you will be fighting an uphill battle.
These are some multi-select implementations I came across on mobile. Would love to hear of any I missed! Let me know in the comments below.
