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

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

Michelle Schulp
February 15, 2019

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

February 15, 2019

More Decks by Michelle Schulp

Other Decks in Design


  1. SQUASH & STRETCH & Using animation to enhance user experience

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


  5. @marktimemedia The Parallax Trend https://www.nngroup.com/articles/parallax-usability/

  6. @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."
  7. @marktimemedia How can we avoid these problems and use animation

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

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

  10. @marktimemedia ANTICIPATION 12 Principles Tumblr

  11. @marktimemedia STAGING 12 Principles Tumblr

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

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

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

  15. @marktimemedia ARC 12 Principles Tumblr

  16. @marktimemedia SECONDARY ACTION 12 Principles Tumblr

  17. @marktimemedia TIMING 12 Principles Tumblr

  18. @marktimemedia EXAGGERATION 12 Principles Tumblr

  19. @marktimemedia SOLID DRAWING 12 Principles Tumblr

  20. @marktimemedia APPEAL 12 Principles Tumblr


  22. @marktimemedia Realism Context Causality Focus Delight

  23. @marktimemedia PROPERTIES OF ANIMATION

  24. @marktimemedia ELEMENTS Color Location Shape Opacity Scale Focus

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

  26. @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/
  27. @marktimemedia TRANSITIONS 1 Persistent 2 Incoming 3 Outgoing 4 Static

    Material Design
  28. @marktimemedia CUT Lack of oritentation & change blindness

  29. @marktimemedia TWEEN Transition between keyframes Material Design

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

  31. @marktimemedia TRANSFORMATION

  32. @marktimemedia PRACTICAL MOTION UX

  33. @marktimemedia USES OF ANIMATION

  34. @marktimemedia CONTEXT: HIERARCHY Material Design

  35. @marktimemedia CONTEXT: RELATIONSHIPS Material Design

  36. @marktimemedia PROVIDE FEEDBACK Material Design

  37. @marktimemedia INDICATE STATUS Material Design

  38. @marktimemedia GIVE INSTRUCTION Material Design

  39. @marktimemedia ADD DELIGHT Material Design

  40. @marktimemedia THE FLASHING CURSOR


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

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

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

  45. @marktimemedia Is it optimized? Photo: Pexels

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

  47. @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
  48. @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
  49. @marktimemedia QUESTIONS? Here’s how to get in touch: Michelle Schulp

    michelle@marktimemedia.com @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: