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

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.Render filter controls, active chips, counts, result list, clear controls, and no-results state.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.Help users progressively narrow a large result set without losing orientation.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 filter drawer closes with no active count, leaving users unaware that filters are still hiding records.Facet panel overwhelms the results with dense unchecked options.No results text alone with no criteria shown.
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.There is genuinely no possible next action and the system should instead explain availability.
Required state Default state with no user-applied filters and an explicit result count.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.Applied filters should be announced and removable without pointer-only interaction.Announce result-count changes where search results update dynamically.
Common misuse Hiding active filters inside a closed panel with no count, chips, or result-state summary.Using internal database labels as facets.Showing a blank list with no explanation.

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 filter drawer closes with no active count, leaving users unaware that filters are still hiding records.
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
Default state with no user-applied filters and an explicit result count.
Accessibility burden
Use semantic form controls with fieldsets, legends, labels, and accessible names for filter categories and values.
Common misuse
Hiding active filters inside a closed panel with no count, chips, or result-state summary.

Faceted search

UI or UX
UI + UX - Filter and results exploration surface
UI guidance
Render filter controls, active chips, counts, result list, clear controls, and no-results state.
UX guidance
Help users progressively narrow a large result set without losing orientation.
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
Applied filters should be announced and removable without pointer-only interaction.
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
No results text alone with no criteria shown.
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
There is genuinely no possible next action and the system should instead explain availability.
Required state
Zero-result state that preserves the user's criteria.
Accessibility burden
Announce result-count changes where search results update dynamically.
Common misuse
Showing a blank list with no explanation.
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.