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

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

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

Provide a natural flow

Focus attention on the action

Provide a sense of bearing

Engage and appeal

NOT: disrupt or hold back

Why animate?

The illusion of motion

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

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

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

8 Design principlesSolid drawing

Squash and stretch

Arrival and departure

Ease-in, ease-out

Arcs

Follow-through

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

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: 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

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

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

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

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

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

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