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 31 January 2002 IUA, Universitat Pompeu Fabra Barcelona, España A Tangible Interface for Collaborative Web Site Design The Designers’ Outpost

31 January 2001The Designers’ Outpost: Collaborative Web Design3 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 W O R K P R A C T I C E

31 January 2001The Designers’ Outpost: Collaborative Web Design4 Web Artifacts/Representations StoryboardsSchematicsMock-ups W O R K P R A C T I C E Site Maps Designers create representations of sites at multiple levels of detail Importance of intermediate artifacts

31 January 2001The Designers’ Outpost: Collaborative Web Design5 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

31 January 2001The Designers’ Outpost: Collaborative Web Design6 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

31 January 2001The Designers’ Outpost: Collaborative Web Design7 Physical? Virtual? P R A C T I C E

31 January 2001The Designers’ Outpost: Collaborative Web Design8 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

31 January 2001The Designers’ Outpost: Collaborative Web Design9 Related Work: Wall-Scale UIs Collaborage, Moran et al, UIST99i-LAND, Streitz et al, CHI99 metaDESK, Ullmer et al, UIST97 PostBrainstorm, Guimbretière et al, UIST01

31 January 2001The Designers’ Outpost: Collaborative Web Design10 Design Evolution of Outpost PAPER PROTOTYPEPAPER AND PIXELSINTERACTIVE WALL I N T E R A C T I O N S

31 January 2001The Designers’ Outpost: Collaborative Web Design11 Design Evolution of Outpost PAPER PROTOTYPE I N T E R A C T I O N S 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

31 January 2001The Designers’ Outpost: Collaborative Web Design12 Design Evolution of Outpost PAPER PROTOTYPEPAPER AND PIXELSINTERACTIVE WALL I N T E R A C T I O N S DESK TOO SMALL! maximum 50 notes wall is a better scale

31 January 2001The Designers’ Outpost: Collaborative Web Design13 Design Evolution of Outpost PAPER PROTOTYPEPAPER AND PIXELSINTERACTIVE WALL I N T E R A C T I O N S

31 January 2001The Designers’ Outpost: Collaborative Web Design14 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

31 January 2001The Designers’ Outpost: Collaborative Web Design15 Video

31 January 2001The Designers’ Outpost: Collaborative Web Design16 Interaction Techniques I N T E R A C T I O N S ADDLINKREMOVE MOVEMENU INK SAVE

31 January 2001The Designers’ Outpost: Collaborative Web Design17 Physical Tools ERASER MOVE TOOL PENS

31 January 2001The Designers’ Outpost: Collaborative Web Design18 Moving Electronic Content

31 January 2001The Designers’ Outpost: Collaborative Web Design19 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

31 January 2001The Designers’ Outpost: Collaborative Web Design20 We Changed DENIM I N T E R A C T I O N S

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

31 January 2001The Designers’ Outpost: Collaborative Web Design22 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

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

31 January 2001The Designers’ Outpost: Collaborative Web Design24 Hardware Architecture I N F R A S T R U C T U R E note9.jpg

31 January 2001The Designers’ Outpost: Collaborative Web Design25 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

31 January 2001The Designers’ Outpost: Collaborative Web Design26 Sensing Paradigms I N F R A S T R U C T U R E 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

31 January 2001The Designers’ Outpost: Collaborative Web Design27 Design History Access earlier states –For exploring options –For education Fluid Interface Visual Timeline

31 January 2001The Designers’ Outpost: Collaborative Web Design28 Related Work: Visual History

31 January 2001The Designers’ Outpost: Collaborative Web Design29 Main Timeline close-up Visual Thumbnails Branches

31 January 2001The Designers’ Outpost: Collaborative Web Design30 Main Timeline

31 January 2001The Designers’ Outpost: Collaborative Web Design31 Synopsis View

31 January 2001The Designers’ Outpost: Collaborative Web Design32 Design Study 6 professional designers Physical/Electronic in Cycles View All confusing

31 January 2001The Designers’ Outpost: Collaborative Web Design33 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 S U M M A R Y

Scott Klemmer Mark Newman Michael Thomsen James Landay 31 January 2002 IUA, Universitat Pompeu Fabra Barcelona, España The Designers’ Outpost Papers and videos 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. “ ”