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