the animated mobile nui: lessons from disney
DESCRIPTION
Presentation by Kristel Van Ael and Joannes Vandermeulen of NamahnTRANSCRIPT
![Page 1: The animated mobile NUI: lessons from Disney](https://reader034.vdocuments.us/reader034/viewer/2022052618/554d2cebb4c905ab268b50b3/html5/thumbnails/1.jpg)
The animated mobile NUI
Lessons from Disney
Mobile Monday 17/10/2011
Joannes Vandermeulen and Kristel Van Ael of Namahn
![Page 2: The animated mobile NUI: lessons from Disney](https://reader034.vdocuments.us/reader034/viewer/2022052618/554d2cebb4c905ab268b50b3/html5/thumbnails/2.jpg)
What are the principles of animation? How can animation enhance the user experience?
![Page 3: The animated mobile NUI: lessons from Disney](https://reader034.vdocuments.us/reader034/viewer/2022052618/554d2cebb4c905ab268b50b3/html5/thumbnails/3.jpg)
Project request from Atos Worldline use of the full potential of the new 16 bit colour display to create a user-friendly and appealing interface.
Field studies, concept and task flows done by Namahn in 2002 and still standing
Focus on colour, typography, iconography and… animation
Context
![Page 4: The animated mobile NUI: lessons from Disney](https://reader034.vdocuments.us/reader034/viewer/2022052618/554d2cebb4c905ab268b50b3/html5/thumbnails/4.jpg)
![Page 5: The animated mobile NUI: lessons from Disney](https://reader034.vdocuments.us/reader034/viewer/2022052618/554d2cebb4c905ab268b50b3/html5/thumbnails/5.jpg)
Animations provide a natural flow
Focusing the user’s attention on the action
Ordering the information (hierarchy)
Helping the user to stay oriented
Lively and engaging, more appealing
Why animation?
![Page 6: The animated mobile NUI: lessons from Disney](https://reader034.vdocuments.us/reader034/viewer/2022052618/554d2cebb4c905ab268b50b3/html5/thumbnails/6.jpg)
In its most basic form, character animation is about storytelling George Maestri
![Page 7: The animated mobile NUI: lessons from Disney](https://reader034.vdocuments.us/reader034/viewer/2022052618/554d2cebb4c905ab268b50b3/html5/thumbnails/7.jpg)
![Page 8: The animated mobile NUI: lessons from Disney](https://reader034.vdocuments.us/reader034/viewer/2022052618/554d2cebb4c905ab268b50b3/html5/thumbnails/8.jpg)
![Page 9: The animated mobile NUI: lessons from Disney](https://reader034.vdocuments.us/reader034/viewer/2022052618/554d2cebb4c905ab268b50b3/html5/thumbnails/9.jpg)
The illusion of motion
![Page 10: The animated mobile NUI: lessons from Disney](https://reader034.vdocuments.us/reader034/viewer/2022052618/554d2cebb4c905ab268b50b3/html5/thumbnails/10.jpg)
In the real world, an object leaves an impression of its path in our visual system – a smear.
Motion blur
![Page 11: The animated mobile NUI: lessons from Disney](https://reader034.vdocuments.us/reader034/viewer/2022052618/554d2cebb4c905ab268b50b3/html5/thumbnails/11.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 12: The animated mobile NUI: lessons from Disney](https://reader034.vdocuments.us/reader034/viewer/2022052618/554d2cebb4c905ab268b50b3/html5/thumbnails/12.jpg)
![Page 13: The animated mobile NUI: lessons from Disney](https://reader034.vdocuments.us/reader034/viewer/2022052618/554d2cebb4c905ab268b50b3/html5/thumbnails/13.jpg)
![Page 14: The animated mobile NUI: lessons from Disney](https://reader034.vdocuments.us/reader034/viewer/2022052618/554d2cebb4c905ab268b50b3/html5/thumbnails/14.jpg)
![Page 15: The animated mobile NUI: lessons from Disney](https://reader034.vdocuments.us/reader034/viewer/2022052618/554d2cebb4c905ab268b50b3/html5/thumbnails/15.jpg)
10 Design principles Solid drawing
Staging
Squash & stretch
Arrival and departure
Slow in / Slow out
Arcs
Follow through
Overlapping
Anticipation
Exaggeration
![Page 16: The animated mobile NUI: lessons from Disney](https://reader034.vdocuments.us/reader034/viewer/2022052618/554d2cebb4c905ab268b50b3/html5/thumbnails/16.jpg)
Does your animation have weight, depth and balance?
![Page 17: The animated mobile NUI: lessons from Disney](https://reader034.vdocuments.us/reader034/viewer/2022052618/554d2cebb4c905ab268b50b3/html5/thumbnails/17.jpg)
Solid drawing
![Page 18: The animated mobile NUI: lessons from Disney](https://reader034.vdocuments.us/reader034/viewer/2022052618/554d2cebb4c905ab268b50b3/html5/thumbnails/18.jpg)
Solid drawing
The creation of objects so they appear to have the potential for movement
![Page 19: The animated mobile NUI: lessons from Disney](https://reader034.vdocuments.us/reader034/viewer/2022052618/554d2cebb4c905ab268b50b3/html5/thumbnails/19.jpg)
Solid drawing
Giving your animation weight, depth, and balance gives it life
![Page 20: The animated mobile NUI: lessons from Disney](https://reader034.vdocuments.us/reader034/viewer/2022052618/554d2cebb4c905ab268b50b3/html5/thumbnails/20.jpg)
Solid drawing
Avoid static symmetry and twin movements
![Page 21: The animated mobile NUI: lessons from Disney](https://reader034.vdocuments.us/reader034/viewer/2022052618/554d2cebb4c905ab268b50b3/html5/thumbnails/21.jpg)
Solid drawing
Avoid static symmetry and twin movements
![Page 22: The animated mobile NUI: lessons from Disney](https://reader034.vdocuments.us/reader034/viewer/2022052618/554d2cebb4c905ab268b50b3/html5/thumbnails/22.jpg)
Staging
![Page 23: The animated mobile NUI: lessons from Disney](https://reader034.vdocuments.us/reader034/viewer/2022052618/554d2cebb4c905ab268b50b3/html5/thumbnails/23.jpg)
Staging
Making the central idea of an animation completely clear to the viewer.
![Page 24: The animated mobile NUI: lessons from Disney](https://reader034.vdocuments.us/reader034/viewer/2022052618/554d2cebb4c905ab268b50b3/html5/thumbnails/24.jpg)
![Page 25: The animated mobile NUI: lessons from Disney](https://reader034.vdocuments.us/reader034/viewer/2022052618/554d2cebb4c905ab268b50b3/html5/thumbnails/25.jpg)
![Page 26: The animated mobile NUI: lessons from Disney](https://reader034.vdocuments.us/reader034/viewer/2022052618/554d2cebb4c905ab268b50b3/html5/thumbnails/26.jpg)
Squash and stretch
![Page 27: The animated mobile NUI: lessons from Disney](https://reader034.vdocuments.us/reader034/viewer/2022052618/554d2cebb4c905ab268b50b3/html5/thumbnails/27.jpg)
Squash and stretch
Defining the rigidity and mass of an object by distorting its shape during an action
![Page 28: The animated mobile NUI: lessons from Disney](https://reader034.vdocuments.us/reader034/viewer/2022052618/554d2cebb4c905ab268b50b3/html5/thumbnails/28.jpg)
![Page 29: The animated mobile NUI: lessons from Disney](https://reader034.vdocuments.us/reader034/viewer/2022052618/554d2cebb4c905ab268b50b3/html5/thumbnails/29.jpg)
Squash and stretch
Flipboard vs. Apple iBook
![Page 30: The animated mobile NUI: lessons from Disney](https://reader034.vdocuments.us/reader034/viewer/2022052618/554d2cebb4c905ab268b50b3/html5/thumbnails/30.jpg)
Squash and stretch
Pin dropping in Google Maps on iPhone
![Page 31: The animated mobile NUI: lessons from Disney](https://reader034.vdocuments.us/reader034/viewer/2022052618/554d2cebb4c905ab268b50b3/html5/thumbnails/31.jpg)
Arrival and departure
![Page 32: The animated mobile NUI: lessons from Disney](https://reader034.vdocuments.us/reader034/viewer/2022052618/554d2cebb4c905ab268b50b3/html5/thumbnails/32.jpg)
Arrival and departure
In real live objects do not appear or disappear 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 33: The animated mobile NUI: lessons from Disney](https://reader034.vdocuments.us/reader034/viewer/2022052618/554d2cebb4c905ab268b50b3/html5/thumbnails/33.jpg)
![Page 34: The animated mobile NUI: lessons from Disney](https://reader034.vdocuments.us/reader034/viewer/2022052618/554d2cebb4c905ab268b50b3/html5/thumbnails/34.jpg)
Arrival and departure
Visibility curve
![Page 35: The animated mobile NUI: lessons from Disney](https://reader034.vdocuments.us/reader034/viewer/2022052618/554d2cebb4c905ab268b50b3/html5/thumbnails/35.jpg)
![Page 36: The animated mobile NUI: lessons from Disney](https://reader034.vdocuments.us/reader034/viewer/2022052618/554d2cebb4c905ab268b50b3/html5/thumbnails/36.jpg)
![Page 37: The animated mobile NUI: lessons from Disney](https://reader034.vdocuments.us/reader034/viewer/2022052618/554d2cebb4c905ab268b50b3/html5/thumbnails/37.jpg)
![Page 38: The animated mobile NUI: lessons from Disney](https://reader034.vdocuments.us/reader034/viewer/2022052618/554d2cebb4c905ab268b50b3/html5/thumbnails/38.jpg)
![Page 39: The animated mobile NUI: lessons from Disney](https://reader034.vdocuments.us/reader034/viewer/2022052618/554d2cebb4c905ab268b50b3/html5/thumbnails/39.jpg)
![Page 40: The animated mobile NUI: lessons from Disney](https://reader034.vdocuments.us/reader034/viewer/2022052618/554d2cebb4c905ab268b50b3/html5/thumbnails/40.jpg)
Slow in / Slow out Ease in / Ease out
![Page 41: The animated mobile NUI: lessons from Disney](https://reader034.vdocuments.us/reader034/viewer/2022052618/554d2cebb4c905ab268b50b3/html5/thumbnails/41.jpg)
Slow in / Slow out
Slow-in is a gradual acceleration into a motion from a key position
Slow-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 42: The animated mobile NUI: lessons from Disney](https://reader034.vdocuments.us/reader034/viewer/2022052618/554d2cebb4c905ab268b50b3/html5/thumbnails/42.jpg)
Slow in / Slow out
![Page 43: The animated mobile NUI: lessons from Disney](https://reader034.vdocuments.us/reader034/viewer/2022052618/554d2cebb4c905ab268b50b3/html5/thumbnails/43.jpg)
Slow in / Slow out
![Page 44: The animated mobile NUI: lessons from Disney](https://reader034.vdocuments.us/reader034/viewer/2022052618/554d2cebb4c905ab268b50b3/html5/thumbnails/44.jpg)
![Page 45: The animated mobile NUI: lessons from Disney](https://reader034.vdocuments.us/reader034/viewer/2022052618/554d2cebb4c905ab268b50b3/html5/thumbnails/45.jpg)
![Page 46: The animated mobile NUI: lessons from Disney](https://reader034.vdocuments.us/reader034/viewer/2022052618/554d2cebb4c905ab268b50b3/html5/thumbnails/46.jpg)
Slow in / Slow out
The principle of slow in and out is applied to the scrolling lists of many mobile UIs.
![Page 47: The animated mobile NUI: lessons from Disney](https://reader034.vdocuments.us/reader034/viewer/2022052618/554d2cebb4c905ab268b50b3/html5/thumbnails/47.jpg)
![Page 48: The animated mobile NUI: lessons from Disney](https://reader034.vdocuments.us/reader034/viewer/2022052618/554d2cebb4c905ab268b50b3/html5/thumbnails/48.jpg)
Arcs
![Page 49: The animated mobile NUI: lessons from Disney](https://reader034.vdocuments.us/reader034/viewer/2022052618/554d2cebb4c905ab268b50b3/html5/thumbnails/49.jpg)
Arcs
The movement of most natural motion will be described by a slightly circular path or arc of some kind.
![Page 50: The animated mobile NUI: lessons from Disney](https://reader034.vdocuments.us/reader034/viewer/2022052618/554d2cebb4c905ab268b50b3/html5/thumbnails/50.jpg)
Arcs
Arcs applied on the interface of the Nokia Maemo
![Page 51: The animated mobile NUI: lessons from Disney](https://reader034.vdocuments.us/reader034/viewer/2022052618/554d2cebb4c905ab268b50b3/html5/thumbnails/51.jpg)
Arcs
Arcs applied on the interface elements of the Android mobile
![Page 52: The animated mobile NUI: lessons from Disney](https://reader034.vdocuments.us/reader034/viewer/2022052618/554d2cebb4c905ab268b50b3/html5/thumbnails/52.jpg)
Follow through
![Page 53: The animated mobile NUI: lessons from Disney](https://reader034.vdocuments.us/reader034/viewer/2022052618/554d2cebb4c905ab268b50b3/html5/thumbnails/53.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 action
![Page 54: The animated mobile NUI: lessons from Disney](https://reader034.vdocuments.us/reader034/viewer/2022052618/554d2cebb4c905ab268b50b3/html5/thumbnails/54.jpg)
![Page 55: The animated mobile NUI: lessons from Disney](https://reader034.vdocuments.us/reader034/viewer/2022052618/554d2cebb4c905ab268b50b3/html5/thumbnails/55.jpg)
![Page 56: The animated mobile NUI: lessons from Disney](https://reader034.vdocuments.us/reader034/viewer/2022052618/554d2cebb4c905ab268b50b3/html5/thumbnails/56.jpg)
![Page 57: The animated mobile NUI: lessons from Disney](https://reader034.vdocuments.us/reader034/viewer/2022052618/554d2cebb4c905ab268b50b3/html5/thumbnails/57.jpg)
Overlapping action
![Page 58: The animated mobile NUI: lessons from Disney](https://reader034.vdocuments.us/reader034/viewer/2022052618/554d2cebb4c905ab268b50b3/html5/thumbnails/58.jpg)
Overlapping action
Overlapping action is the animation principle that captures how parts of an object move at different rates.
Capturing the nature of the movement as well as the slight variations in timing and speed of these parts makes objects seem more natural. An action should never be brought to a complete stop before starting another action.
![Page 59: The animated mobile NUI: lessons from Disney](https://reader034.vdocuments.us/reader034/viewer/2022052618/554d2cebb4c905ab268b50b3/html5/thumbnails/59.jpg)
![Page 60: The animated mobile NUI: lessons from Disney](https://reader034.vdocuments.us/reader034/viewer/2022052618/554d2cebb4c905ab268b50b3/html5/thumbnails/60.jpg)
![Page 61: The animated mobile NUI: lessons from Disney](https://reader034.vdocuments.us/reader034/viewer/2022052618/554d2cebb4c905ab268b50b3/html5/thumbnails/61.jpg)
Anticipation
![Page 62: The animated mobile NUI: lessons from Disney](https://reader034.vdocuments.us/reader034/viewer/2022052618/554d2cebb4c905ab268b50b3/html5/thumbnails/62.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 where an important action is about to happen
![Page 63: The animated mobile NUI: lessons from Disney](https://reader034.vdocuments.us/reader034/viewer/2022052618/554d2cebb4c905ab268b50b3/html5/thumbnails/63.jpg)
Anticipation
![Page 64: The animated mobile NUI: lessons from Disney](https://reader034.vdocuments.us/reader034/viewer/2022052618/554d2cebb4c905ab268b50b3/html5/thumbnails/64.jpg)
![Page 65: The animated mobile NUI: lessons from Disney](https://reader034.vdocuments.us/reader034/viewer/2022052618/554d2cebb4c905ab268b50b3/html5/thumbnails/65.jpg)
![Page 66: The animated mobile NUI: lessons from Disney](https://reader034.vdocuments.us/reader034/viewer/2022052618/554d2cebb4c905ab268b50b3/html5/thumbnails/66.jpg)
![Page 67: The animated mobile NUI: lessons from Disney](https://reader034.vdocuments.us/reader034/viewer/2022052618/554d2cebb4c905ab268b50b3/html5/thumbnails/67.jpg)
Exaggeration
![Page 68: The animated mobile NUI: lessons from Disney](https://reader034.vdocuments.us/reader034/viewer/2022052618/554d2cebb4c905ab268b50b3/html5/thumbnails/68.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 69: The animated mobile NUI: lessons from Disney](https://reader034.vdocuments.us/reader034/viewer/2022052618/554d2cebb4c905ab268b50b3/html5/thumbnails/69.jpg)
![Page 70: The animated mobile NUI: lessons from Disney](https://reader034.vdocuments.us/reader034/viewer/2022052618/554d2cebb4c905ab268b50b3/html5/thumbnails/70.jpg)
![Page 71: The animated mobile NUI: lessons from Disney](https://reader034.vdocuments.us/reader034/viewer/2022052618/554d2cebb4c905ab268b50b3/html5/thumbnails/71.jpg)
![Page 72: The animated mobile NUI: lessons from Disney](https://reader034.vdocuments.us/reader034/viewer/2022052618/554d2cebb4c905ab268b50b3/html5/thumbnails/72.jpg)
![Page 73: The animated mobile NUI: lessons from Disney](https://reader034.vdocuments.us/reader034/viewer/2022052618/554d2cebb4c905ab268b50b3/html5/thumbnails/73.jpg)
Project team Art Director: Kristel Van Ael
Assistant Art Director: Bram Boot
Production manager: Alain Schiffeleers
Illustrator: Kurt Cornelis
Animation advice: Eric Goossens
Animator: Raf Schoenmaekers
Producer: Inge De Cock
Technical support: Luc Vanoostenryck, Mark Vanophalvens, Wouter Verlinden, Jan Verstrepen
![Page 74: The animated mobile NUI: lessons from Disney](https://reader034.vdocuments.us/reader034/viewer/2022052618/554d2cebb4c905ab268b50b3/html5/thumbnails/74.jpg)
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