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

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. Eli.wtf @elifitch
Hi, I'm Eli
I like to make things on the internet

3. Eli.wtf @elifitch

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. 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. Eli.wtf @elifitch
Animation is
unfairly trivialized

7. Eli.wtf @elifitch
Superfluous
It's only surprise & delight
Just makes it pretty
Just for polish
Sugar

8. Eli.wtf @elifitch

9. Eli.wtf @elifitch

10. Eli.wtf @elifitch
A di erent way
to think about design

11. Eli.wtf @elifitch
Biological & Cultural

12. Eli.wtf @elifitch

13. Eli.wtf @elifitch

14. Eli.wtf @elifitch

15. Eli.wtf @elifitch

16. Eli.wtf @elifitch

17. Eli.wtf @elifitch
Animation
Engages the brain di erently
is no di erent

18. Eli.wtf @elifitch

19. Eli.wtf @elifitch
Ventral stream - Static design
Dorsal stream - Animation

20. Eli.wtf @elifitch
Animation is an e cient
way to communicate

21. Eli.wtf @elifitch
Animation & CognitionAnimation & CognitionAnimation & CognitionAnimation & CognitionAnimation & CognitionAnimation & CognitionAnimation & CognitionAnimation & CognitionAnimation & CognitionAnimation & CognitionAnimation & CognitionAnimation & CognitionAnimation & CognitionAnimation & CognitionAnimation & CognitionAnimation & Cognition

22. Eli.wtf @elifitch
Managing users' cognition
Animating responsibly
Lighten cognitive load
Cognitive "muscle memory"
Influence perception of time

23. Eli.wtf @elifitch
Ethical animation

24. Eli.wtf @elifitch

25. Eli.wtf @elifitch

26. Eli.wtf @elifitch
Don't leave the
non-visual behind

27. Eli.wtf @elifitch
Be mindful of
vestibular issues

28. Eli.wtf @elifitch
Problematic examples
Wired.co.uk
Vimeo Cameo
RD Construction

29. Eli.wtf @elifitch
Provide alternatives

30. Eli.wtf @elifitch
Lighten cognitive load

31. Eli.wtf @elifitch
Research Approved!™

32. Eli.wtf @elifitch
“Multithreaded” thinking

33. Eli.wtf @elifitch
Reduces "change blindness"

34. Eli.wtf @elifitch
Cueing

35. Eli.wtf @elifitch

36. Eli.wtf @elifitch
Connects states

37. Eli.wtf @elifitch

38. Eli.wtf @elifitch
Spacial orientation

39. Eli.wtf @elifitch

40. Eli.wtf @elifitch

41. Eli.wtf @elifitch
Mental map of
what's out of view

42. Eli.wtf @elifitch

43. Eli.wtf @elifitch
Provides a sense of depth

44. Eli.wtf @elifitch
Sign in
Username
Password
MFA Code
Sign in

45. Eli.wtf @elifitch
Especially important on mobile

46. Eli.wtf @elifitch

47. Eli.wtf @elifitch
Animation skews time

48. Eli.wtf @elifitch
Time is a funny thing

49. Eli.wtf @elifitch

50. Eli.wtf @elifitch
Animation governs our perception of time

51. Eli.wtf @elifitch

52. Eli.wtf @elifitch
Animation keeps us mentally engaged

53. Eli.wtf @elifitch
0:00

54. Eli.wtf @elifitch
EmotionEmotionEmotionEmotionEmotionEmotionEmotionEmotionEmotionEmotionEmotionEmotionEmotionEmotionEmotionEmotion

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. Eli.wtf @elifitch
Meaning from motion

57. Eli.wtf @elifitch

58. Eli.wtf @elifitch

59. Eli.wtf @elifitch
The jump in Thomas Was Alone might be amongst the best ever
programmed...

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. Eli.wtf @elifitch

62. Eli.wtf @elifitch
- Fritz Heider and Marianne Simmel

63. Eli.wtf @elifitch
The building blocks
of character

64. Eli.wtf @elifitch
&Timing Spacing

65. Eli.wtf @elifitch
- linear

66. Eli.wtf @elifitch
- ease out

67. Eli.wtf @elifitch
- bounce

68. Eli.wtf @elifitch
- hard bounce

69. Eli.wtf @elifitch
Two halves of the same coin

70. Eli.wtf @elifitch
Disney's 12 Principles

71. Eli.wtf @elifitch
Disney's 5 Principles

72. Eli.wtf @elifitch
Disney's 4??? Principles

73. Eli.wtf @elifitch
Disney's 4 Guidelines?

74. Eli.wtf @elifitch
Sure, lets go with that

75. Eli.wtf @elifitch
&

76. Eli.wtf @elifitch
- No follow through

77. Eli.wtf @elifitch
- Energetic follow through

78. Eli.wtf @elifitch
- Serious follow through

79. Eli.wtf @elifitch

80. Eli.wtf @elifitch

81. Eli.wtf @elifitch
- Secondary action

82. Eli.wtf @elifitch
Squash & Stretch

83. Eli.wtf @elifitch
- Squash and stretch

84. Eli.wtf @elifitch
These combine to form an infinite palette

85. Eli.wtf @elifitch
- Restrained in-out

86. Eli.wtf @elifitch

87. Eli.wtf @elifitch

88. Eli.wtf @elifitch
Playful or

89. Eli.wtf @elifitch
Finding the right character

90. Eli.wtf @elifitch
Ground up
vs.
Top down

91. Eli.wtf @elifitch
Start with words

92. Eli.wtf @elifitch
Rely on onomatopoeia

93. Eli.wtf @elifitch
Boingggggggg
Fwoosh
Shwumpf
Kerplunk
Thud

94. Eli.wtf @elifitch
Physical objects help

95. Eli.wtf @elifitch
Music works too

96. Eli.wtf @elifitch

97. Eli.wtf @elifitch
No brand is "too serious"

98. Eli.wtf @elifitch
No brand is "too serious"

99. Eli.wtf @elifitch
ProcessProcessProcessProcessProcessProcessProcessProcessProcessProcessProcessProcessProcessProcessProcessProcess

100. Eli.wtf @elifitch
Start early

101. Eli.wtf @elifitch

102. Eli.wtf @elifitch

103. Eli.wtf @elifitch

104. Eli.wtf @elifitch
Collaboration is essential

105. Eli.wtf @elifitch
Don't wait for permission

106. Eli.wtf @elifitch
TLDRTLDRTLDRTLDRTLDRTLDRTLDRTLDRTLDRTLDRTLDRTLDRTLDRTLDRTLDRTLDR

107. Eli.wtf @elifitch
Don't let em get ya down

108. Eli.wtf @elifitch
With great power...

109. Eli.wtf @elifitch
Always have your desired
character in mind

110. Eli.wtf @elifitch
Nobody's gonna do this for you

111. Eli.wtf @elifitch
Animation is all about the user

112. Eli.wtf @elifitch
http://assets.eli.wtf/talks/animation-talk-fitc-2018