SQUASH & STRETCH & Using animation to enhance user experience GOOD UX

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

@marktimemedia THE CURRENT STATE OF WEB ANIMATION

@marktimemedia PROBLEMS WITH WEB ANIMATION PRACTICES

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

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

@marktimemedia How can we avoid these problems and use animation effectively?

@marktimemedia THE 12 PRINCIPLES OF ANIMATION a.k.a. How To Convey Physics & Psychology in 2D

@marktimemedia SQUASH & STRETCH 12 Principles Tumblr

@marktimemedia ANTICIPATION 12 Principles Tumblr

@marktimemedia STAGING 12 Principles Tumblr

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

@marktimemedia FOLLOW THROUGH & OVERLAPPING ACTION 12 Principles Tumblr

@marktimemedia SLOW IN & SLOW OUT 12 Principles Tumblr

@marktimemedia ARC 12 Principles Tumblr

@marktimemedia SECONDARY ACTION 12 Principles Tumblr

@marktimemedia TIMING 12 Principles Tumblr

@marktimemedia EXAGGERATION 12 Principles Tumblr

@marktimemedia SOLID DRAWING 12 Principles Tumblr

@marktimemedia APPEAL 12 Principles Tumblr

@marktimemedia WHAT DO THESE PRINCIPLES PROVIDE?

@marktimemedia Realism Context Causality Focus Delight

@marktimemedia PROPERTIES OF ANIMATION

@marktimemedia ELEMENTS Color Location Shape Opacity Scale Focus

@marktimemedia EASING Ease-In Ease-Out Bounce

@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/

@marktimemedia TRANSITIONS 1 Persistent 2 Incoming 3 Outgoing 4 Static Material Design

@marktimemedia CUT Lack of oritentation & change blindness

@marktimemedia TWEEN Transition between keyframes Material Design

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

@marktimemedia TRANSFORMATION

@marktimemedia PRACTICAL MOTION UX

@marktimemedia USES OF ANIMATION

@marktimemedia CONTEXT: HIERARCHY Material Design

@marktimemedia CONTEXT: RELATIONSHIPS Material Design

@marktimemedia PROVIDE FEEDBACK Material Design

@marktimemedia INDICATE STATUS Material Design

@marktimemedia GIVE INSTRUCTION Material Design

@marktimemedia ADD DELIGHT Material Design

@marktimemedia THE FLASHING CURSOR

@marktimemedia USING ANIMATION RESPONSIBLY

@marktimemedia Does it add value? Photo: Pexels

@marktimemedia Are your behaviors consistent? Photo: Pexels

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

@marktimemedia Is it optimized? Photo: Pexels

@marktimemedia Do you need it? Photo: Pexels

@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

@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

@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: