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. Stéphanie Walter 2020 - @walterstephanie - stephaniewalter.design Improving User Experience

    with CSS Animations
  2. UX & Product Designer Mobile expert. Pixel & CSS Lover

    stephaniewalter.design @WalterStephanie
  3. Warning: this talks contains a lot of animations and motion.

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

  5. Semantics & Syntax

  6. Transitions A B Animations A B C D

  7. None
  8. Trigged on :checked

  9. Transition Properties

  10. None
  11. ๏ 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, form submit, etc.
  12. None
  13. Animation Properties

  14. keyframes.app/animate/

  15. opacity & transform = ❤ The two things the browser

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

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

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

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

    transform: scale() ๏ Rotate — transform: rotate() ๏ Skew — transform: skew()
  20. Ease and duration and timing How to build animations that

    feel right
  21. 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
  22. Test it, test it and test it!

  23. None
  24. Linear 100% 0 100% Progression Time

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

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

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

  28. cubic-bezier.com

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

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

    triggered
  31. “The system recognised the action”

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

  33. Feedback on future state

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

    moving things
  35. Subtle nudge to invite to discovery

  36. Avoid change blindness

  37. Distract users’s attention from loading time

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

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

  40. Remember the flip book?

  41. Prevent disorientation on context change

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

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

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

    Val Head
  45. Help move towards different steps

  46. Animations craft a unique experience By helping explain and create

    emotional connexions
  47. Explain it with animations

  48. Capture emotions

  49. Part of the brand identity

  50. With great power… On using those great tools with caution

  51. Motion might may people with vestibular disorders sick

  52. ๏ Multi-Speed or Multi- Directional Movement (parallax) ๏ Scaling and

    Zooming ๏ Spinning and Vortex Effects ๏ Peripheral Motion, ๏ Etc. A few potential triggers Source: Apple
  53. Checking for user preference to reduce (not remove) motion

  54. None
  55. Keep it Simple 1. Does it distract my users from

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

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

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

    animations? Even better: can they chose to turn them on?
  59. Test it, with different browser conditions, with different users…

  60. Going further

  61. UX & Product Designer Mobile expert. Pixel & CSS Lover

    stephaniewalter.design @WalterStephanie