The Designers

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
A Tangible Interfacefor CollaborativeWeb Site
Design

• Scott KlemmerMark Newman
• Ryan Farrell
• Mark Bilezikjian
• James Landay

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
• 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
Web Artifacts/Representations
P R A C T I C E

• Designers create representations of sites at
  multiple levels of detail
• Web sites are iteratively refined at all levels
  of detail

6
Physical? Virtual?
P R A C T I C E
7
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 (72 Diagonal SMART
  Board)
• Regular Post-it Notes
• Computer Vision, Pen, and Physical Tools UI

8
Design Evolution of Outpost
I N T E R A C T I O N S
PAPER PROTOTYPE
PAPER AND PIXELS
INTERACTIVE WALL
9
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
10
Video
11
Interaction Techniques
I N T E R A C T I O N S
INK
ADD
LINK
REMOVE
SAVE
MOVE
MENU
12
Physical Tools
PENS
MOVE TOOL
ERASER
13
Moving Electronic Content
14
Design Study Setup
S T U D Y F I N D I N G S

• 15 professional bay area designers
• Five teams

15
Design Study Findings
S T U D Y F I N D I N G S

• Three phase process
• Brainstorming
• Top-level information architecture
• Drilling down and annotating
• Two working styles
• Facilitator / gate keeper
• Open board
• Paper as personal input

16
Hardware Architecture
I N F R A S T R U C T U R E
Rear Camera Vision (640x480, 7fps)
17
Hardware Architecture
I N F R A S T R U C T U R E
18
Software Infrastructure
I N F R A S T R U C T U R E

• Split into two pieces, connected by sockets
• Vision in C
• Intel Computer Vision Library
• CMU Firewire Driver
• Realtime (7fps) performance
• Interface in Java, using SATIN

19
Sensing Paradigms
I N F R A S T R U C T U R E

• At least one object needs to be smart
• pen, paper, or surface
• Surface augmentation best enables informal
  document use
• good for notes
• Tool augmentation best for included objects
• pens, move tool, eraser

20
Summary and Future Work
S U M M A R Y

• Outpost supports, 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

21
Video, software available at http//guir.berkeley.
edu/outpost
22

Yellow - the color of alert, of highlighting -
and a square, meant to contain a thought, a
reminder. Like hypertext, they are a way of
making associations and combining them. - Paola
Antonelli, Museum of Modern Art Curator, 1999.
(Nominating the 3M Post-It note for a design
award.)

23
What is Design Rationale?
D E S I G N R A T I O N A L E

• Communication of reasons for design decisions
• Logical reasons given to justify a designed
  artifact
• Historical account of design decisions
• Metadata to the designed artifact
• Change over time is key making history an
  effective pairing with DR

24
DR and Early-Phase Design
D E S I G N R A T I O N A L E

• Mostly team members communicating with each other
• Informal representations
• Later phases involve more parties
• clients, developers
• Require more formal representations
• Design Rationale capture and retrieval for people
  involved in or close to the process

25
Related Work
D E S I G N R A T I O N A L E

• Design Rationale
• IBIS
• QOC
• Moran Carroll
• Lots AI stuff
• Informal Capture
• Tivoli/CORAL
• Audio Notebook
• Classroom 2000
• NotePals

QOC exampleQuestions, Options, Criteria
26
Annotations in Outpost
D E S I G N R A T I O N A L E

• Currently an envisionment
• Annotations come in three flavors
• Ink, Explicit Audio, and Implicit Audio
• Annotations are associated with
• Author
• Time of creation
• Relevant objects in the artifact
• Who needs to see this (explicitly assigned)
• Rationale is visually embedded

27
Creating Ink Annotations
D E S I G N R A T I O N A L E
ASSOCIATION WITH GROUPS
28
Explicit Audio Annotations
D E S I G N R A T I O N A L E
29
Implicit Audio Annotations
D E S I G N R A T I O N A L E
30
Annotation Operations
D E S I G N R A T I O N A L E

• Cut, Copy, Paste, Edit Delete
• Associate (explicitly/implicitly)
• Transgender operations
• Ink Note Audio
• Assignment

31
Dude, Wheres my Car? Example retrieval tasks

• A What did Mark say about the customer service
  section?
• B What do I need to follow up on?
• C I missed the meeting what was discussed?
• D What was the thinking behind this checkout
  navigation?
• E I need to write up a summary of our meeting.

32
Timeline Visualization
D E S I G N R A T I O N A L E
C I missed the meeting E I need to write up a
summary
Time-Machine Computing Rekimoto, UIST 2001
33
Embedded Visualization
D E S I G N R A T I O N A L E
A What did Mark say about ? D What was the
thinking behind ?
The Audio Notebook Stifelman et al, CHI 2001
34
List Visualization
D E S I G N R A T I O N A L E
B What do I need to follow up on? E I need to
write up a summary
Microsoft Outlook Everywhere, always
35
Outpost, DR, and CMC
D E S I G N R A T I O N A L E

• Focus on communication with self and among design
  team
• Communication with other roles tends to involve
  more planning formality
• Informal design suggests informal capture
• Flexible retrieval and exploration to aid
  construction of design rationales

36
Informal Design History
H I S T O R Y

• Goal Enable designers to fluidly access earlier
  states
• Design choice We preserve the full branched
  history, but present it linearly

state currently being viewed
filter the history
collapsed branches
most recent state
37
Transactional Consistency in Physical Interfaces
38
Keyframing

• Two axes Keyframe metric/type and timeline
  granularity
• Keyframe types
• Every n commands
• Every n seconds
• Every semantic level
• project (e), session (e, i?), working area,
  spatial or semantic (i), intensive design, i.e.
  board inverse (i), intensive discussion
  inverse, i.e. audio (i), bookmarks (e), branch
  points (e), change between creating, editing, and
  structuring (i), creating or editing or
  structuring (i), change of interactor (i), change
  of working style, e.g. facilitator vs. group (i),
  pauses (i)

39
History and Design Rationale

• History is integrated with design rationale
• view history thumbnails with annotations in
  chronological order
• view history based on semantic info intensive
  design points, branch points, , and these could
  have annotations

40
Recent Design Study

• Subjects Two professional designers
• Same format as earlier study, this time focusing
  on history DR
• Lessons
• All the small things need to work
• History is really useful, mostly over a longer
  term (a few weeks)
• Design rationale is very important

41
Presenting Branches