Enhancing User Experience With CSS Animations

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

4. the12principles.tumblr.com
   

   View Slide

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

   View Slide

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

   View Slide

7. What happened
   in-between?
   

   View Slide

8. Remember the
   flip book?
   

   View Slide

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

   View Slide

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

    View Slide

11. “The system
    recognised the
    action”
    

    View Slide

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

    View Slide

13. Feedback on
    future state
    

    View Slide

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

    View Slide

15. Subtle nudge
    to invite to
    discovery
    

    View Slide

16. Avoid change
    blindness
    

    View Slide

17. Distract users’s
    attention from
    loading time
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

21. Help move
    towards
    different steps
    

    View Slide

22. Prevent
    disorientation
    on context
    change
    

    View Slide

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

    View Slide

24. Explain it with
    animations
    

    View Slide

25. Capture
    emotions
    

    View Slide

26. Bring delight
    

    View Slide

27. Serve and reinforce
    the brand identity
    

    View Slide

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

    View Slide

29. Semantics & Syntax
    

    View Slide

30. Transitions
    A
    B
    Animations
    A
    B
    C
    D
    

    View Slide

31. Transition Syntax
    

    View Slide

32. View Slide

33. Trigged on :checked
    

    View Slide

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

    View Slide

35. Animation Syntax
    

    View Slide

36. View Slide

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.
    

    View Slide

38. View Slide

39. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

43. CSS transforms
    ๏ Translate — transform: translate()
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

47. SVG + CSS animations /
    transitions = ❤
    

    View Slide

48. inpx.it/day-night
    

    View Slide

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

    View Slide

50. View Slide

51. View Slide

52. View Slide

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

    View Slide

54. View Slide

55. Whaaaaaaat???
    

    View Slide

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

    View Slide

57. SVG transform
    origin (0,0)
    

    View Slide

58. View Slide

59. View Slide

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

    View Slide

61. View Slide

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

    View Slide

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
    

    View Slide

64. Test it, test it
    and test it!
    

    View Slide

65. View Slide

66. Linear
    100%
    0 100%
    Progression
    Time
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

70. cubic-bezier.com
    

    View Slide

71. With great power…
    Building inclusive accessible motion
    

    View Slide

72. Motion might may
    people with vestibular
    disorders sick
    

    View Slide

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
    

    View Slide

74. Checking for user
    preference to reduce
    (not remove) motion
    

    View Slide

75. View Slide

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

    View Slide

77. Storyboarding
    (like classic
    animation)
    

    View Slide

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
    

    View Slide

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
    

    View Slide

80. Prototyping UI
    animations with
    design tools
    

    View Slide

81. +
    

    View Slide

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

    View Slide

83. Design in tools,
    Decide in the browser!
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

91. Going further
    

    View Slide

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

    View Slide