Search and Filter UX: Designing Catalogs Users Can Navigate

What makes a catalog usable

People arrive at a catalog with one of two strategies: they know what they want and type a query, or they browse, narrowing the range with filters. A good interface supports both and lets people combine them.

Key principles:

• search is visible right away and forgives mistakes;
• filters are built on the attributes people actually choose by;
• selected conditions are always visible and easy to remove;
• every result, even an empty one, suggests a next step.

The search bar

• Placement. In the header, in a prominent spot, consistent across pages. For a store with a large range, show the full field instead of hiding it behind an icon.
• Width. The field should fit a typical query without truncation.
• Placeholder with an example query ("e.g. running shoes"), not just "Search".
• Button and Enter. Submit by key and by button; on mobile, request the right keyboard via type="search" or enterkeyhint="search".

Autocomplete

Suggestions while typing save time and teach people the catalog's vocabulary. Group them:

• queries — popular phrasings;
• categories — "Sneakers in Footwear";
• products — with a thumbnail and price for a quick jump.

Rules: highlight the matching part, support arrow keys and Enter, keep the list reasonably short and never replace the typed text without user action. For accessibility, follow the combobox pattern from the WAI-ARIA Authoring Practices.

Typos, synonyms and keyboard layout

People make mistakes, use abbreviations and switch languages. Search should handle that:

• fuzzy matching for typos;
• synonyms and casual names ("laptop" and "notebook");
• wrong keyboard layout — common in multilingual markets where users switch between Cyrillic and Latin;
• transliteration and search by SKU.

If a query is auto-corrected, say so: "Showing results for 'sneakers'. Search for 'sneakrs' instead?"

Zero-results state

"Nothing found" is the most dangerous page in a catalog. Replace the dead end with a way out:

• show what was searched and suggest a correction;
• suggest removing some filters and point out which one narrows results the most;
• show popular categories or similar products;
• on marketplaces, offer a back-in-stock or new-listing alert.

Filters that would lead to zero results are better shown as disabled in advance, or with a result count next to each value.

Facets

Faceted filters are groups of attributes: brand, size, price, color, availability.

Tips:

• Facet order should follow what matters for choosing in that category, not be identical everywhere.
• Collapse long lists to a few values with a "Show all" button.
• Decide whether a filter applies instantly or via a "Show results" button. On desktop it is usually instant; in a mobile sheet, use a button with the result count.
• Keep filters in the URL so results can be shared and the Back button works.

Applied-filter chips

Above the results, show chips for selected values: "Nike ×", "Under $100 ×". They answer "why am I seeing this" and let people remove a condition in one tap. Add "Clear all" when several filters are active.

Filters on mobile

• A "Filters" button with the number of selected values, next to sorting and sticky on scroll.
• Filters open in a full-screen sheet or bottom sheet.
• A sticky "Show N products" button at the bottom of the sheet.
• The most used filters can live in a horizontal row of quick filters above the results.

Sorting

Sorting and filtering are different tools: filters narrow, sorting orders. Offer clear options: popularity, price low to high, price high to low, newest, rating. The current option should be visible, and the choice should persist when filters change.