UX Patterns Guide
UI + UX Search, Browse, And Discovery established

Faceted search

Expose filter dimensions near the result set, let users combine constraints, and make applied filters visible and removable.

Open in lab Compare alternatives
Decision first

Choose this pattern when the problem matches

Use when

  • The data set has structured attributes users understand.
  • Users need to explore, compare, or progressively narrow results.

Avoid when

  • The result set is small enough that filtering adds complexity.
  • The available facets are system-centric rather than user meaningful.

Problem it prevents

Users need to narrow a large result set using multiple meaningful attributes.

Pattern anatomy

What a strong implementation has to make clear

User need

A result set is too large to scan directly.

Pattern promise

Expose filter dimensions near the result set, let users combine constraints, and make applied filters visible and removable.

Required state

Unfiltered state with result count and available facets.

Recovery path

Showing filters that lead to empty results without recovery.

Access contract

Applied filters should be announced and removable without pointer-only interaction.

Quality bar

The difference between expert and weak execution

Strong implementation

Specific, visible, recoverable

  • Facet groups, counts, selected chips, result count, and clear controls are visually grouped.
  • Filters use consistent spacing and avoid heavy borders around every option.
  • Users can add, remove, combine, and clear facets while understanding result count changes.
  • No-results recovery identifies which filters caused the dead end.
Weak implementation

Vague, hidden, hard to recover from

  • Facet panel overwhelms the results with dense unchecked options.
  • Selected filters are hidden inside collapsed menus.
  • Changing filters resets unrelated query or sort silently.
  • No way to undo one facet without clearing everything.
UI guidance
  • Render filter controls, active chips, counts, result list, clear controls, and no-results state.
  • Keep selected facets visible while results update.
UX guidance
  • Help users progressively narrow a large result set without losing orientation.
  • Support recovery when filter combinations become too restrictive.
Implementation contract

What the implementation must handle

States

  • Unfiltered state with result count and available facets.
  • Filtered state with applied constraints visible.
  • Zero-result state with clear recovery actions.
  • Facet loading or disabled state when counts are recalculating.

Interaction

  • Applying or removing a facet updates the result count and preserves visible applied filters.
  • Users can remove individual filters and clear all filters.
  • Facet labels should be user-facing concepts, not internal system names.

Accessibility

  • Applied filters should be announced and removable without pointer-only interaction.
  • Filter groups need clear labels and state.
  • All filter controls must be keyboard reachable.
  • Applying or clearing filters should preserve a predictable focus position.

Review

  • Can the user see exactly why the current results are being shown or excluded?
Interactive lab

Inspect the states before you copy the pattern

Narrow a result set

Apply facets, inspect counts, remove filters, and recover from zero results.

Faceted search
Interactive demo is ready

Launch the live UI/UX lab when you want to inspect states, keyboard behavior, and common failure modes.

State To Inspect

Unfiltered state with result count and available facets.

Keyboard / Access

All filter controls must be keyboard reachable.

Avoid Generating

Using internal database labels as facets.
Evidence trail

Source-backed claims behind this guidance

MOJ Design System Filter

Ministry of Justice - checked

MOJ filter guidance supports visible selected filters, clear filters, apply behavior, and filtering lists or search results.

Carbon Design System Filtering Pattern

IBM Carbon Design System - checked

Carbon filtering guidance supports multi-category filters, batch or instant updates, visible applied-filter indicators, and reset behavior.

GOV.UK Design System Patterns

Government Digital Service - checked

Service patterns distinguish task-oriented narrowing and recovery from raw visual filtering.

Full agent/debug reference

Problem Context

  • A result set is too large to scan directly.
  • Items have structured attributes that users understand and can combine.

Selection Rules

  • Choose faceted search when users need to progressively narrow a large set by multiple attributes.
  • Prefer basic search when users usually know the exact item or query.
  • Prefer category browse when users are exploring broad groups rather than combining constraints.

Required States

  • Unfiltered state with result count and available facets.
  • Filtered state with applied constraints visible.
  • Zero-result state with clear recovery actions.
  • Facet loading or disabled state when counts are recalculating.

Interaction Contract

  • Applying or removing a facet updates the result count and preserves visible applied filters.
  • Users can remove individual filters and clear all filters.
  • Facet labels should be user-facing concepts, not internal system names.

Implementation Checklist

  • Show applied filters near the results.
  • Provide clear-one and clear-all actions.
  • Keep the result count visible after filtering.
  • Prevent combinations from becoming dead ends without recovery.

Common Generated-UI Mistakes

  • Using internal database labels as facets.
  • Hiding applied filters in a collapsed drawer.
  • Letting filters produce zero results without a path to broaden.

Critique Questions

  • Can the user see exactly why the current results are being shown or excluded?
Accessibility
  • Applied filters should be announced and removable without pointer-only interaction.
  • Filter groups need clear labels and state.
Keyboard Behavior
  • All filter controls must be keyboard reachable.
  • Applying or clearing filters should preserve a predictable focus position.
Variants
  • Sidebar facets
  • Filter drawer
  • Filter chips
  • Batch-applied filters
  • Instant filters

Verification

Last verified: