6 UX Tips for Designing Filters

September 12, 2022
6 UX Tips for Designing Filters

Filters are UI elements that users can interact with to narrow their search results on apps and websites. Designers can include them in search interfaces so that users can help themselves find what they’re looking for more efficiently. However, they can be tricky to design.

Here are six UX tips for designing filters.

1. Use Suitable UI Elements

When it comes to including filters, it’s important to choose ones that are suitable. Generally, the choices are checkbox, radio or dropdown (in addition to the standard search input of course).

Checkboxes can be used to filter results with a specific attribute (e.g., Airbnbs with Wi-Fi). In this scenario, the checkbox being unchecked wouldn’t mean that the results would only show Airbnbs without Wi-Fi, but rather that they would show both. This is how users understand checkboxes to work.

Radios can offer multiple values (unlike checkboxes, which only offer two — checked or unchecked). However, like checkboxes, radios can only accept one value (e.g., “Asia,” “Europe,” or “South America”). Radios with only two values (e.g., “Hotspot on” or “Hotspot off”) are often referred to and designed as toggles (red for “off” or green for “on”).

Dropdowns are more suitable than radios when there are significantly more values for users to choose from, as they help to reduce visual clutter. However, there are some things to keep in mind.

Avoid grouping values (e.g., countries by continent), as this prevents users from skipping to the value that they want via keyboard input. It’s also a great idea to provide aliases for certain values (e.g., using “United Kingdom,” “UK” and “Great Britain” in a list of countries).

A less restrictive alternative to dropdowns is a regular search input with autocomplete, where users can search for whatever they want but suggestions will drop down.

2. Use Placeholders, Labels and Fieldsets

Placeholders, labels and fieldsets are all used for different reasons and can’t be be used interchangeably. While they’re not all mandatory, they should be used correctly (when applicable). Doing so benefits all users, especially those that use a screen reader or are keyboard-only.

  • Placeholder (optional): an example value that hides on focus so that users can input their own value (only applicable on text-based fields)
  • Label (required): a short description of the field
  • Fieldset (recommended for complex forms): a set of fields that are related and described by a header (or “legend”)

3. Reduce Visual Clutter

Filtering uses up huge amounts of cognitive energy, and interfaces that are too cluttered can leave users feeling overwhelmed. The experience should be minimal, clear and users should be able to filter their results within a few clicks.

It’s best to display the most common filters upfront and tuck the less common ones away inside a “More filters” modal or dropdown (that is, if those filters are even necessary).

4. Preselect Default Options

Users typically won’t need to choose a value for every filter (they can be left blank), but for those filters that do require a value, it’s best to pre-select a default option (e.g., on Airbnb, the default option for “Where” is “Anywhere” and “Who” is “1 Adult”). Don’t make users interact more than they need to.

5. Save Users’ Settings

After an unsuccessful search users will likely try again, changing the value of one or two filters. It’s important to save users’ settings to prevent them from having to start over completely. It’s even more important to do this on apps and websites with a high visitor return rate (e.g., flight booking websites that users may check several times a day).

In addition, make sure to display any applied filters clearly so that users are aware of how restrictive their current filters are. This is to prevent the accidental omittance of desired results.

6. Use Sympli Handoff to Discover Potential Pain Points

Getting everything right the first time is an impossible feat. Use Sympli Handoff to request feedback from stakeholders, iterate and eventually hand off the final version to developers. In addition, consider usability testing to qualitatively and quantitatively test how well users are able to find what they’re looking for.

Moving from
Handoff
 InVision
and looking for the best Handoff? Try
Handoff
Sympli
.