The animated GUI: lessons from Disney - Presentation Transcript 1. The animated GUI Lessons from Disney Kristel Van Ael and Joannes Vandermeulen of Namahn at SIGCHI.be Fall Conference on New Communities 19/10/2009 2. What are the principles of animation? How can animation enhance the user experience? 3. Context Assignment from Atos Worldline: use the full potential of a new 16-bit colour display to create a user-friendly and appealing interface for a new XENTA point-of-sales terminal. Basic interface concept and flows designed by Namahn in 2003, and still standing Now focus on colour, typography, iconography and … animation 4. Why animate? Provide a natural flow Focus attention on the action Provide a sense of bearing Engage and appeal NOT: disrupt or hold back 5. The illusion of motion 6. Frame rate The human eye perceives motion at about 24 fps (frames per second) 20 fps is enough for simple feedback 25 fps is accepted as very decent +30 fps for games 7. Motion blur In the real world, an object leaves an impression of its path in our visual system – a smear. 8. Motion blur A rule of thumb: if an object moves more than half its size between any two frames, motion blur must be added. 9. Instant response Visual response to user actions needs to be without delay 0,1 second is about the limit for having the user feel that the system is reacting instantaneously More complex action may take at most 1,5 seconds 10. 8 Design principles Solid drawing Squash and stretch Arrival and departure Ease-in, ease-out Arcs Follow-through Anticipation Exaggeration 11. “Does your animation have weight, depth and balance?” 12. Solid drawing 13. Solid drawing The creation of objects so they appear to have the potential for movement 14. Solid drawing Avoid static symmetry and twin movements 15. Squash and stretch 16. Squash and stretch defining the rigidity and mass of an object by distorting its shape during an action 17. Squash and stretch Pin dropping in Google Maps on iPhone 18. Arrival and departure 19. Arrival and departure In real live, objects do not appear (enter) or disappear (exit) suddenly Three variations: objects fly in from off-screen, objects grow from a point to their full size objects dissolve onto the screen. Objects exit in the opposite way that they entered 20. Arrival and departure Visibility curve 21. Ease-in, ease-out 22. Ease-in, ease-out Ease-in is a gradual acceleration into a motion from a key position Ease-out is the gradual deceleration out of the motion to a key position In either case this principle refers to the simple fact that objects in the real world do not suddenly start or stop moving 23. Dan Bluth 24. Ease-in, ease-out 25. Ease-in, ease-out 26. Arcs 27. Arcs The movement of most natural motion will be described by a slightly circular path or arc of some kind. 28. Follow-through 29. Follow-through Objects in the real world do not come to sudden stops, all of the object coming to a standstill at once Example: objects coming to a stop will wiggle at the end of their motion, as if reacting to a small spring at the end of their travel Combine with overlapping motion 30. Anticipation 31. Anticipation Anticipation is a technique to alert the viewer to an upcoming action so it is not missed. Exaggerating in order to give the audience a cue about the main action to follow Examples: Contrary movement just before move Retracting slightly before expanding A character looking off screen in the direction where an important action is about to happen 32. Anticipation 33. Exaggeration 34. Exaggeration By increasing the salience of certain aspects of the world, the animator gives the audience footholds from which to better interpret the nature of the character, action, or situation Paradoxically, only by exaggeration do cartoons achieve more realism. 35. Credits Producer: Inge De Cock Production Manager: A

1. The animated GUI
Lessons from Disney
Kristel Van Ael and Joannes Vandermeulen of Namahn at
SIGCHI.be Fall Conference on New Communities 19/10/2009

2. What are the principles
of animation?
How can animation enhance the user experience?

3. Context
Assignment from Atos Worldline:
use the full potential of a new 16-bit colour display to
create a user-friendly and appealing interface for a new
XENTA point-of-sales terminal.
Basic interface concept and
flows designed by Namahn
in 2003, and still standing
Now focus on colour, typography,
iconography and … animation

6. Why animate?
Provide a natural flow
Focus attention on the action
Provide a sense of bearing
Engage and appeal
NOT: disrupt or hold back

7. The illusion of motion

8. Frame rate
The human eye perceives motion at about
24 fps (frames per second)
20 fps is enough for simple feedback
25 fps is accepted as very decent
+30 fps for games

9. Motion blur
In the real world, an object leaves an
impression of its path in our visual system
– a smear.

10. Motion blur
A rule of thumb: if an object moves more
than half its size between any two frames,
motion blur must be added.

14. Instant response
Visual response to user actions needs to be
without delay
0,1 second is about the limit for having the
user feel that the system is reacting
instantaneously
More complex action may take at most
1,5 seconds

15. 8 Design principles
Solid drawing
Squash and stretch
Arrival and departure
Ease-in, ease-out
Arcs
Follow-through
Anticipation
Exaggeration

16. “Does your
animation have
weight, depth and
balance?”

17. Solid drawing

18. Solid drawing
The creation of objects so they appear to have
the potential for movement

20. Solid drawing
Avoid static symmetry and twin movements

21. Squash and stretch

22. Squash and stretch
defining the rigidity and mass of an object by
distorting its shape during an action

23. Squash and stretch
Pin dropping in Google Maps on iPhone

25. Arrival and departure

26. Arrival and departure
In real live, objects do not appear (enter) or
disappear (exit) suddenly
Three variations:
objects fly in from off-screen,
objects grow from a point to their full size
objects dissolve onto the screen.
Objects exit in the opposite way that they
entered

28. Arrival and departure
Visibility curve

31. Ease-in, ease-out

32. Ease-in, ease-out
Ease-in is a gradual acceleration into a
motion from a key position
Ease-out is the gradual deceleration out of
the motion to a key position
In either case this principle refers to the
simple fact that objects in the real world do
not suddenly start or stop moving

33. Dan Bluth

34. Ease-in, ease-out

35. Ease-in, ease-out

37. Arcs

38. Arcs
The movement of most natural motion will
be described by a slightly circular path or arc
of some kind.

40. Follow-through

41. Follow-through
Objects in the real world do not come to
sudden stops, all of the object coming to a
standstill at once
Example: objects coming to a stop will wiggle
at the end of their motion, as if reacting to a
small spring at the end of their travel
Combine with overlapping motion

43. Anticipation

44. Anticipation
Anticipation is a technique to alert the
viewer to an upcoming action so it is not
missed. Exaggerating in order to give the
audience a cue about the main action to
follow
Examples:
Contrary movement just before move
Retracting slightly before expanding
A character looking off screen in the direction where an
important action is about to happen

45. Anticipation

48. Exaggeration

49. Exaggeration
By increasing the salience of certain aspects
of the world, the animator gives the
audience footholds from which to better
interpret the nature of the character, action,
or situation
Paradoxically, only by exaggeration do
cartoons achieve more realism.

53. Credits
Producer: Inge De Cock
Production Manager: Alain Schiffeleers
Art Director: Kristel Van Ael
Assistant Art Director: Bram Boot
Illustrator: Kurt Cornelis
Animation Consultant: Eric Goossens
Animator: Raf Schoenmaekers
Technical support: Luc Vanoostenryck, Mark Vanophalvens,
Wouter Verlinden, Jan Verstrepen

54. References
The illusion of Life: Disney animation
by Ollie Johnston (Author), Frank Thomas
Disney Editions, 1995
The Nuts and Bolts of Animation
by Ed J. Cheetham, Country Music Television – MTV Networks
Computer Graphics May 2001, Volume 35, pg 48-52
Animation: From Cartoons to the User Interface
by Bay-Wei Chang and David Ungar
UIST: User Interface Software and Technology, 1993