Skip to content
Design Academy My progress

Stage 3 · Lesson 8 of 10

Search and filtering patterns

Helping people narrow down large sets of content.

  • Beginner
  • 35 min
  • 3 check questions
  • Exercise: 1 h

By the end of this lesson you can

  • Decide when a product needs search, filters or both.
  • Design a search experience that handles typos, no results and many results.
  • Design filters that are easy to apply, understand and remove.

The idea

Navigation helps people browse. Search helps people who know what they want. Filters help people narrow down a large set of results. Most content-heavy products need all three.

Search

  • Make the search box visible and wide enough for typical queries.
  • Offer suggestions as people type, and handle typos and synonyms.
  • Show the query on the results page and let people edit it.
  • Design the no results state: suggest spelling fixes, related items or a way to contact you.

Filters

Filters (sometimes called facets) let people narrow results by attributes such as price, size or date. Good filters reflect what people actually care about, show how many results each option would give, make active filters obvious, and let people remove them one at a time or all at once.

On mobile, filters usually move into a panel or sheet. Decide whether filters apply immediately or with an "Apply" button; immediate updates feel faster, but a button avoids constant reloading on slow connections.

Sorting

Sorting changes the order, not the set. Make the default sort sensible (often relevance) and the current sort visible.

Why it matters in real projects

Many users go straight to search, and those who do often have a clear intent and are valuable. A poor search experience sends them away. Filters turn an overwhelming list into a manageable one. Search logs are also one of the best sources of research data, showing exactly what people want in their own words.

A realistic example

A recruitment site shows 2,000 jobs for "designer". Filters exist, but they are hidden behind a small icon and do not show counts. People scroll endlessly or leave.

The team adds visible filters for location, salary, contract type and remote working, each showing the number of matching jobs. Active filters appear as removable chips above the results. Search now handles "UX desinger" by suggesting "UX designer". The no-results page suggests removing the most restrictive filter. Applications per visit increase.

Step by step

  1. Study search logs

    Find the most common queries, failed searches and zero-result terms.

  2. Decide what to filter by

    Choose attributes based on how users make decisions.

  3. Design the search box and suggestions

    Place it prominently and plan for typos and synonyms.

  4. Design results

    Show the query, result count, sort order and active filters.

  5. Design edge states

    No results, too many results, and slow loading.

  6. Test with real queries

    Use queries from the logs in usability tests.

Common mistakes

  • Mistake A dead-end no results page.

    Instead Offer corrections, related results and a way forward.

  • Mistake Filters based on internal data rather than user decisions.

    Instead Research which attributes matter when people choose.

  • Mistake Active filters that are hard to see or remove.

    Instead Show them as chips with a clear remove action and a "Clear all".

Check your understanding

Choose an answer, then check it. There is an explanation either way.

Question 1 of 3What should a no-results page do?
Show answer

Suggest corrections, alternatives and next steps. Help people recover rather than leaving them stuck.

Question 2 of 3What is the difference between sorting and filtering?
Show answer

Sorting changes order; filtering changes which items are shown. Filters narrow the set; sorting reorders it.

Question 3 of 3Why show result counts next to filter options?
Show answer

To prevent people choosing options that lead to zero results. Counts help people predict outcomes.

Practice exercise

Exercise · about 1 h

Search and filter redesign

Redesign the search and filter experience for an online second-hand furniture shop.

Steps

  1. List the top ten queries you would expect.
  2. Choose five filters based on how people decide.
  3. Sketch results with active filters and sorting.
  4. Sketch the no-results and too-many-results states.

Deliverable

Sketches of search, results, filters and edge states with notes.

Self-assessment

Tick each item when it is true of your exercise. Be honest; this is for you.

4 items

Summary

  • Navigation is for browsing, search for knowing, filters for narrowing.
  • Design for typos, no results and too many results.
  • Make filters relevant, countable and easy to remove.
  • Search logs are excellent research data.

Further reading

Third-party sources, chosen for reliability. They open in a new tab.

Your notes

Marking complete updates your course and roadmap progress.

Back to Information architecture Roadmap

PreviousNaming and labelling Next lessonStructuring complex products