Attention Management

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

1. One animation at a time - Sequence, don't parallelize
2. Stagger by importance - Most important animates first
3. Reduce decorative motion - Background should be calm
4. Increase CTA animation contrast - Stands out from surroundings
5. 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