UI + UX Search, Browse, And Discovery standard

Advanced search

Provide an advanced search builder or syntax surface that exposes field/operator/value clauses, Boolean joining, query preview, validation, result-count preview, history, and recovery from unsupported syntax before users commit to a search.

Decision first

Choose this pattern when the problem matches

Use when

  • Expert or repeat users need precise retrieval across fields, operators, phrases, dates, ranges, exclusions, functions, or prior search history.
  • Search results have operational, legal, clinical, engineering, or audit consequences and users need inspectable query logic.
  • The system supports backend query syntax that users may need to see, edit, share, save, or debug.
  • Users compare query alternatives and need result counts before committing to a result page.

Avoid when

  • Most users only need one keyword box and a ranked result list.
  • Criteria are simple post-result filters that can be exposed as a filter panel.
  • The product only has one searchable corpus and no fielded query semantics.
  • The query grammar is unstable, undocumented, or cannot be explained in user-facing terms.
  • The task is browsing a taxonomy, category tree, or curated recommendations rather than constructing a precise query.

Problem it prevents

Users need to retrieve a precise set of records, messages, files, citations, issues, or code results, but ordinary keyword search and visible filters cannot express fielded conditions, Boolean logic, grouping, or expert syntax safely.

Pattern anatomy

What a strong implementation has to make clear

User need

The search backend supports fielded queries, operators, Boolean logic, exact phrases, date ranges, functions, history references, qualifiers, regular expressions, or other expert syntax.

Pattern promise

Provide an advanced search builder or syntax surface that exposes field/operator/value clauses, Boolean joining, query preview, validation, result-count preview, history, and recovery from unsupported syntax before users commit to a search.

Required state

Empty builder state with field, operator, value, and Boolean controls labelled.

Recovery path

Advanced search becomes a second basic search box with no additional query power.

Access contract

Label each field, operator, value input, Boolean joiner, grouping control, generated query, and validation message with stable accessible names.

Quality bar

The difference between expert and weak execution

Strong implementation

Specific, visible, recoverable

  • A research database builder lets users choose Title/Abstract, enter a term, add it with AND or OR, preview the generated query, and see a count before leaving the page.
  • A work item search page shows clauses for Project equals Benefits, Status not Done, and Assignee equals current user, with the JQL preview visible below the builder.
  • A user adds Author contains Patel OR Journal equals Pediatrics, previews 28 matches, and saves the finished query after confirming the generated syntax.
  • A user enters an unsupported operator for Date and gets an inline repair message that offers Before, After, or Between without losing the date value.
Weak implementation

Vague, hidden, hard to recover from

  • A button named Advanced search opens the same one-line keyword input with a larger border.
  • The builder shows unlabeled dropdowns for fld1, op2, and val without explaining the user-facing field or allowed values.
  • A user changes AND to OR but the UI does not show grouping, causing a much broader query than intended.
  • A user switches from raw syntax to form mode and the product drops the NOT clause because the form cannot represent it.
UI guidance
  • Render advanced search as a labelled query-construction surface with visible field, operator, value, and Boolean join controls, plus a readable query preview that shows what will run.
  • Show parse errors, incompatible field/operator combinations, generated syntax, result-count preview, and clear actions near the clause they affect rather than only after a failed result page.
UX guidance
  • Use advanced search when users need precise retrieval across multiple fields, date ranges, exact phrases, exclusions, functions, prior searches, or grouped Boolean conditions.
  • Preserve the query while users switch between builder and raw syntax views, and provide a safe path back to basic search without silently discarding expert clauses.
Implementation contract

What the implementation must handle

States

  • Empty builder state with field, operator, value, and Boolean controls labelled.
  • Partially built query state with a generated preview and clear next action.
  • Valid query state with result-count preview or ready-to-search status.
  • Invalid syntax state for unmatched quotes, unsupported operators, missing values, or broken grouping.

Interaction

  • Adding a clause appends a visible field, operator, value, and joiner to the canonical query state.
  • Removing a clause updates the generated query, result-count preview, and validation state without clearing unrelated clauses.
  • Changing Boolean joiners or grouping updates the preview immediately so users can see whether the query became broader or narrower.
  • The product must not execute malformed syntax as a silent zero-result query when it can detect a missing value, unmatched quote, invalid field, or unsupported operator.

Accessibility

  • Label each field, operator, value input, Boolean joiner, grouping control, generated query, and validation message with stable accessible names.
  • Use native form controls where possible and group each clause so screen reader users can understand which operator and value belong together.
  • Announce result-count preview changes and parse errors through a polite status region without moving focus unexpectedly.
  • Do not rely on syntax color alone to explain valid, invalid, grouped, or excluded clauses.

Review

  • What makes this search advanced: fields, operators, Boolean logic, grouping, history, syntax, or result-count preview?
  • Can users inspect the exact query before it runs?
  • How does the UI distinguish malformed syntax from a valid query that has no results?
  • Which field/operator combinations are allowed, and where are invalid combinations blocked or repaired?
Interactive lab

Inspect the states before you copy the pattern

Build a precise query

Add clauses, change Boolean logic, inspect the generated query, and check whether invalid syntax is repaired before search.

Advanced search
Interactive demo is ready

Launch the live UI/UX lab when you want to inspect states, keyboard behavior, and common failure modes.

State To Inspect

Empty builder state with field, operator, value, and Boolean controls labelled.

Keyboard / Access

Tab moves through field, operator, value, joiner, add, preview, search, and history controls in construction order.

Avoid Generating

Calling a simple filter drawer advanced search without supporting clauses, Boolean logic, or query preview.

Evidence trail

Source-backed claims behind this guidance

PubMed Advanced Search Builder

National Library of Medicine - checked

PubMed documents advanced builder fields, Boolean add actions, indexes, history, result-count preview, and search details.

GitHub Code Search syntax

GitHub Docs - checked

GitHub documents advanced code search syntax including exact strings, Boolean logic, qualifiers, parentheses, and regular expressions.

Gmail search operators

Google Help - checked

Gmail documents advanced search operators, grouping, exact phrases, fielded constraints, status constraints, and attachment constraints.

Full agent/debug reference

Problem Context

  • The search backend supports fielded queries, operators, Boolean logic, exact phrases, date ranges, functions, history references, qualifiers, regular expressions, or other expert syntax.
  • Users need precision, repeatability, auditing, or shareability that cannot be achieved with one keyword box and a few post-result filters.
  • Small syntax mistakes can return no results, too many results, or confidentially broad results, so the interface must help users inspect and repair the query.

Selection Rules

  • Choose advanced search when users must combine multiple search clauses before execution, such as field plus operator plus value joined by AND, OR, or NOT.
  • Use a builder when users know the concepts but not the exact query syntax; use raw syntax when expert users need full control that a form cannot represent.
  • Show generated syntax or a readable query preview for every builder state so users can verify field names, grouping, phrase matching, exclusions, and date ranges.
  • Validate field/operator compatibility before running the query, especially for dates, numeric ranges, controlled values, functions, and exact-phrase syntax.
  • Offer result-count preview or add-to-history actions when users need to compare query alternatives before opening a full result page.
  • Keep search scope, filters, sort order, and saved query identity separate from advanced clauses so changing one does not silently mutate the others.
  • Use filter panel instead when all criteria are visible controls that narrow an already returned result set without Boolean grouping or query syntax.
  • Use saved search when the primary task is naming, sharing, rerunning, or alerting on a query that already exists.
  • Use query correction when the main failure is a misspelled term, not a malformed fielded query.
  • Use browse by category when users are exploring a known taxonomy rather than constructing a precise retrieval expression.

Required States

  • Empty builder state with field, operator, value, and Boolean controls labelled.
  • Partially built query state with a generated preview and clear next action.
  • Valid query state with result-count preview or ready-to-search status.
  • Invalid syntax state for unmatched quotes, unsupported operators, missing values, or broken grouping.
  • Unsupported field/operator state with suggested alternatives.
  • Builder-to-raw-syntax state that preserves representable clauses and warns about clauses the builder cannot represent.
  • Search history state where previous queries can be combined or copied.
  • No-results state that keeps the full query visible and offers clause-level repair.
  • Deep-linked or saved state that restores clauses, raw syntax, scope, filters, and sort separately.

Interaction Contract

  • Adding a clause appends a visible field, operator, value, and joiner to the canonical query state.
  • Removing a clause updates the generated query, result-count preview, and validation state without clearing unrelated clauses.
  • Changing Boolean joiners or grouping updates the preview immediately so users can see whether the query became broader or narrower.
  • The product must not execute malformed syntax as a silent zero-result query when it can detect a missing value, unmatched quote, invalid field, or unsupported operator.
  • Switching between builder and raw syntax preserves all query meaning that both modes can represent and explicitly warns before dropping anything.
  • Submitting an advanced query includes its clauses in the URL, history entry, saved search, export, or audit trail when those features exist.
  • Result-count preview belongs to the same query, scope, and filters currently shown; stale previews must be marked pending or cleared.

Implementation Checklist

  • Define the searchable fields, user-facing labels, allowed operators, value types, autocomplete sources, and backend syntax for each clause type.
  • Model the query as structured data first, then serialize to backend syntax so the UI can validate, preview, restore, and edit clauses reliably.
  • Provide explicit controls for AND, OR, NOT, grouping, exact phrase, date range, field selection, and value entry only where the backend supports them.
  • Show generated syntax or a plain-language query summary before submission.
  • Validate missing values, unsupported field/operator pairs, unmatched quotes, malformed dates, unsafe wildcards, and grouping errors before running.
  • Add a result-count preview or add-to-history option when users compare query variants.
  • Preserve raw query text when parsing fails so users can repair rather than retype.
  • Keep advanced search state shareable through URL parameters, saved searches, or history when users need to resume or collaborate.
  • Test expert syntax, builder mode, invalid syntax, history combination, mobile layout, keyboard order, screen reader labels, and no-results repair.

Common Generated-UI Mistakes

  • Calling a simple filter drawer advanced search without supporting clauses, Boolean logic, or query preview.
  • Hiding generated syntax so users cannot inspect exactly what the builder will submit.
  • Returning zero results for parse errors instead of showing the broken clause.
  • Mixing search scope, filters, sort, and advanced clauses into one opaque text string with no recoverable controls.
  • Using backend-only field names in the UI without user-facing labels.
  • Discarding raw syntax when switching to a builder that cannot represent the query.

Critique Questions

  • What makes this search advanced: fields, operators, Boolean logic, grouping, history, syntax, or result-count preview?
  • Can users inspect the exact query before it runs?
  • How does the UI distinguish malformed syntax from a valid query that has no results?
  • Which field/operator combinations are allowed, and where are invalid combinations blocked or repaired?
  • What happens when users switch between basic, builder, and raw syntax modes?
  • Are scope, filters, sort, saved-search name, and advanced clauses stored separately enough to avoid stale counts or lost criteria?
Accessibility
  • Label each field, operator, value input, Boolean joiner, grouping control, generated query, and validation message with stable accessible names.
  • Use native form controls where possible and group each clause so screen reader users can understand which operator and value belong together.
  • Announce result-count preview changes and parse errors through a polite status region without moving focus unexpectedly.
  • Do not rely on syntax color alone to explain valid, invalid, grouped, or excluded clauses.
  • Keep remove-clause and reorder-clause controls keyboard reachable and named with the affected clause.
  • When exposing raw syntax, provide plain-language help for supported fields, operators, quoting, grouping, and examples.
Keyboard Behavior
  • Tab moves through field, operator, value, joiner, add, preview, search, and history controls in construction order.
  • Enter in a value field can add the clause when that is the documented form behavior; it should not submit a malformed query unexpectedly.
  • Arrow keys operate native selects or segmented Boolean controls according to their semantics.
  • Escape closes field or value suggestion menus without clearing the current clause.
  • After adding or removing a clause, focus moves to the next logical field or remains on a clear status point rather than jumping to results.
  • Errors link or move focus to the first invalid clause when users submit a malformed query.
Variants
  • Field/operator/value query builder
  • Raw syntax advanced search
  • Boolean clause builder
  • Search history combiner
  • Query preview with result count
  • Date-range advanced search
  • Exact-phrase and exclusion search
  • Regular expression search
  • Saved advanced query
  • Builder and expert mode toggle

Verification

Last verified: