EtchaPad - Disposable Sketch Based Interfaces
Jonathan Meyer
NYU Media Research Laboratory
719 Broadway
New York, NY 10003
meyer@cs.nyu.edu
(212) 998-3381
http://www.mrl.nyu.edu
Published in Proceedings of ACM SIGCHI '95, short paper category
ABSTRACT
This paper describes a paradigm in which the user creates
simple drawings or `sketches' of user interfaces and then
interacts directly with those sketches. It introduces EtchaPad,
a system utilizing this technology to implement a
drawing package. Several EtchaPad widget types are
described, including buttons, sliders, and compound widgets.
KEYWORDS
User interafaces, Zoomable interfaces, sketching, interaction techniques, Pad++, pen based computing.
INTRODUCTION
Graphical interfaces have made it possible for almost anyone to use a computer. However, GUIs can be frustrating to
work with. For example, simple tasks often involve two or
more steps. If those tasks need to be repeated multiple
times over a large document, the user is likely to get frustrated and make mistakes. Few applications allow the user
to customize the interface to streamline such tasks.
Programmatic and command line interfaces are ideal for
performing repetitive tasks. Using a tool like VisualBasic
or Tcl/Tk, a programmer can quickly create utility applications to streamline long and tedious operations on datasets
and text. Once written, the application can repeat an operation indefinitely without error. Unfortunately, not all computer users are programmers, and not all application
packages provide programmatic interfaces, so this is not a
general solution.
This paper describes EtchaPad, a user interaction tool
which allows the user to create any number of customized
interface sketchs which are `live' from the moment it is
drawn. For example, to save an EtchaPad document, the
user could draw a `Save' button and then click on the
drawn button immediately. Subsequently, the button can be
selected and deleted like any graphical object, or reused as
often as required.
EtchaPad users can draw new dialog boxes and widgets to
extend the graphical interfaces provided with applications,
and then use the new structures immediately. By creating
their own interfaces, users also gain a sense of ownership
over their interaction with the computer. They are able to
employ secondary notation [1]. The visual nature of the
sketches means that they tend to be more reusable and
understandable than non-visual shortcut methods such as
keyboard-based macros, accelerators, and gestural interfaces.
RELATED WORK
EtchaPad is a natural extension of several existing pieces of
work. Landay and Meyers [2] describe a system that allows
developers to sketch the early stages of interface design.
Their system is not intended for end users - instead, the
sketches are converted into standard widgets which are then
programmed using conventional tools. Kramer presents a
system of translucent, non-rectangular patches [3] which
are intended as a substitute for opaque rectangular windows. There is a great deal of flexibility in choosing the
layout and semantics of items on the display. EtchaPad is
itself constructed as an extension to a novel interactive
drawing application called PadDraw, which is provided as
part of Pad++ [4] [5].
ETCHAPAD
EtchaPad supports all standard PadDraw functions. In addition, certain user drawings are treated specially - they are
interpreted as interative widgets. Widgets are formed using
basic drawing elements (lines, polygons, rectangles and
text) which are placed in an arrangement recognized by
EtchaPad. Freehand shapes are avoided to simplify recognition. A rectangle with a diagonal `tick' in the corner (see
Figure 1) identifies interactive areas. Within an interaction
area, graphical components are placed to specialize the
behavior of the area.The system automatically colors the
area to reflect its type and indicate that recognition was successful. Buttons, sliders and other widgets are recognized.
For example, a button is an interaction area containing only
a textual item. The text in that item dictates the function of
the button - common PadDraw interface words are used for
buttons, e.g. cut, paste, print, etc. The dictionary of known
words is extensible by the user.
Figure 1
a) an interaction frame
b) a print button
c) a dismantled print button
d) a linewidth slider
Property widgets
When the user specifies a button whose label contains a ":",
the button is treated as a "property button." These buttons
provide a way for users to encapsulate state within a widget and then use the widget as a form of visual macro. The
text to the left of the ":" is expected to be the name of an
object property, as in "pen width", "pen color", "font", or
"min size". The text on the right should be a valid value for
the property. When the button is activated, the system alters
the currently selected items so that they use the given value
for the property. Clicking on a "pen color:red" button while
a line is selected changes the color of the line to red.
If the textual value to the right of a ":" on a property setting
button is left blank, the widget uses a "copy by example"
mode. It searches for a graphical object within the interaction area that can act as the source value for the property.
For example, if the user creates a "width:" button and
places a line segment next to the "width:" label, then activating the button changes the current selection to use the
line width of the given line. A "color:" noun is used in conjunction with a colored item to change the foreground color
of items, or a small image can be placed next to an `icon:'
button to change the icon used for a document.
Tool widgets
EtchaPad widgets are drawn directly on the Pad surface,
and therefore coexist with other graphical objects created
by the user. This coexistence can be used to provide more
direct or visual methods for performing certain operations.
Widgets that make use of placement as part of their function are called tool widgets.
An example tool widget is an alignment ruler. The user
constructs a button whose label is `align' and then draws a
line with one endpoint inside the button. The line becomes
a virtual ruler - clicking on the align button aligns the currently selected items so that their edges meet the ruled line.
If the rule is drawn vertically, then items are moved left or
right to align with the rule. Horizontal rules can be used to
align items vertically. A `center' noun allows user to align
centers of objects instead of edges.
Another tool widget provides a simple camera. The user
creates a button with a `snap' label, and then places a rectangle so that one corner intersects with the button. Clicking
on the button then constructs an image of the items within
the rectangle and places the image over the rectangular
frame.
Compound widgets
The user can draw interaction areas nested within other
interaction areas, allowing arbritrarily complex interface
panels to be built. When an interaction area is moved or
deleted, all the interaction areas that are nested within it are
also moved or deleted. However, each individual interaction area within a compound structure can be selected,
moved or deleted independently, without ungluing the parent structure.
Compound areas can be used to generate "interaction
forms" - constructs that represent more than just a collection of items within a frame. One example is an "apply"
form. This is used to apply a number of state changes
simultaneously. For example, a user can place a number of
"property buttons" (see above) within a single parent interaction area, then place the word "apply" on the parent area
to make an apply button. When the user clicks on the top
level "apply" button, all of the child buttons are activated
simultaneously. This allows multiple properties to be set at
once.
CONCLUSION
To date research on EtchaPad has addressed issues relating
to the semantics of freehand interfaces, and avoided questions relating to pen-based input methods and recognition
algorithms. In the near future EtchaPad will be linked to
third party pen software and recognition algorithms.
More extensive user testing is required for EtchaPad. In
particular, studying how effective EtchaPad is with more
complex applications and interfaces important.
ACKNOWLEDGEMENTS
I would like to thank Ken Perlin, Ben Bederson, Jim Hollan, Alexis Wilson, Athomas Goldberg, Troy Downing, and
the other members of the MRL/CAT for their help and
encouragment. This work was supported in part by ARPA
grant N660011-94-C-6039 to the University of New Mexico.
REFERENCES
1. Petre, M., "Why Looking isn't always seeing - readership skills
in graphical programming", Communcations of the ACM, June
1995.
2. Landay, J., Myers, B., "Interactive Sketching for the Early
Stages of User Interface Design", in Proceedings of SIGCHI '95,
ACM, New York, 1995.
3. Kramer, A., "Translucent Patches - Dissolving Windows", in
Proceedings of UIST `94, ACM, New York, 1994.
4. Bederson, B., Hollan, J., "Pad++: A Zooming Graphical Interface for Exploring Altenate Interface Physics", in Proceedings of
UIST `94, ACM, New York, 1994.
5. Perlin, K., Fox, D., "Pad: An Alternative Approach to the Computer Interface", in Proceedings of SIGGRAPH `93, ACM, New
York, 1993.
