Val Head — A New Look At UX Animation — UX Y'all 2022

Transcript

1. Val Head • UX Y’All 2022 A new look at UX animation
2. Val Head • UX Y’All 2022 A new look at UX animation
4. Animation & UX
5. UX animation • Visual continuity • Reduce cognitive load • Connect contexts • Direct attention • Branding, voice and tone
6. User Preferences
7. “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
10. What type of motion to reduce? “…any motion that creates the illusion of movement…” - WCAG
11. 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.
12. Not on that list: Animated colour changes, opacity fades, 
 non-motion effects
13. How to respect reduced motion requests?
14. 1. Identify potentially triggering 
 motion effects 2. Choose a reduced effect 
 based on context Respecting reduced motion requests:
17. CSS @media (prefers-reduced-motion: reduce) { /* reduced behaviour */ }
18. JS let motionQuery = matchMedia('(prefers-reduced-motion)'); const handleReduceMotionChanged = () => { if (motionQuery.matches) //reduced behaviour; } motionQuery.addListener(handleReduceMotionChanged); handleReduceMotionChanged();
23. smashingmagazine.com/2020/09/design-reduced-motion-sensitivities/
24. Container Queries
25. 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
26. div { container:my-container / inline-size; } CSS
27. @container my-container (max-width:50em) { .thing {
 animation-duration: 250ms; } } CSS
30. @container street (max-width:500px) {
 .cloud1 {animation-duration: 20s;} .cloud2 {animation-duration: 26s;} .skyshapes {display: none;}
 } CSS
31. CSS @keyframes fl oating { 0% {translate: calc(0cqi - var(--cloud-width));} 100% {translate: calc(100cqi + var(--cloud-width));} }
32. Why adjust animation based on container size?
33. 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?
34. Container queries are for design too!
35. oddbird.net/2022/08/18/cq-syntax/
37. Thank you!