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
   

   View Slide

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
   

   View Slide

3. @marktimemedia
   The web
   is built on
   INTERACTIONS
   

   View Slide

4. @marktimemedia
   The web is built on
   CUT SCENES
   

   View Slide

5. @marktimemedia
   How do we
   communicate
   an interaction
   has happened?
   

   View Slide

6. @marktimemedia
   CONSISTENCY
   of elements
   

   View Slide

7. @marktimemedia
   INTERACTION
   & ANIMATION
   

   View Slide

8. @marktimemedia
   CONTEXT: HIERARCHY
   Material Design
   

   View Slide

9. @marktimemedia
   CONTEXT: RELATIONSHIPS
   Material Design
   

   View Slide

10. @marktimemedia
    PROVIDE FEEDBACK
    Material Design
    

    View Slide

11. @marktimemedia
    INDICATE STATUS
    Material Design
    

    View Slide

12. @marktimemedia
    GIVE INSTRUCTION
    Material Design
    

    View Slide

13. @marktimemedia
    ADD DELIGHT
    Material Design
    

    View Slide

14. @marktimemedia
    THE
    FLASHING
    CURSOR
    

    View Slide

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

    View Slide

16. @marktimemedia
    SQUASH & STRETCH
    12 Principles Tumblr
    

    View Slide

17. @marktimemedia
    ANTICIPATION
    12 Principles Tumblr
    

    View Slide

18. @marktimemedia
    STAGING
    12 Principles Tumblr
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

22. @marktimemedia
    ARC
    12 Principles Tumblr
    

    View Slide

23. @marktimemedia
    SECONDARY ACTION
    12 Principles Tumblr
    

    View Slide

24. @marktimemedia
    TIMING
    12 Principles Tumblr
    

    View Slide

25. @marktimemedia
    EXAGGERATION
    12 Principles Tumblr
    

    View Slide

26. @marktimemedia
    SOLID DRAWING
    12 Principles Tumblr
    

    View Slide

27. @marktimemedia
    APPEAL
    12 Principles Tumblr
    

    View Slide

28. @marktimemedia
    WHAT DO THESE
    PRINCIPLES
    PROVIDE?
    

    View Slide

29. @marktimemedia
    Realism
    Context
    Causality
    Focus
    Delight
    

    View Slide

30. @marktimemedia
    PROPERTIES OF
    ANIMATION
    

    View Slide

31. @marktimemedia
    ELEMENTS
    Color
    Location
    Shape
    Opacity
    Scale
    Focus
    

    View Slide

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

    View Slide

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/
    

    View Slide

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

    View Slide

35. @marktimemedia
    TWEEN
    Transition
    between
    keyframes
    Material Design
    

    View Slide

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

    View Slide

37. @marktimemedia
    TRANSFORMATION
    

    View Slide

38. @marktimemedia
    PRACTICAL MOTION UX
    

    View Slide

39. @marktimemedia
    CSS vs JS
    HOW DO WE
    ANIMATE?
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

45. @marktimemedia
    USING
    ANIMATION
    RESPONSIBLY
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

49. @marktimemedia
    Is it optimized?
    Photo: Pexels
    

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide