12 missing states · 8 reusable structures

The states between the happy-path screenshots.

Explore original, working examples for loading, failure, recovery, permissions, offline use and accessibility feedback—then inspect why each pattern works and where it can break.

Flow Pattern Atlas

Inspect the moment where trust is won or lost.

Run principle labs

Find a product state

System feedback

Loading

User goal: Know that work is continuing and whether it is safe to wait or leave.

Original interactive example

Live state

Generate decision report

Building your report

Connecting findings to supporting evidence…

Why it works

The state explains what is happening, preserves layout and exposes meaningful progress when it is knowable.

Where it can fail

Decorative spinners provide no timing, context or recovery path for long operations.

Accessibility considerations

Announce the start and completion without repeatedly interrupting.
Do not rely on animation as the only status cue.

Implementation checklist

1Keep the task name visible.
2Use determinate progress only when accurate.
3Provide a safe cancel or background option when useful.

Reusable structures

Apply the structure with its caution attached.

Patterns accelerate decisions when the context fits. These guides connect common interface structures to the failure mode teams should test.

Pattern 01Applied guide

Search and filter

Help people narrow a large set without losing their place or the meaning of active filters.

Use when: A collection is too large to scan or has several useful attributes.

Watch for: Do not hide the current result count or make applied filters difficult to remove.

Visibility of System Status Hick's Law

Pattern 02Applied guide

Progressive forms

Sequence genuinely complex input while keeping requirements, progress and recovery visible.

Use when: Later questions depend on earlier answers or the task is high effort.

Watch for: Do not split a short form into many screens to manufacture progress.

Progressive Disclosure Error Prevention

Pattern 03Applied guide

Empty states

Explain why the area is empty, what belongs there and the safest useful next action.

Use when: A list, dashboard or search can legitimately have no content.

Watch for: Do not turn every empty state into a promotional illustration or dead end.

Visibility of System Status Jakob's Law

Pattern 04Applied guide

Record actions

Keep edit, duplicate, archive, restore and activity actions consistent across records.

Use when: People manage customers, documents, orders, jobs or other durable records.

Watch for: Do not mix destructive actions with frequent actions or delete without recovery.

User Control and Freedom Consistency and Standards

Pattern 05Applied guide

File upload

Set expectations before selection, expose progress and make failure recoverable.

Use when: A workflow accepts documents, images, media or multiple files.

Watch for: Do not reveal file limits only after a slow upload fails.

Visibility of System Status Error Prevention

Pattern 06Applied guide

Pricing comparison

Make meaningful differences, total cost and commitment easy to compare without pressure.

Use when: People must choose between plans, packages or purchase options.

Watch for: Do not obscure recurring cost, cancellation terms or a viable lower-cost choice.

Hick's Law Consistency and Standards

Pattern 07Applied guide

Confirmation and undo

Match the safety mechanism to the consequence: prevent severe harm and undo routine mistakes.

Use when: An action changes, publishes, archives, sends or removes something.

Watch for: Do not interrupt harmless actions with repetitive confirmation dialogs.

Error Prevention User Control and Freedom

Pattern 08Applied guide

Responsive data table

Preserve comparison and primary actions as dense records adapt to smaller screens.

Use when: People scan or act on structured records across desktop and mobile.

Watch for: Do not squeeze every desktop column into an unreadable mobile grid.

Progressive Disclosure Accessible Target Size