A Tangible Interface for Collaborative Web Site Design

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

2. The Designers’ Outpost A Tangible Interfacefor CollaborativeWeb Site Design Scott KlemmerMark Newman Michael Thomsen James Landay 31 January 2002 IUA, Universitat Pompeu Fabra Barcelona, España

3. W O R K P R A C T I C E Best Practices for Designing Interfaces • Iterative design • Getting it right the first time is hard • Prototyping tools can be the key to success Design Test Analyze The Designers’ Outpost: Collaborative Web Design

4. Site Maps Storyboards Schematics Mock-ups W O R K P R A C T I C E Web Artifacts/Representations • Designers create representations of sites at multiple levels of detail • Importance of intermediate artifacts The Designers’ Outpost: Collaborative Web Design

5. W E B D E S I G N 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 Contextual Design, by Hugh Beyer and Karen Holtzblatt The Designers’ Outpost: Collaborative Web Design

6. 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 The Designers’ Outpost: Collaborative Web Design

7. P R A C T I C E Physical? Virtual? The Designers’ Outpost: Collaborative Web Design

8. I N T E R A C T I O N S 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 The Designers’ Outpost: Collaborative Web Design

9. Related Work: Wall-Scale UIs PostBrainstorm, Guimbretière et al, UIST01 metaDESK, Ullmer et al, UIST97 Collaborage, Moran et al, UIST99 i-LAND, Streitz et al, CHI99 The Designers’ Outpost: Collaborative Web Design

10. I N T E R A C T I O N S Design Evolution of Outpost PAPER PROTOTYPE PAPER AND PIXELS INTERACTIVE WALL The Designers’ Outpost: Collaborative Web Design

11. I N T E R A C T I O N S Design Evolution of Outpost PAPER PROTOTYPE • Study • Two Users • Keyboard, Pen Tablet, Post-it note UI • Task: Off-campus Housing Web Site • Gave six pages of interview data • Findings • forgot “invisible” steps: underlining, button pressing • found keyboard confusing The Designers’ Outpost: Collaborative Web Design

12. I N T E R A C T I O N S Design Evolution of Outpost PAPER PROTOTYPE PAPER AND PIXELS INTERACTIVE WALL • DESK TOO SMALL! • maximum 50 notes • wall is a better scale The Designers’ Outpost: Collaborative Web Design

13. I N T E R A C T I O N S Design Evolution of Outpost PAPER PROTOTYPE PAPER AND PIXELS INTERACTIVE WALL The Designers’ Outpost: Collaborative Web Design

14. I N F R A S T R U C T U R E Hardware Architecture Touch sensitive SMART board augmented with two digital cameras The Designers’ Outpost: Collaborative Web Design

15. Video The Designers’ Outpost: Collaborative Web Design

16. I N T E R A C T I O N S Interaction Techniques INK ADD LINK REMOVE SAVE MOVE MENU The Designers’ Outpost: Collaborative Web Design

17. Physical Tools PENS MOVE TOOL ERASER The Designers’ Outpost: Collaborative Web Design

18. Moving Electronic Content The Designers’ Outpost: Collaborative Web Design

19. I N T E R A C T I O N S 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 The Designers’ Outpost: Collaborative Web Design

20. I N T E R A C T I O N S We Changed DENIM The Designers’ Outpost: Collaborative Web Design

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

22. S T U D Y + F I N D I N G S Design Study Findings • Three phase process • Brainstorming • Top-level information architecture • Drilling down and annotating • Two working styles • Facilitator / gate keeper • Open board • Paper as personal input The Designers’ Outpost: Collaborative Web Design

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

24. I N F R A S T R U C T U R E Hardware Architecture note9.jpg The Designers’ Outpost: Collaborative Web Design

25. I N F R A S T R U C T U R E 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 The Designers’ Outpost: Collaborative Web Design

26. I N F R A S T R U C T U R E 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 forincluded objects • pens, move tool, eraser The Designers’ Outpost: Collaborative Web Design

27. Design History • Access earlier states • For exploring options • For education • Fluid Interface • Visual Timeline The Designers’ Outpost: Collaborative Web Design

28. Related Work: Visual History The Designers’ Outpost: Collaborative Web Design

29. Main Timeline close-up • Visual Thumbnails • Branches The Designers’ Outpost: Collaborative Web Design

30. Main Timeline The Designers’ Outpost: Collaborative Web Design

31. Synopsis View The Designers’ Outpost: Collaborative Web Design

32. Design Study • 6 professional designers • Physical/Electronic in Cycles • View All confusing The Designers’ Outpost: Collaborative Web Design

33. S U M M A R Y Summary and Current 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 The Designers’ Outpost: Collaborative Web Design

34. The Designers’ Outpost Papers and videos available at:http://guir.berkeley.edu/outpost Scott KlemmerMark Newman Michael Thomsen James Landay 31 January 2002 IUA, Universitat Pompeu Fabra Barcelona, España

35. “ Yellow - the color of alert, of highlighting - and a square, meant to contain a thought, a reminder. Like hypertext, they are a wayof making associations and combining them. - Paola Antonelli, Museum of Modern Art Curator, 1999. Nominating the 3M Post-It note for a design award. ”