UX Patterns Guide
Back to compare picker

Filter panel vs Faceted search vs No-results recovery

Prefer a filter panel when the main design problem is where grouped filters live, how users apply them, how collapsed or mobile panels show active counts, and how results stay connected to the controls.

Filter panel live exampleFaceted search live exampleNo-results recovery live example
Learn the decision

Match the interaction to the person's task

Prefer a filter panel when the main design problem is where grouped filters live, how users apply them, how collapsed or mobile panels show active counts, and how results stay connected to the controls.

Filter panel

Use it when: Users need to narrow the current search results, browse results, table, card grid, or list by multiple criteria.

Make this state clear: Applied state with active-filter count, result count, and removable applied criteria near the results.

Observe the result: A user selects Status: Open and Type: Appeal, applies the batch, lands back at the result summary, and sees 12 records with both criteria removable.

Study the full pattern →

Faceted search

Use it when: The data set has structured attributes users understand.

Make this state clear: Unfiltered state with result count and available facets.

Observe the result: Users can add, remove, combine, and clear facets while understanding result count changes.

Study the full pattern →

No-results recovery

Use it when: Search, browse, or filter controls can produce an empty result set.

Make this state clear: Zero-result state that preserves the user's criteria.

Observe the result: Users can remove one filter, clear all, edit query, or try suggested alternatives.

Study the full pattern →

Practice the judgment: Imagine this situation: Instant filtering reloads the result list after every checkbox and moves focus before users finish selecting related criteria. Write the person's goal, choose one of these patterns, and show the state that helps the person continue. Use the decision rules and source trail below to explain your choice.

Review the underlying principle →

Decision dimensions

Dimension Filter panelFaceted searchNo-results recovery
UI or UX UI + UX - Grouped filter control panel for narrowing a current result setUI + UX - Filter and results exploration surfaceUI + UX - Search recovery state
UI guidance Render filter categories as labelled form controls in a panel adjacent to the result set on wide layouts, with a visible result count and active-filter summary near the results.Keep selected facets visible while results update.Render zero-result copy, active criteria, remove-filter actions, and alternative suggestions.
UX guidance Use a filter panel to help users narrow the current list or search result set while preserving orientation, search query, sort order, pagination context, and selected values.Support recovery when filter combinations become too restrictive.Help users recover when their own search or filters excluded all results.
Good UI A desktop search page shows a left filter panel with Status, Type, and Date groups, while active chips and the result count sit above the results.Facet groups, counts, selected chips, result count, and clear controls are visually grouped.Zero-result state shows query/filters, result count, and clear or broaden actions.
Bad UI A panel mixes filter options, navigation links, sort controls, and saved views under one Filters heading.Facet panel overwhelms the results with dense unchecked options.Huge empty state that hides active filters.
Good UX A user selects Status: Open and Type: Appeal, applies the batch, lands back at the result summary, and sees 12 records with both criteria removable.Users can add, remove, combine, and clear facets while understanding result count changes.Users can remove one filter, clear all, edit query, or try suggested alternatives.
Bad UX Applying a filter silently resets the query, sort order, current page, and view density.Changing filters resets unrelated query or sort silently.Telling users nothing exists when filters caused the state.
Best fit Users need to narrow the current search results, browse results, table, card grid, or list by multiple criteria.The data set has structured attributes users understand.Search, browse, or filter controls can produce an empty result set.
Avoid when The result set is small enough that scanning is faster than filtering.The result set is small enough that filtering adds complexity.The state is caused by an error rather than valid empty results.
Required state Applied state with active-filter count, result count, and removable applied criteria near the results.Unfiltered state with result count and available facets.Zero-result state that preserves the user's criteria.
Accessibility burden Use semantic form controls with fieldsets, legends, labels, and accessible names for filter categories and values.Filter groups need clear labels and state.Announce result-count changes where search results update dynamically.
Common misuse Using a filter panel as a navigation drawer that sends users to different pages instead of narrowing the current data set.Using internal database labels as facets.Resetting all criteria automatically.

Filter panel

UI or UX
UI + UX - Grouped filter control panel for narrowing a current result set
UI guidance
Render filter categories as labelled form controls in a panel adjacent to the result set on wide layouts, with a visible result count and active-filter summary near the results.
UX guidance
Use a filter panel to help users narrow the current list or search result set while preserving orientation, search query, sort order, pagination context, and selected values.
Good UI
A desktop search page shows a left filter panel with Status, Type, and Date groups, while active chips and the result count sit above the results.
Bad UI
A panel mixes filter options, navigation links, sort controls, and saved views under one Filters heading.
Good UX
A user selects Status: Open and Type: Appeal, applies the batch, lands back at the result summary, and sees 12 records with both criteria removable.
Bad UX
Applying a filter silently resets the query, sort order, current page, and view density.
Best fit
Users need to narrow the current search results, browse results, table, card grid, or list by multiple criteria.
Avoid when
The result set is small enough that scanning is faster than filtering.
Required state
Applied state with active-filter count, result count, and removable applied criteria near the results.
Accessibility burden
Use semantic form controls with fieldsets, legends, labels, and accessible names for filter categories and values.
Common misuse
Using a filter panel as a navigation drawer that sends users to different pages instead of narrowing the current data set.

Faceted search

UI or UX
UI + UX - Filter and results exploration surface
UI guidance
Keep selected facets visible while results update.
UX guidance
Support recovery when filter combinations become too restrictive.
Good UI
Facet groups, counts, selected chips, result count, and clear controls are visually grouped.
Bad UI
Facet panel overwhelms the results with dense unchecked options.
Good UX
Users can add, remove, combine, and clear facets while understanding result count changes.
Bad UX
Changing filters resets unrelated query or sort silently.
Best fit
The data set has structured attributes users understand.
Avoid when
The result set is small enough that filtering adds complexity.
Required state
Unfiltered state with result count and available facets.
Accessibility burden
Filter groups need clear labels and state.
Common misuse
Using internal database labels as facets.

No-results recovery

UI or UX
UI + UX - Search recovery state
UI guidance
Render zero-result copy, active criteria, remove-filter actions, and alternative suggestions.
UX guidance
Help users recover when their own search or filters excluded all results.
Good UI
Zero-result state shows query/filters, result count, and clear or broaden actions.
Bad UI
Huge empty state that hides active filters.
Good UX
Users can remove one filter, clear all, edit query, or try suggested alternatives.
Bad UX
Telling users nothing exists when filters caused the state.
Best fit
Search, browse, or filter controls can produce an empty result set.
Avoid when
The state is caused by an error rather than valid empty results.
Required state
Zero-result state that preserves the user's criteria.
Accessibility burden
Announce result-count changes where search results update dynamically.
Common misuse
Resetting all criteria automatically.
Decision rules
  • Prefer a filter panel when the main design problem is where grouped filters live, how users apply them, how collapsed or mobile panels show active counts, and how results stay connected to the controls.
  • Prefer faceted search when the design problem is the broader discovery model: which attributes become facets, how combinations narrow a large catalog, and how users understand the result universe.
  • Prefer no-results recovery when filtering has already produced an empty or misleading result set and the user needs explanation, preserved criteria, and a direct path to loosen constraints.
  • Use a persistent side filter panel on wide layouts when users need frequent edits across several categories while still comparing result cards or result rows.
  • Use a collapsed accordion, drawer, or full-screen panel on small layouts only when the closed state still shows the number of active filters and returns users to the result summary after apply.
  • Use batch apply when several categories can change together, results are expensive to refresh, or instant reloads would move content while users are still selecting options.
  • Use instant filtering only when each selection is lightweight, the result count updates predictably, and clearing an applied chip or single option is expected to take effect immediately.
  • Do not use a filter panel as a sort control: sorting changes order while filtering excludes items, so sort state must stay separate from applied filter state.
  • Do not rely on filter chips alone when users still need to discover available categories; chips summarize or remove active filters, while the panel exposes selectable criteria.
  • Do not hide selected criteria only inside the panel; show active filters, count, and reset controls near the result set so users understand why they are seeing the current results.
Inspect live examples
Filter panelFaceted searchNo-results recovery
Failure modes
  • A closed mobile filter button says Filters but gives no active count, so users cannot tell that three filters are excluding results.
  • A batch panel changes checkbox state without applying, while the result count still describes the previous query and gives no unsaved-change cue.
  • Instant filtering reloads the result list after every checkbox and moves focus before users finish selecting related criteria.
  • The clear-all action resets search, sort, pagination, and view mode even though the user only asked to clear filters.
  • A filter panel is used as local navigation and links users to unrelated pages instead of narrowing the current result set.
  • A zero-result state replaces the result list without preserving the active filters that caused the empty set.

Saved items