A Guide to Designing Better Filter UI Components

Making input selection easier

UX Movement

--

Selecting input on filters can often incur a high cognitive load on users. You can do a lot to improve the input selection experience. Here are some ideas that’ll help improve your filter UI.

Data Graph Range Sliders

When users select a range to filter, they usually aren’t sure what a good min and max value is. Rather than setting values that are out of range, you can give them data to inform their selection.

For instance, displaying a bar graph of the most common prices helps the user filter within a reasonable range. Not only that, but you can also tell them what the average cost is. All this will help them get better results.

Providing text fields with the range slider is also helpful. This way, users can type the exact value they want instead of fiddling with the slider.

Select Cards

A single-option label doesn’t always provide enough context. Sometimes it’s necessary to provide additional information for each option. A select card allows you to add context to each option so that users can choose the right one.

The large area of the card allows users to make selections easier. It also makes the cue of the selected card clearer.

Select Chips

Using dropdowns on a modal sheet is not a good idea because it would place an overlay on top of another. Instead, use a select chip component for each option and lay them horizontally.

Doing this allows users to see all the options at a glance without having to fiddle with a dropdown. As a result, you’ll decrease the user’s selection time for faster task completion.

Iconic Select Cards

You can provide icons on selects cards to help users make selections. Sometimes you might…

--

--

UX Movement

There’s a good and bad way to design user interfaces. Our publication shows you which way gives the best user experience. https://uxmovement.substack.com