attention-management

dylantarre's avatarfrom dylantarre

Use when wrong elements get attention, important content is missed, or visual hierarchy is broken by animation

⭐0stars🔀0forks📁View on GitHub🕐Updated Dec 30, 2025
[Brand and Creative Direction]

When & Why to Use This Skill

This Claude skill provides a comprehensive framework for attention management in UI/UX design, leveraging Disney's animation principles to direct user focus effectively. It helps creators fix broken visual hierarchies, reduce distracting decorative motion, and ensure that critical content and Call-to-Actions (CTAs) stand out through strategic staging, timing, and exaggeration, ultimately improving user engagement and interface clarity.

Use Cases

  • Optimizing Landing Page Conversions: Use the skill to ensure CTA buttons stand out by applying staggered animations and high-contrast motion that draws the eye immediately.
  • Reducing Interface Distractions: Identify and de-emphasize decorative background elements that steal focus from primary content using subtle motion and opacity adjustments.
  • Guiding User Reading Order: Sequence animations to lead the user's eye through a specific path (e.g., top-to-bottom), creating a natural flow for information consumption during onboarding.
  • UI/UX Quality Auditing: Utilize the troubleshooting checklist to verify if the animation sequence matches the importance hierarchy and to ensure simultaneous motions are minimized for better focus.
nameattention-management
descriptionUse when wrong elements get attention, important content is missed, or visual hierarchy is broken by animation

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

Priority Animation Style
Primary Fast, prominent, potentially looping
Secondary Medium speed, one-time
Tertiary Slow, subtle, or static
Background Very slow or no animation