Upload
rodger-tucker
View
215
Download
0
Tags:
Embed Size (px)
Citation preview
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
“
”
Scott KlemmerMark NewmanRyan FarrellMark BilezikjianJames Landay
A Tangible Interfacefor CollaborativeWeb Site Design
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
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
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
12 November 2001 The Designers’ Outpost: Collaborative Web Design 6
Physical? Virtual?P R A C T I C E
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
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
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
12 November 2001 The Designers’ Outpost: Collaborative Web Design 10
Video
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
12 November 2001 The Designers’ Outpost: Collaborative Web Design 12
Physical Tools
ERASER
MOVE TOOL
PENS
12 November 2001 The Designers’ Outpost: Collaborative Web Design 13
Moving Electronic Content
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
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
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)
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
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
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
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
Video, software available athttp://guir.berkeley.edu/outpost
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.)
“
”
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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)
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
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
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