CHI 97 Electronic Publications: Formal Video Program
CHI 97 Prev CHI 97 Electronic Publications: Formal Video Program Next

A GUI Paradigm Using Tablets, Two-hands and Transparency

George Fitzmaurice, Thomas Baudel, Gordon Kurtenbach, Bill Buxton

Alias | Wavefront
110 Richmond Street East
Toronto, Canada, M5C 1P1
{gf, tbaudel, gordo, buxton}@aw.sgi.com
1+ 416 362-9181

ABSTRACT

An experimental GUI paradigm is presented which is based on the design goals of maximizing the amount of screen used for application data, reducing the amount that the UI diverts visual attentions from the application data, and increasing the quality of input. In pursuit of these goals, we integrated the non-standard UI technologies of multi-sensor tablets, toolglass [1], transparent UI components [4], and marking menus [6]. While our prototypes and efforts focus within the domain of creating digital art, we believe the concepts and lessons learned are generalizable to other domains. The video shows three main segments: (1) motivation by showing an artist using traditional paper-based interactions, (2) a prototype system called T3 and (3) integration of the concepts into StudioPaint, a high end commercial paint application.

KEYWORDS

two-handed input, toolglass, tablets, transparency, marking menus, task integration, divided attention.

© 1997 Copyright on this material is held by the authors.



INTRODUCTION

In this video we describe an experimental GUI paradigm and its evolution from motivation, prototype to further refinement within a commercial package. This paradigm is based on two handed interaction techniques [2, 3, 5] that have been specifically designed to support the tasks involved in creating digital art. Our designs have been inspired by observations and comments from professional graphic designers.

In many work situations, graphic designers in a traditional studio exhibited heavy bimanual activity. Usually, the non- dominant hand is used to hold and move the canvas offering the best angle for the dominant hand to draw. The non- dominant hand is also used, very unconsciously, to switch tools fast and without loss of focus or concentration from the piece of work. Finally, some tools are bimanual, requiring the use of both hands, like rulers, french curves, and masking with an airbrush.

T3 Prototype

In an attempt to emulate and explore these types of fluid interactions, we developed an experimental GUI prototype called T3. This name is derived from the fact that the three major technologies used in our system start with the letter "T" (i.e., Tablets, Two-hands and Transparency). The prototype allows simple 2D graphics to be created (such as circles, rectangles, triangles and polylines) and edited. T3 focuses on three design goals of (1) maximize the amount of screen used for artwork, (2) minimize the amount an artist must divert there visual attention from the artwork and (3) improve the quality of input in terms of expressiveness and comfort.

Our prototype uses two digitizing tablets and two customized input devices (see Figure 1) to satisfy our design goals while at the same time respecting practicalities for the end user (in terms of cost, accuracy, and avoiding intrusive or immersive solutions). Each puck can detect rotation by the addition of a second sensor (the Wacom stylus sensor) housed inside the device. To reduce confusion, only one button on each puck is used in our interactions.

The basic model is that a tool palette (called a toolglass) is controlled by the puck with the left hand while the cursor is controlled by the other puck or a pen with the right hand (these are reversed if the user is left handed). This arrangement makes it easy to have your tools follow you as you move over the artwork. The number of tools available on a toolglass is limited, so a marking menu can be used to rapidly switch between a collection of toolglasses.


Figure 1: The input device in T3. Two tablets with two rotation sexsing pucks. A pen shown on the right can slso be used instead of a puck. Just above the pen is a device called the "flipbrick"

Two hands can be utilized when creating objects. For example, clicking through the rectangle tool specifies the starting corner of the rectangle and dragging out specifies the other corner. At the same time, the left hand device can adjust the starting corner of the object. This allows for the simultaneous specification of the three affine transformations (translate, rotate and scale). In addition, object properties can be changed by other "click-thru" tools. For example, clicking through a color swatch changes the color of the object underneath.

T3 also uses "curve guides" which is a tool that emulates the way rulers, french curves or friskets are used in illustration. Ink strokes are snapped to the curve guide. A toolglass can be scaled and oriented. This is particularly useful for controlling (i.e, moving, rotating and scaling) curve guides.

Screen space is saved within T3 by not using scrollbars. When the left puck button is pressed, the left hand can be used to move and rotate the artwork. In addition to panning, the user can zoom in and out by stretching the canvas with both hands. This is done by pressing the puck buttons on each device at the same time with the center of zoom determined by the position of the right hand.

Finally, we are experimenting with using multiple input devices on the tablet where each device has a unique shape and function. For example, switching between a puck and a pen is accomplished simply by moving the device onto the tablet. Another example is a device we call the flipbrick. It senses what side of the brick is facing up; flipping the brick changes the toolglass which allows users to utilize their manual manipulation stills to quickly switch tasks.

StudioPaint Application

We introduced some of our T3 design concepts into StudioPaint, a high end commercial paint application, to more rigorously evaluate the concepts. The application uses a single tablet with a standard puck (i.e., rotation insensitive) and a stylus. T3's designs could only be added to StudioPaint if they integrated smoothly with the existing user interfaces. For example, one problem is that the left hand is often used to press hotkeys. We had to provide a way to access at least the most useful functions with the left puck. To meet this constraint, we use a second puck button in the left hand. This button acts as a modifier enabling access to a marking menu containing the most useful commands previously accessed using hotkeys. Like T3, another puck button pans the artwork. These designs, as well as others, are mostly aimed at replacing the traditional "surroundings" of the interface such as the menus, tool palettes and scrollbars.

As in T3, StudioPaint has the concept of a tool palette known as the "shelf" which can be controlled by the puck device. Using the artist's palette metaphor, the shelf can be controlled by the left hand, to popup nearby where the right hand is working.

In addition, based on T3, we have developed design guides (such as rulers and French curves) within StudioPaint. These types of interactions are common with paper based tools but are rarely seen in computer graphics applications. The first step in using design guides is to select or draw a piece of geometry. These pieces of geometry can be designated as a design guide and stored on the "shelf" for later reuse. The design guides can be used to influence "inking." That is, instead of free-flowing ink being laid down by the stylus, the guides can be used to snap the ink to the guide. Varying stylus pressure along the path gives a more natural feel to the drawing. The design curves are attached to the non-dominant hand and users can translate them at any time. Using both hands as anchor points, the design curves can be rotated or scaled. These types of subtle interactions are often overlooked in computer based illustration.

The design curves can also be used as a mask. Real airbrushes are seldom used without some type of paper or cardboard mask often called a "frisket." The non-dominant hand maneuvers the mask and the dominant hand lays down the ink. This is often a clumsy workflow in traditional paint programs that do not allow for two handed interactions. Finally a combination of both snapping and masking can be used to create unique effects unachievable with paper based tools.

Conclusions

By emulating some of the subtle manipulations used in traditional paper based graphics design, we hope to improve the quality of interaction. The T3 prototype allowed us to quickly prototype a number of interaction techniques. Our selective implementation of portions of T3 into StudioPaint has shown us that providing artists with new ways of interacting with application data (i.e., the sweeps) encourages them to create new graphic vocabularies and styles of illustration. In a sense, by enhancing the UI, the functionality of the application becomes enriched.

ACKNOWLEDGEMENTS

We gratefully thank Azuma Murakami and Yasuhiro Fukasaki at Wacom technology for supplying inspirational ideas, tablets, and the custom pucks.

REFERENCES

1. Bier, E., A., Stone, M., C., Fishkin, K., Buxton, W., Baudel, T. (1994) A Taxonomy of See-Through Tools. Proceedings of the ACM CHI'94 Conference on Human Factors in Computing Systems, 358-364.

2. Buxton, W. & Myers, B. A., (1986) A study in two-handed input. Proceedings of the ACM CHI'86 Conference on Human Factors in Computing Systems, 321-326.

3. Guiard, Y. (1987). Asymmetric Division of Labor in Human Skilled Bimanual Action: The Kinematic Chain as a Model. Journal of Motor Behavior, 19(4), 486-517.

4. Harrison, B. Kurtenbach, K., Vicente, K. (1995) An Experiment Evaluation of Transparent User Interface Tools and Information Content. Proceedings of the ACM UIST'95 Conference on User Interface Software and Technology, 81-90.

5. Kabbash, P., Buxton, W., and Sellen, A., (1994) Two-Handed Input in a Compound Task. Proceedings of the CHI'94 Conference on Human Factors in Computing Systems, 417-423.

6. Kurtenbach, G., Buxton, W. (1993) The limits of expert performance using hierarchical marking menus. Proceedings of CHI '93 Conference on Human Factor in Computing, 482-487.


CHI 97 Prev CHI 97 Electronic Publications: Formal Video Program Next

CHI 97 Electronic Publications: Formal Video Program