Design useful filters for a catalogue or directory

Choose criteria that support decisions

Observe the questions people ask before choosing. A directory may need category, region and resource type; a catalogue may need availability, size or use. Add a criterion only when the relevant entries carry dependable data.

Define values and synonyms before publishing. Two labels meaning the same thing scatter results. The web directory shows how categories, search and explanatory entries can work together.

• Criteria tied to decisions.
• Reliable data on relevant entries.
• Values and synonyms harmonised.

Show results and state

After a selection, show the result count and active filters. People should be able to remove one criterion or reset all. A no-results state should explain what happened and suggest a reasonable step without silently clearing selections.

Test combinations, browser back, category changes and free-text search. Cards need readable titles and essential information even when images fail. The site-search guide covers the broader journey.

Fictional test data: each of the four records below has a unique identifier. In this example, values within one filter use OR; different filters use AND. “Guides” returns 2 records, “FR” returns 2, and “Guides AND FR” returns just R1. With only “FR OR EN”, all 4 records remain. Specify this contract explicitly: a set of checkboxes does not itself define the business logic.

“Tools AND FR AND PDF” returns 0 results. Removing only PDF must restore R3 while preserving the other two choices; clearing everything must restore all 4 identifiers exactly once. Keep the active criteria visible in the empty state and compare the count with the displayed records. URLSearchParams.getAll() reads repeated parameter values; it neither chooses OR versus AND nor validates catalogue values.

• Count and criteria visible.
• Simple reset.
• No-results state explained.

Scroll the table horizontally to read every column. With a keyboard, focus the table area and use the arrow keys.

• MDN : URLSearchParams.getAll()

  MDN, consulted 22 October 2026: reading repeated values. The dataset and expected results are our teaching example.

Support keyboard and mobile

Checkboxes, selects and buttons need clear labels, logical order and visible focus. If results change without a reload, announce the change without interrupting reading after every keystroke. On mobile, check the filter panel and remaining space for cards.

Test by keyboard, at high zoom and on narrow screens. A mouse-friendly filter can still make removal impossible for a screen reader or phone user. The accessibility guide offers a test method.

• Controls named and reachable.
• Result changes perceptible.
• Mobile panel usable.

Decide which URLs deserve crawling

Some selections may warrant stable, useful pages; most combinations do not need indexable URLs. Document the decision before generating many parameters. Keep individual entries and a complete main listing accessible.

Google guidance on faceted navigation explains the cost of near-infinite URL spaces. Check empty combinations, repeated parameters and generated links after filter changes.

Separate visitor filter state from the policy for publicly crawlable URLs. Google’s faceted-navigation guide recommends HTTP 404 at the affected URL for empty or nonsensical combinations and nonexistent pagination. The table applies that specific case to a teaching catalogue; it does not prescribe 404 for every internal search with no matches. The message should still explain the criteria and offer a useful way forward.

For facets deliberately made crawlable, use standard parameter separators and limit unhelpful combinations. Two allowed values under one parameter name may be valid; a duplicate filter prohibited by your contract is not. Test the exact URL, status and body without redirecting empty lists to a generic error. Keep item pages and the main list reachable. A canonical may reduce crawling of variants over time; it does not immediately stop their crawling.

• Public URLs chosen deliberately.
• Entries reachable without filters.
• Empty and duplicate combinations checked.

Scroll the table horizontally to read every column. With a keyboard, focus the table area and use the arrow keys.

Represent shareable filters without manually concatenating URL fragments.

Synthetic case: a catalogue filter contains ‘R&D + consulting’. Construct its URL with URLSearchParams and compare the value retrieved after navigation. Define repeated, absent and unknown parameter behaviour. The API helps encoding; it does not validate values or establish the catalogue’s indexing strategy.

• The filter recovers its exact value and unknown or repeated parameters follow an explicit rule.

• MDN URLSearchParams

  Interface for reading and constructing URL parameter pairs, including encoding and repeated values.

Keep filters understandable

Proposed case: selecting a category and then a city produces an empty list. The page does not explain which filter to remove or how to restore the previous state.

Test combinations, reset and back navigation. Record results, active criteria and URL when it represents state; a count must match what is actually shown.

• Display active criteria
• Test an empty combination
• Check reset and back navigation

• Test search without jargon

  Design on-site search that helps people find the right thing