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 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 “ ”

3. Scott Klemmer Mark Newman Ryan Farrell Mark Bilezikjian James Landay A Tangible Interface for Collaborative Web Site Design

4. 12 November 2001The Designers’ Outpost: Collaborative Web Design3 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

5. 12 November 2001The Designers’ Outpost: Collaborative Web Design4 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

6. 12 November 2001The Designers’ Outpost: Collaborative Web Design5 Web Artifacts/Representations Designers create representations of sites at multiple levels of detail Web sites are iteratively refined at all levels of detail StoryboardsSchematicsMock-ups P R A C T I C E Site Maps

7. 12 November 2001The Designers’ Outpost: Collaborative Web Design6 Physical? Virtual? P R A C T I C E

8. 12 November 2001The Designers’ Outpost: Collaborative Web Design7 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

9. 12 November 2001The Designers’ Outpost: Collaborative Web Design8 Design Evolution of Outpost PAPER PROTOTYPEPAPER AND PIXELSINTERACTIVE WALL I N T E R A C T I O N S

10. 12 November 2001The Designers’ Outpost: Collaborative Web Design9 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

11. 12 November 2001The Designers’ Outpost: Collaborative Web Design10 Video

12. 12 November 2001The Designers’ Outpost: Collaborative Web Design11 Interaction Techniques I N T E R A C T I O N S ADDLINKREMOVE MOVEMENU INK SAVE

13. 12 November 2001The Designers’ Outpost: Collaborative Web Design12 Physical Tools ERASER MOVE TOOL PENS

14. 12 November 2001The Designers’ Outpost: Collaborative Web Design13 Moving Electronic Content

15. 12 November 2001The Designers’ Outpost: Collaborative Web Design14 Design Study Setup 15 professional bay area designers Five teams S T U D Y + F I N D I N G S

16. 12 November 2001The Designers’ Outpost: Collaborative Web Design15 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

17. 12 November 2001The Designers’ Outpost: Collaborative Web Design16 Hardware Architecture I N F R A S T R U C T U R E Rear Camera Vision (640x480, 7fps)

18. 12 November 2001The Designers’ Outpost: Collaborative Web Design17 Hardware Architecture I N F R A S T R U C T U R E

19. 12 November 2001The Designers’ Outpost: Collaborative Web Design18 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

20. 12 November 2001The Designers’ Outpost: Collaborative Web Design19 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

21. 12 November 2001The Designers’ Outpost: Collaborative Web Design20 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

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

23. 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.) “ ”

24. 12 November 2001The Designers’ Outpost: Collaborative Web Design23 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

25. 12 November 2001The Designers’ Outpost: Collaborative Web Design24 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

26. 12 November 2001The Designers’ Outpost: Collaborative Web Design25 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. 12 November 2001The Designers’ Outpost: Collaborative Web Design26 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

28. 12 November 2001The Designers’ Outpost: Collaborative Web Design27 Creating Ink Annotations ASSOCIATION WITH GROUPS D E S I G N R A T I O N A L E

29. 12 November 2001The Designers’ Outpost: Collaborative Web Design28 Explicit Audio Annotations D E S I G N R A T I O N A L E

30. 12 November 2001The Designers’ Outpost: Collaborative Web Design29 Implicit Audio Annotations D E S I G N R A T I O N A L E

31. 12 November 2001The Designers’ Outpost: Collaborative Web Design30 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

32. 12 November 2001The Designers’ Outpost: Collaborative Web Design31 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

33. 12 November 2001The Designers’ Outpost: Collaborative Web Design32 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

34. 12 November 2001The Designers’ Outpost: Collaborative Web Design33 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

35. 12 November 2001The Designers’ Outpost: Collaborative Web Design34 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

36. 12 November 2001The Designers’ Outpost: Collaborative Web Design35 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

37. 12 November 2001The Designers’ Outpost: Collaborative Web Design36 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

38. 12 November 2001The Designers’ Outpost: Collaborative Web Design37 Transactional Consistency in Physical Interfaces

39. 12 November 2001The Designers’ Outpost: Collaborative Web Design38 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)

40. 12 November 2001The Designers’ Outpost: Collaborative Web Design39 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

41. 12 November 2001The Designers’ Outpost: Collaborative Web Design40 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

42. 12 November 2001The Designers’ Outpost: Collaborative Web Design41 Presenting Branches