Design Better Multiselect with a lot of items

Hey guys, here’s my another article on “Design Better”. We all come across different problems while designing for enterprise products, well today we are going to discuss things we can do to design better multi-select component with a lot of items to list. Well everyone has different use cases for using a component, but here are few tips that can help you.

1. Show all the items when there is a small list or a user is not familiar with the items but in case of the long list say around 100 items, you can use a searchable autocomplete dropdown component. e.g users know what state they belong so you can use a searchable dropdown here but what they don’t know is what all categories of your website so display all elements here. Also, know when to show list by default or when to show when the user starts typing.

Foursquare show all the categories you can pick while onboarding

2. Always keep in mind the platform you are designing for desktop or mobile. e.g. for the desktop, you can use dual list box components but this is not good for mobiles.

Using dual list box for desktop

3. Group the data that make for a user easy to find what they are looking for or use hierarchy where a user selects one from parent option that will disclose further child items under that.

Grouping car companies by country make easy for the user to choose

4. Show all selected items upfront or on the top. Show in the form of chicklets or group them and show number so a user knows how many they have selected. Also, give an option to deselect the item.

Watsapp show the selected user while creating a group

5. When there is a huge list of items show limited set at a time, use lazy load or “show more” type of interaction keeping in mind as loading large data can make your system slow. This also decreases the cognitive load of the user.

Show more option when there is a huge list

6. Make sure your user knows its multi-select list. Use appropriate labels or checkbox to tell the user that its multi-select

Medium user label to tell its new user that you can select multiple

7. Use the “select all” option when there is a huge list and also give the user to “clear all” option too.

Using select all option when it is a huge list

8. You can use scroll when required for list boxes. List boxes have low interaction cost and all items are visible upfront so in such scenarios you can use list box with scroll and avoid using the dropdown.

Sephora user scroll in a list box

9. Stacking the items well in most of the use-cases you stack them alphabetically but you can do slight modifications with your list. If you know what is the most famous user choice or default selection you can show them upfront above all.

Facebook shows my past location as default and rest can be searched (Not multi-select)

Conclusion

Again the design is contextual and depends on your use case how you want to design your component, but the final goal is to make it easy and usable for a user to use it, decrease the time taken by a user to choose what he is looking for so he can spend more time on completing the process.

Well, these are my thoughts, feel free to share or ask questions if you have.

That’s all folks, hope these few tips will help you. Happy Designing!!