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

Transcript

1. SQUASH & STRETCH & Using animation to enhance user experience GOOD UX
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.
3. @marktimemedia THE CURRENT STATE OF WEB ANIMATION
4. @marktimemedia PROBLEMS WITH WEB ANIMATION PRACTICES
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 effectively?
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 Tumblr
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
21. @marktimemedia WHAT DO THESE PRINCIPLES PROVIDE?
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
41. @marktimemedia USING ANIMATION RESPONSIBLY
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: