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

Design for Interaction: Using animation to enhance user experience

Design for Interaction: Using animation to enhance user experience

Modern browsers, JavaScript libraries, and CSS3 have made it easier than ever to create exciting, dynamic animated experiences within web interfaces. But we have also seen the unfortunate side effect of trying to do too much: websites that are resource hogs, eating up bandwidth and slowing load times to a crawl, all for effects that are ultimately just there for the “show” factor. This talk will discuss how to use these animation skills for good: to establish context, convey status, give feedback, and yes, even add a little delight. Along the way, we’ll discuss the principles of animation that guide everything from your favorite feature films to the actions of a button on your screen, and learn how deliberate animation choices can improve the experience for your user. We will also touch on the available tools in JS and CSS and how to choose which one is the right one for your animation task.

Michelle Schulp

July 12, 2019

More Decks by Michelle Schulp

Other Decks in Design


  1. DESIGNING FOR Using animation to enhance user experience INTERACTION

  2. @marktimemedia I Design & Build DIGITAL INTERFACES Rockstar at saying

    stuff. Adorable badass. Carefully curated spontaneity. Master suitcase packer. Accidental fitness buff. HI, I’M MICHELLE. actually not coffee
  3. @marktimemedia The web is built on INTERACTIONS

  4. @marktimemedia The web is built on CUT SCENES

  5. @marktimemedia How do we communicate an interaction has happened?

  6. @marktimemedia CONSISTENCY of elements

  7. @marktimemedia INTERACTION & ANIMATION

  8. @marktimemedia CONTEXT: HIERARCHY Material Design

  9. @marktimemedia CONTEXT: RELATIONSHIPS Material Design

  10. @marktimemedia PROVIDE FEEDBACK Material Design

  11. @marktimemedia INDICATE STATUS Material Design

  12. @marktimemedia GIVE INSTRUCTION Material Design

  13. @marktimemedia ADD DELIGHT Material Design

  14. @marktimemedia THE FLASHING CURSOR

  15. @marktimemedia THE 12 PRINCIPLES OF ANIMATION a.k.a. How To Convey

    Physics & Psychology in 2D
  16. @marktimemedia SQUASH & STRETCH 12 Principles Tumblr

  17. @marktimemedia ANTICIPATION 12 Principles Tumblr

  18. @marktimemedia STAGING 12 Principles Tumblr

  19. @marktimemedia STRAIGHT AHEAD ACTION & POSE TO POSE 12 Principles

  20. @marktimemedia FOLLOW THROUGH & OVERLAPPING ACTION 12 Principles Tumblr

  21. @marktimemedia SLOW IN & SLOW OUT 12 Principles Tumblr

  22. @marktimemedia ARC 12 Principles Tumblr

  23. @marktimemedia SECONDARY ACTION 12 Principles Tumblr

  24. @marktimemedia TIMING 12 Principles Tumblr

  25. @marktimemedia EXAGGERATION 12 Principles Tumblr

  26. @marktimemedia SOLID DRAWING 12 Principles Tumblr

  27. @marktimemedia APPEAL 12 Principles Tumblr


  29. @marktimemedia Realism Context Causality Focus Delight

  30. @marktimemedia PROPERTIES OF ANIMATION

  31. @marktimemedia ELEMENTS Color Location Shape Opacity Scale Focus

  32. @marktimemedia EASING Ease-In Ease-Out Bounce

  33. @marktimemedia DURATION 0.1 sec Instantaneous response 1 sec Flow of

    thought 10 sec Keeping attention Material Design https://www.nngroup.com/articles/response-times-3-important-limits/
  34. @marktimemedia TRANSITIONS 1 Persistent 2 Outgoing 3 Incoming 4 Static

    Material Design
  35. @marktimemedia TWEEN Transition between keyframes Material Design

  36. @marktimemedia FADE Dissolve, Cross-Dissolve, Sequential Material Design

  37. @marktimemedia TRANSFORMATION

  38. @marktimemedia PRACTICAL MOTION UX

  39. @marktimemedia CSS vs JS HOW DO WE ANIMATE?

  40. @marktimemedia Types of CSS animation (via Mozilla) • CSS transitions

    provide an easy way to make animations occur between the current style and an end CSS state, e.g., a resting button state and a hover state. • CSS animations allow developers to make animations between a set of starting property values and a final set rather than between two states. They consist of two components: – a style describing the CSS animation – a set of keyframes that indicate the start and end states of the animation's style, as well as possible intermediate points
  41. @marktimemedia Properties of CSS animation (via KeyCDN) • Layout properties

    - determine the size and placement of page elements – Animations that change an element’s width and height can affect the placement of other page elements, which can cause a chain reaction known as “layout thrash.” – Since animations that change the page layout are especially costly, they are best avoided. • Paint properties - define the appearance of page elements – Making changes to properties such as color requires repainting, which can be costly. – Simple animations that require a small portion of the viewport to be repainted may have a negligible impact on overall performance. Larger animations that require repainting may not be worth the effort. • Composite properties – CSS properties (transforms) that do not trigger paint or layout changes – For best results, try to limit yourself these four composite properties: position, scale, rotation, opacity
  42. @marktimemedia Capabilities (via CSS Tricks) • JS can interact with

    more complex elements including: runtime controls, independent transforms, relative values, nesting, progress reporting • Complex CSS animations don’t work on IE9 or earlier (if that is important) • However, CSS also has graceful degradation (no transition) rather than an error or extra detection
  43. @marktimemedia Performance (via CSS Tricks & Hackernoon) Javascript <-> CSS

    > jQuery • JS performed better when it affected document flow (top/left/width/height) • JS performed better if you’re not loading several animation libraries • CSS performed better on certain devices, was great for basic transitions, and handled 3D transforms better • CSS is more resilient (an error won’t throw everything off) • Both beat out jQuery
  44. @marktimemedia When to Use CSS vs JS (via Google) •

    Use CSS when you have smaller, self-contained states for UI elements. CSS transitions and animations are ideal for bringing a navigation menu in from the side, or showing a tooltip. You may end up using JavaScript to control the states, but the animations themselves will be in your CSS. • Use JavaScript when you need significant control over your animations

  46. @marktimemedia Does it add value? Photo: Pexels

  47. @marktimemedia Are your behaviors consistent? Photo: Pexels

  48. @marktimemedia Is it still functional without it? Photo: Pexels

  49. @marktimemedia Is it optimized? Photo: Pexels

  50. @marktimemedia Do you need it? Photo: Pexels

  51. @marktimemedia “Don’t make something unless it is both necessary and

    useful; but if it is both necessary and useful, don’t hesitate to make it beautiful.” – Shaker principle, via Animation At Work
  52. @marktimemedia UI/UX RESOURCES • https://cssanimation.rocks/principles/ • https://alistapart.com/article/motion-with-meaning-semantic-animation-in-interface-design • https://material.io/design/motion/understanding-motion.html#principles •

    http://www.howdesign.com/web-design-resources-technology/12-basic-principles-animation-motion-design/ • https://medium.com/@adaptivepath/jedi-principles-of-ui-animation-2b88423b1dac • https://www.invisionapp.com/inside-design/web-animation-ux/ • https://alistapart.com/article/web-animation-at-work • https://www.invisionapp.com/inside-design/is-animation-the-key-to-great-product-design/ • https://www.creativebloq.com/advice/understand-the-12-principles-of-animation • https://uxdesign.cc/good-to-great-ui-animation-tips-7850805c12e5 • https://medium.com/ux-in-motion/creating-usability-with-motion-the-ux-in-motion-manifesto-a87a4584ddc
  53. @marktimemedia PRACTICAL RESOURCES • https://s3.amazonaws.com/designco-web-assets/uploads/2019/05/animationhandbook.pdf InVision Animation Handbook • https://csstriggers.com/

    • https://blog.bitsrc.io/11-javascript-animation-libraries-for-2018-9d7ac93a2c59 • https://developers.google.com/web/fundamentals/design-and-ux/animations/css-vs-javascript • https://developer.mozilla.org/en- US/docs/Web/Performance/CSS_JavaScript_animation_performance • https://css-tricks.com/myth-busting-css-animations-vs-javascript/ • https://hackernoon.com/in-simple-terms-css-vs-javascript-abc9d709399d • https://www.keycdn.com/blog/animation-performance
  54. @marktimemedia QUESTIONS? Here’s how to get in touch: ONLINE: Lots

    of podcasts! (Do you have one? Need a guest?) IN PERSON: WordCamp Denver WordCamp Minneapolis/St. Paul Pressnomics Content Camp & WordCamp Sacramento WHERE TO FIND ME NEXT: Michelle Schulp [email protected] @marktimemedia michelleschulp.pink bit.ly/design-for-interaction