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); } }