Product demos & UI / Guide

Show search and filters in a product demo

Keep the query, active filters and resulting records connected on screen. A result list is understandable only when the viewer can tell which input produced it and whether additional conditions are still applied.

By AnimroUpdated 2 min readAI-assisted · independently agent-reviewed

Who this is for: Product marketers and trainers demonstrating search interfaces.

What to prepare

  • Observed search behavior
  • Small consistent sample dataset
  • Starting scope and active filters
  • Expected results for each step

Define the starting set and the question

Choose a small illustrative dataset whose changes can be inspected. Write down which records should remain after each input. Use the product’s observed search semantics: do not assume a query matches descriptions, partial words or multiple fields without verification.

Capture the initial state with old filters cleared or explicitly shown. A hidden previous filter can make a plausible search demonstration impossible to reproduce. If the demo begins inside a folder or workspace, keep that scope visible.

Worked example: find sample review notes

The following fictional records support a planning exercise. Confirm equivalent behavior in the product before presenting it as an actual interaction.

  • Starting set: “Packaging review” (Open), “Packaging archive” (Closed), “Label review” (Open), and “Packaging notes” (Open).
  • Query input: packaging. Expected example result set: the three titles containing Packaging, if the supplied product is confirmed to match titles this way.
  • Filter input: Status is Open. Expected example result set: Packaging review and Packaging notes.
  • Inspection: open Packaging review and preserve its title and Open status in the detail panel.
  • Reset: remove Status is Open and show the closed archive returning, if reset behavior is part of the lesson.

Separate entering, applying and inspecting

Show the query in the field before moving to the results. If the product requires Enter or an Apply button, include it. If results update while typing, show the observed behavior without making a response-speed claim.

After adding a filter, keep its chip or control visible beside the narrowed results. A count can support the explanation, but it should agree with the actual list and pagination scope. Do not describe three visible rows as the total if more results exist off screen.

Review checklist

  • Query and filter state remain readable.
  • Every list change follows a visible input.
  • Counts agree with list and pagination scope.
  • No ranking or matching behavior is asserted without evidence.
Explore product demos & ui ↗