No Section...

VIII.5 Sept./Oct. 2001
Page: 9
Digital Citation

Research alerts

Marisa Campbell

back to top  Applying Cartoon Animation Techniques to Graphical User Interfaces

Bruce Thomas, University of South Australia
Paul Calder, Flinders University, South Australia

The following abstracts are from recent issues and the forthcoming issue of ACM's Transactions of Computer Human Interaction (ToCHI). They are included here to alert interactions' readers to what research is being done in the field of Computer Human Interaction. The complete papers, when published, can be found in ACM's Digital Library at

If judiciously applied, animation techniques can enhance the look and feel of computer applications that present a graphical human interface. Such techniques can smooth the rough edges and abrupt transitions common in many current graphical interfaces and strengthen the illusion of direct manipulation that such interfaces strive to present.

Brenda Laurel argues that computer interfaces should use dramatic techniques to engage users in an intimate dialog with the computer. To that end, we have investigated how direct manipulation human-computer interfaces can be augmented with techniques borrowed from cartoon animators. In particular, we have developed techniques to improve the visual feedback of a direct manipulation interface by smoothing interface changes, giving manipulated objects a feeling of substance, and providing cues that anticipate the result of a manipulation.

Our direct manipulation animations are based on four principles:

  1. The Principle of Attachment states that manipulated objects should at all times remain attached to the pointer, which maintains the impression that the user is always in control of the action.
  2. The Principle of Reluctance states that objects should seem reluctant to change, which helps give objects a sense of substance by suggesting that change requires effort on the part of the user.
  3. The Principle of Smoothness states that objects should change in a continuous fashion, which reduces the cognitive effort needed to comprehend changes in appearance.
  4. The Principle of Anticipation states that the result of a user's actions should be obvious at all times, which helps eliminate surprises and reduces the need for short-term memory.

Figure 1 shows how we applied these principles to animate moving an object in a direct manipulation drawing editor. The diagram on the left shows the move without animation; the object merely moves to follow the pointer. The diagram on the right shows the animated feedback; the corner of the object still follows the pointer (the principle of attachment), while the bulk of the object lags slightly behind (the principle of reluctance). The animation gives the effect of manipulating a heavy "rubbery" object. We used similar techniques for other operations, such as rotating and stretching.

Our animation principles can also be used to enhance interactions that are subject to constraints on object manipulation. For example, Figure 2 shows how we animated interaction with an object that is fixed in place so that it cannot move. As the user attempts to drag the pinned object, the grasped point stays attached to the pointer but the bulk of the object stays fixed. The feedback makes it clear that the user is attempting to move the object, but that the attempt will not succeed (the principle of anticipation). When the grasped point is released, the object will spring back to its original shape. We used similar techniques for other constrained operations such as objects subject to "gravity" snapping, and to convey the outcome of "indirect" manipulation operations such as alignments.

To simplify the implementation of our ideas, we added tools for object distortion and keyframe interpolation to a user interface toolkit, and provided prepackaged animated widgets for common user interface interactions. Specifically, we extended the Inter-Views toolkit by adding a new kind of transformation that warps the coordinate space within which objects are drawn. Since all drawing in InterViews is subject to coordinate transformation, this one addition is sufficient to add warping capabilities to all interface objects.

To determined if these tools and techniques were practical and effective, we built a prototype direct manipulation drawing editor with an animated interface and used the prototype editor to carry out a set of human factors experiments. The ex-periments showed that the techniques are practical even on standard workstation hardware, and that the effects can indeed enhance direct manipulation interfaces.

back to top  Figures

F1Figure 1. Animating a move operation

F2Figure 2. Animating an attempt to move a pinned object

back to top 

©2001 ACM  1072-5220/01/0900  $5.00

Permission to make digital or hard copies of all or part of this work for personal or classroom use is granted without fee provided that copies are not made or distributed for profit or commercial advantage and that copies bear this notice and the full citation on the first page. To copy otherwise, to republish, to post on servers or to redistribute to lists, requires prior specific permission and/or a fee.

The Digital Library is published by the Association for Computing Machinery. Copyright © 2001 ACM, Inc.

Post Comment

No Comments Found