Skip to main content
ParticleSearch ParticleSearch
Practical worksheet

Choose the right ecommerce search surface before you design the component.

Use this worksheet to decide whether a query belongs in inline page flow, an anchored popup, a modal dialog, or a dedicated results page. The answer comes from the shopper’s job, the evidence they need, and the state they must carry, not from the format that looks most impressive in a mock-up.

Read the inline search UX guide

The decision map

Four surfaces, four different jobs

The surfaces are not a ladder where one is universally better. They trade context, room, focus, persistence, and comparison support. Choose the smallest surface that lets the shopper complete the intended job without hiding the next decision.

Inline

Context helps

Keep the response in normal page flow.

Choose it when
The task is small or scoped, and the surrounding page gives the query useful meaning.
Avoid it when
Do not let an expanding response become an accidental catalogue or comparison surface.

Popup

Recognition helps

Keep a short suggestion set beside the field.

Choose it when
The shopper needs recognition or query completion, not a full result workspace.
Avoid it when
Do not pack filters, dense cards, or a long comparison task into a bounded popup.

Modal

Focus helps

Give a focused product-finding task a contained layer.

Choose it when
The task needs more room and attention than the header or page flow can provide.
Avoid it when
Do not use a modal to hide a long comparison workflow or to interrupt a task that needs page context.

Results page

Comparison helps

Let the page own comparison, refinement, and continuation.

Choose it when
The shopper needs filters, sorting, product evidence, durable state, or a revisit path.
Avoid it when
Do not make the handoff feel like a reset or drop the submitted query and selected constraints.

Fill it in

Turn the buyer job into a surface choice

Choose the closest description for the experience you are designing. This is a starting point, not a substitute for testing the actual query, catalogue, viewport, and return path.

1. What is the main shopper job?
2. How much decision evidence is needed?
3. How much state must the shopper carry?

Starting recommendation

Inline search

Keep the response in normal page flow.

Why this fits

The task is small or scoped, and the surrounding page gives the query useful meaning.

Next design check

Reserve a labelled response region, keep the query visible, and define the handoff boundary.

Do not ship from the worksheet alone

Run a falsifiable acceptance test

Query

Use one representative query and one empty or ambiguous query.

State

Check idle, loading, result, empty, error, clear, and handoff behaviour.

Form factor

Repeat on desktop keyboard, narrow viewport, touch, and screen reader.

Return path

Open a result, go back, edit the query, and confirm the useful state survives.

If the chosen surface fails the comparison, recovery, or focus test, change the surface before polishing the component. For the reasoning behind each choice, read the ecommerce search layout guide and the modal versus other search formats guide.