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

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

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

26 October 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  this to

26 October 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

26 October 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 October Design Tools Early Stage User Interface Design  Brainstorming  put designs in a tangible form  Incomplete designs  illustrate important examples  Sketching & other informal representations important

26 October 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

26 October 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

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

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

26 October 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 October Design Tools Reprinted by permission from Contextual Design by Hugh Beyer & Karen Holtzblatt, InContext Enterprises, © 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

26 October 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

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

26 October 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

26 October 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

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

26 October 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 October 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

26 October Design Tools

26 October Design Tools machine prompt user response

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

26 October 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

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

26 October 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…

26 October 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

26 October Design Tools Damask

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

26 October 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

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