Animation: From Cartoons to the User Interface

This paper is in the vein of the last one I’ve presented here in the site, talking about principles of cartoon animation but this one show how they can be used in the design of user interfaces. Some of the principles present in the paper written by Lasseter are explained here and then given an example of the application of that principle in a user interface called Self. The paper was written by Bay-Wei Chang and David Ungar and can be obtained trough the Sun website.

Despite the differences between user interfaces and cartoons, interactive tools vs. passive entertainment, cartoons animation has characteristics that are very useful in the design of user interfaces. Using some aspects of cartoons animation allows the user to visualize the changes that are occurring in the interface when he executes an action, making it clear what’s happening. By applying the principles of animation the interface can provide visual clues necessary for the user to understand what is happening before, during and after the action. Those visual clues take off the burden that result from those interfaces that make so that the user has to use his deductive ability to interpret changes, instead of using animation to smoothly change and move the objects present in the interface.

Bringing that kind of animation to the user interface has both cognitive and affective benefits. By offloading interpretation of changes to the perceptual system, animation allows the user to continue thinking about the task domain, with no need to shift contexts to the interface domain. By eliminating sudden visual changes, animation lessens the chance that the user is surprised, thus reducing his uneasiness. So employing animation not only aids the user in understanding the events in the user interface, but also makes the user’s experience of the interface more pleasant and comfortable.

The use of cartoons animation instead of a strictly realistic animation is due to three essential characteristics of cartoons animation, its theatrical basis, the engagement of its illusion and the nature of its artistic medium. Cartoons are theatrical, so actions and reactions are exaggerated, situations are staged, and all of the energy of movement and depiction is calculated to best telegraph the animator’s point. User interfaces have the same need to communicate clearly and concisely, and theatricality can contribute to this goal. Second, cartoons are engaging, because they create an illusory world, but effectively absorb the audience into that world. User interfaces can benefit by becoming more engaging and therefore fully absorbing the user into its world, so that his attention may be devoted entirely to the task. Finally, user interface designers can as well draw upon the wealth of experience in the field of cartoon animation to achieve similar successes of communication, vibrancy, and illusion.

The techniques presented in this paper are widely applicable, and may have additional benefits in certain kinds of interfaces. In particular, collaborative applications stand to benefit greatly from the use of cartoons animation. Anticipation, slow in and slow out, motion blur, and follow through can be used to more fully and more gently inform the user about remotely initiated actions.

The animation doesn’t have to be slow, or distracting, or silly; on the contrary, with careful tuning, cartoon animation can turn the user interface into an understandable, engaging, and pleasurable experience.


Principles of traditional animation applied to 3D computer animation

As the title of this post reveals, I’m going to present a paper about principles of animation that should be applied to 3D computer animation and that are useful in the design of 3D interfaces. The paper was written by John Lasseter, the Chief Creative Officer at Pixar and Walt Disney Animation Studios, and can be downloaded through the ACM website.

John Lasseter gives an historic overview over the the 11 principles of traditional animation defined by the Walt Dísney Studio and then gives an explanation of each one of the principles, relating them to the field of 3D computer animation. Next is a summary on some of the principles presented in the paper:

Squash and StretchDefining the rigidity and mass of an object by distorting its shape during an action
This is the most important principle and says that when an object is moved the movement emphasizes any rigidity in the object. The squash position represents when an object is flattened by an external force or when the object is constricted by its own power. The stretched position will show the same form in a much extended condition.  One important rule about squash and stretch is that the volume of the object has to remain constant during the movement or else the object would look as it had shrink or grown during the process. This principle defines the rigidity of the material that compose the object, i.e. depending on the level of stretch and squash the object would look as is made of different materials.

TimingSpacing actions to define the weight and size of objects and the personality of characters
It represents the speed of an action, giving meaning to the movement and defining how well the idea behind the action will read to an audience. It also reflects the weight and size of the object, as well emotional meaning. It’s important when defining the timing of a scene, to make sure that the audience is capable of reading and understanding the meaning of it as fast as is being shown. Another aspect related to timing is the weight of the objects. A heavy object will have a slower acceleration and deceleration than a light object, and will take a bigger force to change is motion. Timing can also give a feeling of size and scale to an object, by making a huge object with enormous mass to move slowly and a   small object with a small mass to move quickly. Last but not least, timing can show the emotional state of the object by varying the speed of his movements, indicating whether the character is lethargic, excited, nervous or relaxed.

AnticipationThe preparation for an action
Anticipation is used to catch the audience’s eye and to prepare them for what the next movement will be before it happens. The amount of anticipation used considerably affects the speed of the action which follows it. If the audience expects something to happen, then it can be much faster without losing them. This principle is also used to direct the attention of the audience to the right part of the screen and at the right moment, preventing the audience from missing some vital action. Anticipation can also emphasize heavy weight, as for a character picking up an object that is very heavy. An exaggerated anticipation, like bending way down before picking up the object, helps the momentum of the character to lift the heavy weight.

StagingPresenting an idea so that it is unmistakably clear
Staging is the presentation of an idea so it is completely and unmistakably clear, whether it’s an action, a personality, an expression or a mood. To stage an idea clearly, the audience’s eye must be led to exactly where it needs to be at the right moment, so that they will not miss the idea. That is accomplished trough staging, anticipation and timing. One important aspect, when staging an action, is that only one idea should be seen by the audience at a time. Due to that the object of interest should contrast from the rest of the scene, preventing the user of overlooking the idea being transmitted when there is a lot of action happening at once.