Interaction Review
Make sure every state a user can land in has been considered, and that motion serves the user rather than decorating.
State coverage map
For each user-facing surface, walk through:
| State |
Question |
| Loading |
What does the user see while waiting? Is it clear progress is happening? |
| Empty |
What does the user see with zero results, zero items, zero history? Does the empty state guide the next action? |
| Error |
When the network or backend fails, can the user understand what happened and recover? |
| Success |
Is feedback clear and the next action obvious? |
| Partial |
When the operation half-succeeded, is the partial result accurately reported? |
Edge cases to test
- 47-character name. 200-character name. Empty name.
- Zero results. One result. Ten thousand results.
- First-time user. Power user with their own muscle memory.
- Slow connection. Offline. Back button mid-action. Double-click on a critical button.
Motion principles
Motion should communicate, not decorate. Every animation answers one of: confirm an action occurred, orient where things came from or go to, focus attention on a change, or preserve context during a transition. If it does none of these, cut it.
Use a timing scale:
- 100–150 ms: micro-feedback (hovers, clicks)
- 200–300 ms: small transitions (toggles, dropdowns)
- 300–500 ms: medium transitions (modals, page changes)
- 500 ms+: complex choreography only
Prefer spring or ease-out for entrances, ease-in for exits, transform/opacity for performance. Honor prefers-reduced-motion.
Microinteraction checklist
- Buttons: hover, press, focus, disabled, loading — each visually distinct, none flicker.
- Inputs: default, focus, error, disabled, success — clear path back from error.
- Toggles and switches: state change is visible at a glance, not just a color shift.
- Drag, swipe, scroll-triggered: discoverable, reversible, non-blocking.
Output
- Specific gaps in state coverage, with the user-visible consequence.
- Specific edge cases not handled.
- Motion that decorates rather than communicates.
- Recommendations sized by impact, not effort.
1---2name: interaction-review3description: Use to evaluate or design a user interaction flow — states, edge cases, microinteractions, motion, and feedback patterns.4---56# Interaction Review78Make sure every state a user can land in has been considered, and that motion serves the user rather than decorating.910## State coverage map1112For each user-facing surface, walk through:1314| State | Question |15|-------|----------|16| Loading | What does the user see while waiting? Is it clear progress is happening? |17| Empty | What does the user see with zero results, zero items, zero history? Does the empty state guide the next action? |18| Error | When the network or backend fails, can the user understand what happened and recover? |19| Success | Is feedback clear and the next action obvious? |20| Partial | When the operation half-succeeded, is the partial result accurately reported? |2122## Edge cases to test2324- 47-character name. 200-character name. Empty name.25- Zero results. One result. Ten thousand results.26- First-time user. Power user with their own muscle memory.27- Slow connection. Offline. Back button mid-action. Double-click on a critical button.2829## Motion principles3031Motion should communicate, not decorate. Every animation answers one of: confirm an action occurred, orient where things came from or go to, focus attention on a change, or preserve context during a transition. If it does none of these, cut it.3233Use a timing scale:3435- 100–150 ms: micro-feedback (hovers, clicks)36- 200–300 ms: small transitions (toggles, dropdowns)37- 300–500 ms: medium transitions (modals, page changes)38- 500 ms+: complex choreography only3940Prefer spring or ease-out for entrances, ease-in for exits, transform/opacity for performance. Honor `prefers-reduced-motion`.4142## Microinteraction checklist4344- Buttons: hover, press, focus, disabled, loading — each visually distinct, none flicker.45- Inputs: default, focus, error, disabled, success — clear path back from error.46- Toggles and switches: state change is visible at a glance, not just a color shift.47- Drag, swipe, scroll-triggered: discoverable, reversible, non-blocking.4849## Output5051- Specific gaps in state coverage, with the user-visible consequence.52- Specific edge cases not handled.53- Motion that decorates rather than communicates.54- Recommendations sized by impact, not effort.
getcrew44