Lecture 2 – User-oriented Design Terry Winograd Introduction to Human-Computer Interaction Design
description
Transcript of Lecture 2 – User-oriented Design Terry Winograd Introduction to Human-Computer Interaction Design
![Page 1: Lecture 2 – User-oriented Design Terry Winograd Introduction to Human-Computer Interaction Design](https://reader035.fdocuments.in/reader035/viewer/2022081516/56814fd8550346895dbd9c7b/html5/thumbnails/1.jpg)
CS147 - Terry Winograd - 1
Lecture 2 – User-oriented Design
Terry WinogradIntroduction to Human-Computer
Interaction DesignComputer Science Department
Stanford University
![Page 2: Lecture 2 – User-oriented Design Terry Winograd Introduction to Human-Computer Interaction Design](https://reader035.fdocuments.in/reader035/viewer/2022081516/56814fd8550346895dbd9c7b/html5/thumbnails/2.jpg)
CS147 - Terry Winograd - 2
Learning Goals for Today
• Have an overview of the Interaction Design process in general and the specific way it will be applied in this course
• Have a broad understanding of what “Design” means for this course
• Learn a first level of detail about the steps we will be employing in the project
• See some examples of design projects
![Page 3: Lecture 2 – User-oriented Design Terry Winograd Introduction to Human-Computer Interaction Design](https://reader035.fdocuments.in/reader035/viewer/2022081516/56814fd8550346895dbd9c7b/html5/thumbnails/3.jpg)
CS147 - Terry Winograd - 3
What is Design (Kelley)
• Not just problem solving – Creative leap• Messy – No right answer• Takes a point of view – or many• Calls for vision and multiple minds• Open attitude – many solutions• Learned from experience with reflection• Requires a feel for the materials• Starts with broadening, followed by
narrowing• Requires ongoing mindfulness
![Page 4: Lecture 2 – User-oriented Design Terry Winograd Introduction to Human-Computer Interaction Design](https://reader035.fdocuments.in/reader035/viewer/2022081516/56814fd8550346895dbd9c7b/html5/thumbnails/4.jpg)
CS147 - Terry Winograd - 4
Design phases (IDEO)
• Understand• Observe• Visualize and Predict• Evaluate and Refine• Implement
![Page 5: Lecture 2 – User-oriented Design Terry Winograd Introduction to Human-Computer Interaction Design](https://reader035.fdocuments.in/reader035/viewer/2022081516/56814fd8550346895dbd9c7b/html5/thumbnails/5.jpg)
CS147 - Terry Winograd - 5
The Interaction Design Process
Adapted from slides by Ron B. Yeh, TA from 2003
![Page 6: Lecture 2 – User-oriented Design Terry Winograd Introduction to Human-Computer Interaction Design](https://reader035.fdocuments.in/reader035/viewer/2022081516/56814fd8550346895dbd9c7b/html5/thumbnails/6.jpg)
CS147 - Terry Winograd - 6
Overview
• Design Process Overview• Idea Generation• Needs Analysis• Exploring Design Ideas• Low-Fidelity “Paper” Prototype• User Testing• High Fidelity “Interactive” Prototype
![Page 7: Lecture 2 – User-oriented Design Terry Winograd Introduction to Human-Computer Interaction Design](https://reader035.fdocuments.in/reader035/viewer/2022081516/56814fd8550346895dbd9c7b/html5/thumbnails/7.jpg)
CS147 - Terry Winograd - 7
Design Process Overview
![Page 8: Lecture 2 – User-oriented Design Terry Winograd Introduction to Human-Computer Interaction Design](https://reader035.fdocuments.in/reader035/viewer/2022081516/56814fd8550346895dbd9c7b/html5/thumbnails/8.jpg)
CS147 - Terry Winograd - 8
Simple Iterative Model
• Modified from p. 186 in Interaction Design
NEEDS
DESIGN
IMPLEMENTEVALUATE
![Page 9: Lecture 2 – User-oriented Design Terry Winograd Introduction to Human-Computer Interaction Design](https://reader035.fdocuments.in/reader035/viewer/2022081516/56814fd8550346895dbd9c7b/html5/thumbnails/9.jpg)
CS147 - Terry Winograd - 9
Know thy User…
• Alice• Bob
• Carrie
• Dan
• Fred • Gloria
• Harry
• Ismelda
• Jack• Kelly
• Loren
• Mary
![Page 10: Lecture 2 – User-oriented Design Terry Winograd Introduction to Human-Computer Interaction Design](https://reader035.fdocuments.in/reader035/viewer/2022081516/56814fd8550346895dbd9c7b/html5/thumbnails/10.jpg)
CS147 - Terry Winograd - 10
Simple Iterative Model
• Modified from p. 186 in Interaction Design
NEEDS
DESIGN
IMPLEMENTEVALUATE
![Page 11: Lecture 2 – User-oriented Design Terry Winograd Introduction to Human-Computer Interaction Design](https://reader035.fdocuments.in/reader035/viewer/2022081516/56814fd8550346895dbd9c7b/html5/thumbnails/11.jpg)
CS147 - Terry Winograd - 11
Participatory Design
• Modified from p. 186 in Interaction Design
NEEDS
DESIGN
IMPLEMENTEVALUATE
![Page 12: Lecture 2 – User-oriented Design Terry Winograd Introduction to Human-Computer Interaction Design](https://reader035.fdocuments.in/reader035/viewer/2022081516/56814fd8550346895dbd9c7b/html5/thumbnails/12.jpg)
CS147 - Terry Winograd - 12
Idea Generation
![Page 13: Lecture 2 – User-oriented Design Terry Winograd Introduction to Human-Computer Interaction Design](https://reader035.fdocuments.in/reader035/viewer/2022081516/56814fd8550346895dbd9c7b/html5/thumbnails/13.jpg)
CS147 - Terry Winograd - 13
Brainstorming
• Group vs. Individual Creativity• More Ideas == More Creative ==
Better• Limited Time• Keep a Record
• Brainstorm in Section next week! Brainstorming is not just a good idea but an inexhaustible source of inspiration and fresh thinking (IDEO)
![Page 14: Lecture 2 – User-oriented Design Terry Winograd Introduction to Human-Computer Interaction Design](https://reader035.fdocuments.in/reader035/viewer/2022081516/56814fd8550346895dbd9c7b/html5/thumbnails/14.jpg)
CS147 - Terry Winograd - 14
The Rules According to IDEO
• Be Visual. • Defer judgment. • Encourage Wild Ideas. • Build on the Ideas of Others. • Go for Quantity. • One Conversation at a Time. • Stay Focused on the Topic.
![Page 15: Lecture 2 – User-oriented Design Terry Winograd Introduction to Human-Computer Interaction Design](https://reader035.fdocuments.in/reader035/viewer/2022081516/56814fd8550346895dbd9c7b/html5/thumbnails/15.jpg)
CS147 - Terry Winograd - 15
Needs Analysis
NEEDS
DESIGN
IMPLEMENTEVALUATE
![Page 16: Lecture 2 – User-oriented Design Terry Winograd Introduction to Human-Computer Interaction Design](https://reader035.fdocuments.in/reader035/viewer/2022081516/56814fd8550346895dbd9c7b/html5/thumbnails/16.jpg)
CS147 - Terry Winograd - 16
Contextual Inquiry
• Users and stakeholders• Context• At the interviewee’s workplace• Partnership• Designer is apprentice to
Interviewee• Can be guided by interviewee
![Page 17: Lecture 2 – User-oriented Design Terry Winograd Introduction to Human-Computer Interaction Design](https://reader035.fdocuments.in/reader035/viewer/2022081516/56814fd8550346895dbd9c7b/html5/thumbnails/17.jpg)
CS147 - Terry Winograd - 17
Contextual Interviews
• Interpretation and elicitation of needs
• Observations must be interpreted by observer and interviewee
• Focus• Short• Inquire about work behaviors• Intention is to design a new system• Focus on design goals
![Page 18: Lecture 2 – User-oriented Design Terry Winograd Introduction to Human-Computer Interaction Design](https://reader035.fdocuments.in/reader035/viewer/2022081516/56814fd8550346895dbd9c7b/html5/thumbnails/18.jpg)
CS147 - Terry Winograd - 18
Capturing the Data
• Observer’s head• Written notes• Sketches and photos of the setting• Audio (or even Video)
![Page 19: Lecture 2 – User-oriented Design Terry Winograd Introduction to Human-Computer Interaction Design](https://reader035.fdocuments.in/reader035/viewer/2022081516/56814fd8550346895dbd9c7b/html5/thumbnails/19.jpg)
CS147 - Terry Winograd - 19
Exploring Design Ideas
NEEDS
DESIGN
IMPLEMENTEVALUATE
![Page 20: Lecture 2 – User-oriented Design Terry Winograd Introduction to Human-Computer Interaction Design](https://reader035.fdocuments.in/reader035/viewer/2022081516/56814fd8550346895dbd9c7b/html5/thumbnails/20.jpg)
CS147 - Terry Winograd - 20
Scenarios
• What are they?• When can you use them?• Why are they useful?
• Scenario vs. Task
![Page 21: Lecture 2 – User-oriented Design Terry Winograd Introduction to Human-Computer Interaction Design](https://reader035.fdocuments.in/reader035/viewer/2022081516/56814fd8550346895dbd9c7b/html5/thumbnails/21.jpg)
CS147 - Terry Winograd - 21
Sketches
From a previous cs147 project…
![Page 22: Lecture 2 – User-oriented Design Terry Winograd Introduction to Human-Computer Interaction Design](https://reader035.fdocuments.in/reader035/viewer/2022081516/56814fd8550346895dbd9c7b/html5/thumbnails/22.jpg)
CS147 - Terry Winograd - 22
Storyboards
http://www.storyboards-east.com/sb_dismoi.htm
![Page 23: Lecture 2 – User-oriented Design Terry Winograd Introduction to Human-Computer Interaction Design](https://reader035.fdocuments.in/reader035/viewer/2022081516/56814fd8550346895dbd9c7b/html5/thumbnails/23.jpg)
CS147 - Terry Winograd - 23
Storyboards
![Page 24: Lecture 2 – User-oriented Design Terry Winograd Introduction to Human-Computer Interaction Design](https://reader035.fdocuments.in/reader035/viewer/2022081516/56814fd8550346895dbd9c7b/html5/thumbnails/24.jpg)
CS147 - Terry Winograd - 24
Storyboards
![Page 25: Lecture 2 – User-oriented Design Terry Winograd Introduction to Human-Computer Interaction Design](https://reader035.fdocuments.in/reader035/viewer/2022081516/56814fd8550346895dbd9c7b/html5/thumbnails/25.jpg)
CS147 - Terry Winograd - 25
Flipbook
![Page 26: Lecture 2 – User-oriented Design Terry Winograd Introduction to Human-Computer Interaction Design](https://reader035.fdocuments.in/reader035/viewer/2022081516/56814fd8550346895dbd9c7b/html5/thumbnails/26.jpg)
CS147 - Terry Winograd - 26
Flipbook
![Page 27: Lecture 2 – User-oriented Design Terry Winograd Introduction to Human-Computer Interaction Design](https://reader035.fdocuments.in/reader035/viewer/2022081516/56814fd8550346895dbd9c7b/html5/thumbnails/27.jpg)
CS147 - Terry Winograd - 27
Flow Diagrams
From a previous cs147 project…
![Page 28: Lecture 2 – User-oriented Design Terry Winograd Introduction to Human-Computer Interaction Design](https://reader035.fdocuments.in/reader035/viewer/2022081516/56814fd8550346895dbd9c7b/html5/thumbnails/28.jpg)
CS147 - Terry Winograd - 28
Woah Nelly…!
• Sketches, Storyboards, Flipbooks, Diagrams
• What’s the Difference?• When to use them?• Why to use them?• Who’s the audience?• Deliverable: Storyboard only• But, try as many as you can
![Page 29: Lecture 2 – User-oriented Design Terry Winograd Introduction to Human-Computer Interaction Design](https://reader035.fdocuments.in/reader035/viewer/2022081516/56814fd8550346895dbd9c7b/html5/thumbnails/29.jpg)
CS147 - Terry Winograd - 29
Prototyping
NEEDS
DESIGN
IMPLEMENTEVALUATE
![Page 30: Lecture 2 – User-oriented Design Terry Winograd Introduction to Human-Computer Interaction Design](https://reader035.fdocuments.in/reader035/viewer/2022081516/56814fd8550346895dbd9c7b/html5/thumbnails/30.jpg)
CS147 - Terry Winograd - 30
Using Prototypes
• Allows multiple parties to envision together– Designers– Users– Engineering, marketing, planning,…..
• Reflective conversation with the materials
• Focus for identifying alternatives and tradeoffs
![Page 31: Lecture 2 – User-oriented Design Terry Winograd Introduction to Human-Computer Interaction Design](https://reader035.fdocuments.in/reader035/viewer/2022081516/56814fd8550346895dbd9c7b/html5/thumbnails/31.jpg)
CS147 - Terry Winograd - 31
Low-Fidelity “Paper” Prototype
NEEDS
DESIGN
IMPLEMENTEVALUATE
![Page 32: Lecture 2 – User-oriented Design Terry Winograd Introduction to Human-Computer Interaction Design](https://reader035.fdocuments.in/reader035/viewer/2022081516/56814fd8550346895dbd9c7b/html5/thumbnails/32.jpg)
CS147 - Terry Winograd - 32
Tools
• Paper, Cardboard, Transparencies• Tape, Glue, Rubber Cement• Pens, Pencils, Markers• Scissors• Plastic Tubes, Paper Cups, CD
“Coasters”• Anything that you can buy in an
arts and crafts store (and that a kindergartener would have fun using).
![Page 33: Lecture 2 – User-oriented Design Terry Winograd Introduction to Human-Computer Interaction Design](https://reader035.fdocuments.in/reader035/viewer/2022081516/56814fd8550346895dbd9c7b/html5/thumbnails/33.jpg)
CS147 - Terry Winograd - 33
Examples: Low-Fidelity Prototype
![Page 34: Lecture 2 – User-oriented Design Terry Winograd Introduction to Human-Computer Interaction Design](https://reader035.fdocuments.in/reader035/viewer/2022081516/56814fd8550346895dbd9c7b/html5/thumbnails/34.jpg)
CS147 - Terry Winograd - 34
Examples: Low-Fidelity Prototype
http://www.mindspring.com/~bryce_g/projects/lo_fi.html
![Page 35: Lecture 2 – User-oriented Design Terry Winograd Introduction to Human-Computer Interaction Design](https://reader035.fdocuments.in/reader035/viewer/2022081516/56814fd8550346895dbd9c7b/html5/thumbnails/35.jpg)
CS147 - Terry Winograd - 35
Examples: Low-Fidelity Prototype
http://bmrc.berkeley.edu/courseware/cs160/fall99/projects/t4/body/low-fi/
![Page 36: Lecture 2 – User-oriented Design Terry Winograd Introduction to Human-Computer Interaction Design](https://reader035.fdocuments.in/reader035/viewer/2022081516/56814fd8550346895dbd9c7b/html5/thumbnails/36.jpg)
CS147 - Terry Winograd - 36
Summary
• What is it?• When can you use it?• Why is it useful?
NEEDS
DESIGN
IMPLEMENTEVALUATE
![Page 37: Lecture 2 – User-oriented Design Terry Winograd Introduction to Human-Computer Interaction Design](https://reader035.fdocuments.in/reader035/viewer/2022081516/56814fd8550346895dbd9c7b/html5/thumbnails/37.jpg)
CS147 - Terry Winograd - 37
User Testing
NEEDS
DESIGN
IMPLEMENTEVALUATE
![Page 38: Lecture 2 – User-oriented Design Terry Winograd Introduction to Human-Computer Interaction Design](https://reader035.fdocuments.in/reader035/viewer/2022081516/56814fd8550346895dbd9c7b/html5/thumbnails/38.jpg)
CS147 - Terry Winograd - 38
Tools
• 4 group members• Greeter/Facilitator• Computer (not necessary for low-fi
testing)• 2 Observers/Note takers• Prototype• Users!!!!
![Page 39: Lecture 2 – User-oriented Design Terry Winograd Introduction to Human-Computer Interaction Design](https://reader035.fdocuments.in/reader035/viewer/2022081516/56814fd8550346895dbd9c7b/html5/thumbnails/39.jpg)
CS147 - Terry Winograd - 39
User Testing
http://www.cs.waikato.ac.nz/usability/facilities.html
http://www.itl.nist.gov/iad/gallery.html
![Page 40: Lecture 2 – User-oriented Design Terry Winograd Introduction to Human-Computer Interaction Design](https://reader035.fdocuments.in/reader035/viewer/2022081516/56814fd8550346895dbd9c7b/html5/thumbnails/40.jpg)
CS147 - Terry Winograd - 40
Summary
• What is it?• When can you use it?• Why is it useful?
![Page 41: Lecture 2 – User-oriented Design Terry Winograd Introduction to Human-Computer Interaction Design](https://reader035.fdocuments.in/reader035/viewer/2022081516/56814fd8550346895dbd9c7b/html5/thumbnails/41.jpg)
CS147 - Terry Winograd - 41
High Fidelity “Interactive” Prototype
NEEDS
DESIGN
IMPLEMENTEVALUATE
![Page 42: Lecture 2 – User-oriented Design Terry Winograd Introduction to Human-Computer Interaction Design](https://reader035.fdocuments.in/reader035/viewer/2022081516/56814fd8550346895dbd9c7b/html5/thumbnails/42.jpg)
CS147 - Terry Winograd - 42
Tools
• HTML & Javascript• Java JFC/Swing• Visual C++, Visual Basic• Flash MX, Director• Mac Interface Builder• others…or a mix of the above!!!
![Page 43: Lecture 2 – User-oriented Design Terry Winograd Introduction to Human-Computer Interaction Design](https://reader035.fdocuments.in/reader035/viewer/2022081516/56814fd8550346895dbd9c7b/html5/thumbnails/43.jpg)
CS147 - Terry Winograd - 43
Examples: Interactive Prototype
From cs160 at UC Berkeley
![Page 44: Lecture 2 – User-oriented Design Terry Winograd Introduction to Human-Computer Interaction Design](https://reader035.fdocuments.in/reader035/viewer/2022081516/56814fd8550346895dbd9c7b/html5/thumbnails/44.jpg)
CS147 - Terry Winograd - 44
Examples: Interactive Prototype
From cs247a at Stanford University
![Page 45: Lecture 2 – User-oriented Design Terry Winograd Introduction to Human-Computer Interaction Design](https://reader035.fdocuments.in/reader035/viewer/2022081516/56814fd8550346895dbd9c7b/html5/thumbnails/45.jpg)
CS147 - Terry Winograd - 45
Examples: Interactive Prototype
From cs160 at UC Berkeley
![Page 46: Lecture 2 – User-oriented Design Terry Winograd Introduction to Human-Computer Interaction Design](https://reader035.fdocuments.in/reader035/viewer/2022081516/56814fd8550346895dbd9c7b/html5/thumbnails/46.jpg)
CS147 - Terry Winograd - 46
Summary
• What is it?• When can you use it?• Why is it useful?
![Page 47: Lecture 2 – User-oriented Design Terry Winograd Introduction to Human-Computer Interaction Design](https://reader035.fdocuments.in/reader035/viewer/2022081516/56814fd8550346895dbd9c7b/html5/thumbnails/47.jpg)
CS147 - Terry Winograd - 47
Examples of Projects
• Automated Menu System• Interactive Academic Planner • ToneDeaf Revolution • N • SleepSoft Tracker • Goober's Marathon