1. stanford hci group / cs376 Research Topics in Human-Computer Interaction http://cs376.stanford.edu Design Tools Ron B. Yeh 26 October 2004

2. 2 Design Tools Reading Research Papers  Selective Attention =)  Or alternatively, selective inattention to the details, or less important sections  Read with a purpose  Read with questions in mind  Read Abstract and Conclusion first  Scan through Figures/Captions first

3. 26 October 20043 Design Tools Goals for this Quarter  CHI Student Poster Submission, OR  CHI Short Paper if more motivated =)

4. 26 October 20044 Design Tools Project Milestone #1 -- November 4  Ideation -- Many designs brainstormed  sketches with little blurbs  storyboards  Evidence why solution you settle on is a good one  Contextual Inquiry?  Other evidence?  What goals does your interface serve?  See list from last Thursday (efficiency, safety, control…)  Describe a “user value” hypothesis, based on above  Propose a method to evaluate that hypothesis  Email this to cs376@cs.stanford.edu

5. 26 October 20045 Design Tools 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

6. 26 October 20046 Design Tools Outline  Informal user interfaces  Informal tools for web site design  Informal tool for speech UI design  Informal tools for cross-device design

7. 26 October 20047 Design Tools Early Stage User Interface Design  Brainstorming  put designs in a tangible form  Incomplete designs  illustrate important examples  Sketching & other informal representations important

8. 26 October 20048 Design Tools Informal vs. Formal Representations  Informal visual representation  communicates “unfinished”  encourages creativity  faster to create  Formal visual representation  communicates “finished”  inhibits creativity (detailing)  slower to create

9. 26 October 20049 Design Tools Informal User Interfaces  Take advantage of natural input modalities  speaking  writing  gesturing  sketching  Minimize recognition of the input  allow users to work & communicate naturally  document rather than transform

10. 26 October 200410 Design Tools Informal UI Example  Sketchup Video [2 min] Sketchup Video

11. 26 October 200411 Design Tools CrossWeaver Informal Prototyping & Evaluation Tools Denim Suede Outpost WebQuilt Damask

12. 26 October 200412 Design Tools Outline  Informal user interfaces  Informal tools for web site design  Informal tool for speech UI design  Informal tools for cross-device design

13. 26 October 200413 Design Tools Reprinted by permission from Contextual Design by Hugh Beyer & Karen Holtzblatt, InContext Enterprises, http://www.incent.com, © Morgan Kaufmann, 1998  Interviews w/ 11 professional designers  Post-Its & large surfaces (i.e., affinity diagrams)  haptic UI  brainstorming  collaborative  persistent  immersive  hard to share, edit, make digital Investigation into Web Design: Information Architecture Comes First

14. 26 October 200414 Design Tools Investigation into Web Design: Multiple Views  Designers create representations of sites at multiple levels of detail  Web sites are iteratively refined at all levels of detail Site MapsStoryboardsSchematicsMock-ups

15. 26 October 200415 Design Tools Sketching All designers sketched... at all levels

16. 26 October 200416 Design Tools Designers’ Outpost: A Tangible Interface for Designing Information Architectures  Combines the physical & virtual  physical post-its, virtual feedback  Supports existing practice  affordances of paper  collaboration  large, persistent representation  Adds advantages of e-media  editing, reuse, history, distribution  hand-off later to other tools

17. 26 October 200417 Design Tools DENIM: Designing Web Sites by Sketching  Integrates multiple views  site map – storyboard – page sketch  Supports informal interaction  sketching,  recognizes pages & links, not content

18. 26 October 200418 Design Tools Video OUTPOST & DENIM VideosOUTPOST & DENIM Videos [~3 minutes]

19. 26 October 200419 Design Tools Outline  Informal user interfaces  Informal tools for web site design  Informal tool for speech UI design  Informal tools for cross-device design

20. 26 October 200420 Design Tools SUEDE: Informal Prototyping for Speech-based UIs  Supports design practice  example scripts  Wizard of Oz  error simulation  iterative design ( design-test-analysis )  Informal user interface  no speech recognition or synthesis  need not be programming expert  fast & fluid design Read my importan t email

21. 26 October 200421 Design Tools

22. 26 October 200422 Design Tools machine prompt user response

23. 26 October 200423 Design Tools Video SUEDE VideoSUEDE Video [~2 minutes]

24. 26 October 200424 Design Tools SUEDE Summary  SUEDE supports speech-based UI design  moving from concrete examples to abstractions  embeds iterative design  informal interface supports fast & fluid design  designers need not be speech technology experts  Status  downloaded over 1000 times  used by several companies for designing telephone-based speech UIs  Download at http://guir.berkeley.edu/suedehttp://guir.berkeley.edu/suede

25. 26 October 200425 Design Tools Outline  Informal user interfaces  Informal tools for web site design  Informal tool for speech UI design  Informal tools for cross-device design

26. 26 October 200426 Design Tools Design Patterns  Design is about finding solutions  unfortunately, designers often reinvent  hard to know how things were done before & to reuse solutions  design patterns allow designers to reuse what works well  First used in architecture [Alexander]  Communicate design problems & solutions  how to create a beer garden where people socialize…  how big doors should be & where…  how to use handles…  Not too general & not too specific  use solution “a million times over, without ever doing it the same way twice”

27. 26 October 200427 Design Tools Web Design Patterns  Communicate design problems & solutions  how to make e-commerce sites where people return & buy…  how to create a shopping cart that supports check out…  how to create navigation bars for finding relevant content…

28. 26 October 200428 Design Tools Pattern Solution  Captures essence on how to solve problem  Navigation bar  Generality of solution fits informal approach! First-level navigation Second-level navigation

29. 26 October 200429 Design Tools Damask

30. 26 October 200430 Design Tools Video Damask VideoDamask Video [~2.5 minutes]

31. 26 October 200431 Design Tools Summary  Iterative design is the key to good UIs  Informal tools are the key to iterative design  Berkeley built several tools to support  Web Design (Outpost & Denim)  Speech UI Design (Suede)  Multimodal, Cross device UI Design (CrossWeaver & Damask)  Positive results from evaluations & community reaction

32. 26 October 200432 Design Tools Much of this material is based on James Landay’s 2002 research overview talk