Move Your UsersAnimation Principles for Great User Experiences
Chet HaaseAdobe Systems
Romain GuyGoogle
Move Your UsersAnimation Principles for Great User Experiences
Chet HaaseAdobe Systems
Romain GuyGoogleAnimation Rules
3
Agenda> Introduction> The Twelve Rules of Cartoon Animation> Animation Rules for Better UI Design
4
Introduction> The Twelve Rules
From The Illusion of Life by Thomas & Johnston History, analysis of Disney animation
techniques Rules for creating better cartoons
Also,Timing for Animation by Whitaker & Halas
Great examples of different timing techniques for cartoon animation
5
Why Cartoons?> This was the original 'animation' medium> Experts studied life, cartoons, animation, and
audience reaction for years What can we learn and apply?
> Plus: Someone asked us at Devoxx and this is our answer
6
Cartoons != GUIs> Exaggeration for effect> Not attempting realism> Focus on fun and humor
> On the other hand, cartoons are approachable> … like our GUIs should be
7
The Twelve Rules
8
Squash & Stretch
Time
9
Anticipation> Short actions just before the main ones
Ahhhh….!
Choooooo!
10
Staging> Clearly communicating what is happening to the
audience poses, camera views, lighting, focus, …
11
Straight Ahead vs. Pose to Pose> Drawing each frame separately and uniquely,
versus drawing the main poses of interest and then in-betweening the rest
Keyframes
In-betweens
Pose to Pose Straight Ahead
12
Follow Through and Overlapping Action> Realistic body physics: we are not rigid bodies.
13
Slow In and Out> Non-linear timing for more interesting and realistic
movement
Time
14
Arcs> Non-Linear motion for more life-like movement
15
Secondary Action> Actions which emphasize or complement the main
action
16
Timing> Careful timing of actions for realism, impact, and
effect
17
Exaggeration> Making actions more lively, more obvious, more
entertaining
18
Solid Drawing> Have to be able to draw well before you can
animate well
19
Appeal> Believable, appealing characters that the audience
can enjoy
20
Computer Animation> Everything is in-betweens
Animate properties between different values> Fast refresh rates (60+ frames/sec)> GUIs not usually hand-drawn> Animation frameworks can help:
Timing Framework: timingframework.dev.java.net Scenario: scenario.dev.java.net Trident: www.pushing-pixels.org Others…
21
The Twelve Rules … for GUIS
22
Squash & Stretch> Lifelike objects deform in reaction to gravity and
collision> GUI objects that change shape can become more
fun, more interactive
23
Anticipation> Short actions just before the main ones> Give hints to the user about what will or may
happen
24
Staging> Clearly communicating what is happening to the
audience> Emphasize the important elements> Avoid too much noise
including too much animation
25
Straight Ahead vs. Pose to Pose> Drawing each frame separately and uniquely,
versus drawing the main poses of interest and then in-betweening the rest
> Computer animation is generally pose-to-pose You can get more "straight ahead" behavior by
having more steps in a multi-step animation path Or randomized animations, such as particle effects
26
Follow Through and Overlapping Action> Realistic body physics: we are not rigid bodies.> Give your GUI elements some life when user
interacts with them
27
Slow In and Out> Non-linear timing for more interesting and realistic
movement> Very important for good computer animations
linear movement looks too stilted and awkward Acceleration and deceleration are your friends
28
Arcs> Non-Linear motion for more life-like movement> Non-linear motion for GUI objects can help breathe
life into static UIs
29
Secondary Action> Actions which emphasize or complement the main
action> Subtle animations that help the user understand
the main point
30
Timing> Careful timing of actions for realism, impact, and
effect> Timing is critical overall for computer animation> Make those animations quick and purposeful
31
Exaggeration> Making actions more lively, more obvious, more
entertaining> Useful for transitions or highlighting states, actions
Bring the user with you by exaggerating changes in state
> But not too much…
32
Solid Drawing> Have to be able to draw well before you can
animate well> UI design skills are still important
Whizzy animations can't make up for bad UIs> Color choices, look & feel consistency and
effectiveness, …
33
Appeal> Believable, appealing characters that the audience
can enjoy> Related to 'Solid Drawing'
Still need good UI design> Also, don't overdo those animations
34
Proposed Rules for GUI Animation> Timed: Fast, realistic, appropriate> Designed: Use animations for good, not evil> Smooth: Don't make your users hate animations> Transitioning: Bring the users along> Realistic: Motion, timing, interactions> Anticipatory: Hint what may happen> Simple: Help the user, don't confuse them
35
Prototyping Animations> Like good GUIs, prototype before coding
Flash Authoring After Effects (etc.)
36
For More Information> Read these:
The Illusion of Life Timing for Animation
> Romain's Blog: www.curious-creature.org> Chet's Blog: graphics-geek.blogspot.com> Filthy Rich Clients: filthyrichclients.org
37
Romain GuyChet Haase
Top Related