The animated GUI
  Lessons from Disney

  Kristel Van Ael and Joannes Vandermeulen of Namahn at
SIGCHI.be Fall Conference ...
What are the principles
of animation?
How can animation enhance the user experience?
Context
 Assignment from Atos Worldline:
  use the full potential of a new 16-bit colour display to
  create a user-friend...
Why animate?
 Provide a natural flow

 Focus attention on the action

 Provide a sense of bearing

 Engage and appeal

 NO...
The illusion of motion
Frame rate
 The human eye perceives motion at about
 24 fps (frames per second)

 20 fps is enough for simple feedback

 2...
Motion blur
 In the real world, an object leaves an
 impression of its path in our visual system
 – a smear.
Motion blur
 A rule of thumb: if an object moves more
 than half its size between any two frames,
 motion blur must be add...
Instant response
 Visual response to user actions needs to be
 without delay

 0,1 second is about the limit for having th...
8 Design principles
 Solid drawing
 Squash and stretch
 Arrival and departure
 Ease-in, ease-out
 Arcs
 Follow-through
 An...
“Does your
animation have
weight, depth and
balance?”
Solid drawing
Solid drawing
 The creation of objects so they appear to have
 the potential for movement
Solid drawing
 Avoid static symmetry and twin movements
Squash and stretch
Squash and stretch
 defining the rigidity and mass of an object by
 distorting its shape during an action
Squash and stretch
 Pin dropping in Google Maps on iPhone
Arrival and departure
Arrival and departure
 In real live, objects do not appear (enter) or
 disappear (exit) suddenly

 Three variations:
  obj...
Arrival and departure
 Visibility curve
Ease-in, ease-out
Ease-in, ease-out
 Ease-in is a gradual acceleration into a
 motion from a key position

 Ease-out is the gradual decelera...
Dan Bluth
Ease-in, ease-out
Ease-in, ease-out
Arcs
Arcs
 The movement of most natural motion will
 be described by a slightly circular path or arc
 of some kind.
Follow-through
Follow-through
 Objects in the real world do not come to
 sudden stops, all of the object coming to a
 standstill at once
...
Anticipation
Anticipation
 Anticipation is a technique to alert the
 viewer to an upcoming action so it is not
 missed. Exaggerating in...
Anticipation
Exaggeration
Exaggeration
 By increasing the salience of certain aspects
 of the world, the animator gives the
 audience footholds from...
Credits
 Producer: Inge De Cock

 Production Manager: Alain Schiffeleers

 Art Director: Kristel Van Ael

 Assistant Art D...
References
 The illusion of Life: Disney animation
 by Ollie Johnston (Author), Frank Thomas
 Disney Editions, 1995

 The ...
The animated GUI: lessons from Disney
The animated GUI: lessons from Disney
The animated GUI: lessons from Disney
The animated GUI: lessons from Disney
The animated GUI: lessons from Disney
The animated GUI: lessons from Disney
The animated GUI: lessons from Disney
The animated GUI: lessons from Disney
The animated GUI: lessons from Disney
The animated GUI: lessons from Disney
The animated GUI: lessons from Disney
The animated GUI: lessons from Disney
The animated GUI: lessons from Disney
The animated GUI: lessons from Disney
The animated GUI: lessons from Disney
The animated GUI: lessons from Disney
The animated GUI: lessons from Disney
The animated GUI: lessons from Disney
Upcoming SlideShare
Loading in...5
×

The animated GUI: lessons from Disney

1,955

Published on

Published in: Technology, Business
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,955
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
71
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

The animated GUI: lessons from Disney

  1. 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. 2. What are the principles of animation? How can animation enhance the user experience?
  3. 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. 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. 5. The illusion of motion
  6. 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. 7. Motion blur In the real world, an object leaves an impression of its path in our visual system – a smear.
  8. 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. 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. 10. 8 Design principles Solid drawing Squash and stretch Arrival and departure Ease-in, ease-out Arcs Follow-through Anticipation Exaggeration
  11. 11. “Does your animation have weight, depth and balance?”
  12. 12. Solid drawing
  13. 13. Solid drawing The creation of objects so they appear to have the potential for movement
  14. 14. Solid drawing Avoid static symmetry and twin movements
  15. 15. Squash and stretch
  16. 16. Squash and stretch defining the rigidity and mass of an object by distorting its shape during an action
  17. 17. Squash and stretch Pin dropping in Google Maps on iPhone
  18. 18. Arrival and departure
  19. 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. 20. Arrival and departure Visibility curve
  21. 21. Ease-in, ease-out
  22. 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. 23. Dan Bluth
  24. 24. Ease-in, ease-out
  25. 25. Ease-in, ease-out
  26. 26. Arcs
  27. 27. Arcs The movement of most natural motion will be described by a slightly circular path or arc of some kind.
  28. 28. Follow-through
  29. 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. 30. Anticipation
  31. 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. 32. Anticipation
  33. 33. Exaggeration
  34. 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. 35. 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
  36. 36. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×