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.

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
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
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.
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
53. Be careful when you use transforms on paths and elements inside a SVG document
55. Whaaaaaaat???
56. CSS default transform- origin: 50% 50% 0 SVG transform origin (expect root): 0,0
57. SVG transform origin (0,0)
60. You can build animations that follow a specific path with offset- path: path + offset-distance
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!
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
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