Improving the usability of multi-selecting from a long list

Selecting multiple items from a list was never a pleasant task. There are some innovative solutions that work okay on big screens, but usually they are a nightmare to use on mobile devices. Here’s the story of how I found a solution to improve the tag selection for our providers.

Zina Szőgyényi
Jun 13, 2018 · 8 min read

The existing UI solutions

When you search for UI solutions for multi-selecting usually you find similar solutions: give them a drop down that they can both scroll through or search in, and display the items as pills in the input field. Like this.

Scrolling and searching through a long list
Hybrid Dual List with Filter solution from doejo

The problem with searchable multi-select

The list we display to our providers is very long. It contains about 300 items and most of them they are not familiar with. From screen recordings I saw that (1) users scrolled only a few times and then gave up on scrolling through the whole list and then (2) they started searching for what they had in mind.

First idea for improvement

I was seriously considering the “Hybrid Dual List with Filter” solution, as the options are exposed (easier to read) and the selection is clear in list on the right. But how is it mobile friendly? We do develop with a mobile first approach even to our providers, and this solution didn’t fit.

Select your tastes with Foursquare
The before state — watch the size of the scroll bar
The after state — all items exposed

Learnings from this test

I exposed half of our providers to the tag cloud based feature for about a month (due to low traffic), but unfortunately there were no real improvements in (1) picking more relevant tags neither in (2) the speed of finding these tags.

Iteration: the next step is a bit bigger

As my belief towards exposing the options didn’t change I had to deal with bringing in order and pattern into the story. This required some changes in the infrastructure as well. Was it going to be worth it?

Analyzing the result

After exposing half of our providers to the grouped and exposed list of tags vs the multi-select pill box I watched screen recordings to see how well accepted this solution was.

So I had to gather and analyze the data manually.

First I identified the listings created in the control group and the treatment.

A sample of the data set I worked with

And the result was surprising!

The completion of the 2 steps combined in the treatment group was 33% faster then the one step in control group and there were 4 more tags picked in the new version of list. What a great improvement!

The conclusion

Design is contextual. It might be a simple task to pick your home country from a list of 195 items, even if you have to scroll for a while.

Tripaneer Techblog

The Tripaneer technology blog

Thanks to Mário Silva

Zina Szőgyényi

Written by

A Digital Product Designer, traveler with addiction to fitness, based in Ottawa, discovering new places, foods and craft beers

Tripaneer Techblog

The Tripaneer technology blog

More From Medium

More from Tripaneer Techblog

Related reads

Also tagged Usability

H Locke
Mar 26 · 5 min read

176

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade