SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our User Agreement and Privacy Policy.
SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our Privacy Policy and User Agreement for details.
Successfully reported this slideshow.
Activate your 14 day free trial to unlock unlimited reading.
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.
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.
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.”
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.”
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?
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