Skip to main content
design hubs
?
Menu
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
Reset all
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
Keyboard shortcuts
×
Show shortcuts
?
Search
Ctrl
K
Previous article
←
Next article
→
Close
Esc