the animated gui: lessons from disney
TRANSCRIPT
![Page 1: The animated GUI: lessons from Disney](https://reader034.vdocument.in/reader034/viewer/2022042613/554d2c5ab4c905c5208b520f/html5/thumbnails/1.jpg)
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
![Page 2: The animated GUI: lessons from Disney](https://reader034.vdocument.in/reader034/viewer/2022042613/554d2c5ab4c905c5208b520f/html5/thumbnails/2.jpg)
What are the principles of animation?How can animation enhance the user experience?
![Page 3: The animated GUI: lessons from Disney](https://reader034.vdocument.in/reader034/viewer/2022042613/554d2c5ab4c905c5208b520f/html5/thumbnails/3.jpg)
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
Context
![Page 4: The animated GUI: lessons from Disney](https://reader034.vdocument.in/reader034/viewer/2022042613/554d2c5ab4c905c5208b520f/html5/thumbnails/4.jpg)
![Page 5: The animated GUI: lessons from Disney](https://reader034.vdocument.in/reader034/viewer/2022042613/554d2c5ab4c905c5208b520f/html5/thumbnails/5.jpg)
![Page 6: The animated GUI: lessons from Disney](https://reader034.vdocument.in/reader034/viewer/2022042613/554d2c5ab4c905c5208b520f/html5/thumbnails/6.jpg)
Provide a natural flow
Focus attention on the action
Provide a sense of bearing
Engage and appeal
NOT: disrupt or hold back
Why animate?
![Page 7: The animated GUI: lessons from Disney](https://reader034.vdocument.in/reader034/viewer/2022042613/554d2c5ab4c905c5208b520f/html5/thumbnails/7.jpg)
The illusion of motion
![Page 8: The animated GUI: lessons from Disney](https://reader034.vdocument.in/reader034/viewer/2022042613/554d2c5ab4c905c5208b520f/html5/thumbnails/8.jpg)
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
Frame rate
![Page 9: The animated GUI: lessons from Disney](https://reader034.vdocument.in/reader034/viewer/2022042613/554d2c5ab4c905c5208b520f/html5/thumbnails/9.jpg)
In the real world, an object leaves an impression of its path in our visual system – a smear.
Motion blur
![Page 10: The animated GUI: lessons from Disney](https://reader034.vdocument.in/reader034/viewer/2022042613/554d2c5ab4c905c5208b520f/html5/thumbnails/10.jpg)
A rule of thumb: if an object moves more than half its size between any two frames, motion blur must be added.
Motion blur
![Page 11: The animated GUI: lessons from Disney](https://reader034.vdocument.in/reader034/viewer/2022042613/554d2c5ab4c905c5208b520f/html5/thumbnails/11.jpg)
![Page 12: The animated GUI: lessons from Disney](https://reader034.vdocument.in/reader034/viewer/2022042613/554d2c5ab4c905c5208b520f/html5/thumbnails/12.jpg)
![Page 13: The animated GUI: lessons from Disney](https://reader034.vdocument.in/reader034/viewer/2022042613/554d2c5ab4c905c5208b520f/html5/thumbnails/13.jpg)
![Page 14: The animated GUI: lessons from Disney](https://reader034.vdocument.in/reader034/viewer/2022042613/554d2c5ab4c905c5208b520f/html5/thumbnails/14.jpg)
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
Instant response
![Page 15: The animated GUI: lessons from Disney](https://reader034.vdocument.in/reader034/viewer/2022042613/554d2c5ab4c905c5208b520f/html5/thumbnails/15.jpg)
8 Design principlesSolid drawing
Squash and stretch
Arrival and departure
Ease-in, ease-out
Arcs
Follow-through
Anticipation
Exaggeration
![Page 16: The animated GUI: lessons from Disney](https://reader034.vdocument.in/reader034/viewer/2022042613/554d2c5ab4c905c5208b520f/html5/thumbnails/16.jpg)
“Does your animation have weight, depth and balance?”
![Page 17: The animated GUI: lessons from Disney](https://reader034.vdocument.in/reader034/viewer/2022042613/554d2c5ab4c905c5208b520f/html5/thumbnails/17.jpg)
Solid drawing
![Page 18: The animated GUI: lessons from Disney](https://reader034.vdocument.in/reader034/viewer/2022042613/554d2c5ab4c905c5208b520f/html5/thumbnails/18.jpg)
Solid drawing
The creation of objects so they appear to have the potential for movement
![Page 19: The animated GUI: lessons from Disney](https://reader034.vdocument.in/reader034/viewer/2022042613/554d2c5ab4c905c5208b520f/html5/thumbnails/19.jpg)
![Page 20: The animated GUI: lessons from Disney](https://reader034.vdocument.in/reader034/viewer/2022042613/554d2c5ab4c905c5208b520f/html5/thumbnails/20.jpg)
Solid drawing
Avoid static symmetry and twin movements
![Page 21: The animated GUI: lessons from Disney](https://reader034.vdocument.in/reader034/viewer/2022042613/554d2c5ab4c905c5208b520f/html5/thumbnails/21.jpg)
Squash and stretch
![Page 22: The animated GUI: lessons from Disney](https://reader034.vdocument.in/reader034/viewer/2022042613/554d2c5ab4c905c5208b520f/html5/thumbnails/22.jpg)
Squash and stretch
defining the rigidity and mass of an object by distorting its shape during an action
![Page 23: The animated GUI: lessons from Disney](https://reader034.vdocument.in/reader034/viewer/2022042613/554d2c5ab4c905c5208b520f/html5/thumbnails/23.jpg)
Squash and stretch
Pin dropping in Google Maps on iPhone
![Page 24: The animated GUI: lessons from Disney](https://reader034.vdocument.in/reader034/viewer/2022042613/554d2c5ab4c905c5208b520f/html5/thumbnails/24.jpg)
![Page 25: The animated GUI: lessons from Disney](https://reader034.vdocument.in/reader034/viewer/2022042613/554d2c5ab4c905c5208b520f/html5/thumbnails/25.jpg)
Arrival and departure
![Page 26: The animated GUI: lessons from Disney](https://reader034.vdocument.in/reader034/viewer/2022042613/554d2c5ab4c905c5208b520f/html5/thumbnails/26.jpg)
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
![Page 27: The animated GUI: lessons from Disney](https://reader034.vdocument.in/reader034/viewer/2022042613/554d2c5ab4c905c5208b520f/html5/thumbnails/27.jpg)
![Page 28: The animated GUI: lessons from Disney](https://reader034.vdocument.in/reader034/viewer/2022042613/554d2c5ab4c905c5208b520f/html5/thumbnails/28.jpg)
Arrival and departure
Visibility curve
![Page 29: The animated GUI: lessons from Disney](https://reader034.vdocument.in/reader034/viewer/2022042613/554d2c5ab4c905c5208b520f/html5/thumbnails/29.jpg)
![Page 30: The animated GUI: lessons from Disney](https://reader034.vdocument.in/reader034/viewer/2022042613/554d2c5ab4c905c5208b520f/html5/thumbnails/30.jpg)
![Page 31: The animated GUI: lessons from Disney](https://reader034.vdocument.in/reader034/viewer/2022042613/554d2c5ab4c905c5208b520f/html5/thumbnails/31.jpg)
Ease-in, ease-out
![Page 32: The animated GUI: lessons from Disney](https://reader034.vdocument.in/reader034/viewer/2022042613/554d2c5ab4c905c5208b520f/html5/thumbnails/32.jpg)
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
![Page 33: The animated GUI: lessons from Disney](https://reader034.vdocument.in/reader034/viewer/2022042613/554d2c5ab4c905c5208b520f/html5/thumbnails/33.jpg)
Dan Bluth
![Page 34: The animated GUI: lessons from Disney](https://reader034.vdocument.in/reader034/viewer/2022042613/554d2c5ab4c905c5208b520f/html5/thumbnails/34.jpg)
Ease-in, ease-out
![Page 35: The animated GUI: lessons from Disney](https://reader034.vdocument.in/reader034/viewer/2022042613/554d2c5ab4c905c5208b520f/html5/thumbnails/35.jpg)
Ease-in, ease-out
![Page 36: The animated GUI: lessons from Disney](https://reader034.vdocument.in/reader034/viewer/2022042613/554d2c5ab4c905c5208b520f/html5/thumbnails/36.jpg)
![Page 37: The animated GUI: lessons from Disney](https://reader034.vdocument.in/reader034/viewer/2022042613/554d2c5ab4c905c5208b520f/html5/thumbnails/37.jpg)
Arcs
![Page 38: The animated GUI: lessons from Disney](https://reader034.vdocument.in/reader034/viewer/2022042613/554d2c5ab4c905c5208b520f/html5/thumbnails/38.jpg)
Arcs
The movement of most natural motion will be described by a slightly circular path or arc of some kind.
![Page 39: The animated GUI: lessons from Disney](https://reader034.vdocument.in/reader034/viewer/2022042613/554d2c5ab4c905c5208b520f/html5/thumbnails/39.jpg)
![Page 40: The animated GUI: lessons from Disney](https://reader034.vdocument.in/reader034/viewer/2022042613/554d2c5ab4c905c5208b520f/html5/thumbnails/40.jpg)
Follow-through
![Page 41: The animated GUI: lessons from Disney](https://reader034.vdocument.in/reader034/viewer/2022042613/554d2c5ab4c905c5208b520f/html5/thumbnails/41.jpg)
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
![Page 42: The animated GUI: lessons from Disney](https://reader034.vdocument.in/reader034/viewer/2022042613/554d2c5ab4c905c5208b520f/html5/thumbnails/42.jpg)
![Page 43: The animated GUI: lessons from Disney](https://reader034.vdocument.in/reader034/viewer/2022042613/554d2c5ab4c905c5208b520f/html5/thumbnails/43.jpg)
Anticipation
![Page 44: The animated GUI: lessons from Disney](https://reader034.vdocument.in/reader034/viewer/2022042613/554d2c5ab4c905c5208b520f/html5/thumbnails/44.jpg)
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
![Page 45: The animated GUI: lessons from Disney](https://reader034.vdocument.in/reader034/viewer/2022042613/554d2c5ab4c905c5208b520f/html5/thumbnails/45.jpg)
Anticipation
![Page 46: The animated GUI: lessons from Disney](https://reader034.vdocument.in/reader034/viewer/2022042613/554d2c5ab4c905c5208b520f/html5/thumbnails/46.jpg)
![Page 47: The animated GUI: lessons from Disney](https://reader034.vdocument.in/reader034/viewer/2022042613/554d2c5ab4c905c5208b520f/html5/thumbnails/47.jpg)
![Page 48: The animated GUI: lessons from Disney](https://reader034.vdocument.in/reader034/viewer/2022042613/554d2c5ab4c905c5208b520f/html5/thumbnails/48.jpg)
Exaggeration
![Page 49: The animated GUI: lessons from Disney](https://reader034.vdocument.in/reader034/viewer/2022042613/554d2c5ab4c905c5208b520f/html5/thumbnails/49.jpg)
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.
![Page 50: The animated GUI: lessons from Disney](https://reader034.vdocument.in/reader034/viewer/2022042613/554d2c5ab4c905c5208b520f/html5/thumbnails/50.jpg)
![Page 51: The animated GUI: lessons from Disney](https://reader034.vdocument.in/reader034/viewer/2022042613/554d2c5ab4c905c5208b520f/html5/thumbnails/51.jpg)
![Page 52: The animated GUI: lessons from Disney](https://reader034.vdocument.in/reader034/viewer/2022042613/554d2c5ab4c905c5208b520f/html5/thumbnails/52.jpg)
![Page 53: The animated GUI: lessons from Disney](https://reader034.vdocument.in/reader034/viewer/2022042613/554d2c5ab4c905c5208b520f/html5/thumbnails/53.jpg)
CreditsProducer: 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
![Page 54: The animated GUI: lessons from Disney](https://reader034.vdocument.in/reader034/viewer/2022042613/554d2c5ab4c905c5208b520f/html5/thumbnails/54.jpg)
ReferencesThe illusion of Life: Disney animationby Ollie Johnston (Author), Frank Thomas Disney Editions, 1995
The Nuts and Bolts of Animationby Ed J. Cheetham, Country Music Television – MTV NetworksComputer Graphics May 2001, Volume 35, pg 48-52
Animation: From Cartoons to the User Interface by Bay-Wei Chang and David UngarUIST: User Interface Software and Technology, 1993