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

Squash & Stretch & Good UX: Using Animation To Enhance User Experience

Squash & Stretch & Good UX: 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.
NOTE: best viewed as a real presentation since all of these examples are animated

Michelle Schulp Hunt

February 15, 2019

More Decks by Michelle Schulp Hunt

Other Decks in Design


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

    stuff. Carefully curated spontaneity. Adorable badass. Master suitcase packer & marshmallow roaster. SiteGround Ambassador. HI, I’M MICHELLE.
  2. @marktimemedia JANK "any stuttering, juddering or just plain halting that

    users see when a site or app isn't keeping up with the refresh rate… the result of frames taking too long for a browser to make… negatively impact[ing] your users and how they experience your site or app."
  3. @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/
  4. @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
  5. @marktimemedia RESOURCES • https://cssanimation.rocks/principles/ • http://jankfree.org/ • 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
  6. @marktimemedia QUESTIONS? Here’s how to get in touch: Michelle Schulp

    [email protected] @marktimemedia bit.ly/XXXXXX NOW: SiteGround booth, hallway track, afterparty ONLINE: iThemes design webinar series (March) IN PERSON: WordCamp Miami (March) WHERE TO FIND ME NEXT: