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 Hunt

July 12, 2019

More Decks by Michelle Schulp Hunt

Other Decks in Design


  1. @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
  2. @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/
  3. @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
  4. @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
  5. @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
  6. @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
  7. @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
  8. @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
  9. @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
  10. @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
  11. @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