Skip to content
UX Atlas
Plate PAT·004 · PatternGrid F2 · Rev. 2026-09-14

Filtering

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

PatternCraft conventionIntermediate

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 plate
  1. 1Definition
  2. 2What a good filtering experience does
  3. 3Filters that do not strand people
  4. 4Matching the control to the attribute
  5. 5Recovering from zero results
  6. 6Counts, chips and the option that leads nowhere
  7. 7In practice
  8. 8Commonly confused with
  9. 9Local chart
  10. 10Continue from here

Reach for this when

  • Result sets are large enough that browsing is impractical.
  • Items have well-structured attributes.
  • Users arrive with partial criteria.

Common mistakes

  • Filters that produce empty results with no recovery.
  • Applied filters not visible.
  • Filter state lost on navigation.
  • Too many facets exposed at once.
  • Offering facets generated from the whole catalogue rather than from the current result set, which produces options that lead to nothing.

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.

Filters that do not strand people

Do

  • Show the applied filters as removable chips, above the results.
  • Show counts per option, and disable or hide options that would return nothing.
  • Keep filter state in the URL, so results can be shared and restored.
  • Update the result count as filters change, so the effect is visible.

Do not

  • Let a combination produce zero results with no way back except clearing everything.
  • Hide the applied filters behind a panel the reader has to reopen to check.
  • Reset filters on navigation back into the list.
  • Apply a filter silently on arrival without saying so.

Matching the control to the attribute

AttributeControlWatch out for
A handful of known categoriesCheckbox list, all visibleOrdering by count when readers expect alphabetical.
Dozens of values, such as brandCheckbox list with a search box and a show-moreA collapsed list whose first five hide the one they want.
A continuous range, such as priceTwo inputs, with a slider as an optional extraSlider-only controls, which are imprecise and hard to use by keyboard.
DatesPresets first, custom range secondForcing a date picker for what is usually last 7 days.
A single either-orOne toggle, labelled with what it includesToggles labelled with a negative, such as hide unavailable.

Recovering from zero results

The reader made four deliberate choices and got nothing. The interface, not the reader, has to take the next turn.

  1. 1

    Name the filter that emptied the set

    Track which constraint took the count to zero, and say so in plain words.

  2. 2

    Offer to drop just that one

    One control, restoring the previous non-empty result, rather than a clear-all that discards work.

  3. 3

    Show the nearest alternative

    The count if the price range widened, or the next size up. A number makes the trade-off concrete.

  4. 4

    Keep the filters visible

    The reader needs to see what is applied to reason about what to change.

  5. 5

    Prevent the repeat

    Disable or annotate options that would return nothing, generated from the current result set rather than the whole catalogue.

Counts, chips and the option that leads nowhere

AppliedBrand: Acme ×In stock only ×Clear allSizeSmall24Medium112Large8Extra large0144 resultsAn option that would return nothing is disabled with its zero shown, rather than offered and then apologised for.
Counts per option turn filtering into a decision with visible consequences, and they remove the dead end before the reader can reach it.

In practice

  1. i.

    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.

  2. ii.

    Zero results, and whose fault

    Dead ends

    Four filters combining to nothing is a design failure, not a reader error. Showing which filter removed the last results, and offering to drop it, turns a dead end into a next step.

Commonly confused with

Close neighbours that get substituted for each other. The difference is stated first, then the condition that picks one over the other.

vs.

Search

Pattern

Free-text entry that retrieves matches across the whole set.

Key difference

Search starts from nothing and asks the reader to express intent in words. Filtering starts from everything and removes what does not match a stated attribute. One finds a needle, the other shrinks a haystack.

Use Filtering when

  • The reader is browsing and does not have a name in mind.
  • The attributes are known, finite and worth exposing.
  • The result should still be a set, not a single answer.

Use Search when

  • The reader knows what they want and can name it.
  • The set is too large or too varied to browse.
  • The vocabulary is the reader's, not a fixed set of attributes.

Learn about Search

vs.

Sorting

Pattern

Reordering the same items by an attribute such as date or price.

Key difference

Filtering changes which items are in the set. Sorting changes only their order, and nothing ever leaves. Readers reach for sort when they mean filter, and then wonder why the list is still so long.

Use Filtering when

  • There are too many results to work through.
  • Whole categories are irrelevant to this reader.
  • The count afterwards is information worth showing.

Use Sorting when

  • Every item is still a candidate.
  • The question is which is best, newest or cheapest.
  • The reader wants a ranking rather than a shorter list.

Learn about Sorting

Local chart

PAT·004 · Region III · Grid F2

This entry and the entries it is stated to connect with. Each line is labelled with what the connection means.

Progressive DisclosurePRIN·003 · PRINCIPLES BEHIND THISChoice OverloadPSY·002 · PRINCIPLES BEHIND THISBadge and TagCMP·023 · OFTEN USED WITHCheckboxCMP·005 · OFTEN USED WITHData TableCMP·025 · OFTEN USED WITHPaginationCMP·021 · OFTEN USED WITHSliderCMP·008 · OFTEN USED WITHActivity TimelinesPAT·019 · OFTEN USED WITHDashboardsPAT·028 · OFTEN USED WITHEmpty StatesPAT·010 · OFTEN USED WITHInfinite Scroll and PaginationPAT·021 · OFTEN USED WITHAutocomplete and TypeaheadPAT·003 · ALTERNATIVE APPROACH

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.

  • Autocomplete and TypeaheadPAT·003 · Pattern

    Typing narrows faster when the vocabulary is known. Filters narrow better when it is not.

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.