Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

Enhancing User Experience With CSS Animations

Enhancing User Experience With CSS Animations

Transcript and replay here: https://stephaniewalter.design/blog/enhancing-user-experience-with-css-animations/

With CSS and JS progress, implementing animations on websites has never been easier. But how do we make sure that our CSS animations and transitions will be meaningful to our users? That they will not be just some annoying "in-your-face" eye candy? I will explain how our brain works, why and how certain animations contribute to improving user experience. Using practical examples, you will understand why certain animations work better than others. And what you need to be careful about when it comes to animations and accessibility.

Stéphanie Walter

August 05, 2020
Tweet

More Decks by Stéphanie Walter

Other Decks in Design

Transcript

  1. Transitions are connected to triggers (hover, tap, etc.) and mostly

    used for UI feedback and to help users understand UI changes A to B (menu opening, etc.)
  2. ๏ Build the animations in CSS ๏ Attach it to

    a .class in CSS ๏ Trigger it by adding the class to JavaScript events on click, focus, blur, scroll, form submit, etc.
  3. Animations are mostly used for more complex UI motion involving

    different stages, looping motion and “illustrative” animations
  4. CSS transforms ๏ Translate — transform: translate() ๏ Scale —

    transform: scale() ๏ Rotate — transform: rotate()
  5. CSS transforms ๏ Translate — transform: translate() ๏ Scale —

    transform: scale() ๏ Rotate — transform: rotate() ๏ Skew — transform: skew()
  6. You can build animations that follow a specific path with

    offset- path: path + offset-distance
  7. Finding the perfect timing 100ms 0ms 200ms 300ms 400ms 500ms

    Fast Slower Slow Instant Fades, color animations User interactions that need quick response: hover, scalings, opening / closing menus Moving elements accross the page, complex animations Large movements, background element animations that bring mood Small changes / elements Large complex changes / elements
  8. ๏ Scaling and Zooming ๏ Spinning and Vortex Effects ๏

    Multi-Speed or Multi- Directional Movement (parallax) ๏ Dimensionality or Plane Shifting ๏ Peripheral Motion A few potential triggers Source: Apple
  9. Interface Transition 300ms 2s 3 - 8s Video player components

    load on the screen with a fade in transition Indeterminate waiting indicator Video plays as soon as loaded Building a timeline
  10. Loading Flow — list The whole screen with all the

    content should be loaded within 3 seconds maximum. For screens with lists, the first 10 items of the list need to be loaded almost immediatly (2sec). The then other items can be lazy loaded on scroll. Following Apple’s guidelines, we start by showing anything that is not dynamic: header bar, tabar, etc. in order to not have a blank screen. Tasks Manager 9 41 Settings History Tasks If the 1st content item takes more than 1sec to load, we display a loader Once the backend sent the information about how many tasks we have, we display the notification with the number. We also try to display quickly the static content like the heading title “owned by me” We display the first item as soon as they arrive on the screen. The items are displayed with a fade in animation from opacity 0 to opacity 1. Ideally we should display the items that will be at the top of the screen first to avoid having some content jump when the next items arrive. When user scrolls over the 10 items displayed, we lazy load the next items with the same philosophy: items are displayed with a fade in animation when they arrive on the screen The final loaded view: we load the 10 first items in the list. 0 sec 1 sec 2 sec Tasks Manager 9 41 Settings History Tasks Tasks Manager 9 41 Settings History Tasks 5 30.04.2020 17:44 Activated on Workflow type here LOREM IPSUM SUBJECT OF THE TASK GOES HERE (90618) - OPERATION 2019-1190 (3) Owned by me Pick Up No owner 30.04.2020 17:44 Activated on Workflow type here LOREM IPSUM SUBJECT OF THE TASK GOES HERE (90618) - OPERATION 2019-1190 Tasks Manager 9 41 Settings History Tasks 5 Owned by me 30.04.2020 17:44 Activated on Workflow type here LOREM IPSUM SUBJECT OF THE TASK GOES HERE (90618) - OPERATION 2019-1190 Tasks Manager 9 41 Settings History Tasks 5 30.04.2020 17:44 Activated on Workflow type here LOREM IPSUM SUBJECT OF THE TASK GOES HERE (90618) - OPERATION 2019-1190 (3) Owned by me Pick Up No owner 30.04.2020 17:44 Activated on Workflow type here LOREM IPSUM SUBJECT OF THE TASK GOES HERE (90618) - OPERATION 2019-1190 30.04.2020 17:44 Activated on Workflow type here LOREM IPSUM SUBJECT OF THE TASK GOES HERE (90618) - OPERATION 2019-1190 Firstname Lastname Owned by 30.04.2020 17:44 Activated on Workflow type here LOREM IPSUM SUBJECT OF THE TASK GOES HERE (90618) - OPERATION 2019-1190 Firstname Lastname Owned by 30.04.2020 17:44 Activated on Workflow type here LOREM IPSUM SUBJECT OF THE TASK GOES HERE (90618) - OPERATION 2019-1190 (2) Delegated to me 30.04.2020 17:44 Activated on Workflow type here LOREM IPSUM SUBJECT OF THE TASK GOES HERE (90618) - OPERATION 2019-1190 Tasks Manager 9 41 Settings History Tasks 5 Firstname Lastname Assigned to 30.04.2020 17:44 Activated on Workflow type here LOREM IPSUM SUBJECT OF THE TASK GOES HERE (90618) - OPERATION 2019-1190 (2) Delegated to me 30.04.2020 17:44 Activated on Workflow type here LOREM IPSUM SUBJECT OF THE TASK GOES HERE (90618) - OPERATION 2019-1190 30.04.2020 17:44 Activated on Workflow type here LOREM IPSUM SUBJECT OF THE TASK GOES HERE (90618) - OPERATION 2019-1190 Pick Up No owner 30.04.2020 17:44 Activated on Workflow type here LOREM IPSUM SUBJECT OF THE TASK GOES HERE (90618) - OPERATION 2019-1190 (3) Owned by me Tasks Manager 9 41 Settings History Tasks 5 Static documentation in the styleguide
  11. +

  12. ๏ Purpose (when and why animate) ๏ Types of animations

    (what to animate) ๏ Timing and speed ๏ Easing (custom curves) Documenting animation as Design Tokens
  13. Keep it Short 2. Does it annoy my user? Does

    it respond well? Is it too long?
  14. Keep it Meaningful 3. Does it provide useful information and

    adds value to the content or the interface ?
  15. Give user control 4. Can my user turn off/ pause

    animations? Even better: can they chose to turn them on?