1. Scott Klemmer Michael Thomsen Ethan Phelps-Goodman Robert Lee James Landay 23 April 2002 ACM SIGCHI Minneapolis, MN Where Do Web Sites Come From? Capturing and Interacting with Design History

2. 23 April 2002Where Do Web Sites Come From?2 Information Architecture Comes First Interviews with 11 professional designers [Newman, DIS2000] Post-It notes on large surfaces –affinity diagrams Brainstorming –collaborative –solo Advantages –persistent –immersive, haptic –fluid, informal interface Difficulties –hard to edit –…to share –…to make digital B A C K G R O U N D Contextual Design, by Hugh Beyer and Karen Holtzblatt

3. 23 April 2002Where Do Web Sites Come From?3 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

4. 23 April 2002Where Do Web Sites Come From?4 Designers’ Outpost Combining... affordances of paper and advantages of electronic media to support design practice [Klemmer, UIST2001] Electronic wall surface (180 cm diagonal SMART Board) Regular Post-it notes Computer vision, stylus, and physical tools UI Evaluated with 15 professional designers I N F R A S T R U C T U R E

5. 23 April 2002Where Do Web Sites Come From?5 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

6. 23 April 2002Where Do Web Sites Come From?6 Adding Value to Outpost Transition to other tools: DENIM, a sketch- based web design application Remote collaboration (CHI02 student poster) Design history Tangible computing is of interest precisely because it is not purely physical – Paul Dourish G O A L S

7. 23 April 2002Where Do Web Sites Come From?7 User Comment During Study “When I’m working, I’ll do the information architecture on Post-its, and draw links on the whiteboard. I’ll take snapshots at different points in time. And then I’ll project earlier states onto a wall, and go from there.” E V A L U A T I O N

8. 23 April 2002Where Do Web Sites Come From?8 Why Have Design History? Providing a process document/record Enabling risk-free exploration of alternatives Learning from past successes and mistakes Providing a platform for design rationale, by combining with history with comments G O A L S

9. 23 April 2002Where Do Web Sites Come From?9 Video

10. 23 April 2002Where Do Web Sites Come From?10 C M L The Three History Visualizations Main Timeline Note Timeline Synopsis Visualization

11. 23 April 2002Where Do Web Sites Come From?11 Main Timeline Consists of visual thumbnails Each thumbnail represents the board at one point in time Changes between thumbnails are highlighted M A I N T I M E L I N E

12. 23 April 2002Where Do Web Sites Come From?12 Direct manipulation The timeline outputs (a subset) of the design history The timeline inputs the current location: Tapping a thumbnail jumps in time A jog-dial offers physical navigation for scrolling and browsing M A I N T I M E L I N E

13. 23 April 2002Where Do Web Sites Come From?13 Branched History How can we offer the flexibility and power of branched history, with the ease of use of linear history? M A I N T I M E L I N E

14. 23 April 2002Where Do Web Sites Come From?14 Timeline Filters Filters provide a mechanism for managing the granularity of the timeline M A I N T I M E L I N E

15. 23 April 2002Where Do Web Sites Come From?15 Local Timeline Lighter weight history for individual objects Provides detailed information about a particular note in situ C M L L O C A L T I M E L I N E

16. 23 April 2002Where Do Web Sites Come From?16 Synopsis View Provides a radically different visualization optimized for offline usage S Y N O P S I S V I E W

17. 23 April 2002Where Do Web Sites Come From?17 Combining Physical and Virtual Consistency between physical and virtual is required but non-trivial User intervention is required in some cases: 1) Create note2) Move note3) Go back

18. 23 April 2002Where Do Web Sites Come From?18 Implementation Implemented in Java on top of the SATIN toolkit [Hong, UIST2001] The history is captured in command objects that are stored in a specialized branched command queue –Typical commands include add note, remove note, add link,... The history system can easily be added to other SATIN based apps

19. 23 April 2002Where Do Web Sites Come From?19 Related Work: Visual History

20. 23 April 2002Where Do Web Sites Come From?20 Evaluation 6 professional designers Physical/Electronic in Cycles View All problematic Enthusiastic about easy capture of different states: facilitates experimentation and provides easy reference

21. 23 April 2002Where Do Web Sites Come From?21 Summary and Current Work History system supports and enhances current information architecture practices Task oriented tangible UI Brings vision to real world application Versioning, capture essential Plan to integrate informal audio capture of design sessions

22. http://guir.berkeley.edu/ 23 April 2002 ACM SIGCHI Minneapolis, MN Where Do Web Sites Come From? Capturing and Interacting with Design History