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
- Immediate acknowledgment - Show something within 100ms
- Animate the trigger - Button should respond visibly
- Use color + motion together - Redundant signals
- Keep feedback in viewport - Near user's focus
- 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
/* 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); }
}