The Designers Outpost: A Tangible Interface for Collaborative Design

1

We interact with documents in two separate
worlds the electronic world of the workstation,
and the physical world of the desk. Interaction
styles in these two worlds do not resemble each
other, functions available are different, and the
interaction between the two is limited. - Pierre
Wellner, Xerox Researcher, 1993

2
Where Do Web Sites Come From?Capturing and
Interacting with Design History
The Designers Outpost

• Scott KlemmerMichael Thomsen
• Ethan Phelps-Goodman
• Robert Lee
• James Landay
• 08 April 2002
• DAIMIUniversity of AarhusDenmark

3
Information Architecture Comes First
W E B D E S I G N

• Interviews with 11 professional designers
• Post-It notes on large surfaces
• affinity diagrams
• Fluid, informal interface
• Brainstorming
• collaborative
• solo
• Advantages
• persistent
• immersive
• Difficulties
• hard to edit
• to share
• to make digital

Contextual Design, by Hugh Beyer and Karen
Holtzblatt
4
Above At a Silicon Valley design firm
specializing in the customer service portion of
web sites Left Collaborating on a project
schedule at Hanna Hodge http//www.enteract.com/
marc/rettig.walls.72dpi.pdf
5
Designers Outpost
I N T E R A C T I O N S

• Combining...
• affordances of paper and
• advantages of electronic media
• to support design practice
• Electronic wall surface (180 cm diagonal SMART
  Board)
• Regular Post-it notes
• Computer vision, stylus, and physical tools UI
• Evaluated with 15 professional designers

6
Hardware Architecture
I N F R A S T R U C T U R E
Touch sensitive SMART board augmented with two
digital cameras
7
Adding Value to Outpost

• Transition to other tools DENIM, a sketch-based
  web design app.
• Design History
• Remote Collaboration

8
Why Design History?

• Provides a historical record, a process document
• Enables risk-free exploration of alternatives
• Browsing history helps education
• History combined with comments provides a
  platform for design rationale

9
Video!
10
Three History Visualizations

• Main Timeline
• Note Timeline
• Synopsis Visualization

11
Main Timeline

• Consists of visual thumbnails
• Each thumbnail represents the board at one point
  in time
• Changes between thumbnails are highlighted

12
Direct manipulation

• The timeline outputs (a subset) of the whole
  design history
• The timeline inputs the current location in the
  history Clicking a thumbnail jumps in time
• A jog-dial offers physical navigation

13
Branched History

• How can we offer the flexibility and power of
  branched history, with the ease of use of linear
  history?

14
Filters

• Thumbnails are generated based on a filter

15
Local Timeline

• Lighter weight history for individual objects
• Provides detailed information about a particular
  note without visually cluttering the entire board

16
Synopsis View

• Provides a radically different visualization
  optimized for offline usage

17
Combining Physical and Virtual

• Consistency between physical and virtual needed
• User intervention is required
• Designing a fluid system that makes sense is
  difficult
• E.g., user 1) creates phy. note, 2) moves phy.
  Note, 3) invokes undo

18
Related Work Visual History
19
Implementation

• Implemented i Java on top of the SATIN toolkit
• The commands are stored in a BranchedCommandQueue
  (a specialization of the default CommandQueue)
• Jumping in time involves walking the command
  queue tree and invoking undo redo on the way

20
Evaluation

• 6 professional designers
• Physical/Electronic in Cycles
• View All confusing
• Enthusiastic about easy capture of different
  states facilitates experimentation and provides
  easy reference

21
Summary and Current Work
S U M M A R Y

• History system supports and enhances current
  information architecture practices
• Task oriented tangible UI
• Brings vision to real world application
• Versioning, capture essential
• Support for distributed teams
• Both on laptops and at boards

22
Papers and videos available athttp//guir.berkel
ey.edu/outpost
The Designers Outpost
Where Do Web Sites Come From?Capturing and
Interacting with Design History

• 08 April 2002
• CHI 2002