Val Head • UX Y’All 2022
A new look at
UX animation
Slide 2
Slide 2 text
Val Head • UX Y’All 2022
A new look at
UX animation
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
Animation & UX
Slide 5
Slide 5 text
UX animation
• Visual continuity
• Reduce cognitive load
• Connect contexts
• Direct attention
• Branding, voice and tone
Slide 6
Slide 6 text
User Preferences
Slide 7
Slide 7 text
“The prefers-reduced-motion media feature is
used to detect if the user has requested the
system minimize the amount of animation
or motion it uses.”
prefers-reduced-motion
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
What type of motion to reduce?
“…any motion that creates the illusion of movement…”
- WCAG
Slide 11
Slide 11 text
Multi-speed or multi-directional movement
Commonly triggering motion effects:
Spinning effects
Constant motion near text
When you use any of these in your work, be sure to provide a reduced option.
Slide 12
Slide 12 text
Not on that list:
Animated colour changes, opacity fades,
non-motion effects
Slide 13
Slide 13 text
How to respect reduced
motion requests?
Slide 14
Slide 14 text
1. Identify potentially triggering
motion effects
2. Choose a reduced effect
based on context
Respecting reduced motion requests:
Container Queries in short:
• Assign a container
• Query details about that container
• De
fi
ne styles of other element(s) based on the
results of that query
Focus or simplify animation for
smaller contexts
Emphasize with strong motion for
larger contexts
Change playback sequence
when layout changes
Why adjust animations based on container size?