Attention Management

Direct user focus correctly using Disney's principles.

Problem Indicators

• Users miss important content

• Decorative elements steal focus

• CTAs don't stand out

• Users look at wrong things first

• Information hierarchy is unclear

Diagnosis by Principle

Staging

Issue: Multiple elements compete for attention Fix: One thing moves at a time. Animate the most important element; keep others still.

Timing

Issue: Everything animates at same speed Fix: Primary content: faster animation. Secondary: slower or delayed. Speed implies importance.

Exaggeration

Issue: Uniform motion across hierarchy Fix: Important elements get more dramatic animation. Background elements get subtle motion.

Anticipation

Issue: No buildup directs eyes Fix: Use anticipation to guide attention. A small movement can draw eyes before the main action.

Appeal

Issue: Wrong elements are visually interesting Fix: Make important elements the most visually appealing. Animation should enhance hierarchy, not fight it.

Quick Fixes

• One animation at a time - Sequence, don't parallelize

• Stagger by importance - Most important animates first

• Reduce decorative motion - Background should be calm

• Increase CTA animation contrast - Stands out from surroundings

• Use motion to guide reading order - Top-to-bottom, left-to-right

Troubleshooting Checklist

• What do users look at first? (Eye tracking or testing)

• Does animation sequence match importance hierarchy?

• Are decorative animations subtle enough?

• Does primary CTA have strongest motion?

• Count simultaneous animations (should be 1-2)

• Test: Hide animation—does hierarchy still work?

• Is motion guiding or distracting?

• Does stillness create emphasis where needed?

Code Pattern

/* Stagger by importance */ .hero-title { animation: fadeInUp 400ms ease-out; }

.hero-subtitle { animation: fadeInUp 400ms ease-out 100ms backwards; }

.hero-cta { animation: fadeInUp 400ms ease-out 200ms backwards, pulse 2s ease-in-out 1s infinite; }

/* De-emphasize background */ .background-element { animation: subtleDrift 20s linear infinite; opacity: 0.3; }

Hierarchy Through Motion

Priority Animation Style

Primary Fast, prominent, potentially looping

Secondary Medium speed, one-time

Tertiary Slow, subtle, or static

Background Very slow or no animation