The examples of static sketches in this section are taken from a leisure project where I explore what a slide presentation program based on Sens-A-Patch interaction could be like. The idea is to integrate viewing and editing into a modeless system.

I have used Sens-A-Patch in a slide viewer since 2001, but never gotten around to developing the editing functions. The doodles on the left are from the fall of 2003, when I first thought about a prototype of a more complete system.



Almost a year after the previous doodles, I found the time to start sketching the editing functions in a little more detail.

This sketch examines some ideas for context-sensitive editing menus in the presentation surface (top), how a node could be moved spatially and structurally at the same time (left), and how the trails (i.e., slideshows) could be edited.



An important question was whether the underlying structure of the "slide space" should be edited in an abstract structural view, or whether it should be edited straight on the presentation surface.

This sketch examines the pros and cons of the two alternatives, and concludes that it is worth trying to pursue the modeless alternative (edit in the presentation surface) even if it is not clear whether all necessary functions can be supported.



The sketching session led to a number of tentative design decisions.

They are summarized here, with a thumbnail picture of the whole program window in the middle and callouts showing more detail.

In general, it is quite common to draw small sketches at early stages. One reason may be that it is faster; another that the small format does not allow for much detail and precision -- which is appropriate at early stages of idea development.



The design decisions are also summarized in a more systematic form, by listing the editing functions and subfunctions.

Some uncertainties are noted and the semantics of the create node function ("skapa nod") are elaborated slightly.



The next sketching step was to draw the interface on the computer, in order to make some more detailed decisions concerning colors, typefaces and positions.

In this sketch, it became clear that one possible rendering of context-sensitive menus was preferable over the other alternative (top segment).

Moreover, the details on trail menu editing were established in a first rough version (middle and botttom segments).



The sketching session ended with a first approximate idea on the architecture for an executable prototype.



As our interest here is in sketching techniques, it may be worth revisiting the first idea sketch (second image, above). A part of the sheet is magnified on the left.

Note the 1-2-3 sequence illustrating how a node in the presentation surface could be moved spatially and structurally at the same time. It is drawn as a comic strip, a temporal sequence where the user selects a node (1), drags it across a new structural parent (2) and places it in a new position (3).

In short, the sketch turns out to contain a tiny storyboard. This is not strange, given the temporal nature of interaction design. Storyboards may well be the most common sketching technique in early phases of interaction design. The next section provides a more detailed example.

To STORYBOARD section.