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

Transcription

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

2 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

3 Goals for this Quarter CHI Student Poster Submission, OR CHI Short Paper if more motivated =) 3

4 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 cs376@cs.stanford.edu 4

5 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

6 Outline Informal user interfaces Informal tools for web site design Informal tool for speech UI design Informal tools for cross-device design 6

7 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

8 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

9 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

10 Informal UI Example Sketchup Video [2 min] 10

11 Informal Prototyping & Evaluation Tools Outpost Denim WebQuilt CrossWeaver Damask Suede 11

12 Outline Informal user interfaces Informal tools for web site design Informal tool for speech UI design Informal tools for cross-device design 12

13 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, Morgan Kaufmann, October 2004 Design Tools 13

14 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

15 Sketching All designers sketched... at all levels 15

16 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

17 DENIM: Designing Web Sites by Sketching Integrates multiple views site map storyboard page sketch Supports informal interaction sketching, recognizes pages & links, not content 17

18 Video OUTPOST & DENIM Videos [~3 minutes] 18

19 Outline Informal user interfaces Informal tools for web site design Informal tool for speech UI design Informal tools for cross-device design 19

20 SUEDE: Informal Prototyping for Speech-based UIs Read my important 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 21

22 machine prompt user response 22

23 Video SUEDE Video [~2 minutes] 23

24 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 24

25 Outline Informal user interfaces Informal tools for web site design Informal tool for speech UI design Informal tools for cross-device design 25

26 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

27 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

28 Pattern Solution Captures essence on how to solve problem Navigation bar First-level navigation Second-level navigation Generality of solution fits informal approach! 28

29 Damask 29

30 Video Damask Video [~2.5 minutes] 30

31 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

32 Much of this material is based on James Landay s 2002 research overview talk 32