A lot of times when we are looking for something we are using filters to speed up the process of getting to the desired results.

Think of searching for apartments, houses for your next trip on Airbnb or think of filtering for items in multiple categories on Amazon, like Electronics and Gardening or just looking for a movie in multiple genres like Crime, Drama and Thriller. Netflix tonight?

These are inclusive filters which translate to multiple value selections on the UI.

You could get away with having separate filters, like one for each selectable genre, however that corners the user and limits filtering to just two fields. What happens if the user wants to select only one, or more than two? How to do it? Will it break? These are things that arise questions in the user and add anxiety to the mix.

Don’t make your users click through loads and loads of screens. Filtering should be easy, they are doing it to save time. Present options and let them choose at their own leisure.

Multiple select

Based on the select, it is a straightforward solution for presenting a list of selectable options. Make sure to signal selected values, they should look distinctive from non-selected items. If you have two to three items, using a multiple select might not be the best option.

View interactive example

Picking from a hierarchy

This is a more advanced pattern that you can use if there is a basic hierarchy the user needs to work through: like Region, City, Representative. In fact you might be only interested in the Rep and you just want to use the top two levels for filtering.

Whatever the case may be you can think of this as a linked list, where each level is filtered by the one above. Get creative on how you display the selected values on the filtering screen. This example is focusing purely on the selection mechanism.

View interactive example

Inline select

To render an inline select you have a couple of options. You can go with a multi-select enabled segmented control. While normally the segmented control acts as a radiobutton list, which is a single selection UI element, being able to pick multiple options is acceptable.

If you need to display more items, go with a list of 2-way buttons. Think of them as switches fitting into a much smaller space. These buttons act just like the multiple segmented control, they are just styled differently.

View interactive example

Checkbox list

Taking up more screen real estate, the checkbox list is similar to the inline select. Use it in a full-screen or modal view. Both work well and keep the user focused on the task at hand.

View interactive example

If you have more options to show, make the list scrollable.

View interactive example

Be sure to make the selection obvious and consistent. Since the user is picking items on the same level, the selections should look the same. Depending on the number of available options, choose the appropriate solution. Don’t forget that you can mix and match. Experiment and run user tests. See what works best in your app.

If you are looking for quick, no-hassle solutions that can be literally implemented in minutes, check out the products we provide at Mobiscroll.