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 Klemmer Mark Newman Michael Thomsen James Landay FX Palo Alto Labs 27 July 2001 Design History and Rationale in The Designers’ Outpost

27 July 2001Design History and Rationale in The Designers’ Outpost3 Information Design Practice Affinity Diagrams –Post-It notes on large surfaces –Observed at some design firms Brainstorming –Collaborative –Solo Persistent, immersive representation P R A C T I C E Contextual Design, by Hugh Beyer and Karen Holtzblatt

27 July 2001Design History and Rationale in The Designers’ Outpost4 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

27 July 2001Design History and Rationale in The Designers’ Outpost5 Web Artifacts/Representations Designers create representations of sites at multiple levels of detail Importance of intermediate artifacts Site MapsStoryboardsSchematicsMock-ups P R A C T I C E

27 July 2001Design History and Rationale in The Designers’ Outpost6 Physical? Virtual? P R A C T I C E

27 July 2001Design History and Rationale in The Designers’ Outpost7 Designers’ Outpost 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 I N T E R A C T I O N S

27 July 2001Design History and Rationale in The Designers’ Outpost8 Design Evolution of Outpost PAPER PROTOTYPEPAPER AND PIXELSINTERACTIVE WALL I N T E R A C T I O N S

27 July 2001Design History and Rationale in The Designers’ Outpost9 Interaction Techniques I N T E R A C T I O N S ADDLINKREMOVE MOVEMENU

27 July 2001Design History and Rationale in The Designers’ Outpost10 Video

27 July 2001Design History and Rationale in The Designers’ Outpost11 New Physical Tools! ERASER MOVE TOOL PENS

27 July 2001Design History and Rationale in The Designers’ Outpost12 Moving Electronic Content

27 July 2001Design History and Rationale in The Designers’ Outpost13 DENIM: Sketching Web Sites Sketch-based web design application Outpost hierarchies become DENIM web sites –for further site development Above: Sitemap View Right: Storyboard View I N T E R A C T I O N S

27 July 2001Design History and Rationale in The Designers’ Outpost14 We Changed DENIM I N T E R A C T I O N S

27 July 2001Design History and Rationale in The Designers’ Outpost15 Design Study Setup 15 professional bay area designers Five teams S T U D Y + F I N D I N G S

27 July 2001Design History and Rationale in The Designers’ Outpost16 Design Study Findings Three phase process 1.Brainstorming 2.Top-level information architecture 3.Drilling Down and Annotating Two working styles 1.Facilitator / Gate keeper 2.Open board Paper as personal input S T U D Y + F I N D I N G S

27 July 2001Design History and Rationale in The Designers’ Outpost17 Implications, Current Work Smart yet silent - Avoid having to “tame the beast” Fluid transitions with DENIM Versioning, capture essential Support for distributed teams –Both on laptops and at boards S T U D Y + F I N D I N G S

27 July 2001Design History and Rationale in The Designers’ Outpost18 Hardware Architecture I N F R A S T R U C T U R E

27 July 2001Design History and Rationale in The Designers’ Outpost19 Sensing Paradigms A t 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

27 July 2001Design History and Rationale in The Designers’ Outpost20 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

27 July 2001Design History and Rationale in The Designers’ Outpost21 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

27 July 2001Design History and Rationale in The Designers’ Outpost22 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

27 July 2001Design History and Rationale in The Designers’ Outpost23 Related Work Design Rationale –IBIS –QOC –Moran & Carroll –Lots AI stuff Informal Capture –Tivoli/CORAL –Audio Notebook –Classroom 2000 –Notepals QOC example Questions, Options, Criteria D E S I G N R A T I O N A L E

27 July 2001Design History and Rationale in The Designers’ Outpost24 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

27 July 2001Design History and Rationale in The Designers’ Outpost25 Creating Ink Annotations ASSOCIATION WITH GROUPS D E S I G N R A T I O N A L E

27 July 2001Design History and Rationale in The Designers’ Outpost26 Explicit Audio Annotations D E S I G N R A T I O N A L E

27 July 2001Design History and Rationale in The Designers’ Outpost27 Implicit Audio Annotations D E S I G N R A T I O N A L E

27 July 2001Design History and Rationale in The Designers’ Outpost28 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

27 July 2001Design History and Rationale in The Designers’ Outpost29 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

27 July 2001Design History and Rationale in The Designers’ Outpost30 Timeline Visualization C I missed the meeting … E I need to write up a summary … Time-Machine Computing Rekimoto, UIST 2001 D E S I G N R A T I O N A L E

27 July 2001Design History and Rationale in The Designers’ Outpost31 Embedded Visualization A What did Mark say about …? D What was the thinking behind …? The Audio Notebook Stifelman et al, CHI 2001 D E S I G N R A T I O N A L E

27 July 2001Design History and Rationale in The Designers’ Outpost32 List Visualization B What do I need to follow up on? E I need to write up a summary … Microsoft Outlook Everywhere, always D E S I G N R A T I O N A L E

27 July 2001Design History and Rationale in The Designers’ Outpost33 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

27 July 2001Design History and Rationale in The Designers’ Outpost34 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 historycollapsed branches most recent state state currently being viewed

27 July 2001Design History and Rationale in The Designers’ Outpost35 Transactional Consistency in Physical Interfaces

27 July 2001Design History and Rationale in The Designers’ Outpost36 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)

27 July 2001Design History and Rationale in The Designers’ Outpost37 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

27 July 2001Design History and Rationale in The Designers’ Outpost38 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

27 July 2001Design History and Rationale in The Designers’ Outpost39 Outpost Summary Outpost supports, enhances current information architecture practices Task oriented tangible UI Brings vision to real world application UIST 2001 draft, video available at:

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, (Nominating the 3M Post-It note for a design award.) “ ”

27 July 2001Design History and Rationale in The Designers’ Outpost41 Presenting Branches