Presentation by Kristel Van Ael and Joannes Vandermeulen of Namahn

1. The animated mobile NUI
Lessons from Disney
Joannes Vandermeulen and Kristel Van Ael of Namahn
Mobile Monday 17/10/2011

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

3. Context
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

5. Why animation?
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

6. In its most basic form,
character animation
is about storytelling
George Maestri

9. The illusion of motion

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

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

15. 10 Design principles
Solid drawing
Staging
Squash & stretch
Arrival and departure
Slow in / Slow out
Arcs
Follow through
Overlapping
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

19. Solid drawing
Giving your animation weight, depth, and
balance gives it life

20. Solid drawing
Avoid static symmetry and twin movements

21. Solid drawing
Avoid static symmetry and twin movements

22. Staging

23. Staging
Making the central idea of an animation
completely clear to the viewer.

26. Squash and stretch

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

29. Squash and stretch
Flipboard vs. Apple iBook

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

31. Arrival and departure

32. 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

34. Arrival and departure
Visibility curve

40. Slow in / Slow out
Ease in / Ease out

41. 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

42. Slow in / Slow out

43. Slow in / Slow out

46. Slow in / Slow out
The principle of slow in and out is applied to
the scrolling lists of many mobile UIs.

48. Arcs

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

50. Arcs
Arcs applied on the interface of the Nokia
Maemo

51. Arcs
Arcs applied on the interface elements of the
Android mobile

52. Follow through

53. 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

57. Overlapping action

58. 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.

61. Anticipation

62. 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

63. Anticipation

67. Exaggeration

68. 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.

73. 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

74. 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