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

Val Head — A New Look At UX Animation — UX Y'al...

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. UX animation • Visual continuity • Reduce cognitive load •

    Connect contexts • Direct attention • Branding, voice and tone
  2. “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
  3. What type of motion to reduce? “…any motion that creates

    the illusion of movement…” - WCAG
  4. 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.
  5. 1. Identify potentially triggering 
 motion effects 2. Choose a

    reduced effect 
 based on context Respecting reduced motion requests:
  6. JS let motionQuery = matchMedia('(prefers-reduced-motion)'); const handleReduceMotionChanged = () =>

    { if (motionQuery.matches) //reduced behaviour; } motionQuery.addListener(handleReduceMotionChanged); handleReduceMotionChanged();
  7. 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
  8. CSS @keyframes fl oating { 0% {translate: calc(0cqi - var(--cloud-width));}

    100% {translate: calc(100cqi + var(--cloud-width));} }
  9. 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?