lecture 2 – user-oriented design terry winograd introduction to human-computer interaction design
DESCRIPTION
Lecture 2 – User-oriented Design Terry Winograd Introduction to Human-Computer Interaction Design Computer Science Department Stanford University. 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 - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Lecture 2 – User-oriented Design Terry Winograd Introduction to Human-Computer Interaction Design](https://reader035.vdocument.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.vdocument.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.vdocument.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.vdocument.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.vdocument.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.vdocument.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.vdocument.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.vdocument.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.vdocument.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.vdocument.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.vdocument.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.vdocument.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.vdocument.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.vdocument.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.vdocument.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.vdocument.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.vdocument.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.vdocument.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.vdocument.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.vdocument.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.vdocument.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.vdocument.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.vdocument.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.vdocument.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.vdocument.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.vdocument.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.vdocument.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.vdocument.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.vdocument.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.vdocument.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.vdocument.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.vdocument.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.vdocument.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.vdocument.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.vdocument.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.vdocument.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.vdocument.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.vdocument.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.vdocument.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.vdocument.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.vdocument.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.vdocument.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.vdocument.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.vdocument.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.vdocument.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.vdocument.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.vdocument.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