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