mabht 0 graceland.Levels .UniS A.Edu. Au. Department of Computer Science. The Hinders University of South Austr. GPO Box 2100, Adelaide, Australia 5001.
Bruce H. Thomas Advanced Computing Research Centre School of Computer and Information Science University of South Australia The Levels, SA, Australia 5095 mabht 0 graceland.Levels.UniSA.Edu.Au
If judiciously applied, the techniques of cartoon animation can enhance the illusion of direct manipulation that many human computer interfaces strive to present. Previously, we have shown how animation helps convey a feeling of substance in the objects a user manipulates directly; this paper extends that work to indirect manipulation operations in a drawing editor-those operations initiated by command menus and buttons. Our editor uses two basic techniques: we animate changes in object geometry and graphical attributes to smooth the visual impact of the change, and we use cartooning principles to suggest what effect a geometry-changing operation will have on an object before the operation is committed. Our animations use low-level toolkit support for drawing animated views and managing time-varying data. The prototype editor demonstrates how interface developers can use such support to extend their repertoire of interaction techniques.
Paul Calder Department of Computer Science The Hinders University of South Austr GPO Box 2100, Adelaide, Australia 5001 calder @ cs.flinders.edu.au
tion that underlies many human computer interfaces [7]. To demonstrate these ideas, we extended a graphical editor to incorporate animation into the direct manipulation of graphical objects. In this paper, we describe how we further extended the editor to apply animation principles to interface operations where on-screen changes come about indirectly as a result of commands initiated from menus and buttons. This work is part of the Prosodic Interfaces project, an ongoing effort to provide a set of tools and techniques that can improve the prosody of human computer interfaces. In addition to animation, other Prosodic Interfaces projects are investigating ways to incorporate sounds and gestures into interfaces.
1.1. Direct and In
In his seminal paper [5],Shneiderman identified the essential ingredients of direct manipulation: immediate response to actions, incremental changes, and reversible effects. Properly applied, these characteristics can convince users that they are directly interacting with application data, even though they know it’s all an illusion [3]. Direct manipulation works best when there is a straightforward mapping from user actions to visible changes on the screen; typical examples include dragging an object to a new position, stretching it to make it larger, or rotating it around an origin. But some changes have no obvious mapping (like changing an object’s colour), and others require more precision than can readily be achieved by direct action (like rotating an object by exact quarter turns or moving it to exactly align with another). One way to permit such operations is to provide commands that carry out the desired change, together with a way to invoke the commands as needed. In the context of graphical interfaces, the commands are usually invoked by pressing a button in a toolbar or selecting a choice from a menu. We call this style
s: animation, graphical interfaces, direct manipulation, indirect manipulation, warping transformation, InterViews
1.
ion
We are interested in exploring how techniques borrowed from cartoon and computer animation can enhance the experience of interacting with a computer. In particular, we wish to apply animation to the interface itself-to enhance or augment the effectiveness of human interaction with applications that present a graphical interface. In previous work, we have used animation techniques to help smooth abrupt transitions in the visible state of the screen [6] and to reinforce the illusion of direct manipula-
184 0-8186-7525-X/96 $05.00 0 1996 IEEE
~a~iQn
on inditiect manipulation, since an action on one tton, for instance) causes a change to another sly we have shown how animation techniques in or can enliven the objects the user manipu, strengthening the sense that “things are hapexample, we display the behaviour of a maect as a cartooner might: an object dragged distoirts slightly, as if it has inertia; an object uld not be imoved (perhaps because of an alignment nt) leans iri the direction of pull, as if it is glued in
0
s paper describes how we have extended our techmanipulation operations. In particular, I two problems that often occur in indirn: an abrupt visual change can be confusing ambiguous), and the final result of a combe: difficult to predict.
Figure 1. Before and after alignment
1.2. $tructure of the paper remainder d the paper describes how we added anto indirect manipulation in our prototype editor. ow animatingindirectly initiated changes itinuity and hence reduces confusion and we show how cartooning techniques can :s for complex operations by suggesting tcome of the change before the operation is comally, we briefly describe how we implemented ns in our editor using a minor extension to the ing model we have previously used.
nal configuration(bottom diagram). If the screen instantaneously changes from one configuration to the other, the user may well be confused. Other workers have shown [l] that avoiding abrupt changes by smoothly changing the visual appearance of the screen over a short time interval improves understanding of the operation and can even reduce the total time needed to carry out a given task. For example, the Cone Tree and Perspective Wall visualisations (part of the Information Visualiser project [2]) use smooth transitions to display changing views of complex data; objects slide or rotate into new configurations and views. The improvement occurs largely because a smooth change can be tracked by the user’s perceptual system, whereas an abrupt change must be processed as a cognitive task.
2. Animating changes e visual changes caused by direct manipulation are
2.1. “Direct” indirect manipulation Our approach to smoothing a change caused by indirect manipulation is to consider what the operation would look like if it was carried out (albeit less quickly and precisely) by direct manipulation. For example, if an indirect manipulation causes an object to move (perhaps to align it to another object), then our editor will portray the change as if the object is dragged by one of its corners. As with direct manipulation, we use cartoon-style animation techniques to suggest the effect of the interaction on the changing object; the object is distorted to suggest that it is slightly rubbery and that it is somewhat reluctant to change. Figure 2 shows a situation where the square is moving to the left so that it is aligned to the circle. Of course, the static figure cannot fully convey the dynamic feel of the interac-
ieous, the effect can be confusing.
n visual changes can be disruptivebecause the user iously digest the new state of the screen; it ut significant moment before the new state the user can proceed with another task. f the initial and final state of the screen are sims an operation rotated a square through a quarter bject about an axis of symmetry), it may ous just what has changed or how the change ure 1 shows an operation where objects n rearranged so that they abut left-to-right. By init is not obvious which objects in the initial conam) correspond to the objects in the fi-
I
185
3. Previewing consequences Some indirect manipulation operations cause complex changes whose effects are di It to predict. For example, aligning a group of objects common edge can cause many objects to move, all by differing amounts. Furthermore, many editors offer a wide range (by centres, by sides, equally spaced b abutted) in either or both the horizontal or vertical dimension. Often when the user performs the configuration of the objects is not quite the user might make several attempts before achieving the desired effect. One way to deal with such operations is to adopt a trialand-error approach, with a heavy reliance on an ‘undo’ facility; if the final result is incorrect, it can be undone and a new attempt made. At best, such a working style is cumbersome.
Figure 2. Animating an alignment operation
3.1. Trying out operations
tion; we have superimposed several successive frames from the sequence to suggest the effect (the shading of frames is intended to imply the passage of time). In use, the distortion of the manipulated object gives the impression that the object is being towed along by its comer; without the distortion the impression is more like the object is moving spontaneously. The net result is that the cartooning animation helps convey the impression that the action, although indirect, is still under the control of the user (or perhaps a willing agent who will do the user’s bidding). We use similar techniques for all operations that involve changes to the geometry of objects. In each case, we display the change in the same way that the user might see if undertaking the operation using direct manipulation. (If several objects are involved they all change together, as if simultaneously manipulated by several users). Thus we show rotations as if objects were dragged around by their comers, movements as if objects were dragged by the vertex nearest their destination point, and flips as if objects were turned inside-out.
Instead, we use cartooning techniques to illustrate the consequences of an operation before it is committed. In our prototype editor, indirect manipulation operations are initiated by buttons that use a two-stage action. Pressing and holding a button (‘arming’ the button) carries out the operation (using animation, of course) but does not commit the change. Moving the mouse pointer off the button (‘disarming’) cancels the change and restores the objects to their original positions. The operation is only committed if the mouse pointer is still on the button when it is released (‘activating’). The technique is a natural extension to ings of a button. A user who is confident of the effects of an operation can simply click the button in the usual way. However, where the consequences are less certain, the user can press and hold the button, observe the result, then either commit or cancel the operation as appropriate. Indeed, it is convenient to adopt an in-between mode of operation for some tasks. For example when rotating and flipping objects it is sometimes unclear which operation (rotate clockwise or rotate anti-clockwise, flip horizontal or flip vertical) is appropriate. Sometimes just the initial part of the change animation is enough to confirm that the operation is correct; the button can be released and the change committed without waiting for the animation to complete.
2.2. Other applications Although we are concerned here with changes caused by indirect manipulation of application data, similar techniques are often used in other areas of application interfaces. For example, we have defined a set of widgets that use animation to smooth out the abrupt changes in the appearance of menus and buttons [ 6 ] . Other common examples include the zooming effect that many window managers use to animate the opening and closing of windows from their icons, and the switching effects that presentation graphics programs use to animate the transition from one screen to the next.
3.2. Suggesting the options Our editor exploits one further technique to animate indirect manipulations that involve chan geometry. While an operation is being fore it is committed) we wanted to show both what would
186
4. Implementation notes Our editor uses animations for all direct manipulation operations and for indirect manipulations involving object geometry (rotating, flipping, and aligning) and colour (setting or changing line and fill colour). The animation effects we have described in this paper rely on two techniques: generating intermediate frames that portray a sequence of steps that interpolate between specified end points, and distorting the appearance of objects to suggest the effect of direct manipulation.
4.1. Interpolation To show the progress of a change, we repeatedly draw the object at successivein-between states over a short period of time (currently the complete sequence takes around half a second). The computation of the object’s appearance during the change depends on the kind of change. For example, changes in colour are interpolated as linear transitions in RGB colour coordinate space (each colour component is smoothly varied from its initial to its final value), while changes in geometry are interpolated as linear transitions in position, scale, or orientation. The technique works well where an operation causes a change to an object attribute that can vary over a continuous range; the interpolation simply sets the attribute to intermediate values in the range. However, some operations remain problematic. For example, changing the font of a text label or the pattern of a filled rectangle has no obvious interpolation since these attributes are typically selected from a discrete palette of values. Similarly, there appears to be no intuitive way to smoothly create and delete objects. We hope to explore techniques for these situations in future work.
i
F gure 3. Previewing an alignment operation
n if the operation is committed and what would hap-
r solution uses an extension of the technique we have in the same way a cartooner might. an attempt is made to move an object place, a cartooner might show it distorted f ]pull,as if it is made of a rubbery material. technique to suggest that an operation has mitted-we show the object in the position e change is committed, but with a corner . ;1
The effect suggests both possible out-
to the trial operation: If the change is committed, the
ill retract into the object, showing that the new posIepted. But if the change is cancelled, the (asedand the string will drag it back to its
4.2. A more powerful warp model Our editor is built with components from the Interviews toolkit [4].In previous work, we extended the Interviews drawing model to include a warping transformation [8] that draws standard objects as if on a distorted rubber sheet; the distortion is specified by a set of bound vectors that determine how specific points are displaced from their natural positions. The warping transformation allows us to specify effects suitable for a range of cartooning techniques [7]. In our warping model, each point is transformed by a weighted sum of the warp vectors, with weighting factors determined by the closeness of the point to each vector. Thus, points close to a vector are affected primarily by that vector, while points equally distant from several vectors are affected by the average of the vectors.
ates the idea in the context of an alignation; again, the square is moving to the left to the circle. The figure shows the situation at the ation for the trial operation has comhas been committed. The position of the clearly shows what the final alignment would look t its top right corner is stretched back to its original show that the object has not yet released its hold ce. If the operation is committed, the stretched elled, the square will spring back to
I
187
1. It argues that benefits achieved in using cartoon-style animation in direct manipulation graphical interfaces can also be realised in indirect manipulation tasks. 2. It shows how animation can be used to smooth abrupt visual transitions and hence reduce confusion, and it suggests how animation can be used to preview changes caused by complex operations before they are committed. 3. It presents a straightforward way of drawing the animation frames based on distorted views of objects, and it demonstrates that the effects can be achieved on standard workstation hardware.
The effects of animation on the user’s perception of the interface (like the effects of other aesthetic elements such as colour) can be profound. On the one hand, this influence suggests that great improvements are possible; on the other hand, it warns that equally great disasters can happen. Just as there are good and bad uses of colour, so there are good and bad uses of animation. Inappropriately applied, animation will seem childish and drive users away. But sensibly applied it can make an interface more graceful and enjoyable to use.
In the original model, the ‘range’of each vector (or equivalently, the rate at which the vector’s influence decreases with distance) was the same. To portray the effects we needed in our current work, we extended the model so that each vector’s range is controlled by a separate range coefficient. Using this extended model, some vectors can be ‘short-range’ (their influence is confined mainly to the area close to the vector) and others can be ‘long-range’ (their influence extends over a much greater distance). Figure 4 shows the effect of changing range coefficients while keeping the vectors constant. The figure illustrates the set of vectors that we use to portray an object being considered for alignment. Three of the object’s corners are pinned (the dots in the figure represent zero-sized vectors) to the positions they will take if the alignment operation is committed. The top-right corner is warped (the restoring vector) to its original position to suggest that the object will spring back to its pre-alignment location if the operation is cancelled. Part (a) shows the effect when all vectors are ‘mid-range’ (the only option under the original warping model); part (b) shows the effect with long-range pinning vectors and a short-range restoring vector. The overall effect in part (b) gives a better preview of potential results of the alignment operation because the bulk of the object is mainly under the influence of the long-range pinning vectors and hence close to its final position. Only in the region very close to the restoring vector is the object significantlydistorted.
References [l] R. Baecker and I. Small. Animation at the interface. In B. Laurel, editor, The Art of Human-Computer Interface Design. Addison-Wesley, Reading, MA, 1990. [2] S . K. Card, G. R. Robertson, and J. D. Mackinlay. The Information Visualizer, an information workspace. In S. P. Robertson, G. M. Olson, and J. S . Olson, editors, Reaching Through Technology: Proceedings of CHI’91, pages 181-
188, New Orleans, Apr. 1991. ACM SIGCHI. [3] B. Laurel. Computers as Theatre. Addison-Wesley, Reading, MA, 1991. [4] M. A. Linton, J. M. Vlissides, and P. R. Calder. Composing user interfaces with Interviews. Computer, 22(2):8-22, Feb. 1989. [SI B. Shneiderman. Direct manipulation: A step beyond programminglanguages. Computer, 16(8):57-69,Aug. 1983. [6] B. H. Thomas and P. R. Calder. An animated widget kit for Interviews. In S . Howard and Y. K. Leung, editors, Harmony Through Working Together: Proceedings of OzCHI’94, pages 203-208, Melbourne, Nov. 1994. Ergonomics Society of Australia CHISIG. [7] B. H. Thomas and P. R. Calder. Animated interaction for a graphical editor. In H. Hasan and C. Nicastri, editors, A Light into the Future: Proceedings of OzCHI’95, pages 191-
196, Wollongong, Australia, Nov. 1995. Ergonomics Society of Australia CHISIG. [SI B. H. Thomas and P. R. Calder. Animating direct manipulation interfaces. In Proceedings of UIST95; ACM Symposium on User Interface Software and Technology,pages 3-12, Pitt-
This work makes three key contributions in the context of animating direct manipulation graphical interfaces:
sburgh, Nov. 1995. ACM SIGGRAPH and ACM SIGCHI.
188
