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