A Guide to Designing Better Filter UI Components

Making input selection easier

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…