home / skills / dylantarre / animation-principles / user-feedback-clarity
This skill helps you make feedback unmistakable by applying Disney principles to visual cues, motion, and color for successful user interactions.
npx playbooks add skill dylantarre/animation-principles --skill user-feedback-clarityReview the files below or copy the command above to add this skill to your agents.
---
name: user-feedback-clarity
description: Use when users don't notice feedback, miss state changes, or can't tell if their action worked
---
# User Feedback Clarity
Make feedback animations unmissable using Disney's principles.
## Problem Indicators
- Users click multiple times (didn't see feedback)
- "Did it work?" questions
- Users miss success/error states
- Form submission confusion
- State changes go unnoticed
## Diagnosis by Principle
### Anticipation
**Issue**: No buildup before action completes
**Fix**: Show loading/processing state immediately. User should know their input was received.
### Follow Through
**Issue**: Feedback appears and vanishes too quickly
**Fix**: Let feedback linger. Success messages need 2-3 seconds minimum. Add settle animation.
### Staging
**Issue**: Feedback appears outside user's focus
**Fix**: Show feedback near the trigger. If button was clicked, feedback should appear on/near button.
### Exaggeration
**Issue**: Feedback is too subtle
**Fix**: Increase contrast, size change, or motion. Feedback must compete with user's task focus.
### Secondary Action
**Issue**: Only one feedback channel
**Fix**: Combine channels: visual + motion + color. Error = red + shake. Success = green + checkmark + pulse.
## Quick Fixes
1. **Immediate acknowledgment** - Show something within 100ms
2. **Animate the trigger** - Button should respond visibly
3. **Use color + motion together** - Redundant signals
4. **Keep feedback in viewport** - Near user's focus
5. **Add haptic feedback** - On supported devices
## Troubleshooting Checklist
- [ ] Does feedback appear within 100ms of action?
- [ ] Is feedback in user's current focus area?
- [ ] Would feedback be noticed peripherally?
- [ ] Are multiple senses engaged (visual, motion)?
- [ ] Does feedback last long enough to read?
- [ ] Is error feedback more prominent than success?
- [ ] Test: Can users tell if action succeeded without reading text?
- [ ] Test with users—ask "did that work?"
## Code Pattern
```css
/* Button feedback */
.button:active {
transform: scale(0.95);
}
.button.loading {
pointer-events: none;
}
.button.success {
animation: successPulse 300ms ease-out;
}
@keyframes successPulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); background: var(--success); }
100% { transform: scale(1); }
}
/* Error shake */
@keyframes errorShake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-4px); }
75% { transform: translateX(4px); }
}
```
This skill helps make user feedback and state changes unmistakable by applying animation principles inspired by Disney. It focuses on clear, multi-sensory signals so users stop asking “did it work?” and stop repeating actions. The goal is reliable, testable patterns that improve perceived responsiveness and reduce errors.
The skill inspects interaction points and diagnoses common failures: no acknowledgment, fleeting messages, misplaced feedback, and signals that are too subtle. It prescribes fixes organized by animation principles (anticipation, follow-through, staging, exaggeration, secondary action) and gives quick implementation patterns and tests. It also supplies a short troubleshooting checklist and simple code patterns to get immediate gains.
How long should success feedback remain visible?
Aim for 2–3 seconds so users can register it without interrupting flow; adjust based on message complexity.
What if animations annoy power users?
Provide reduced-motion or minimal feedback options while keeping at least one clear channel (color or icon).