The animated mobile NUI

Lessons from Disney

Mobile Monday 17/10/2011

Joannes Vandermeulen and Kristel Van Ael of Namahn

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

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

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?

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

The illusion of motion

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

Motion blur

10 Design principles Solid drawing

Staging

Squash & stretch

Arrival and departure

Slow in / Slow out

Arcs

Follow through

Overlapping

Anticipation

Exaggeration

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

Giving your animation weight, depth, and balance gives it life

Solid drawing

Avoid static symmetry and twin movements

Solid drawing

Avoid static symmetry and twin movements

Staging

Staging

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

Squash and stretch

Squash and stretch

Defining the rigidity and mass of an object by distorting its shape during an action

Squash and stretch

Flipboard vs. Apple iBook

Squash and stretch

Pin dropping in Google Maps on iPhone

Arrival and departure

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

Arrival and departure

Visibility curve

Slow in / Slow out Ease in / Ease out

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

Slow in / Slow out

Slow in / Slow out

Slow in / Slow out

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

Arcs

Arcs

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

Arcs

Arcs applied on the interface of the Nokia Maemo

Arcs

Arcs applied on the interface elements of the Android mobile

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

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

Overlapping action

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.

Anticipation

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

Anticipation

Exaggeration

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.

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

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