The Designers’ Outpost: A Tangible Interface for Collaborative Web Site Design

Stanford HCI

From studies into web design, it was found that pens, paper, walls and tablets were often used for explaining, developing and communicating ideas during the early phases of design. In one common early phase practice, designers collect ideas about what should be in a website onto post-it notes and arrange them on a wall into categories. This technique is often called affinity diagramming. These collaborative paper based practices inspired the designer’s outpost. A tangible user interface that combines the affordances of paper and large physical work spaces with the advantages of electronic media to support information design. Users have the same fundamental capabilities as in a paper based system. One can create new pages by writing on post-it notes and organize a site by physically moving post-it notes around on the board. Paper and physical world becomes an input device for the electronic world.

This interaction is enabled by a touch-sensitive smart board, augmented with a robust computer vision system. Employing a rear-mounted video camera for interactively locating physical media and a front mounted high resolution camera for capturing the contents of the media.

Users can write on a note with a standard pen and add it to the board. The vision system recognizes it and updates its internal understanding of the board. To link a pair of notes, the user draws a line from one note to another with the board stylus. To delete a note and its associated links, the user pulls the note off the board. To move a note and its links, the user picks it up and places it at it’s new location. This provides for a  lightweight means of keeping the electronic data and the physical object coupled. Tapping a note invokes an electronic context menu, enabling the manipulation of the electronic properties and body by physical objects.

In addition to being a space for interacting with physical post-it notes, Outpost is also an electronic white board, supporting free-form drawing using board styli.

A physical move tool provides a means of interacting with the system after the physical content has become electronic, retaining haptic direct manipulation. Working like a normal white board eraser, the Outpost eraser removes ink on the board. It operates semantically, deleting each stroke it passes over.

Users can press save to save the boar state to disk. Through its electronic capture of designs, our system supports the transition from this early representation to later electronic tools such as Denim. Denim is a sketch-based tool supporting information and navigation design of websites. Denim supports sketching input, allows design at different refinement levels, and unifies the levels through zooming. Opening and outpost information architecture in Denim offers users the ability to edit the information architecture, specify page level details and create the navigational structure for a website.

The designer’s outpost offers users the best of both the physical and the virtual worlds. It supports the physical wall-scale design practices for creating information architectures, augmenting them with electronic interactions for structuring the information and transitioning to other tools.