Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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