Animation: From Cartoons to the User Interface · Animation: From Cartoons to the User Interface...

11
Animation: From Cartoons to the User Interface Bay-Wei Chang Computer Systems Laboratory Stanford University stanford, CA 94305 [email protected] You must learn to twpect that golden atom, thaf single jhme of action, that l124th qf a second, because the @emnce between lightning and the lightning bug may hinge on that singlejhvnc. — Chuck Jones [10] ABSTRACT User interfaces are often based on static presentations, a model ill suited fcr conveying change. Consequently, events on the screen frequently startle and confime users. Cartoon animation, in eontras~ is exceedingly successful at engaging its audience; even the most bizarre events are easily comprehended. The Self user interface has served as a testbed for the application of cartoon animation techniques as a means of making the interface easier to understand and more pleasant to use. Attention to timing and transient detail allows Self objects to move solidly. Use of cartoon-style motion blur allows Self objects to move quickly and still maintain their comprehensibility. Self objects arrive and depart smoothly, without sudden materializations and disappearances, and they rise to the front of overlapping objects smoothly through the use of dissolve. Anticipating motion with a small contrary motion and pacing the middle of transitions faater than the endpoints results in smoother and clearer movements. Despite the differences between user interfaces and cartoons-cartoons are frivolous, passive entertainment and user interfaces are serious, interactive tool~ n animation has much to lend to user interfaces to realize both affective and cognitive benefits. KEYWORDS: animation, user interfaces, C-nS, IIN)tiOII blur, Self 1 INTRODUCTION User interfaces are often based on static presentatiom+a series of displays each showing a new state of the system. Typically, there is much design that goes into the details of Permission to copy without fee ell or part of this material is granted provided that the copies are not made or distributed for direct commercial advantage, the ACM copyright notice and the title of the publication and its date appear, and notice is given that copying ia by permission of the Association for Computing Machinery. To copy otherwise, or to rapublish, requires a fae andlor specific permission. ; 1993 ACM 0-89791 -628 -X/93/OOl 1...$1.50 David Ungar Sun Microsystems Laboratories, Inc. 2550 Garcia Avenue Mountain View, CA 94043 [email protected] these tableaux, but less thought is given to the transitions between them. Visual changes in the user interface are sudden and often unexpected, surprising users and forcing them to mentally step away from their task in order to grapple with understanding what is happening in the interface itself. When the user cannot visually track the changes occurring in the interface, the causal connection between the old state of the screen and the new state of the screen is not immediately clear. How are the objects now on the screen related to the ones which were there a moment ago? Are they the same objects, or have they been replaced by different objects? What changea are directly related to the user’s actions, and which are incidental? To be able to efficiently and reliably interpret what has happened when the screen changes state, the user must be prepared with an expectation of what the screen will look like after the action. In the case of most interactions in unanimated interfaces, this expectation can ordy come by experienw, little in the interface or the action gives the user a clue about what will happen, what is happening, or what just happened. For example, the Microsoft Wtiws interface [15] expands an icon to a window by eliminating the icon and drawing the window in the next instant. In this case the 13rst static presentation is the screen with the icon; the next is the screen with an expanded window. Much of the screen changes suddenly and without indication of the relationship between the old state and the new state. Current pop-up menus suffer from the same problem+me instant there is nothing thew, the next instant a menu obscures part of the display. Moving objects t%omone location to another is yet another example. Most current systems let the user move an outline of the objec~ and then, when the user is tlnished the move, the screen suddenly changes in two places: the object in the old location vanishes and the object appears in the new location. Sudden change, flash of the aereen, no hint how the hvo states are related the user must compare the current state snd the Prece&ng state and deduee the connection. Users overcome obstacles like these by experien~. The ilrst few encounters are the worst eventually users learn the behavior of the interface and come to interact with it efficiently. Yet while some of the cognitive load of November 3-5, 1993 UIST’93 45

Transcript of Animation: From Cartoons to the User Interface · Animation: From Cartoons to the User Interface...

Animation:From Cartoons to the User Interface

Bay-Wei Chang

Computer Systems LaboratoryStanford University

stanford,CA94305

[email protected]

You must learn to twpect that golden atom, thafsingle jhme of action, that l124th qf a second,because the @emnce between lightning and thelightning bug may hinge on that singlejhvnc.

— Chuck Jones [10]

ABSTRACT

User interfaces are often based on static presentations, amodel ill suited fcr conveying change. Consequently, eventson the screen frequently startle and confime users. Cartoonanimation, in eontras~ is exceedingly successful at engagingits audience; even the most bizarre events are easilycomprehended. The Self user interface has served as atestbed for the application of cartoon animation techniquesas a means of making the interface easier to understand andmore pleasant to use. Attention to timing and transient detailallows Self objects to move solidly. Use of cartoon-stylemotion blur allows Self objects to move quickly and stillmaintain their comprehensibility. Self objects arrive anddepart smoothly, without sudden materializations anddisappearances, and they rise to the front of overlappingobjects smoothly through the use of dissolve. Anticipatingmotion with a small contrary motion and pacing the middleof transitions faater than the endpoints results in smootherand clearer movements. Despite the differences betweenuser interfaces and cartoons-cartoons are frivolous,passive entertainment and user interfaces are serious,interactive tool~ n animation has much to lend touser interfaces to realize both affective and cognitivebenefits.

KEYWORDS: animation, user interfaces, C-nS, IIN)tiOII

blur, Self

1 INTRODUCTION

User interfaces are often based on static presentatiom+aseries of displays each showing a new state of the system.Typically, there is much design that goes into the details of

Permission to copy without fee ell or part of this material isgranted provided that the copies are not made or distributed for

direct commercial advantage, the ACM copyright notice and thetitle of the publication and its date appear, and notice is giventhat copying ia by permission of the Association for ComputingMachinery. To copy otherwise, or to rapublish, requires a faeandlor specific permission.

; 1993 ACM 0-89791 -628 -X/93/OOl 1...$1.50

David Ungar

Sun Microsystems Laboratories, Inc.

2550 Garcia Avenue

Mountain View, CA 94043

[email protected]

these tableaux, but less thought is given to the transitionsbetween them. Visual changes in the user interface aresudden and often unexpected, surprising users and forcingthem to mentally step away from their task in order tograpple with understanding what is happening in theinterface itself.

When the user cannot visually track the changes occurringin the interface, the causal connection between the old stateof the screen and the new state of the screen is notimmediately clear. How are the objects now on the screenrelated to the ones which were there a moment ago? Arethey the same objects, or have they been replaced bydifferent objects? What changea are directly related to theuser’s actions, and which are incidental? To be able toefficiently and reliably interpret what has happened whenthe screen changes state, the user must be prepared with anexpectation of what the screen will look like after the action.In the case of most interactions in unanimated interfaces,this expectation can ordy come by experienw, little in theinterface or the action gives the user a clue about what willhappen, what is happening, or what just happened.

For example, the Microsoft Wtiws interface [15] expandsan icon to a window by eliminating the icon and drawing thewindow in the next instant. In this case the 13rst staticpresentation is the screen with the icon; the next is thescreen with an expanded window. Much of the screenchanges suddenly and without indication of the relationshipbetween the old state and the new state. Current pop-upmenus suffer from the same problem+me instant there isnothing thew, the next instant a menu obscures part of thedisplay.

Moving objects t%omone location to another is yet anotherexample. Most current systems let the user move an outlineof the objec~ and then, when the user is tlnished the move,the screen suddenly changes in two places: the object in theold location vanishes and the object appears in the newlocation. Sudden change, flash of the aereen,no hint how thehvo states are related the user must compare the currentstate snd the Prece&ng state and deduee the connection.

Users overcome obstacles like these by experien~. The ilrstfew encounters are the worst eventually users learn thebehavior of the interface and come to interact with itefficiently. Yet while some of the cognitive load of

November 3-5, 1993 UIST’93 45

interpreting changes in the interface may be reducedthrough repeated exposure, it is likely that some burdenremains. For example, a user may know that clicking anicon will open a window, but the sudden change to thescreen when the window opens may still require a momentof assessment.

Cartoons, in cxmtras~ excel at providing enough informationfor the audience to follow the action without ever beingstartled and confused by puzzling behavior. Cartooncharacters do not simply disappear from one place andappear in another; they appear to move solidly andcontinuously. Cartoon objects do not flash suddenly intodifferent sizes and sha~, they appear to grow and deformsmoothly. Animation provides the visual cues necessary tounderstand what is happening before, during, and after theaction. Unlike user intiaces which burden the user with theresponsibility of relying on experience and deductive abilityto interpret changes, cartoon animation leverages off ofhuman experience of how objects change and movesmoothly in the real world.

The experimental user interface for the programminglanguage Self uses techniques drawn from cartoonanimation to replace sudden changes with smoothtransitions, offloading some of the cognitive burden ofinterpreting the change to the perceptual system. Forexample, a small object grows continuously to a large,expanded object. A menu transforms smoothly from themenu button that is clicked on to the full menu. Objectsmove solidly from one location to another, maintaining theillusion of solid movement even if they must cross greatdistances in a single frame. These and other, more subtle,applications of animation to the interface work together tomake changes on the screen smooth and clear.

Bringing this kind of animation to the user interface hasboth cognitive and affective benefits. By offloadinginterpretation of changes to the perceptual system,animation allows the user to continue thinking about thetask domain, with no need to shift contexts to the interfacedomain. By eliminating sudden visual changes, animationlessens the chance that the user is surprised, thus reducinghis uneasiness. So employing animation not only aids theuser in understanding the events in the user interface, butalso makes the user’s experience of the interface morepleasant and comfortable.

Animation has been used in other work to illuminatechange, for example, in data visualization [7, 14, 17],aIgorithm animation and program visualization [3,5,8, 21]and animated demonstration and help [2, 16,22, 23]. Theseuses of animation clarify data, or programs, or informationon how to use the interface, but not the operating of theinterface itself. Cartoon-style animation as used in rhe Selfinterface is animation of transition and~eedback, to borrowfrom the informal taxonomy of Baecker and Small [1]. TheAlternate Reality Kit (ARK) [19, 20], an environment forbuilding interactive simulations, widely uses animation toshow the behavior of objects in the interface. ARK blurs thedistinction between data and interface by unifying bothsimulation objects and interface objects as concrete objects.The Information Visualizer framework [6, 14, 17] also

makes data more concrete, using three-dimensionalinteractive graphics to further heighten the concreteness.The cone tree and perspective wall techniques implementedin the Information Wwalizer use fast 3D animation to aidthe user in tracking objects as they change position. Thisanimation, however, is performed straightforwardly, withoutusing cartoon-inspired techniques that could make thesystem even more alive and engaging.

2 APPLYING PRINCtPLES OF CARTOON ANIMATtON TOTHE USER INTERFACE

Over the years animators have developed a canon ofprinciples which capture much of the essence of the craft ofanimation. This section looks at some of those principles ofanimation in their original context of cartoons, and also inthe context of user interfaces—why the principles arerelevant and how they have been applied in an experimentaluser interface for the progmrnming language Self [26].

We discuss the principles of animation in three groups:solidity, exaggeration, and reinforcement. The principles ofanimation mentioned in this section are drawn from theexcellent treatise on cartoon animation, Disney Animation:The Illuswn ofLife, by Disney animators Frank Thomas andOllie Johnston [24].

2.1 Solidity

Characters and objects in cartoons are solid. They moveabout as if they are three-dimensional, real timg$ they reactto external forces as if they have mass and are susceptible toinertia. From beginning to enL they are tangible things youcould reach out and grab them if only you could get into thecartoon. This solidity is achieved not merely by drawingobjects as filled-in areas, but by infusing their motion with asense of weight and balance. Animation principles such asS1OW in and S1OW OUL follow through, and iUCS, d diSCUSSCd

later, contribute in keeping the motion of objects realisticand reinforcing the sensethat they am solid.

Making an object in the user interface solid gives it anindividual identity as a separate, intractable thing. Solidityelevates an element ffom a mere picture on the screen to atangible entity that is real enough to possess its ownbehavior. In the Self user interface, objects are drawn asthree-dimensional boxes, and they move solidly andcontinuously as the user drags them with the mouse. Incorm-ashmany current interfaces only allow the user to dragthe outline of the object, This optimization destroys theillusion of solidity it forces on the user the fact that he dealsonly with pictures of the objecc a rough outline that can bedragged and a more detaited rendering that appears first inone place and then suddenly, when the mouse button isreleased, in another. By maintaining their solidity as they aredragged, Self objects subtly reinforce the illusion that theyare not mere pictures on the screen, but are individual,manipulable things.

Moving an object solidly is not enough, however. In order tomaintain the illusion, the movement must be at a highenough frame rate to keep up with the user’s cursor. A dropin performance can result in the object lagging behind thecursor and jumping from place to place, a distracting and

46 UIST’93 Atlanta, Georgia

slow Medium

time

Fast

time

Motion Blur

m~#*j,:.:,:,:.:.:.:{;?;$$$$;~ .,,,,3,

*;;::::::::::::::::::~::::::::::.::::::

mtime

Figure 1. At slow and medium speeds, objects overlap with their previous images. At fast speeds, howeve~there is a gap between the object and its previous image, making the movement Imk disconnected and con-fusing. Motion blur fills in that gap, aiding the eye in tracking the motion of the object. (H” her frame rates

“Yreduce, but do not eliminate, the need for motion blur-a fast enough moving object will still cave a gap.)

perhaps disturbing sight. The Self user interface has beentuned to maintain a frame rate of 20 to 30 frames pa secondduring interactive object movemenL Furthermore, the innerloop of the movement code has been carefully crafted toprevent flicker, which would undermine the illusion ofsolidity.

2.1.1 Solidity: Motion blur

But frequent, flicker-free frames are still not enough: asudden jerk of the mouse can still cause the object to leapfrom one si& of the screen to the other in a single frame,without passing through the intervening landscape.Although the object is indeed keeping up with the cursor,the large movement across the screen no longer seems likethe movement of one object. Because of persistence of

No Motion Blur

vision, the eye is presented with the short-lived image oftwo objects, as if one had flashed into being and then theother had winked out of existence. lhe solidity, and even thevery identity of the object breaks down. (This effect is alsoknown as temporal aliasing.)

Cartoon animators confronted this problem long ago, anddeveloped a rule of thumb if an object moves more thanhalf its size (alternatively, more than its full size) betweenany two frames, motion blur must be added. Motion blurfills in the gaps between the old and new position of theobject, appeasing the eye into seeing continuous motionfrom one point to another (see Figure 1). Although related torealistic temporal anti-eliaaing, cartoon motion blur attemptsto remedy the same flaws more cheaply-for example, asmear of color. Cartoons suggest that even loose

Motion Blur

,.,.,. . . ...................

J

.,,,.,.,.,.,.,.,......................&###?k&#’!i,.4?.+....->$,.~~:,:,:;x+w.:.:.:.:..”.... .,$+<*X&%%’“

I I

F~ure 2. When objects are moved suddenly from one position to anothe~ it can seem as ifthere are two instances of the object on the screen at the same time. The eye sees some-thing like the middle frame of the “no motion blur” figure, even though such a frame doesn’tactually ever

Tar on the screen. Motikm blur reduces this effect, and gives a visual indica-

tion of the trave of the object, so that it is easy to see which object moved where.

November 3-5, 1993 UIST’93 47

approximations to true temporal anti-aliasing can contributegreat benefits. The Road Runner zips across the width of thescreen in a handful of frames, but the Road Runner is notdrawn at its appropriate location in each of those frames.Instead, a streak of colors (the motion blur) follows theRoad Runner, and sometimes entirely supplants the RoadRunner, This same effect is used for running legs, fallingobjects, and anything in which the action moves the objectmore than part of its width, that is, any movement thatwould lcok disconnected and wrong.

Careful study of cartoons reveals that animators use at leasttwo different kinds of motion blur. The most realistic form isa translucent streak, typictdly painted on with a drybrushtechnique. The partial transparency of the resulting streakmimics the physical effect in reality and produces a veryrealistic effect. The other technique used for motion blurinvolves painting more than one pose in a single frame. For

example, a single frame of an arm swinging rapidly backand forth might be rendered with several arms in differentpositions. This technique increases the effective frame rateand is most convincing with oscillatory motion, where theendpoints are more strongly perceived. (The animation oficons expanding to windows in the Macintosh Fin&r [27]uses this stutter motion blur.)

Just as in cartoons, the Self interface uses motion blur toconnect the gaps that occur between fast moving objects.The motion blur is implemented as a trail the color andwidth of the objec~ connecting the object’s old location withits new location (see F-2). The trail is stippled to createthe illusion of translucency. The blur makes motion seemfaster, smoother, and helps the usexkeep track of the movingobject.

‘l%e effectiveness of motion blur demonstrates that showingmotion is not just showing a series of still pictures. A frame

1 1

,

F~ure 3. Upon a d“ti, a menubutton transforms itself from abutton into the full menu. After aselection has been made, itshrinks back down to a button.

IIn this and other fiiuree, only aew frames of the actual anima-

tion is shown.)

A’.w.....n’..’.v..

Fqure 4. Arrows grow from their tail to hittheir target. The target .rea@ to the con-tact with a small w!gglmg pit (here suq-gested by a few lines): as discussed mseotion 2.3.3. Arrows will also shrink backdown into their tail.

F~ure 5. Objeets grow from a pointto the full size object; any connectin

Iarrow will grow smwthly along wtthe object. Currently, text does not

\mw “onj ‘!th ‘he ‘bF’ “’dead’t e text fa es m smooth on the fullygrown object.

48 UIST’93 Atlanta, Georgia

from the middle of an animated motion sequence would notlook like a snapshot of that instant in reality: it would notshow the object frozen in time, sitting pristinely in betweenits starting point and its deminadon. Inste@ it would showthe object with a blur trail, which has no physical existence.Its claim in the real world comes from the workings of thehuman visual system. If one models the visual system ashaving a simple finite rise and fall time, one would expect ashort leading trail of blur, growing smoothly lesstransparent, and a longer following trail, tailing off intotransparency. Cartoon animators do include both leadingand trailing blurs, but even rendering a crude, trailing-only,fixed-transparency streak is enough to provide the visualsystem with the important subliminal cues that are essentialto maintaining the illusion of fast motion.

2.1.2 Solldl~ Arrlvafa and departures

In addition to moving continuously, real objects arrive anddepart continuously without materializing from ordisappearing into thin air. Rather than simply appeaing anddisappeting, which are sudden and potentially confusingchanges, Self objects maintain the illusion of reality bysmoothly easing on and off the screen. Three variations haveappeared in the interface for arriving objects: objects fly infrom offscreen, objects grow from a point to their full size,and objects dissolve onto the screen. Objects exit in theopposite way that they entered, for example, flying of)f theedge of the screen or fading into nothing. In each of thesecases, the action, though quick, is smooth and continuous,giving the user the visual cues necessary to understand whatis happening.

Animation to maintain solidity is ubiquitous in the Selfworld. Arrows that point fkom one object to another growsmoothly from their tail to their destination, and retractsmoothly as well. Pop-up menus are really grow-upmenus-the menu button transforms into a menu in its fullopen state, and shrink back down to a button after aselection is made (see Figures 3,4, and S).

A final example of solidity in the Self world is how objectsraise and lower themselves to the top or bottom of the layersof overlapping objects. In typical systems with overlappingelements, objects change layers suddenly and without anyindication of the action other than the final, changed state. Inthe Self interface, an object can disso/ve through otherobjects to show that it is rising to the top of the pile orsinking to the bottom (see Figure 6). Paradoxically,dissolving through other objects rather than suddenlychanging layers seems to increase the sensethat the object issolit even though solid objects in the nxd world do no suchthing.

2.2 Exaggeration

Cartoon animation does not merely mimic reality. Like alldramatic mediums, it takes liberties with what is strictlyrealistic in order to more effectively convey its message.Adhering to what is possible in the physical world is notonly limiting, but also less effective at achieving “realism.”Paradoxically, only by exaggeration do cartoons achievemore realism. The dwarves in Disney’s $now White, forexample, are highly stylized-their faces and bodies are

..... ...... ,.

Figure 6. Objects dissolve throughone another as they change their lay-ering.

drawn with oversize, weighty features, their movements arelarge and exaggerated. In contras4 Snow White is drawnwith realistic proportions (her nose, to mention just onefeature, many times smaller than any of the dwarf’s), andher movements just those a real person would have, muchsmaller and more measmed than that of the dwarves’. YetSnow White, as realistically as she is render@ seemsblandand wooden in comparison to the expressive and engagingdwarves. The dwarves simply seem more realistic.

November 3-5, 1993 UIST’93 49

Exaggeration increases the prominence of features deemedsignificant by the animator, whether these features arephysical characteristics, qualities of action, or extremities ofsituation. By increasing the salience of certain aspects of theworld, the animator gives the audience footholds fromwhich to better interpret the nature of the character, action,or situation. For example, each of the seven dwarves inSrrow White has a defining characteristic, often echoed byhis name (Dopey, Grumpy, Sneezy). These characteristicswould come out as strongly even without the name servingas an additional clue each dwarf’s physical features,movements, and actions all are broadly exaggerated toemphasize his designated trak

In addition, exaggeration makes salient particulars thatwould likely otherwise be overlooked by the audience.Unlike in the real world, in which we can only point ourfingers to something, in a cartoon the animator can causethat something to call more attention to itself, simply byexaggerating its appearance or its movement. Importantevents that might pass unnoticed because they exist sofleetingly can be exaggerated to make them more noticeable.

Like cartoons, the user interface must both give the userfootholds from which to better interpret the nature of theobjects and the situation in the user interface worl& and alsomake salient particulars that might otherwise be overlookedby the user. Employing exaggeration to the behavior of userinterface objects makes that behavior more understandable,more “realistic,” and thus makes the user interface moreengaging.

2.2.1 Exaggeration: Anticipation

Anticipation is a way of exaggerating a preliminary action inorder to give the audience a cue about the main action tofollow. When the action does occur, the audience is pteparedand is ready to follow that action, without having to dealwith being surprised by the occurrence itself. When anobject in the Self interface is about to move (due to anyaction other than the user grabbing the object to move itdirectly), it anticipates that move with small, quick contrarymovement (see Figure 7). Like the Coyote in the RoadRunner cartoons, springing back onto its rear leg beforedashing off after the Road Runner, this anticipatory movedraws the user’s eye to i~ preparing the user to perceptually,as well as cognitively, follow the ensuing action.

Exaggeration techniqua like anticipation (and some uses of@now through, discussed later) (to not obey the laws ofphysics as we know them in the real world. As unrealistic asthese purely theatrical techniques are, however, they areinstrumental in keeping the user engaged with the interface.They are continual providers of hints to the user, cues tointerpreting the succession of states in the user interface.Without such cues, the notion of the interface as a world thatencompasses the user breaks down, and its existence nosesitself into the user’s awareness. Every element in theinterface must be tuned to reinforce the illusion of anartificial reality.

Fuure 7. Objects anticipate major actionswith a quick contrary motion that drawsthe user eye to the object in preparationfor the main motion to come.

2.3 Reinforcement

All of the animation techniques contribute to thereinforcement of the illusion of reality. While some are quitedrastic effects-attentive watching easily reveals the blur ofcolors that repment the Road Runner streaking across thescreen-in effect they are subliminal. The audience is notconsciously aware of these effects. Rather, the audience isaware of the feeling of realism in the action. They are notjarred out of the world of the cartoon by confusion aboutwhat’s going on, because all the details that conspire tomake the illusion have been attended to. The techniquesdescribed in this section, by reinforcing the illusion ofreality, work to keep the audience engaged with the cartcon,or the user engaged with the interfkce.

2.3.1 Reinforcement: Slow in and slow out

Cartoon characters, as already mentioned, move solidly.However, this motion is not simply composed of drawingsequally spaced in space and time. To capture the feeling ofmovement in the real world, animators draw action withslow in and slow ouc characters move out of a pose slowly,then quickly during the bulk of the entire movement, andthen slowly into the ending pose. This helps give a feeling

50 UIST’93 Atlanta, Georgia

.----- .—---during the middle

\:parl of the movement &&i&&$;@ ,,,., , .,

&$#$i##

\–%iiiilsbwlv move

Fgure 8. objects ease out of their beginning poses and ease into their final poses. Although thesemotions are sbwer than that during the main portion of the movement, they are still quite fast.

of weight to the character and physicality to the movermxmSlow in and slow out also contribute to minimizhg surprise,slow in preparing the audience for faster movement to comeand slow out preparing for an end to the movement.Furthermore, slow in and slow out satisfy these purposeswhile being a subtle and quickly passing effect.. Yet withoutit, animated movement feels artificial and dead. Smalldetails like slow in and slow out can have large effects onthe feel of the animation.

Slow in and slow out is ubiquitous in the animation in theSelf world. All movement uses ic boxes and menus growiigor shrinking arrows growing and Winking boxes enteringfrom offscreen and exiting offscreen (see Figure 8). Eventhe dissolves used to dissolve objects or fade-in text usesS1OW in and S1OW OUt.

2.3.2 Relnforeement: Area

Another principle used for its subliminal effect is theprinciple of urcs. Rather than move in straight lines, objectsmove along gentle curves when they are moving ncm-

Figure 9. When objects travel under their own power (ncm-interactively), they move in arcs rather than straght lines.

interactively (see Figure 9). Like objects in cartoons, Selfobjects am meant to be existing in some physical worla andlike objects in the real world, ought to move along lifelikearcs. The arc flavors the movement giving it a livelier andmore appealing character than a simple linear path would.

2.3.3 Reinforcement: Follow through

A final example of reinforcing principle is follow through.Objects in the real world do not come to sudden stops, all ofthe object coming to a standstill at once. Animators madethis observation and made sure that objects coming to a stopin the cartoon would also have motion that continues afterthe main motion is completed. This could include parts ofthe body, clothing, or the entire ending pose slowlybecoming slightly more extreme (known as “the movinghold” [24]). Follow through is also a technique ofexaggeration-emphasizing some motions at the end of amovement to make the overall action clearer. The Selfinterface employs the principle of follow through in its useof wiggling objects. Objects coming to a stop will wiggle atthe end of their motion, as if reacting to a smatl spring at theend of their travel (see Figure 10). The wiggle flavors themotion, giving the object a more distinct character andenhancing the illusion that it is solid. The wiggling is alsoused when an arrow grows horn one object to hit anotherobject. The target object reacts to the arrow’s collision byvibrating back and forth, giving the sense that the arrow hasweight, and that the object is situated in the world, notmerely a picture drawn on the background (see Figure 4).

Building an illusion is a fragile affair; details of theanimation have disproportionately large effect on the overallfeel of the world. While such subtle effects as slow in andslow out, arcs, and follow through could be left out of theanimation without destroying the sense of a somewhatconcrete world, their addition yields a world much livelierand more realistic. The overall effect is a more convincingreality, one more likely to capture and retain the engagementof the user.

November 3-5, 1993 UIST’93 51

Summary Animation principles in cartoons and Self

I I Prinoiple I Exampiaefromcartoons I Examplesfromthe Self interface I

solid ● parts of Snow Whiie’s dwarves may ● objects move sotiilydrawing squash and stmteh, but atways ● objects entersemenby traveling fromoffsweenor growingfroma point

maintaintheir eonneotednaseand ● menustransformsmoothlyfroma buttonto an openmenu

g weight ● arrows grow and shrfnk smoothly

$● transfer of momentumes objeetsrespondto beiig hit by an arrow

motionblur ● RoadRunneris a blueand ml streak ● stippledregionaxmeets old and newIoeationeof a movingobject

I I dissolves I nh I ● Objectsddv the rough one another when ehenging layering I

5 entiapation ● coyote rears beek onto beck leg ● objects pmfaca forwatd movementwith small,wick contrarymovement.“

beforedashiig after RoadRunneri8 follow ● RoadRunnervibratesfor an instant ● objactacometo a stop and vibrate into plaoea through after a qu”~ stop ● objectsI#@#3whenhit by an SITOW

slow in and ● Ooyota springsup from ground, with ● objeeta move with slow in end slow outslow out fastest movement at center of the am ● objeeta and arrows grow and shrink with stow in and slow out

zi?

● objeete dssolve through orher objeete with slow in and slow out● text fades in onto an obiect with slow in end slow out

5 area ● dwatves’limbs move in an arc~ ● objects travel along gentte eurvee when they are moving non-interactively

1%● Coyote springs up along an are

follow ● Road Runner vibrates for an instant ● objeets do not some to a sudden standstill, but vibrate at end of motionthrough after a quick stop

3 WHY CARTOON-STYLE ANIMATION?

But why employ cartoon-style animation in the userinterface? Why not simply use straigh~ strictly realistic,animation? Three characteristics of cartoon animationexplain why it can so effectively inform user interfacedesign its theatrical basis, the engagement of its illusion,and the Mture of its artistic medium.

I 1I “.-’ ,, ‘ I

F~ure 10. When objeets come to a stop aftermovin

j“on their own, they exhib~ follow

throu m the form of wigglin back and forthd~uiek y. This is just suggest by the “wiggle

Imes” in the fi ura-in actual.ky, the obpctJmoves back an forth, with motion blur.

First, cartoons are theatrical. They have license, and evenmandate. to go beyond literal portrayal of the red world inorder to convey their message. So, actions and reactions areexaggerated, situations are staged, all of the energy ofmovement and depiction is calculated to best telegraph theanimator’s point. User interfaces have the same need tocommunicate clearly and concisely, and theatricality cancontribute to this gord. (Laurel [12, 13] has explored relatedissues of theater and the user interfac~ her emphasis is onthe treating of the user interface as a two-way theatricalexperience between the user and the computer. Tognazzini[25] notes correspondences between the theatricaltechniques used in stage magic and that of user interfacedesign,)

Second, cartoons are engaghg. Cartoons create an illusoryworld, but effectively absorb the audience into that world.The mechanics of the cartoon (brightly colored, outlinedshapes in front of largely static backgrounds) are quicklyforgotten, and do not reappear in the audience’s awareness.The animation techniques employed in the cartoon make theillusion so complete that even the wackiest events are easyto gmsp by the audience. The audience is nevex jolted out ofthe cartoon world by the need to figure out what is going on.User interfaces can benefit by becoming mom engaging,fully absorbing the user into its world so that her attentionmay be devoted entirely to the task. Users do not feel as ifthey are manipulating an interface, but rather as if they arein ulrect engagement with the task-domain objects [9].

Finally, the medium of cartoon animation is, in importantways, remarkably like that of graphics on the computer. Thecraft of animation is turning a succession of still drawingsinto a dynamic, lively imag~ animators were the first to

52 UIST’93 Atlanta, Georgia

have that total control over each pixel in space at eachinstant in time. Computer animation has benefited from thetechniques developed by traditional animm Lmseter [11]discusses practical aspects of applying traditional animationprinciples to 3D computer animation. User interfacedesigners as well can draw upon the wealth of experience inthe field of cartoon animation to achieve similar successesof communication, vibrancy, and illusion.

4 USER INTERFACES ARE NOT CARTOONS

Making user interface objects behave more like cartoonobjects can be beneficial, but user interfaces are notcartoons. The most important difference between them isthat the cartoon is a passive medium, while the userinterface is an interactive one. Because the user is in control,the final product must be responsive to the user’s desires.(For example, motion techniques like slow in and slow OULanticipation, and follow through in the Self interface an: notimposed upon objects when they are beiig explicitly movedby the user.) While the animation should be designed so thatthe user will not feel as if he is waiting for it to play out (itshould be both fast enough and engaging enough so that theuser isn’t consciously aware of it), the user may want tomove to the next interaction befcre an animation tinishes. Inthose cases, the user should be given immediate control, butthe integrity of the interface should still be maintained bythe principled use of animation techniques. For exannple,when user interaction requires a moving object to skip therest of its planned movement and go immediately to itsdestination, motion blur can still be used to visually connectthe large jump.

Another difference between cartoons and user interfaces aretheir purposes. Cartoons are purely for enjoyment anddiversiow user interface-s are usually forgetting work done.Of course, user interfaces should be enjoyable as well, butits more serious nature usually precludes the employment ofsome of the entmtainment values of cartoons. Cartoons amoften wacky and silly, and although the techniques thatmake the wackiness comprehensible to the audience are thesame that are used to make actions in the user interfacecomprehensible to the user, the wackiness itself does notneed to be transferred. For example, cartoons can useanticipation to setup “surprise gags” [24], by making theanticipation suggest to the audience one action, whilehaving a different action actually happen. Such a surprisecan be desirable in cartoons, but would be quite distudingin the user interface. The user interface uses the effect ofsolidity and physicality from cartoons, but not the affect ofsilliness and manic action.

Because a user interface is a tool for doing some task,animation in it should be as fast as it can be while stillpreserving legibility. For example, in moving an object fmmone side of the screen to the other, an appreciation of motionblur makes it possible to accomplish this in only two frames.(Like the Road Rmmex exiting stage left.) When used in thisfashion, animation may actually speed up an interface, byreducing the time it takes a user to perform ad comprehendan action.

5 lMPLEMENTATION NOTES

One god of the Self user interfhce effort is to explore use ofthese animation techniques in a practical setting-whichmeans using stock graphics hardware while at the same timeensuring the high performance necesry for interactive use.To achieve the interactive speeds of 20 to 30 frames persecond without special hardware suppo~ we use colormapanimation-colormap cycling for dissolves, colormapoverlays for moving objects, and colormap doublebufferingfor moving arrows [4, 18]. We chose to accept the limitednumber of colors that results from the use of colormapanimation techniques as a trade-off for high performance.

The 8-bit colormap is divided into four parts: a 3-bit“stationary” layer, a 3-bit “moving” layer, and two singlebit“arrow” layers. Moving animations are carried out byelevating the animated object to the moving layer. Forexample, when a user grabs an object and moves it aroundon the screen, the moving object is drawn only on themoving laye~ as it is moved abouq its vacated locations arefilled in with a “transparent” color that allows the stationarylayer to show through. Dissolves are handled by cyclingthrough colormaps that change the transparency of themoving layer.

Arrows are a special case. Arows comected to a movingobject are drawn on their own layer, again allowing quickerasing with a transparent color. Since there may be manymows attached to a moving object, it is important to be ableto efficiently erase and redraw many arrows at once. Toprevent flickering, the arrows are double-buffered via thecolorm~, thus the two Srrow layers.

As mentioned above, a drawback to using colormapmanipulations for animation is that it can severely limit thenumber of colors available. For example, although an 8-bitframebuffer supports 256 colors, the above architecturelimits the Self user inter&e to seven colors for general use,one color for background, and one color for arrows. Aseparate limitation of this architectme is that, although morethan one thing can be animated at once, spatiallyoverlapping animations are not directly supported.

Some user testing of the animation in the Self user interfacehas been carried out. Most of the users fall into one of twocategories: those who immediately notice the use ofanimation, and are generally delighti, and those who seemto take the animation for granted from the strut The lattertend to be people who are less involved in the computerfield, which suggests that such animations conformreasonably well to natural experience and expectations.Observations of users also show that inconsistencies in theanimation or performance glitches can suddenly wreck theillusion of the interface and draw attention to the animationitself. Perhaps because animated objects seem more real,defects in their behavior can be more disturbing anddisruptive than a defect in an unanimated object. Furtherstudy is needed to more fully determine what are the usefulboundaries of animation in the user interface, and the effectof animation as the user becomes mom experienced with thesystem.

November 3-5, 1993 UIST’93 53

6 CONCLUSION

The benefits of applying techniques tlorn cartoon animationto the user interface are both cognitive and affective. Bymaking it easier for the user to track objects and understandwhat is changing on the screen, animation offloads some ofthe cognitive burden associated with deciphering what isgoing on in the interface from higher cognitive centers to theperiphery of the nervous system. By eliminating flashes asthe contents of the screen change suddenly, animationmakes the interface less startling and thus makes the user’sexperience more pleasant. By presenting a physical world inwhich motion is realistic and convincing, animation engagesthe user, keeping her in the world, concerned with the taskand not the mechanics of the interface.

We showed how the principles of animation could beapplied to one user interface, interacting with objects in theSelf world. These techniques are widely applicable, andmay have additional benefits in certain kinds of interfaces.In particular, collaborative applications stand to benefitgreatly from the use of this kind of animation in addition tothe user’s own actions, remote users often will initiateactions, so the user may not even have the advantage ofexpecting something to happen. Anticipation, slow in andslow out, motion blur, and follow through can be used tomore fully and mom gently inform the user about remotelyinitiated actions.

Cartoon animation goes far beyond static presentations andeven beyond straight animation in elucidating action in theinterface. The animation doesn’t have to be slow, ordistracting, or silly; on the contrary, with careful tuning,cartoon animation can turn the user interface into anunderstandable, engaging, and pleasurable experience.

ACKNOWLEDGMENTS

The Self group, including Ole Agesen, Lars Bak, CraigChambers, Urs HMzle, John Maloney, and Randy Smith,provided valuable feedback and discussion during theongoing process of refining the animation techniques usedin the Self user interface. In particular, Randy Smith and hisreality deserves credit for originaUy putting our feet on thepath of a concrete, object-based interface. Chuck Clantonset us thinking about the importance of affect in theinterface. John ‘llmg lirst pointed out to us the value of theseanimation techniques in the setting of collaborativeapplications.

This work has been supported by Sun Microsystemshboratories, an NH Graduate Fettowship, NFS PYI Grant#CCR-8657631, IBM Powell Foundation, Apple, Cray,Tandem, NCR, TI, and DEC.

REFERENCES

1.

2.

Baecker, R. and Small, I. Animation at the interface. InB. Laurel, The Art of Human-Computer Inte$aceDesign, Addison-Wesley, New York, 1990.

Baecker, R., Small, I., and Mander, R. Bringing icons toliie. CHZ ’91 Conference Proceedings, 1991,1-6.

3.

4.

5.

6.

7.

8.

9.

10.

11.

12.

13.

14.

15.

16.

17.

18.

BUcker, H.-D. and Herczeg, J. Tiack-A trace constmc-tion kit. CHI ’90 Conference Proceedings, 1990,415-422.

Booth, KS. and MacKay, SA. Techniques for framebuffer animation. Graphics Interface ’82 ConferenceProceedings, 1982,213-223.

Brown, M.H. Perspectives on algorithm animation. CH1’88 Conference Proceedings, 1988,33-38.

~, SK., Robertson, G.G. and Mddllkty, J.D. TheInformation Vhalizer, an information workspace. CHZ’91 Conference Proceedings, 1991,181-188.

Donoho, A.W., Donoho, DL. and Gasko, M. MacSpim-c W@@ on a desktop computer. ZEEE Com-puter Graphics and Applications, 8(4), 1988,51-58.

Duisberg, RA. Animation using temporal constraintsAn overview of the Animus system. Human-ComputerInteractwn, 3(3), 1987-1988,275-307.

Hutchins, E.L., Hollan, J.D. and Ncmnan, DA. Directmanipulation interfaces. In D. Norman & S. Draper,User Centered System Design. Lawrence Erlbamn,Hillsdale NJ, 1986,87-124.

Jones, C. Chuck Amuck: The Life and Times of an Ani-mated Cartoom”st. Farrar Straus Giroux, New York1989.

Lasseter, J. Principles of traditional animation appliedto 3D computer animation. SIGGRAPH ’87 ConferenceProceeding.r, 1987,354.

Laurel, B. Interface as mimesis. In D. Norman & S.Draper, User Centered System Design. LawrenceErIbaum, Hillsdale NJ, 1986,67-85.

Laurel, B. Computers as Theatre. Addison-Wesley,New YorlG 1991.

Ma&inlay, J.D., Robertson, G.G. and C- SIL ThePerspective Walk Detail and context smoothly integrated. CHI ’91 Conference Proceedings, 1991, 173-179.

Microsoft Corporation. Microsojl Wtiws for Work-gwups Verswn 3.1 User’s Guide. Microsoft Corpora-tion, 1992.

Pahniter, S. and Elkerton, J. An evaluation of animateddemonstrations for learning computer-based tasks. CHZ’91 Conference Proceedings, 1991,257-263.

Robertson, G.G., Mackintay, J.D. and Card, S.K. ConeTreex Animated 3D visualizations of hierarchical infor-mation. CHI ’91 Conference Proceedings, 1991, 189-194.

Shoup, R. Color table animation.SZGGRAPH’79 Con-ference Proceedings, 1979,8-13.

19. Smith, R.B. The Alternate Reality Kic An animatedenvironment for creating interactive simulations. Pro-ceedings of the 1986 IEEE Computer Society Workshopon Visual Languages, 1986,99-106.

54 UIST’93 Atlanta, Georgia

20. Smith, R.B. Experiences with the Alternate Reality KicAn example of the tension between liberalism andmagic. CHI+GI ’87 Conference Proceedings, 1987,61-

67.

21. Stasko, J.T. Using direct manipulation to build rdgo-rithm animations by demonstration. CH.. ’92 Co~er-ence Proceedings, 1991,307-314.

22. Sukaviriya, P. Dynamic construction of animated lhelpfrom application wntext. UIST ’88 Co#erence Pro-ceedings, 1988, 190-202.

23. Sukaviriya, F?and Foley, J.D. Coupling a UI frameworkwith automatic generation of context-sensitive animatedhelp. UIST ’90 Conference Proceedings, 1990, 1152-166.

24. Thomas, F. and Johnston, O. Dzhey Animatwn: TheIllm”on of Lije. Abbeville Press, New York, 1981.

25. Tognazzini, B. principles, techniques, and ethics ofstage magic and their application to human interfacedesign. INT.ERCHI ’93 Conference Proceedings, 1!193,355-362.

26. Ungar, D. and Smith, R. Sek The power of simplicity.00PSLJ4 ’87 Conference Proceedings, 1987,227-241.

27. Williams, G. The Apple Macintosh Computer. Byte,9(2), 1984, 30-S4.

November 3-5, 1993 UIST’93 55