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

2.
It’s true. RacheltheGreat.com

3.
surgery.

4.
RachelNabors.com/archive

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

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

7.
lightningdesignsystem.com/design/mo;on

8.
homestarrunner.com

9.
THE BRAIN’S GPU
Anima&on &

10.
Dropdown courtesy of Codrops

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

12.
Inner Sanctum, 1948

13.
UI credit: codrops.com

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

15.
What just
happened?

16.
“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)

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

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

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

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

21.
CAPTURING
ATTENTION
Anima&on for

22.
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.”

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

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

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

26.
Levels of Animacy and the Cone of Vision

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

28.
APPLIED TO
USER INTERFACES
Anima&on

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

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

31.
Stateful Transi;ons

32.
rachelnabors.com

33.
fluevog.com

34.
Supplemental Anima;ons

35.
rachelnabors.com

36.
magazine.good.is/ci;es

37.
Causal Effects

38.
rachelnabors.com

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

40.
Decora;ve Anima;ons

41.
rachelnabors.com

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

43.
IN PRACTICE
Anima&on

44.
Storyboards

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

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

47.
• 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

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

49.
BEST PRACTICES
Anima&on

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

51.
–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

52.
Short and
sweet…

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

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

55.
rachelnabors.com

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

57.
rachelnabors.com

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

59.
…but not
too fast.

60.
@rachelnabors
Faster != Better

61.
rachelnabors.com

62.
What just
happened?

63.
Be invisible

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

65.
I only ever wanted
to be loved…

66.
Install a kill
switch.

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

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

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

70.
devToolsChallenger.com

71.
Animate
deliberately.

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

73.
JUST REMEMBER!

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

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

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