Skip to main content

Home All hubs and collections Form Shape, anatomy, and visual rhythm Typography Hierarchy, legibility, and type as meaning Color Perception, contrast, and hue psychology Layout Grid, space, and compositional structure Content Voice, clarity, and writing that earns attention Accessibility WCAG, inclusivity, and design for everyone Interaction Mental models, feedback, and feel Motion Duration, easing, and purposeful animation

Home / Interaction / Checklist

Interaction

Before you ship

A practical checklist for interaction design. Work through it before handing off or publishing.

0

of 20 checked

Affordances and Feedback

Every interactive element looks interactive — and nothing else does
All four button states are visually distinct: default, hover, active, disabled
Every action has a visible feedback response within 100ms
Success and failure states are clearly distinguished from each other

Error Handling

All possible error states have been designed: validation, network, permission, empty
Error messages appear inline, next to the element that caused the error
Error messages are specific and tell the user exactly what to do next
Destructive actions (delete, remove) have a confirmation step

Loading and Progress

Every async operation has a loading state — no silent waits
The correct loading pattern is used: spinner for unknown duration, skeleton for layout, progress bar for known duration
Loading states appear immediately — not after a delay
Users can see what is loading and roughly how long it will take

Forms and Input

Forms contain only the fields strictly necessary for the task
Every field has a visible label, useful placeholder, and accessible error message
Tab order matches the visual layout and is logical
The correct input type is used for each field (email, tel, number, etc.)

Navigation and Patterns

Users can always answer "where am I?" and "how do I get to X?" from any screen
Selection patterns are consistent: checkboxes for multi-select, radios for single-select
Disclosure components (accordions, modals, popovers) are keyboard accessible with correct ARIA attributes
Direct manipulation has clear affordances and supports undo or confirmation

design hubs Design is not decoration.

Home Form Typography Color Layout Content Accessibility Interaction Motion All Articles Progress Search Principles Conflict Matrix Guide About Contact Privacy

© 2026 Paul Divers. All rights reserved.

Keyboard shortcuts

Show shortcuts: ?
Search: CtrlK
Previous article: ←
Next article: →
Close: Esc