Search and Filter UX Contract

Large Theory

Search answers what I am looking for, filters answer what I want to exclude, facets answer which explorable attributes exist in this result set, and sorting answers what I want to see first. Many library pages fail because these controls exist separately but do not explain the current result set together. Healthy search/filter UX treats query, scope, facets, active chips, count, sort, matched excerpt, empty recovery, and mobile tray as one state contract.

Small Points

1. Search fields need scope: global site, current library, current category, current table, or current project. Placeholder and result copy change by scope.
2. Active filters appear as chips, can be removed one by one, and include reset all; constraints hidden in a sidebar still appear near results.
3. Facet counts align with the current query and filters. Disabled or hidden options follow a clear rule so counts do not appear broken.
4. Result cards show matched excerpt or matched field so users understand why each item was recalled.
5. Empty results provide paths such as changing query, removing filters, viewing neighboring categories, creating content, or reporting a gap.
6. Mobile can use a filter tray, but both open and closed states expose result count, current constraints, and clear entry.

Design Judgment

The contract works when users can copy a URL to reproduce the same result set, see active conditions, understand why results match, and recover from empty results.

Implementation Notes

Persist q, category, tag, type, license, status, sort, and page in the URL. Server and client share one query parser. The results header shows count, scope, sort, and active chips. Search generates matched excerpts. Empty states show current constraints plus reset/suggestion actions. Mobile filter tray is an accessible dialog; after closing, focus returns to the trigger, and the trigger label includes active count.

Counterexamples/Risks

Search input changes without URL updates; three sidebar filters are active but invisible in the result header; result count is missing; empty state only says No results; sort changes do not update URL; mobile filter drawer closes and users cannot tell whether filters applied; facet counts jump on every keystroke without loading or explanation.

Case Study

NN/g distinguishes filters and facets and explains that facets organize filtering around multiple object attributes. NN/g's mobile faceted search guidance uses a tray to handle the small-screen conflict between results and controls. A List Apart treats faceted navigation as a master pattern that affects information architecture. Carbon's Search pattern says search placement depends on application structure and search scope, and Carbon Empty states emphasize helpful next steps when no data appears. The reusable lesson is that search and filtering are not a set of controls; they are an explainable, recoverable, shareable result state.

Source Links

NN/g Filters vs. Facets: https://www.nngroup.com/articles/filters-vs-facets/ NN/g Mobile Faceted Search: https://www.nngroup.com/articles/mobile-faceted-search/ A List Apart Faceted Navigation: https://alistapart.com/article/design-patterns-faceted-navigation/ Carbon Search Pattern: https://carbondesignsystem.com/patterns/search-pattern/ Carbon Empty States: https://carbondesignsystem.com/patterns/empty-states-pattern/