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
   

   View Slide

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.
   

   View Slide

3. @marktimemedia
   THE CURRENT
   STATE OF WEB
   ANIMATION
   

   View Slide

4. @marktimemedia
   PROBLEMS
   WITH WEB
   ANIMATION
   PRACTICES
   

   View Slide

5. @marktimemedia
   The Parallax Trend
   https://www.nngroup.com/articles/parallax-usability/
   

   View Slide

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."
   

   View Slide

7. @marktimemedia
   How can we
   avoid these
   problems and
   use animation
   effectively?
   

   View Slide

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

   View Slide

9. @marktimemedia
   SQUASH & STRETCH
   12 Principles Tumblr
   

   View Slide

10. @marktimemedia
    ANTICIPATION
    12 Principles Tumblr
    

    View Slide

11. @marktimemedia
    STAGING
    12 Principles Tumblr
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

15. @marktimemedia
    ARC
    12 Principles Tumblr
    

    View Slide

16. @marktimemedia
    SECONDARY ACTION
    12 Principles Tumblr
    

    View Slide

17. @marktimemedia
    TIMING
    12 Principles Tumblr
    

    View Slide

18. @marktimemedia
    EXAGGERATION
    12 Principles Tumblr
    

    View Slide

19. @marktimemedia
    SOLID DRAWING
    12 Principles Tumblr
    

    View Slide

20. @marktimemedia
    APPEAL
    12 Principles Tumblr
    

    View Slide

21. @marktimemedia
    WHAT DO THESE
    PRINCIPLES
    PROVIDE?
    

    View Slide

22. @marktimemedia
    Realism
    Context
    Causality
    Focus
    Delight
    

    View Slide

23. @marktimemedia
    PROPERTIES OF
    ANIMATION
    

    View Slide

24. @marktimemedia
    ELEMENTS
    Color
    Location
    Shape
    Opacity
    Scale
    Focus
    

    View Slide

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

    View Slide

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/
    

    View Slide

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

    View Slide

28. @marktimemedia
    CUT
    Lack of
    oritentation
    & change
    blindness
    

    View Slide

29. @marktimemedia
    TWEEN
    Transition
    between
    keyframes
    Material Design
    

    View Slide

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

    View Slide

31. @marktimemedia
    TRANSFORMATION
    

    View Slide

32. @marktimemedia
    PRACTICAL MOTION UX
    

    View Slide

33. @marktimemedia
    USES OF
    ANIMATION
    

    View Slide

34. @marktimemedia
    CONTEXT: HIERARCHY
    Material Design
    

    View Slide

35. @marktimemedia
    CONTEXT: RELATIONSHIPS
    Material Design
    

    View Slide

36. @marktimemedia
    PROVIDE FEEDBACK
    Material Design
    

    View Slide

37. @marktimemedia
    INDICATE STATUS
    Material Design
    

    View Slide

38. @marktimemedia
    GIVE INSTRUCTION
    Material Design
    

    View Slide

39. @marktimemedia
    ADD DELIGHT
    Material Design
    

    View Slide

40. @marktimemedia
    THE
    FLASHING
    CURSOR
    

    View Slide

41. @marktimemedia
    USING
    ANIMATION
    RESPONSIBLY
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

45. @marktimemedia
    Is it optimized?
    Photo: Pexels
    

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

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:
    

    View Slide