Computer Science Department
School of Computer Science, Carnegie Mellon University
Interactive Sketching for the Early Stages of User Interface Design
James A. Landay
[Also appears as CMU-HCII-96-105]
SILK 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 quickly and the medium is flexible. However, unlike a paper sketch, this electronic sketch is interactive and can easily be annotated and modified using editing gestures.
SILK recognizes user interface widgets and other interface elements as they are drawn and gives the designer feedback so that these inferences can be changed. Recognized interface elements have built-in behaviors and thus these elements can be exercised in their sketchy state. For example, the "elevator" in a sketched scrollbar can be dragged up and down. Unfortunately, the behavior of individual widgets is insufficient to test a working interface. SILK's electronic storyboards allow the illustration of the dynamic behavior between interface elements, such as a dialog box appearing when a button is pressed. A designer creates a storyboard by first copying sketched screens to the storyboard window and then drawing transition arrows on the screens. The arrows specify which objects cause transitions to which screens when the end-user clicks on the objects. When the designer is satisfied with this early prototype, the system can transform the sketch into an operational interface using real widgets in a specified look-and-feel.
An evaluation of SILK, using professional and student designers, showed that it was an effective tool for both early creative design and for communicating the resulting design ideas to other members of an engineering team. By supporting the early phases of the interface design life cycle, electronic sketching can both ease the prototyping of user interfaces and improve the interfaces that are eventually produced.