DESIGNING FOR Using animation to enhance user experience INTERACTION

@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

@marktimemedia The web is built on INTERACTIONS

@marktimemedia The web is built on CUT SCENES

@marktimemedia How do we communicate an interaction has happened?

@marktimemedia CONSISTENCY of elements

@marktimemedia INTERACTION & 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 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 Outgoing 3 Incoming 4 Static Material Design

@marktimemedia TWEEN Transition between keyframes Material Design

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

@marktimemedia TRANSFORMATION

@marktimemedia PRACTICAL MOTION UX

@marktimemedia CSS vs JS HOW DO WE ANIMATE?

@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

@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

@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

@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

@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

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

@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

@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 [email protected] @marktimemedia michelleschulp.pink bit.ly/design-for-interaction