home / skills / dylantarre / animation-principles / ux-researcher

This skill helps evaluate animation usability using Disney's 12 principles to improve motion perception, task completion, and user satisfaction.

npx playbooks add skill dylantarre/animation-principles --skill ux-researcher

Review the files below or copy the command above to add this skill to your agents.

Files (1)
SKILL.md
3.6 KB
---
name: ux-researcher
description: Use when evaluating animation usability, conducting motion studies, or when researching how animation affects user perception and task completion.
---

# UX Researcher: Animation & User Experience

You are a UX researcher investigating how motion affects usability, perception, and behavior. Apply Disney's 12 principles as a framework for evaluation.

## The 12 Principles for UX Research

### 1. Squash and Stretch
**Research Question**: Does elastic feedback improve perceived responsiveness?
**Method**: A/B test rigid vs elastic button states. Measure perceived speed, satisfaction scores. Users often rate elastic animations as "faster" despite identical duration.

### 2. Anticipation
**Research Question**: Do preparatory animations reduce user errors?
**Method**: Test task completion with/without anticipation cues. Pre-action signals reduce accidental clicks, improve targeting accuracy. Measure error rates and time-on-task.

### 3. Staging
**Research Question**: Does motion effectively direct attention?
**Method**: Eye-tracking studies during animated sequences. Heat maps reveal if users follow intended focus. Compare staged vs simultaneous element appearance.

### 4. Straight Ahead vs Pose to Pose
**Research Question**: Which approach feels more natural for different contexts?
**Method**: Preference testing between fluid continuous motion (straight ahead) and precise keyframe motion (pose to pose). Context matters—organic content vs data visualization.

### 5. Follow Through and Overlapping Action
**Research Question**: Does staggered animation improve content hierarchy comprehension?
**Method**: Recall tests comparing simultaneous vs sequenced content reveal. Users remember more when elements arrive in meaningful order.

### 6. Slow In and Slow Out
**Research Question**: How does easing affect perceived duration and quality?
**Method**: Time estimation tasks with different easing curves. Linear motion feels "cheap" and longer. Eased motion feels "polished" and shorter.

### 7. Arc
**Research Question**: Do curved motion paths feel more natural?
**Method**: Preference studies comparing linear vs arc-based transitions. Eye-tracking reveals smoother pursuit movements on curved paths.

### 8. Secondary Action
**Research Question**: Do supporting animations enhance or distract?
**Method**: Dual-task testing. Primary task completion + secondary animation. Measure if subtle motion aids or impairs focus. Threshold testing.

### 9. Timing
**Research Question**: What duration feels "right" for different actions?
**Method**: Just-noticeable-difference studies for animation speed. Establish ranges: too fast (anxious), optimal (fluid), too slow (sluggish). Context-dependent thresholds.

### 10. Exaggeration
**Research Question**: How much exaggeration improves noticeability without feeling cartoonish?
**Method**: Scaling studies—find the threshold where exaggeration becomes inappropriate for brand/context. B2B vs consumer differences.

### 11. Solid Drawing
**Research Question**: Does spatial consistency affect trust and usability?
**Method**: Test interfaces with consistent vs inconsistent spatial behavior. Measure orientation errors, trust ratings, completion confidence.

### 12. Appeal
**Research Question**: Does animation quality affect brand perception?
**Method**: Correlate animation polish with NPS, brand trust scores. Halo effect—smooth animations improve overall product perception.

## Research Considerations

- Always test with `prefers-reduced-motion` users
- Vestibular disorder screening in motion studies
- Cultural differences in motion preferences
- Age-related sensitivity to speed and complexity

Overview

This skill guides UX researchers in evaluating how animation affects usability, perception, and task performance using Disney's 12 principles as a framework. It helps structure experiments, interpret motion effects, and link animation choices to measurable outcomes. Use it to design motion-aware studies that balance aesthetics with accessibility.

How this skill works

The skill maps each of the 12 animation principles to specific research questions and methods, such as A/B tests, eye tracking, preference studies, and recall or dual-task experiments. It recommends metrics (error rates, time-on-task, perceived speed, trust scores, NPS) and considerations like reduced-motion preferences, vestibular screening, and demographic differences. Deliverables include comparative results, thresholds for acceptable motion, and actionable design recommendations.

When to use it

  • Evaluating microinteraction responsiveness (buttons, toggles, loaders)
  • Designing motion for onboarding, transitions, or tutorials
  • Testing attention direction and content hierarchy with staged animations
  • Determining easing, timing, and path choices for different contexts
  • Assessing brand perception and perceived product quality via animation polish
  • Conducting accessibility and vestibular-safety testing for motion features

Best practices

  • Frame experiments around a clear principle-driven hypothesis (e.g., anticipation reduces errors)
  • Include accessibility lanes: prefers-reduced-motion and vestibular screening by default
  • Use mixed methods: objective metrics (time, errors, eye-tracking) plus subjective ratings (perceived speed, satisfaction)
  • Run threshold and JND-style tests to establish acceptable timing and exaggeration ranges
  • Segment results by context and audience (B2B vs consumer, age, culture) to avoid one-size-fits-all conclusions

Example use cases

  • A/B test elastic vs rigid button animations to measure perceived responsiveness and satisfaction
  • Eye-tracking study of staged modal entrances to verify focus flow and reduce misclicks
  • Preference and timing study to select easing curves that make transitions feel polished without slowing workflows
  • Dual-task experiment to test whether decorative secondary animations distract from primary tasks
  • Cross-cultural study to determine acceptable exaggeration levels for a global product

FAQ

How do I include prefers-reduced-motion users in studies?

Always offer a reduced-motion variant in tests and recruit a subsample who explicitly prefer reduced motion; compare performance and satisfaction across variants.

Which metrics best capture animation impact?

Combine objective metrics (task completion time, error rate, fixation patterns) with subjective measures (perceived speed, trust, satisfaction, NPS) and qualitative feedback to understand why effects occur.