UX Friction
Diagnose animations that block, confuse, or frustrate users.
Problem Indicators
- Users wait for animations to finish
- Confusion about what happened
- Repeated clicks/taps during animation
- Users skip or abandon tasks
- "Where did that go?" moments
Diagnosis by Principle
Timing
Issue: Animation too slow for the context Fix: Match duration to user intent. Micro-interactions: 100-200ms. Transitions: 200-400ms. Never block input.
Anticipation
Issue: Action happens without warning Fix: Add subtle anticipation cues before significant changes. A button press should show feedback before the result.
Follow Through
Issue: Animation ends abruptly Fix: Let elements settle naturally. Sudden stops feel broken. Add slight overshoot and settle.
Staging
Issue: Important changes happen outside focus Fix: Draw attention to where change occurs. If content moves, guide the eye with motion.
Appeal
Issue: Animation feels arbitrary Fix: Every animation should have clear purpose. If users question "why does this bounce?", remove it.
Quick Fixes
- Make animations skippable - Click/tap should complete or skip
- Reduce duration by 30% - Most animations are too slow
- Add progress indicators - For anything over 400ms
- Animate in user's focus area - Don't move things peripherally
- Remove decorative animations - If it doesn't help, it hurts
Troubleshooting Checklist
- Can users interact during animation?
- Is duration under 400ms for transitions?
- Does animation communicate state change?
- Is the animation skippable if lengthy?
- Does motion guide attention correctly?
- Is there feedback for user input?
- Would removing animation hurt understanding?
- Test with impatient users (click rapidly)
Pattern
// Allow interaction during animation
element.style.pointerEvents = 'auto';
// Make animation skippable
element.addEventListener('click', () => {
element.getAnimations().forEach(a => a.finish());
});