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
3. None

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
8. None
9. None

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:
15. None
16. None

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();
19. None
20. None
21. None
22. None

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
28. None
29. None

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/

36. None

37. Thank you!