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.

Transcript

1. DESIGNING FOR Using animation to enhance user experience INTERACTION
2. @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
3. @marktimemedia The web is built on INTERACTIONS
4. @marktimemedia The web is built on CUT SCENES
5. @marktimemedia How do we communicate an interaction has happened?
6. @marktimemedia CONSISTENCY of elements
7. @marktimemedia INTERACTION & ANIMATION
8. @marktimemedia CONTEXT: HIERARCHY Material Design
9. @marktimemedia CONTEXT: RELATIONSHIPS Material Design
10. @marktimemedia PROVIDE FEEDBACK Material Design
11. @marktimemedia INDICATE STATUS Material Design
12. @marktimemedia GIVE INSTRUCTION Material Design
13. @marktimemedia ADD DELIGHT Material Design
14. @marktimemedia THE FLASHING CURSOR
15. @marktimemedia THE 12 PRINCIPLES OF ANIMATION a.k.a. How To Convey Physics & Psychology in 2D
16. @marktimemedia SQUASH & STRETCH 12 Principles Tumblr
17. @marktimemedia ANTICIPATION 12 Principles Tumblr
18. @marktimemedia STAGING 12 Principles Tumblr
19. @marktimemedia STRAIGHT AHEAD ACTION & POSE TO POSE 12 Principles Tumblr
20. @marktimemedia FOLLOW THROUGH & OVERLAPPING ACTION 12 Principles Tumblr
21. @marktimemedia SLOW IN & SLOW OUT 12 Principles Tumblr
22. @marktimemedia ARC 12 Principles Tumblr
23. @marktimemedia SECONDARY ACTION 12 Principles Tumblr
24. @marktimemedia TIMING 12 Principles Tumblr
25. @marktimemedia EXAGGERATION 12 Principles Tumblr
26. @marktimemedia SOLID DRAWING 12 Principles Tumblr
27. @marktimemedia APPEAL 12 Principles Tumblr
28. @marktimemedia WHAT DO THESE PRINCIPLES PROVIDE?
29. @marktimemedia Realism Context Causality Focus Delight
30. @marktimemedia PROPERTIES OF ANIMATION
31. @marktimemedia ELEMENTS Color Location Shape Opacity Scale Focus
32. @marktimemedia EASING Ease-In Ease-Out Bounce
33. @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/
34. @marktimemedia TRANSITIONS 1 Persistent 2 Outgoing 3 Incoming 4 Static Material Design
35. @marktimemedia TWEEN Transition between keyframes Material Design
36. @marktimemedia FADE Dissolve, Cross-Dissolve, Sequential Material Design
37. @marktimemedia TRANSFORMATION
38. @marktimemedia PRACTICAL MOTION UX
39. @marktimemedia CSS vs JS HOW DO WE ANIMATE?
40. @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
41. @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
42. @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
43. @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
44. @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
45. @marktimemedia USING ANIMATION RESPONSIBLY
46. @marktimemedia Does it add value? Photo: Pexels
47. @marktimemedia Are your behaviors consistent? Photo: Pexels
48. @marktimemedia Is it still functional without it? Photo: Pexels
49. @marktimemedia Is it optimized? Photo: Pexels
50. @marktimemedia Do you need it? Photo: Pexels
51. @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
52. @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
53. @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
54. @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 michelle@marktimemedia.com @marktimemedia michelleschulp.pink bit.ly/design-for-interaction