James A. Landay
Keywords: Design, sketching, prototyping
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].
Figure 1: Sketched application interface created with SILK.
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.
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.
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.
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.