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.