Skip to content
UX Atlas
PatternCraft conventionIntermediate

Filtering

Narrowing a large set by attributes, which is what makes large catalogues navigable at all.

Definition

Filtering reduces a result set by applying attribute constraints. Faceted filtering exposes multiple independent attributes simultaneously and is the standard approach for catalogues and data sets.

Craft convention. True because the industry converged on it. Breaking it costs familiarity, not correctness.

On this page
  1. Definition
  2. What a good filtering experience does
  3. In practice
  4. Continue from here

What a good filtering experience does

  • Shows applied filters as removable chips, so the current state is always visible.
  • Shows result counts per option, and disables or hides options that would return nothing.
  • Updates results immediately on desktop, and batches behind an Apply button on mobile where the results are not visible.
  • Puts filter state in the URL so results can be shared and restored.
  • Offers a single clear-all action.
  • Keeps the filter panel reachable by keyboard and announces the updated result count.

In practice

Filters in the URL

Ecommerce and data tools

Encoding filter state in query parameters makes results shareable, bookmarkable and restorable on back navigation. It is a small implementation decision with a large usability payoff.

Continue from here

Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.

Applies when you are designing

A DashboardA Data TableA Search ExperienceAn Ecommerce ExperienceAn Enterprise Workflow

Principles behind this

The reasoning this solution is an application of.

Often used with

These usually appear in the same screen or the same decision.

Alternative approach

A different answer to the same problem, with a different cost.

Check your work

Review passes that test whether this was done properly.

Short definition

The one-paragraph version, for when that is all you need.