we interact with documents in two separate worlds: the electronic world of the workstation, and the...
TRANSCRIPT
![Page 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](https://reader035.vdocuments.mx/reader035/viewer/2022062803/56649f2b5503460f94c45c11/html5/thumbnails/1.jpg)
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
“
”
![Page 2: We interact with documents in two separate worlds: the electronic world of the workstation, and the physical world of the desk. Interaction styles in](https://reader035.vdocuments.mx/reader035/viewer/2022062803/56649f2b5503460f94c45c11/html5/thumbnails/2.jpg)
Scott KlemmerMark NewmanRyan FarrellMark BilezikjianJames Landay
A Tangible Interfacefor CollaborativeWeb Site Design
![Page 3: We interact with documents in two separate worlds: the electronic world of the workstation, and the physical world of the desk. Interaction styles in](https://reader035.vdocuments.mx/reader035/viewer/2022062803/56649f2b5503460f94c45c11/html5/thumbnails/3.jpg)
12 November 2001 The Designers’ Outpost: Collaborative Web Design 3
Information Architecture Comes First• 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
W E B D E S I G N
Contextual Design, by Hugh Beyer and Karen Holtzblatt
![Page 4: We interact with documents in two separate worlds: the electronic world of the workstation, and the physical world of the desk. Interaction styles in](https://reader035.vdocuments.mx/reader035/viewer/2022062803/56649f2b5503460f94c45c11/html5/thumbnails/4.jpg)
12 November 2001 The Designers’ Outpost: Collaborative Web Design 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
![Page 5: We interact with documents in two separate worlds: the electronic world of the workstation, and the physical world of the desk. Interaction styles in](https://reader035.vdocuments.mx/reader035/viewer/2022062803/56649f2b5503460f94c45c11/html5/thumbnails/5.jpg)
12 November 2001 The Designers’ Outpost: Collaborative Web Design 5
Web Artifacts/Representations
• Designers create representations of sites at multiple levels of detail
• Web sites are iteratively refined at all levels of detailStoryboards Schematics Mock-ups
P R A C T I C E
Site Maps
![Page 6: We interact with documents in two separate worlds: the electronic world of the workstation, and the physical world of the desk. Interaction styles in](https://reader035.vdocuments.mx/reader035/viewer/2022062803/56649f2b5503460f94c45c11/html5/thumbnails/6.jpg)
12 November 2001 The Designers’ Outpost: Collaborative Web Design 6
Physical? Virtual?P R A C T I C E
![Page 7: We interact with documents in two separate worlds: the electronic world of the workstation, and the physical world of the desk. Interaction styles in](https://reader035.vdocuments.mx/reader035/viewer/2022062803/56649f2b5503460f94c45c11/html5/thumbnails/7.jpg)
12 November 2001 The Designers’ Outpost: Collaborative Web Design 7
Designers’ Outpost• Combining...
affordances of paper andadvantages 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
I N T E R A C T I O N S
![Page 8: We interact with documents in two separate worlds: the electronic world of the workstation, and the physical world of the desk. Interaction styles in](https://reader035.vdocuments.mx/reader035/viewer/2022062803/56649f2b5503460f94c45c11/html5/thumbnails/8.jpg)
12 November 2001 The Designers’ Outpost: Collaborative Web Design 8
Design Evolution of OutpostPAPER PROTOTYPE
PAPER AND PIXELS
INTERACTIVE WALL
I N T E R A C T I O N S
![Page 9: We interact with documents in two separate worlds: the electronic world of the workstation, and the physical world of the desk. Interaction styles in](https://reader035.vdocuments.mx/reader035/viewer/2022062803/56649f2b5503460f94c45c11/html5/thumbnails/9.jpg)
12 November 2001 The Designers’ Outpost: Collaborative Web Design 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
![Page 10: We interact with documents in two separate worlds: the electronic world of the workstation, and the physical world of the desk. Interaction styles in](https://reader035.vdocuments.mx/reader035/viewer/2022062803/56649f2b5503460f94c45c11/html5/thumbnails/10.jpg)
12 November 2001 The Designers’ Outpost: Collaborative Web Design 10
Video
![Page 11: We interact with documents in two separate worlds: the electronic world of the workstation, and the physical world of the desk. Interaction styles in](https://reader035.vdocuments.mx/reader035/viewer/2022062803/56649f2b5503460f94c45c11/html5/thumbnails/11.jpg)
12 November 2001 The Designers’ Outpost: Collaborative Web Design 11
Interaction Techniques
I N T E R A C T I O N S
ADD LINK REMOVE
MOVE MENU
INK
SAVE
![Page 12: We interact with documents in two separate worlds: the electronic world of the workstation, and the physical world of the desk. Interaction styles in](https://reader035.vdocuments.mx/reader035/viewer/2022062803/56649f2b5503460f94c45c11/html5/thumbnails/12.jpg)
12 November 2001 The Designers’ Outpost: Collaborative Web Design 12
Physical Tools
ERASER
MOVE TOOL
PENS
![Page 13: We interact with documents in two separate worlds: the electronic world of the workstation, and the physical world of the desk. Interaction styles in](https://reader035.vdocuments.mx/reader035/viewer/2022062803/56649f2b5503460f94c45c11/html5/thumbnails/13.jpg)
12 November 2001 The Designers’ Outpost: Collaborative Web Design 13
Moving Electronic Content
![Page 14: We interact with documents in two separate worlds: the electronic world of the workstation, and the physical world of the desk. Interaction styles in](https://reader035.vdocuments.mx/reader035/viewer/2022062803/56649f2b5503460f94c45c11/html5/thumbnails/14.jpg)
12 November 2001 The Designers’ Outpost: Collaborative Web Design 14
Design Study Setup• 15 professional bay area
designers
• Five teams
S T U D Y + F I N D I N G S
![Page 15: We interact with documents in two separate worlds: the electronic world of the workstation, and the physical world of the desk. Interaction styles in](https://reader035.vdocuments.mx/reader035/viewer/2022062803/56649f2b5503460f94c45c11/html5/thumbnails/15.jpg)
12 November 2001 The Designers’ Outpost: Collaborative Web Design 15
Design Study Findings
• Three phase process1. Brainstorming2. Top-level information
architecture3. Drilling down and
annotating
• Two working styles1. Facilitator / gate keeper2. Open board
• Paper as personal input
S T U D Y + F I N D I N G S
![Page 16: We interact with documents in two separate worlds: the electronic world of the workstation, and the physical world of the desk. Interaction styles in](https://reader035.vdocuments.mx/reader035/viewer/2022062803/56649f2b5503460f94c45c11/html5/thumbnails/16.jpg)
12 November 2001 The Designers’ Outpost: Collaborative Web Design 16
Hardware Architecture
I N F R A S T R U C T U R E
Rear Camera Vision (640x480, 7fps)
![Page 17: We interact with documents in two separate worlds: the electronic world of the workstation, and the physical world of the desk. Interaction styles in](https://reader035.vdocuments.mx/reader035/viewer/2022062803/56649f2b5503460f94c45c11/html5/thumbnails/17.jpg)
12 November 2001 The Designers’ Outpost: Collaborative Web Design 17
Hardware Architecture
I N F R A S T R U C T U R E
![Page 18: We interact with documents in two separate worlds: the electronic world of the workstation, and the physical world of the desk. Interaction styles in](https://reader035.vdocuments.mx/reader035/viewer/2022062803/56649f2b5503460f94c45c11/html5/thumbnails/18.jpg)
12 November 2001 The Designers’ Outpost: Collaborative Web Design 18
Software Infrastructure
• 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
I N F R A S T R U C T U R E
![Page 19: We interact with documents in two separate worlds: the electronic world of the workstation, and the physical world of the desk. Interaction styles in](https://reader035.vdocuments.mx/reader035/viewer/2022062803/56649f2b5503460f94c45c11/html5/thumbnails/19.jpg)
12 November 2001 The Designers’ Outpost: Collaborative Web Design 19
Sensing Paradigms
• 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
I N F R A S T R U C T U R E
![Page 20: We interact with documents in two separate worlds: the electronic world of the workstation, and the physical world of the desk. Interaction styles in](https://reader035.vdocuments.mx/reader035/viewer/2022062803/56649f2b5503460f94c45c11/html5/thumbnails/20.jpg)
12 November 2001 The Designers’ Outpost: Collaborative Web Design 20
Summary and Future Work• 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
S U M M A R Y
![Page 21: We interact with documents in two separate worlds: the electronic world of the workstation, and the physical world of the desk. Interaction styles in](https://reader035.vdocuments.mx/reader035/viewer/2022062803/56649f2b5503460f94c45c11/html5/thumbnails/21.jpg)
Video, software available athttp://guir.berkeley.edu/outpost
![Page 22: We interact with documents in two separate worlds: the electronic world of the workstation, and the physical world of the desk. Interaction styles in](https://reader035.vdocuments.mx/reader035/viewer/2022062803/56649f2b5503460f94c45c11/html5/thumbnails/22.jpg)
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.)
“
”
![Page 23: We interact with documents in two separate worlds: the electronic world of the workstation, and the physical world of the desk. Interaction styles in](https://reader035.vdocuments.mx/reader035/viewer/2022062803/56649f2b5503460f94c45c11/html5/thumbnails/23.jpg)
12 November 2001 The Designers’ Outpost: Collaborative Web Design 23
What is Design Rationale?
• 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
D E S I G N R A T I O N A L E
![Page 24: We interact with documents in two separate worlds: the electronic world of the workstation, and the physical world of the desk. Interaction styles in](https://reader035.vdocuments.mx/reader035/viewer/2022062803/56649f2b5503460f94c45c11/html5/thumbnails/24.jpg)
12 November 2001 The Designers’ Outpost: Collaborative Web Design 24
DR and Early-Phase Design
• 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
D E S I G N R A T I O N A L E
![Page 25: We interact with documents in two separate worlds: the electronic world of the workstation, and the physical world of the desk. Interaction styles in](https://reader035.vdocuments.mx/reader035/viewer/2022062803/56649f2b5503460f94c45c11/html5/thumbnails/25.jpg)
12 November 2001 The Designers’ Outpost: Collaborative Web Design 25
Related Work
• Design Rationale– IBIS– QOC– Moran & Carroll– Lots AI stuff
• Informal Capture– Tivoli/CORAL– Audio Notebook– Classroom 2000– NotePals
QOC exampleQuestions, Options, Criteria
D E S I G N R A T I O N A L E
![Page 26: We interact with documents in two separate worlds: the electronic world of the workstation, and the physical world of the desk. Interaction styles in](https://reader035.vdocuments.mx/reader035/viewer/2022062803/56649f2b5503460f94c45c11/html5/thumbnails/26.jpg)
12 November 2001 The Designers’ Outpost: Collaborative Web Design 26
Annotations in Outpost
• 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
D E S I G N R A T I O N A L E
![Page 27: We interact with documents in two separate worlds: the electronic world of the workstation, and the physical world of the desk. Interaction styles in](https://reader035.vdocuments.mx/reader035/viewer/2022062803/56649f2b5503460f94c45c11/html5/thumbnails/27.jpg)
12 November 2001 The Designers’ Outpost: Collaborative Web Design 27
Creating Ink Annotations
ASSOCIATIONWITH GROUPS
D E S I G N R A T I O N A L E
![Page 28: We interact with documents in two separate worlds: the electronic world of the workstation, and the physical world of the desk. Interaction styles in](https://reader035.vdocuments.mx/reader035/viewer/2022062803/56649f2b5503460f94c45c11/html5/thumbnails/28.jpg)
12 November 2001 The Designers’ Outpost: Collaborative Web Design 28
Explicit Audio Annotations
D E S I G N R A T I O N A L E
![Page 29: We interact with documents in two separate worlds: the electronic world of the workstation, and the physical world of the desk. Interaction styles in](https://reader035.vdocuments.mx/reader035/viewer/2022062803/56649f2b5503460f94c45c11/html5/thumbnails/29.jpg)
12 November 2001 The Designers’ Outpost: Collaborative Web Design 29
Implicit Audio Annotations
D E S I G N R A T I O N A L E
![Page 30: We interact with documents in two separate worlds: the electronic world of the workstation, and the physical world of the desk. Interaction styles in](https://reader035.vdocuments.mx/reader035/viewer/2022062803/56649f2b5503460f94c45c11/html5/thumbnails/30.jpg)
12 November 2001 The Designers’ Outpost: Collaborative Web Design 30
Annotation Operations
• Cut, Copy, Paste, Edit Delete
• Associate (explicitly/implicitly)
• Transgender operations– Ink Note Audio
• Assignment
D E S I G N R A T I O N A L E
![Page 31: We interact with documents in two separate worlds: the electronic world of the workstation, and the physical world of the desk. Interaction styles in](https://reader035.vdocuments.mx/reader035/viewer/2022062803/56649f2b5503460f94c45c11/html5/thumbnails/31.jpg)
12 November 2001 The Designers’ Outpost: Collaborative Web Design 31
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.”
“Dude, Where’s my Car?”: Example retrieval tasks
![Page 32: We interact with documents in two separate worlds: the electronic world of the workstation, and the physical world of the desk. Interaction styles in](https://reader035.vdocuments.mx/reader035/viewer/2022062803/56649f2b5503460f94c45c11/html5/thumbnails/32.jpg)
12 November 2001 The Designers’ Outpost: Collaborative Web Design 32
Timeline Visualization
C I missed the meeting …E I need to write up a summary …
Time-Machine ComputingRekimoto, UIST 2001
D E S I G N R A T I O N A L E
![Page 33: We interact with documents in two separate worlds: the electronic world of the workstation, and the physical world of the desk. Interaction styles in](https://reader035.vdocuments.mx/reader035/viewer/2022062803/56649f2b5503460f94c45c11/html5/thumbnails/33.jpg)
12 November 2001 The Designers’ Outpost: Collaborative Web Design 33
Embedded Visualization
A What did Mark say about …?D What was the thinking behind …?
The Audio NotebookStifelman et al, CHI 2001
D E S I G N R A T I O N A L E
![Page 34: We interact with documents in two separate worlds: the electronic world of the workstation, and the physical world of the desk. Interaction styles in](https://reader035.vdocuments.mx/reader035/viewer/2022062803/56649f2b5503460f94c45c11/html5/thumbnails/34.jpg)
12 November 2001 The Designers’ Outpost: Collaborative Web Design 34
List Visualization
B What do I need to follow up on?E I need to write up a summary …
Microsoft OutlookEverywhere, always
D E S I G N R A T I O N A L E
![Page 35: We interact with documents in two separate worlds: the electronic world of the workstation, and the physical world of the desk. Interaction styles in](https://reader035.vdocuments.mx/reader035/viewer/2022062803/56649f2b5503460f94c45c11/html5/thumbnails/35.jpg)
12 November 2001 The Designers’ Outpost: Collaborative Web Design 35
Outpost, DR, and CMC
• 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
D E S I G N R A T I O N A L E
![Page 36: We interact with documents in two separate worlds: the electronic world of the workstation, and the physical world of the desk. Interaction styles in](https://reader035.vdocuments.mx/reader035/viewer/2022062803/56649f2b5503460f94c45c11/html5/thumbnails/36.jpg)
12 November 2001 The Designers’ Outpost: Collaborative Web Design 36
Informal Design History
• Goal: Enable designers to fluidly access earlier states
• Design choice: We preserve the full branched history, but present it “linearly”
H I S T O R Y
filter the history collapsed branches most recent state
state currently being viewed
![Page 37: We interact with documents in two separate worlds: the electronic world of the workstation, and the physical world of the desk. Interaction styles in](https://reader035.vdocuments.mx/reader035/viewer/2022062803/56649f2b5503460f94c45c11/html5/thumbnails/37.jpg)
12 November 2001 The Designers’ Outpost: Collaborative Web Design 37
Transactional Consistency in Physical Interfaces
1 1
visionDelete()
X 11
timeout() undo() undo()
1 1
visionDelete()visionDelete()
X 11
timeout()timeout() undo()undo() undo()undo()
1 Physical (and transient)
1 Persistent (and physical)
1 Electronic
1 Physical (and transient)
1 Persistent (and physical)
1 Electronic
![Page 38: We interact with documents in two separate worlds: the electronic world of the workstation, and the physical world of the desk. Interaction styles in](https://reader035.vdocuments.mx/reader035/viewer/2022062803/56649f2b5503460f94c45c11/html5/thumbnails/38.jpg)
12 November 2001 The Designers’ Outpost: Collaborative Web Design 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)
![Page 39: We interact with documents in two separate worlds: the electronic world of the workstation, and the physical world of the desk. Interaction styles in](https://reader035.vdocuments.mx/reader035/viewer/2022062803/56649f2b5503460f94c45c11/html5/thumbnails/39.jpg)
12 November 2001 The Designers’ Outpost: Collaborative Web Design 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
![Page 40: We interact with documents in two separate worlds: the electronic world of the workstation, and the physical world of the desk. Interaction styles in](https://reader035.vdocuments.mx/reader035/viewer/2022062803/56649f2b5503460f94c45c11/html5/thumbnails/40.jpg)
12 November 2001 The Designers’ Outpost: Collaborative Web Design 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
![Page 41: We interact with documents in two separate worlds: the electronic world of the workstation, and the physical world of the desk. Interaction styles in](https://reader035.vdocuments.mx/reader035/viewer/2022062803/56649f2b5503460f94c45c11/html5/thumbnails/41.jpg)
12 November 2001 The Designers’ Outpost: Collaborative Web Design 41
Presenting Branches1
0-1
1
A B C
D E
F G
H
A B C
A D E
A
create three nodes
back to AA B C
create d and e
B C D E( )
A B C D E( )
open up collapse
back to b
A B create fF
10:
30-1
1
11-
12
expand blueA B F
10:
30-1
1
D E( )
A B F
10:
30-1
1
D E( ) G
A B F
10:
30-1
1
D E( ) G
create g
back to d
A1
0:30
-11
D create h12
-1
11:
30-1
2
H
undo1-2A B F
10:
30-1
1
D E( ) G
10-
11
A B C
D E
F G
H
A B C
A D E
A
create three nodes
back to AA B C
create d and e
B C D E( )
A B C D E( )
open up collapse
back to b
A B create fF
10:
30-1
1
11-
12
expand blueA B F
10:
30-1
1
D E( )
A B F
10:
30-1
1
D E( ) G
A B F
10:
30-1
1
D E( ) G
create g
back to d
A1
0:30
-11
D create h12
-1
11:
30-1
2
H
undo1-2A B F
10:
30-1
1
D E( ) G