Search & Filtering

Search is navigation for people who know what they want. For the IA-level view (search systems, query-log mining, scent) see Information Architecture; this file covers the interaction patterns. Baymard's e-commerce search benchmarks find most implementations mediocre: in their testing, users tried roughly 3–5 query reformulations before abandoning a site that returned nothing useful.

Visible, not buried: on content/commerce sites where search is a primary strategy, show an open input field, not just an icon (NN/g: an icon-only "magnifying glass" hides search and adds a tap). Icon-only is acceptable on mobile app bars where convention is strong.
Placement: top of page, right or center — where convention has taught users to look; don't innovate on location. Width: NN/g's long-standing guideline is ~27 characters visible — truncated queries hide typos.
Placeholder = scope hint, not label: "Search products, brands…" tells users what's searchable; keep a persistent label/aria-label for accessibility (see Forms & Input on placeholder pitfalls).
Scope indication: if search covers only part of the site (one store, one project, docs only), say so at the input — silent scoping is a top cause of "search is broken" complaints. NN/g advises playing down advanced search and scoping controls: most users ignore or misuse them.
Submit on Enter AND a visible button; keep the query in the box on the results page (Baymard: a significant share of sites clear it, killing iteration).

Autosuggest / autocomplete

Baymard finds autocomplete nearly universal on major commerce sites but only ~19% get the details right; its job is guiding query formulation.

Query suggestions vs. result previews: suggestions ("running shoes → in Men's") teach vocabulary and scope; result previews (product with image/price) shortcut to an item. Mix them but visually separate the groups and label them; don't let 2 result previews crowd out suggestions.
Keep the list short (Baymard: no scrollbars in the dropdown — show a handful at natural size); respond fast (~sub-200 ms feels attached to typing — convention, not a lab threshold). Highlight the differing part of each suggestion, so scanning reads what's new, not the prefix.
Keyboard support: ↑/↓ to move, Enter to accept, Esc to dismiss, typed text preserved when arrowing back to the input; follow the WAI-ARIA combobox pattern so screen readers announce options.
Suggest corrections, not embarrassments: never autosuggest offensive or sensitive completions; curate the suggestion source.

Results page

Scent-rich snippets: titles + snippets must differentiate results (information-foraging: users pick the strongest scent). Show the attributes users decide on — price, rating, date, thumbnail — and bold the matched terms.
Sorting: default to relevance; offer user-meaningful sorts (price, newest, rating) and label the active one. Never default a keyword search to alphabetical.
Show result count and interpreted query ("312 results for shoes"); after auto-correction, "Showing results for X. Search instead for Y" keeps the user in control.
Zero results is a design surface: Baymard found ~9 in 10 mobile commerce "no results" pages are context-free dead ends. Recover with: spell-corrected retry, broadened/partial-match results clearly labeled, popular categories, and a path to browse — never a bare "0 results."

Faceted filtering

Baymard's filtering benchmark (published via Smashing Magazine, 2015, and updated since) found only ~16% of major e-commerce sites offered a genuinely good filtering experience, and roughly a third were bad enough to harm product finding. Recurring findings:

Filter what you display: users expect a filter for every attribute shown on list items (price, size, rating…) and for category-specific specs (RAM for laptops, sleeve length for shirts); many sites still ship only generic site-wide filters.
Show result counts per filter value ("Blue (34)") — Baymard rates hit counts among the highest-impact filter UI improvements; they set expectations and prevent zero-result filter combinations.
Applied vs. batch application: applying each filter instantly (interactive) is the desktop default users expect; batch selection with an explicit "Apply"/"Show N results" button works better in mobile overlays and on slow catalogs where every change costs a reload. Pick one model per surface and make state obvious.
Keep applied filters visible and removable — as chips/pills above the results with individual × and a "Clear all". Baymard repeatedly finds a large minority of sites hide active filters, so users can't diagnose why results look wrong.
Multiple values within a facet = OR, across facets = AND ("Blue OR Green" shirts, AND "under $50"); sites that force single-select within a facet cause abandonment.
Mobile: filters in a full-screen overlay or bottom sheet, opened from a sticky "Filter & Sort" trigger that shows the active-filter count; desktop keeps the persistent left sidebar. Truncate long value lists ("Show more") but never hide the values users filter by most.

Query understanding

Label maturity honestly when recommending these:

Table stakes (mature): case/plural/word-form normalization, typo tolerance (edit-distance), synonym mapping — Baymard found 27% of desktop commerce searches fail simple product-type synonyms ("blow dryer" vs. "hair dryer") and ~2/3 of sites once demanded exact site jargon. Mine zero-result logs to feed the synonym list.
Mature but tuned: handling symptom/slang/thematic queries ("waterproof jacket for hiking"), non-product queries (returns, order status — route them, don't zero-result them).
Emerging (label as such): semantic/vector and hybrid retrieval is now standard in commercial engines and genuinely helps long, natural-language queries, but still needs relevance tuning and evaluation; LLM-generated direct answers over your content add hallucination and attribution risk — keep them clearly distinguished from retrieved results and cite sources.

Federated search, history & privacy

Federated search (one box across products, docs, help, people…): group results by source with labeled sections and "see all N in X" links rather than interleaving unlike types into one ranked list; let a dominant intent (e.g., products in a store) take most of the space (Morville & Callender's Search Patterns catalogs these layouts).
Recent searches/history speed re-finding but leak intent on shared screens. Conventions: show only on focus of an empty box, cap the list, per-item delete plus "clear all," no cross-surface sync of sensitive queries without notice, and respect private/incognito modes.

Sources

Baymard Institute — e-commerce search & filtering research (baymard.com/research/ecommerce-search; baymard.com/learn/ ecommerce-filter-ui; "9 UX Best Practice Design Patterns for Autocomplete Suggestions").
Holst, C. (Baymard) via Smashing Magazine — "The Current State of E-Commerce Filtering" (2015); "…E-Commerce Search" (2014).
Nielsen Norman Group — "Search: Visible and Simple"; "The Magnifying-Glass Icon in Search Design" (nngroup.com).
Morville, P. & Callender, J. (2010). Search Patterns. O'Reilly.
Pirolli, P. & Card, S. (1999). "Information foraging." Psychological Review, 106(4) — scent basis for snippets.
W3C WAI-ARIA Authoring Practices — combobox/autocomplete pattern.