298 catalog entries 298 complete patterns 897 evidence sources

UX pattern selection checklist

Use this before design review, frontend implementation, or AI-generated UI. It helps teams choose the pattern that fits the task instead of defaulting to a familiar component.

Run the checklist Open pattern lab

The decision method

Start with the task and risk. Choose the pattern only after the context is clear.

Frame the task Name the user goal, risk level, reversibility, platform, and interruption cost.
Compare plausible patterns Use nearby alternatives so the selected pattern wins on task fit, not habit.
Define the state contract Plan empty, loading, error, disabled, success, keyboard, focus, and recovery behavior.
Reject known misuses Check anti-pattern conditions before the design reaches implementation.

Pattern readiness scorecard

Check each item that is already true. Aim for 8 before implementation starts.

User task is clear The review starts with the task, decision, or risk the user needs to handle. Write the task in one sentence before naming a component. Risk level is clear The team knows whether a mistake is minor, costly, destructive, private, or safety-related. Tag the flow as low, medium, or high consequence. Recovery path is clear The choice accounts for undo, cancel, edit, draft, recovery, and audit needs. State what happens if the user changes their mind. Alternatives were compared The chosen pattern beat plausible alternatives instead of winning by familiarity. Compare at least two patterns before implementation. Required states are listed Empty, loading, error, disabled, success, keyboard, focus, and recovery states are planned. Add missing states to the implementation brief. Accessibility contract is testable Labels, roles, focus order, contrast, keyboard support, and announcements can be verified. Turn accessibility needs into review checks. Known misuses are rejected The team has checked whether the design matches common anti-pattern conditions. List at least one misuse that would make this pattern wrong. Evidence is linked Guidance points to source-backed claims, platform conventions, or observed product behavior. Link the pattern choice to sources or catalog entries.

How to interpret the score

Use the score as a review gate, not as decoration. Missing evidence or state planning should block high-risk flows.

0-2

Do not implement

The team is naming components before understanding the interaction problem.

3-5

Needs design review

The pattern may be plausible, but states, risk, or accessibility are underspecified.

6-7

Ready with caveats

Implementation can begin if the missing item is tracked as a review blocker.

Ready to build

The choice has a clear task, state plan, rejection criteria, and source trail.

Copyable review prompt

Use this in design reviews, issue templates, PR descriptions, or AI prompts.

Use this UX pattern selection checklist before designing, implementing, or prompting AI to generate UI:

1. Name the user's task in one sentence.
2. State risk level, reversibility, platform, and interruption cost.
3. Compare at least two plausible patterns before choosing one.
4. List required empty, loading, error, disabled, success, keyboard, focus, and recovery states.
5. Reject the choice if known anti-pattern conditions match the flow.
6. Link the decision to source-backed guidance or a catalog entry.

Decision output:
- Selected pattern:
- Alternatives rejected:
- Required states:
- Accessibility checks:
- Evidence links:
- Review blockers:

Compare patterns