Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

UX Y'all
October 12, 2022

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

UX Y'all

October 12, 2022
Tweet

More Decks by UX Y'all

Other Decks in Design

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!