We interact with documents in two separate worlds: the electronic world of the workstation, and the...

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


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


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


Physical? Virtual?P R A C T I C E


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


Design Evolution of OutpostPAPER PROTOTYPE

PAPER AND PIXELS

INTERACTIVE WALL



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


Video


Interaction Techniques


ADD LINK REMOVE

MOVE MENU

INK

SAVE


Physical Tools

ERASER

MOVE TOOL

PENS


Moving Electronic Content


Design Study Setup• 15 professional bay area

designers

• Five teams

S T U D Y + F I N D I N G S


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




Rear Camera Vision (640x480, 7fps)





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



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



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.)

“

”


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


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



Related Work

• Design Rationale– IBIS– QOC– Moran & Carroll– Lots AI stuff

• Informal Capture– Tivoli/CORAL– Audio Notebook– Classroom 2000– NotePals

QOC exampleQuestions, Options, Criteria



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



Creating Ink Annotations

ASSOCIATIONWITH GROUPS



Explicit Audio Annotations



Implicit Audio Annotations



Annotation Operations

• Cut, Copy, Paste, Edit Delete

• Associate (explicitly/implicitly)

• Transgender operations– Ink Note Audio

• Assignment



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


Timeline Visualization

C I missed the meeting …E I need to write up a summary …

Time-Machine ComputingRekimoto, UIST 2001



Embedded Visualization

A What did Mark say about …?D What was the thinking behind …?

The Audio NotebookStifelman et al, CHI 2001



List Visualization

B What do I need to follow up on?E I need to write up a summary …

Microsoft OutlookEverywhere, always



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



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


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


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)


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


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


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

Date post:	14-Jan-2016
Category:	Documents
Upload:	rodger-tucker
View:	213 times
Download:	0 times

We interact with documents in two separate worlds: the electronic world of the workstation, and the...

Documents