Since the widespread adoption of CSS animations and transitions, animation has started creeping back into web design. Loading screens and “flashy” intros are back, as well as subtle UI interactions that invisibly improve the user’s experience. Rachel Nabors explains the six components of motion design, how you can apply them in your own projects, and when to start planning animation in your process.

1. The Future of UX
Animation
on the Brain
with
@RachelNabors

2. It’s true. RacheltheGreat.com

3. surgery.

5. RachelNabors.com/archive

6. google.com/design/spec/anima;on/authen;c-mo;on.html

7. ibm.com/design/language/framework/interac;on/mo;on.shtml

8. lightningdesignsystem.com/design/mo;on

9. homestarrunner.com

10. THE BRAIN’S GPU
Anima&on &

11. Dropdown courtesy of Codrops

12. Jump Cut
From film, when the camera cuts directly to a
different perspec;ve.

13. Inner Sanctum, 1948

14. UI credit: codrops.com

17. In-Betweening
From anima;on, drawing all the poses “in between”
two important poses.

18. What just
happened?

20. “By offloading interpretation of changes to
the perceptual system, animation allows the
user to continue thinking about the task
domain, with no need to shift contexts to the
interface domain. By eliminating sudden
visual changes, animation lessens the chance
that the user is surprised.”
Scott E. Hudson and John T. Stasko (1993)

24. @rachelnabors
Cognitive load has
a cost that rivals
page load cost.

25. Jump Cut Site
Animated Site
0 1.25 2.5 3.75 5
3 seconds
2 seconds
Perceived Speed: Page Load

26. Jump Cut Site
Animated Site
1.25 2.5 3.75 5
0.5 seconds
3 seconds
3 seconds
2 seconds
Page Load Time Cognitive Load Time (“Time to Decipher”)
Perceived Speed: Cogni;ve Load

27. @rachelnabors
Do your own math.
Google “KLM GOMS.”

28. CAPTURING
ATTENTION
Anima&on for

29. It’s Alive! Animate Mo;on Captures A=en;on (2010)
“(T)hese speeded responses appeared to be due to
the perceived animacy of the objects… We conclude
that animate motion does indeed capture visual
attention.”

30. Animacy
How “alive” something appears to be.

33. @rachelnabors
If you want someone to
notice something, make
it bright and jiggly.

34. cracked.com/ar;cle_15239_the-5-most-annoying-banner-ads-internet_p5.html

36. Levels of Animacy and the Cone of Vision

37. @rachelnabors
When everything vies
for our attention, we
don’t know what to
focus on.

38. APPLIED TO
USER INTERFACES
Anima&on

39. @rachelnabors
Animation is a
visual representation of a
rate of change over time.
;me
loca;on

43. You use anima;on to indicate an element’s…
Direction Solidity Momentum

44. Stateful Transi;ons

45. rachelnabors.com

46. fluevog.com

47. Supplemental Anima;ons

48. rachelnabors.com

49. magazine.good.is/ci;es

50. Causal Effects

51. rachelnabors.com

52. biology.allaboutbirds.org/features/fancymales/fancy-males

53. Decora;ve Anima;ons

54. rachelnabors.com

55. polygon.com/a/xbox-one-review

56. IN PRACTICE
Anima&on

59. Storyboards

60. Key Poses or “Keys”
From anima;on, two important poses that can be
in-betweened.

61. @rachelnabors
Look for page loads, AJAX,
form submissions, any time
the page or its content
changes.

62. • Stateful Transi2ons when a user changes tasks
• Supplemental Anima2ons when new informa;on
appears
• Causal Effects when a user interacts with a page
Spo]ng Keys in your product

63. • Causality
• Feedback
• Loca;on
• Progression
• Transi;on
• Physics
Does the anima;on reinforce at least two of these?

64. BEST PRACTICES
Anima&on

65. and @RachelNabors
How to Not Set Everything on Fire
with Motion &
Animation
and @RachelNabors
How to Not Set Everything on Fire

66. –a Shaker saying
“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.”
deligh1ul

67. Short and
sweet…

68. Three ;meframes for user a_en;on
100 ms, instantaneous
1 second, still connected

69. Three ;meframes for user a_en;on
100 ms
1 second
10 seconds, disconnected

70. rachelnabors.com

71. –Studio anima;on rule of thumb
“However long your pre-production
animation, halve its duration…
then halve it again.”

72. rachelnabors.com

73. @rachelnabors
250~300 ms:
sweet spot for many
animations

74. …but not
too fast.

75. @rachelnabors
Faster != Better

76. rachelnabors.com

77. What just
happened?

78. Be invisible

79. I thought it was cute
the first time but by the 70th…
It’s annoying!

80. I only ever wanted
to be loved…

81. Install a kill
switch.

83. Op;on 1: Give No;ce
This site uses anima;on and mo;on. Disable it?

84. Op;on 2: Ask First
This site uses anima;on. How would you like to
experience it?
Full anima;on
Reduce anima;on
Disable anima;on

85. Op;on 3: Change Se]ngs
Accessibility Settings
Anima;on preferences:
Full anima;on
Reduce anima;on
Disable anima;on

86. devToolsChallenger.com

87. Animate
deliberately.

88. @rachelnabors
Use animation deliberately
or not at all.

89. JUST REMEMBER!

92. Find your project’s key “frames.”

93. • Stateful Transi2ons
• Supplemental Anima2ons
• Causal Effects
• Decora2on*
*used sparingly
The four kinds of anima;on

94. go forth and
Animate
Responsibly
@RachelNabors
WebAnima)onWeekly.com