Abstract

Current interactive user interface construction tools are often more of a hindrance than a benefit during the early stages of interface design. These tools take too much time to use and force designers to specify more of the design details than they wish at this stage. Most designers prefer to sketch early interface ideas on paper. I am developing an interactive tool called SILK that allows designers to quickly sketch an interface using an electronic pad and stylus. SILK preserves the important properties of pencil and paper: a rough drawing can be produced very quickly and the medium is very flexible. However, unlike a paper sketch, this electronic sketch can easily be edited, exercised, and semi-automatically transformed into a complete, operational interface in a specified look-and-feel.

Keywords: Design, sketching, prototyping

Introduction

When professional designers first start thinking about a visual interface, they often sketch rough pictures of the screen layouts. Their initial goal is to work on the overall layout and structure of the components, rather than to refine the detailed look-and-feel. Designers use these sketches and other "low-fidelity techniques" [3] to quickly consider design ideas, later shifting to interface construction tools or handing off the design to a programmer. Unfortunately, this transition forces the designer to specify too many details.

Much of the design literature recommends drawing rough sketches of design ideas [1], yet most interface construction tools, such as the NeXT Interface Builder, and even prototyping tools, like HyperCard, require the designer to specify much more of the design than a rough sketch allows. These tools force designers to bridge the gap between how they think about a design and the detailed specification they must create to allow the tool to reflect a specialization of that design. Another key lesson from the design literature is the value of iterative design. It is important to iterate quickly in the early stages of design because that is when radically different ideas can and should be examined. The need to turnout new designs quickly is hampered by tools that require detailed designs. This over-specification can be tedious and may also lead to a loss of spontaneity. Thus, the designer may be forced to abandon computerized tools until later in the design process or forced to change design techniques in a way that is not conducive to early creative design.

Additionally, research indicates that the use of current interactive tools in the early stages of development places too much focus on design details like color and alignment rather than on the major interface design issues, such as structure and behavior [5]. Wong found that colleagues give more useful feedback when evaluating interfaces with a sketchy look. I surveyed sixteen professional designers from around the world concerning their use of tools in interface design. These designers reported that current user interface construction tools are a hindrance during the early stages of interface design. What designers need are computerized tools that allow them to quickly sketch rough design ideas [4].

Interactive Sketching

I am developing an interactive tool called SILK [2] that allows designers to quickly sketch an interface using an electronic stylus. SILK then retains the "sketchy" look of the components. The system facilitates rapid prototyping of interface ideas through the use of gestures for sketch creation. Unlike a paper sketch, the electronic sketch allows the designer or test subjects to exercise the sketch before it becomes a finished interface by manipulating it with the mouse, keyboard, or stylus. For example, in Figure 1, the user can drag the sketched scrollbar "elevator" up and down.

Figure 1: Sketched application interface created with SILK.

Improvements Over Paper Sketches

Electronic sketches have most of the same advantages as paper sketches: they allow designers to quickly record design ideas in a tangible form and they do not require the designer to specify details that may not yet be known or important. Electronic sketches also remedy some of the weaknesses of paper sketches.

Editing and Re-use

One of the drawbacks of paper sketches is that they are hard to modify as the design evolves. The designer must often redraw features that have not changed. One way to avoid this repetition is to use an erasable whiteboard. This solution is of no help with the next step when a manual translation to an electronic format is required; this step may need to be repeated several times as the design changes.

SILK will allow a designer to easily edit sketched interface designs using simple gestures. SILK's history mechanisms will allow designers to reuse portions of old designs and quickly bring up different versions of the same interface design for testing or comparison. Thus, unlike paper sketches, SILK sketches can evolve without forcing the designer to continually start over with a blank slate.

Design Memory

Another problem with relying too heavily on paper sketches is the lack of support for "design memory." The sketches may be annotated, but a designer cannot easily search these annotations in the future to find out why a particular design decision was made. Practicing designers have found that the annotations of design sketches serve as a diary of the design process, which are often more valuable to the client than the sketches themselves [1]. In addition, paper sketches can be hard to store and organize.

Using SILK, changes made to a design over the course of a project can be reviewed, including viewing the attached written annotations made on SILK's "annotation layer". Electronic sketches also have the advantages of other computer-based tools: they are easy to edit, store, duplicate, and search. Thus SILK will make the "design memory" embedded in the annotations even more valuable.

Interactivity

One of the biggest drawbacks to using paper sketches is the lack of interaction possible between the paper-based design and a user. In order to actually see what the interaction might be like, a designer needs to "play computer" and manipulate several sketches in response to a user's verbalized actions. Designers need tools like SILK that allow them the freedom to quickly sketch rough design ideas and to test the designs by interacting with them.

SILK blends the advantages of both sketching and traditional user interface builders, yet avoids many of the limitations of these approaches. The system tries to recognize user interface widgets and other interface elements as they are drawn. Although the recognition takes place as the sketch is made, it is unintrusive and designers will only be made aware of the recognition results if they choose to exercise the widgets. As soon as a widget has been recognized, it can be exercised.

Next, the designer may specify the higher-level behavior of the sketched elements. For example, what action to perform when a user clicks on a button. Much of this can be inferred by demonstration, but some of it may need to be specified using a visual language I am also developing.

When the designer is happy with the interface, SILK will replace the sketches with real widgets and graphical objects; these can take on a specified look-and-feel of a standard graphic user interface, such as Motif, Windows, or Macintosh. The transformation process is mostly automated, but it requires some guidance by the designer to finalize the details of the interface (e.g., textual labels, colors, etc.). At this point, programmers can add the application-specific code to complete the application.

Status

I currently have a prototype of SILK running under Common Lisp on an Apple Macintosh with a Wacom tablet attached. It is implemented using the Garnet user interface development environment. The prototype supports the recognition, operation, and transformation of several standard widgets. I have undertaken a formal study of sketchy versus finished-looking interfaces, comparing the nature of the comments made during evaluations of each.

Conclusions

I envision a future in which most of the user interface code will be generated by user interface designers using tools like SILK rather than by programmers writing the code. I have designed SILK only after examining the problems reported by the intended users of the system. SILK will overcome these problems by allowing designers to quickly sketch an interface using an electronic stylus. Unlike a paper sketch, an electronic sketch will allow the designer or test subjects to interact with the sketch before it becomes a finalized interface. I aim to show that an interactive sketching tool that supports the entire interface design cycle -- from early creative design through prototyping, testing, and final implementation -- will enable designers to produce better quality interfaces in less time than with current tools.

References

Boyarski, D. and Buchanan, R. Computers and communication design: Exploring the rhetoric of HCI. Interactions 1, 2 (April 1994), 24-35.
Landay, J.A. and Myers, B.A. Interactive Sketching for the Early Stages of User Interface Design. In Proceedings of CHI '95: Human Factors in Computing Systems, Denver, CO, To appear, May 1995.
Rettig, M. Prototyping for tiny fingers. Communications of the ACM 37, 4 (April 1994), 21-27.
Wagner, A. Prototyping: A day in the life of an interface designer. In The Art of Human-Computer Interface Design. Addison-Wesley, Laurel, B., pp. 79-84, 1990.
Wong, Y.Y. Rough and ready prototypes: Lessons from graphic design. In Short Talks Proceedings of CHI '92: Human Factors in Computing Systems, Monterey, CA, May 1992, pp. 83-84.