stanford hci group / cs376 Design Tools Ron B. Yeh 26 October 2004 Research Topics in Human-Computer Interaction http://cs376.stanford.edu
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 2
Goals for this Quarter CHI Student Poster Submission, OR CHI Short Paper if more motivated =) 3
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 4
Best Practices for Designing Interfaces Iterative design Test Design Analyze Getting it right the first time is hard Prototyping tools can be the key to success 5
Outline Informal user interfaces Informal tools for web site design Informal tool for speech UI design Informal tools for cross-device design 6
Early Stage User Interface Design Brainstorming put designs in a tangible form Incomplete designs illustrate important examples Sketching & other informal representations important 26 October 2004 Design Tools 7
Informal vs. Formal Representations Informal visual representation Formal visual representation communicates unfinished communicates finished encourages creativity inhibits creativity (detailing) faster to create slower to create 8
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 9
Informal UI Example Sketchup Video [2 min] 10
Informal Prototyping & Evaluation Tools Outpost Denim WebQuilt CrossWeaver Damask Suede 11
Outline Informal user interfaces Informal tools for web site design Informal tool for speech UI design Informal tools for cross-device design 12
Investigation into Web Design: Information Architecture Comes First 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 Reprinted by permission from Contextual Design by Hugh Beyer & Karen Holtzblatt, InContext Enterprises, http://www.incent.com, Morgan Kaufmann, 1998 26 October 2004 Design Tools 13
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 Maps Storyboards Schematics Mock-ups 14
Sketching All designers sketched... at all levels 15
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 16
DENIM: Designing Web Sites by Sketching Integrates multiple views site map storyboard page sketch Supports informal interaction sketching, recognizes pages & links, not content 17
Video OUTPOST & DENIM Videos [~3 minutes] 18
Outline Informal user interfaces Informal tools for web site design Informal tool for speech UI design Informal tools for cross-device design 19
SUEDE: Informal Prototyping for Speech-based UIs Read my important email 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 26 October 2004 Design Tools 20
21
machine prompt user response 22
Video SUEDE Video [~2 minutes] 23
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/suede 24
Outline Informal user interfaces Informal tools for web site design Informal tool for speech UI design Informal tools for cross-device design 25
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
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 27
Pattern Solution Captures essence on how to solve problem Navigation bar First-level navigation Second-level navigation Generality of solution fits informal approach! 28
Damask 29
Video Damask Video [~2.5 minutes] 30
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 31
Much of this material is based on James Landay s 2002 research overview talk 32