Choose patterns by need
A category chooses a direction; a filter narrows within it. With only a few items, a direct list may be easier.
Search, categories and product lists
Help shoppers find a relevant product and return to the same results.
Observe the task
Observe whether participants find an item meeting every need, not just how many cards they click. For measurement: relevant selections per eligible search/list visitor.
Concepts and examples
Store category navigation ↗
Small catalogs often benefit from a direct product list. Larger catalogs can use category hubs to help customers choose a direction.
Product search and zero results ↗
An empty search result should offer relevant ways forward. Shoppers need to revise their search without restarting their visit.
Search types: names, SKUs, attributes and help ↗
A query may name a product, a feature or a question about the store. Provide a relevant destination for each.
Editable autocomplete with keyboard support ↗
Let shoppers navigate suggestions with the keyboard and edit the active suggestion before submitting.
Collection filters and variant matching ↗
Show applied filters and result counts. Allow multiple choices within a filter group so, for example, either of two colors can match.
Mobile filters: apply and cancel ↗
A separate mobile filter interface should let shoppers make several selections and apply them together with a clear, easily reachable button.
Product cards: price and decision attributes ↗
Show prices and key attributes on the card. Group variants into one product card and preserve the shopper’s place when returning from a product.
Breadcrumbs and return to product lists ↗
Separate category hierarchy from the previous results list. A return action should preserve query, filters and sort.
Product sorting with reliable data ↗
Sorting should fit the shopping task. Price, recency, popularity and ratings each need their own data.
Homepage: communicate the actual catalog ↗
Show several relevant catalog entry points. A large campaign image should not make the whole store look like one product line.
Navigation labels shoppers understand ↗
Use product and need-based navigation labels. Creative campaign names need an explanation of what the link contains.
Category landing page or direct product list? ↗
A category landing page should help shoppers choose a meaningful subgroup, with a clear route to all products.
Mobile menus with clear product entry points ↗
Make product categories easy to find when opening the menu. Closing should be as easy as opening.
Visible search with an editable query ↗
Give search a label, submit button and the previous query. Shoppers should refine a search without starting over.
Search synonyms without misleading matches ↗
Map shopper vocabulary to documented product types and attributes. Synonyms should bridge language, not invent functionality.
Typos: suggest corrections and keep the query ↗
Offer a recognizable correction for known typos. Retain the original query until the shopper chooses it.
Search scope: products, help or all content ↗
Show what the search covers. Let shoppers widen its scope without losing the query.
No results with useful recovery paths ↗
Explain zero results without blaming the shopper. Offer correction, a wider scope or removal of constraints.
Filters: OR within an attribute, AND across attributes ↗
Brown or black can both be acceptable colors. Size L and stock status must still apply to the same variant.
Applied filters: overview and individual removal ↗
Show active constraints above results with readable labels. Let shoppers remove one choice without resetting everything.
Filter counts and zero matches without losing choices ↗
A facet count should describe its effect in the current context. Keep selected zero-count values removable.
Incremental loading and returning to the product list ↗
Preserve filters, sorting and position when returning from a product. Incremental loading needs a recognizable end.
Check this too
Zero results, false variant matches, lost list context and slow filters. More product-page visits are not necessarily better.
Create a concrete measurement plan ↗