Pro Yearly is on sale from $80 to $50! »

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.

F383c6a4dc55e331bbe2987b622cee6b?s=128

Stéphanie Walter

August 05, 2020
Tweet

Transcript

  1. Improving User Experience with CSS Animations Stéphanie Walter 2020 -

    @walterstephanie - stephaniewalter.design
  2. stephaniewalter.design @WalterStephanie User Researcher & Product Designer Mobile expert. Pixel

    & CSS Lover
  3. Warning: this talks contains a lot of animations and motion.

    inpx.it/UX-CSS-animations
  4. the12principles.tumblr.com

  5. UX ❤ Animations How and where animations can help users

  6. Animations decrease cognitive load By making state changes more natural

  7. What happened in-between?

  8. Remember the flip book?

  9. Offload the in-between work to the computer / eyes

  10. Animations create feedback By showing the user a response was

    triggered
  11. “The system recognised the action”

  12. “Everything is fine, the system is currently working”

  13. Feedback on future state

  14. Animations grab user’s attention The human eye is attracted to

    moving things
  15. Subtle nudge to invite to discovery

  16. Avoid change blindness

  17. Distract users’s attention from loading time

  18. Don’t hijack user’s attention with dark patterns! Demo

  19. Animations provide spacial orientation Where do you come from? Where

    did you go? Where can I go?
  20. Where did it come from? Where did it go? via

    Val Head
  21. Help move towards different steps

  22. Prevent disorientation on context change

  23. Animations craft a unique experience By helping explain and creating

    emotional connexions
  24. Explain it with animations

  25. Capture emotions

  26. Bring delight

  27. Serve and reinforce the brand identity

  28. Animations should fit and illustrate the message without overwhelming users

  29. Semantics & Syntax

  30. Transitions A B Animations A B C D

  31. Transition Syntax

  32. None
  33. Trigged on :checked

  34. 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.)
  35. Animation Syntax

  36. None
  37. ๏ 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.
  38. None
  39. None
  40. Fun tool to play with ๏ https://keyframes.app/animate/ keyframes.app/animate/

  41. Animations are mostly used for more complex UI motion involving

    different stages, looping motion and “illustrative” animations
  42. opacity & transform = ❤ The two things the browser

    can “cheaply” animate
  43. CSS transforms ๏ Translate — transform: translate()

  44. CSS transforms ๏ Translate — transform: translate() ๏ Scale —

    transform: scale()
  45. CSS transforms ๏ Translate — transform: translate() ๏ Scale —

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

    transform: scale() ๏ Rotate — transform: rotate() ๏ Skew — transform: skew()
  47. SVG + CSS animations / transitions = ❤

  48. inpx.it/day-night

  49. CSS custom properties (variables) can make your SVG animations easier

  50. None
  51. None
  52. None
  53. Be careful when you use transforms on paths and elements

    inside a SVG document
  54. None
  55. Whaaaaaaat???

  56. CSS default transform- origin: 50% 50% 0 SVG transform origin

    (expect root): 0,0
  57. SVG transform origin (0,0)

  58. None
  59. None
  60. You can build animations that follow a specific path with

    offset- path: path + offset-distance
  61. None
  62. Ease and duration and timing How to build animations that

    feel right for your users
  63. 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
  64. Test it, test it and test it!

  65. None
  66. Linear 100% 0 100% Progression Time

  67. Ease-in 100% 0 100% Progression Time

  68. Ease-out 100% 0 100% Progression Time

  69. Ease-in-out 100% 0 100% Progression Time

  70. cubic-bezier.com

  71. With great power… Building inclusive accessible motion

  72. Motion might may people with vestibular disorders sick

  73. ๏ 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
  74. Checking for user preference to reduce (not remove) motion

  75. None
  76. Communicating & documenting Animations are part of the whole design

    / dev process
  77. Storyboarding (like classic animation)

  78. 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
  79. 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
  80. Prototyping UI animations with design tools

  81. +

  82. Find inspiration to show and explain to the devs what

    you expect
  83. Design in tools, Decide in the browser!

  84. Defining an animation language as part of brand design system

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

    (what to animate) ๏ Timing and speed ๏ Easing (custom curves) Documenting animation as Design Tokens
  86. Keep it Simple 1. Does it distract my users from

    accomplishing their tasks?
  87. Keep it Short 2. Does it annoy my user? Does

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

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

    animations? Even better: can they chose to turn them on?
  90. Test it! 5. Different timing, different devices, browsers, users!

  91. Going further

  92. stephaniewalter.design @WalterStephanie User Researcher & Product Designer Mobile expert. Pixel

    & CSS Lover