Tweet
Tweet

Slide 1

Slide 1 text

Improving User Experience with CSS Animations Stéphanie Walter 2020 - @walterstephanie - stephaniewalter.design

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Warning: this talks contains a lot of animations and motion. inpx.it/UX-CSS-animations

Slide 4

Slide 4 text

the12principles.tumblr.com

Slide 5

Slide 5 text

UX ❤ Animations How and where animations can help users

Slide 6

Slide 6 text

Animations decrease cognitive load By making state changes more natural

Slide 7

Slide 7 text

What happened in-between?

Slide 8

Slide 8 text

Remember the flip book?

Slide 9

Slide 9 text

Offload the in-between work to the computer / eyes

Slide 10

Slide 10 text

Animations create feedback By showing the user a response was triggered

Slide 11

Slide 11 text

“The system recognised the action”

Slide 12

Slide 12 text

“Everything is fine, the system is currently working”

Slide 13

Slide 13 text

Feedback on future state

Slide 14

Slide 14 text

Animations grab user’s attention The human eye is attracted to moving things

Slide 15

Slide 15 text

Subtle nudge to invite to discovery

Slide 16

Slide 16 text

Avoid change blindness

Slide 17

Slide 17 text

Distract users’s attention from loading time

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

Animations provide spacial orientation Where do you come from? Where did you go? Where can I go?

Slide 20

Slide 20 text

Where did it come from? Where did it go? via Val Head

Slide 21

Slide 21 text

Help move towards different steps

Slide 22

Slide 22 text

Prevent disorientation on context change

Slide 23

Slide 23 text

Animations craft a unique experience By helping explain and creating emotional connexions

Slide 24

Slide 24 text

Explain it with animations

Slide 25

Slide 25 text

Capture emotions

Slide 26

Slide 26 text

Bring delight

Slide 27

Slide 27 text

Serve and reinforce the brand identity

Slide 28

Slide 28 text

Animations should fit and illustrate the message without overwhelming users

Slide 29

Slide 29 text

Semantics & Syntax

Slide 30

Slide 30 text

Transitions A B Animations A B C D

Slide 31

Slide 31 text

Transition Syntax

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

Trigged on :checked

Slide 34

Slide 34 text

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.)

Slide 35

Slide 35 text

Animation Syntax

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

๏ 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.

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

Fun tool to play with ๏ https://keyframes.app/animate/ keyframes.app/animate/

Slide 41

Slide 41 text

Animations are mostly used for more complex UI motion involving different stages, looping motion and “illustrative” animations

Slide 42

Slide 42 text

opacity & transform = ❤ The two things the browser can “cheaply” animate

Slide 43

Slide 43 text

CSS transforms ๏ Translate — transform: translate()

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

CSS transforms ๏ Translate — transform: translate() ๏ Scale — transform: scale() ๏ Rotate — transform: rotate() ๏ Skew — transform: skew()

Slide 47

Slide 47 text

SVG + CSS animations / transitions = ❤

Slide 48

Slide 48 text

inpx.it/day-night

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

No content

Slide 51

Slide 51 text

No content

Slide 52

Slide 52 text

No content

Slide 53

Slide 53 text

Be careful when you use transforms on paths and elements inside a SVG document

Slide 54

Slide 54 text

No content

Slide 55

Slide 55 text

Whaaaaaaat???

Slide 56

Slide 56 text

CSS default transform- origin: 50% 50% 0 SVG transform origin (expect root): 0,0

Slide 57

Slide 57 text

SVG transform origin (0,0)

Slide 58

Slide 58 text

No content

Slide 59

Slide 59 text

No content

Slide 60

Slide 60 text

You can build animations that follow a specific path with offset- path: path + offset-distance

Slide 61

Slide 61 text

No content

Slide 62

Slide 62 text

Ease and duration and timing How to build animations that feel right for your users

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

Test it, test it and test it!

Slide 65

Slide 65 text

No content

Slide 66

Slide 66 text

Linear 100% 0 100% Progression Time

Slide 67

Slide 67 text

Ease-in 100% 0 100% Progression Time

Slide 68

Slide 68 text

Ease-out 100% 0 100% Progression Time

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

cubic-bezier.com

Slide 71

Slide 71 text

With great power… Building inclusive accessible motion

Slide 72

Slide 72 text

Motion might may people with vestibular disorders sick

Slide 73

Slide 73 text

๏ 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

Slide 74

Slide 74 text

Checking for user preference to reduce (not remove) motion

Slide 75

Slide 75 text

No content

Slide 76

Slide 76 text

Communicating & documenting Animations are part of the whole design / dev process

Slide 77

Slide 77 text

Storyboarding (like classic animation)

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

Prototyping UI animations with design tools

Slide 81

Slide 81 text

+

Slide 82

Slide 82 text

Find inspiration to show and explain to the devs what you expect

Slide 83

Slide 83 text

Design in tools, Decide in the browser!

Slide 84

Slide 84 text

Defining an animation language as part of brand design system

Slide 85

Slide 85 text

๏ Purpose (when and why animate) ๏ Types of animations (what to animate) ๏ Timing and speed ๏ Easing (custom curves) Documenting animation as Design Tokens

Slide 86

Slide 86 text

Keep it Simple 1. Does it distract my users from accomplishing their tasks?

Slide 87

Slide 87 text

Keep it Short 2. Does it annoy my user? Does it respond well? Is it too long?

Slide 88

Slide 88 text

Keep it Meaningful 3. Does it provide useful information and adds value to the content or the interface ?

Slide 89

Slide 89 text

Give user control 4. Can my user turn off/ pause animations? Even better: can they chose to turn them on?

Slide 90

Slide 90 text

Test it! 5. Different timing, different devices, browsers, users!

Slide 91

Slide 91 text

Going further

Slide 92

Slide 92 text

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