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