$30 off During Our Annual Pro Sale. View Details »

Design for Interaction: Using animation to enhance user experience

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.

Michelle Schulp Hunt

July 12, 2019
Tweet

More Decks by Michelle Schulp Hunt

Other Decks in Design

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

    View Slide