Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Communicating with Animation: Body Language of the Web

161 views

Published on

Presented at FITC Toronto 2018
More info at www.fitc.ca/toronto

Presented by Eli Fitch, Mapbox

Overview
Contrary to popular opinion, UI animation isn’t something to be tacked on just for “polish” or “surprise & delight”. This attitude is why we end up with garish animations and interactions that get in the way of the experience, rather than existing seamlessly within the experience.

Animation is like body language for the web. A direct, intuitive and primal way to communicate with your users, animation can be as powerful as text, colour, or hierarchy if we understand how users infer meaning from motion. In this talk, Eli will discuss how to create a deeper connection with users through the psychology of how they perceive animation, how to evoke specific emotions with UI animation, and make experiences that feel tactile & engaging.

Objective
Understand how to communicate with users through motion

Target Audience
UI designers and front end developers, and folks who touch those realms

Five Things Audience Members Will Learn
Why animation deserves to be a first class citizen in UI design
How users perceive animation
How to appropriately use animation to communicate with users
Why animation is the best tool to spatially orient users
How to create UI motion that conveys your brand values

Published in: Design
  • Be the first to comment

  • Be the first to like this

Communicating with Animation: Body Language of the Web

  1. 1. Eli.wtf @elifitch Web AnimationWeb AnimationWeb AnimationWeb AnimationWeb AnimationWeb AnimationWeb AnimationWeb AnimationWeb AnimationWeb AnimationWeb AnimationWeb AnimationWeb AnimationWeb AnimationWeb AnimationWeb AnimationWeb AnimationWeb AnimationWeb AnimationWeb AnimationWeb AnimationWeb AnimationWeb AnimationWeb AnimationWeb AnimationWeb AnimationHow to make friends and influence people
  2. 2. Eli.wtf @elifitch Hi, I'm Eli I like to make things on the internet
  3. 3. Eli.wtf @elifitch
  4. 4. Eli.wtf @elifitch Today I'm going to howl about Why animation should be a first class citizen in UI design How to use animation to influence user cognitionHow animation can shape users' emotional state How to build animation into your design process
  5. 5. Eli.wtf @elifitch Animation's place in interactiveAnimation's place in interactiveAnimation's place in interactiveAnimation's place in interactiveAnimation's place in interactiveAnimation's place in interactiveAnimation's place in interactiveAnimation's place in interactiveAnimation's place in interactiveAnimation's place in interactiveAnimation's place in interactiveAnimation's place in interactiveAnimation's place in interactiveAnimation's place in interactiveAnimation's place in interactiveAnimation's place in interactive designdesigndesigndesigndesigndesigndesigndesigndesigndesigndesigndesigndesigndesigndesigndesign
  6. 6. Eli.wtf @elifitch Animation is unfairly trivialized
  7. 7. Eli.wtf @elifitch Superfluous It's only surprise & delight Just makes it pretty Just for polish Sugar
  8. 8. Eli.wtf @elifitch
  9. 9. Eli.wtf @elifitch
  10. 10. Eli.wtf @elifitch A di erent way to think about design
  11. 11. Eli.wtf @elifitch Biological & Cultural
  12. 12. Eli.wtf @elifitch
  13. 13. Eli.wtf @elifitch
  14. 14. Eli.wtf @elifitch
  15. 15. Eli.wtf @elifitch
  16. 16. Eli.wtf @elifitch
  17. 17. Eli.wtf @elifitch Animation Engages the brain di erently is no di erent
  18. 18. Eli.wtf @elifitch
  19. 19. Eli.wtf @elifitch Ventral stream - Static design Dorsal stream - Animation
  20. 20. Eli.wtf @elifitch Animation is an e cient way to communicate
  21. 21. Eli.wtf @elifitch Animation & CognitionAnimation & CognitionAnimation & CognitionAnimation & CognitionAnimation & CognitionAnimation & CognitionAnimation & CognitionAnimation & CognitionAnimation & CognitionAnimation & CognitionAnimation & CognitionAnimation & CognitionAnimation & CognitionAnimation & CognitionAnimation & CognitionAnimation & Cognition
  22. 22. Eli.wtf @elifitch Managing users' cognition Animating responsibly Lighten cognitive load Cognitive "muscle memory" Influence perception of time
  23. 23. Eli.wtf @elifitch Ethical animation
  24. 24. Eli.wtf @elifitch
  25. 25. Eli.wtf @elifitch
  26. 26. Eli.wtf @elifitch Don't leave the non-visual behind
  27. 27. Eli.wtf @elifitch Be mindful of vestibular issues
  28. 28. Eli.wtf @elifitch Problematic examples Wired.co.uk Vimeo Cameo RD Construction
  29. 29. Eli.wtf @elifitch Provide alternatives
  30. 30. Eli.wtf @elifitch Lighten cognitive load
  31. 31. Eli.wtf @elifitch Research Approved!™
  32. 32. Eli.wtf @elifitch “Multithreaded” thinking
  33. 33. Eli.wtf @elifitch Reduces "change blindness"
  34. 34. Eli.wtf @elifitch Cueing
  35. 35. Eli.wtf @elifitch
  36. 36. Eli.wtf @elifitch Connects states
  37. 37. Eli.wtf @elifitch
  38. 38. Eli.wtf @elifitch Spacial orientation
  39. 39. Eli.wtf @elifitch
  40. 40. Eli.wtf @elifitch
  41. 41. Eli.wtf @elifitch Mental map of what's out of view
  42. 42. Eli.wtf @elifitch
  43. 43. Eli.wtf @elifitch Provides a sense of depth
  44. 44. Eli.wtf @elifitch Sign in Username Password MFA Code Sign in
  45. 45. Eli.wtf @elifitch Especially important on mobile
  46. 46. Eli.wtf @elifitch
  47. 47. Eli.wtf @elifitch Animation skews time
  48. 48. Eli.wtf @elifitch Time is a funny thing
  49. 49. Eli.wtf @elifitch
  50. 50. Eli.wtf @elifitch Animation governs our perception of time
  51. 51. Eli.wtf @elifitch
  52. 52. Eli.wtf @elifitch Animation keeps us mentally engaged
  53. 53. Eli.wtf @elifitch 0:00
  54. 54. Eli.wtf @elifitch EmotionEmotionEmotionEmotionEmotionEmotionEmotionEmotionEmotionEmotionEmotionEmotionEmotionEmotionEmotionEmotion
  55. 55. Eli.wtf @elifitch Influencing emotion How humans ascribe meaning to motionThe building blocks of character How to design animations to evoke a desired feeling
  56. 56. Eli.wtf @elifitch Meaning from motion
  57. 57. Eli.wtf @elifitch
  58. 58. Eli.wtf @elifitch
  59. 59. Eli.wtf @elifitch The jump in Thomas Was Alone might be amongst the best ever programmed...
  60. 60. Eli.wtf @elifitch Amazingly, I felt more connected to Thomas Was Alone's colored, polygonal blocks than I have to most human characters - Evan Narcisse, Kotaku
  61. 61. Eli.wtf @elifitch
  62. 62. Eli.wtf @elifitch - Fritz Heider and Marianne Simmel
  63. 63. Eli.wtf @elifitch The building blocks of character
  64. 64. Eli.wtf @elifitch &Timing Spacing
  65. 65. Eli.wtf @elifitch - linear
  66. 66. Eli.wtf @elifitch - ease out
  67. 67. Eli.wtf @elifitch - bounce
  68. 68. Eli.wtf @elifitch - hard bounce
  69. 69. Eli.wtf @elifitch Two halves of the same coin
  70. 70. Eli.wtf @elifitch Disney's 12 Principles
  71. 71. Eli.wtf @elifitch Disney's 5 Principles
  72. 72. Eli.wtf @elifitch Disney's 4??? Principles
  73. 73. Eli.wtf @elifitch Disney's 4 Guidelines?
  74. 74. Eli.wtf @elifitch Sure, lets go with that
  75. 75. Eli.wtf @elifitch &
  76. 76. Eli.wtf @elifitch - No follow through
  77. 77. Eli.wtf @elifitch - Energetic follow through
  78. 78. Eli.wtf @elifitch - Serious follow through
  79. 79. Eli.wtf @elifitch
  80. 80. Eli.wtf @elifitch
  81. 81. Eli.wtf @elifitch - Secondary action
  82. 82. Eli.wtf @elifitch Squash & Stretch
  83. 83. Eli.wtf @elifitch - Squash and stretch
  84. 84. Eli.wtf @elifitch These combine to form an infinite palette
  85. 85. Eli.wtf @elifitch - Restrained in-out
  86. 86. Eli.wtf @elifitch
  87. 87. Eli.wtf @elifitch
  88. 88. Eli.wtf @elifitch Playful or
  89. 89. Eli.wtf @elifitch Finding the right character
  90. 90. Eli.wtf @elifitch Ground up vs. Top down
  91. 91. Eli.wtf @elifitch Start with words
  92. 92. Eli.wtf @elifitch Rely on onomatopoeia
  93. 93. Eli.wtf @elifitch Boingggggggg Fwoosh Shwumpf Kerplunk Thud
  94. 94. Eli.wtf @elifitch Physical objects help
  95. 95. Eli.wtf @elifitch Music works too
  96. 96. Eli.wtf @elifitch
  97. 97. Eli.wtf @elifitch No brand is "too serious"
  98. 98. Eli.wtf @elifitch No brand is "too serious"
  99. 99. Eli.wtf @elifitch ProcessProcessProcessProcessProcessProcessProcessProcessProcessProcessProcessProcessProcessProcessProcessProcess
  100. 100. Eli.wtf @elifitch Start early
  101. 101. Eli.wtf @elifitch
  102. 102. Eli.wtf @elifitch
  103. 103. Eli.wtf @elifitch
  104. 104. Eli.wtf @elifitch Collaboration is essential
  105. 105. Eli.wtf @elifitch Don't wait for permission
  106. 106. Eli.wtf @elifitch TLDRTLDRTLDRTLDRTLDRTLDRTLDRTLDRTLDRTLDRTLDRTLDRTLDRTLDRTLDRTLDR
  107. 107. Eli.wtf @elifitch Don't let em get ya down
  108. 108. Eli.wtf @elifitch With great power...
  109. 109. Eli.wtf @elifitch Always have your desired character in mind
  110. 110. Eli.wtf @elifitch Nobody's gonna do this for you
  111. 111. Eli.wtf @elifitch Animation is all about the user
  112. 112. Eli.wtf @elifitch http://assets.eli.wtf/talks/animation-talk-fitc-2018

×