human-computer interaction design - university of...
TRANSCRIPT
![Page 1: Human-Computer Interaction Design - University of …ixd.ucsd.edu/home/f16/lectures/IntroHCI-f16-Week2.pdf · · 2016-10-24Human-Computer Interaction Design COGS120/CSE170 - “Intro](https://reader033.vdocuments.mx/reader033/viewer/2022051803/5afe79057f8b9a434e8f250d/html5/thumbnails/1.jpg)
Human-Computer Interaction DesignCOGS120/CSE170 - “Intro. HCI”
Instructor: Philip Guo
Week 2 - Prototyping (2016-10-04) some slides adapted from Scott Klemmer’s Intro. HCI course
![Page 2: Human-Computer Interaction Design - University of …ixd.ucsd.edu/home/f16/lectures/IntroHCI-f16-Week2.pdf · · 2016-10-24Human-Computer Interaction Design COGS120/CSE170 - “Intro](https://reader033.vdocuments.mx/reader033/viewer/2022051803/5afe79057f8b9a434e8f250d/html5/thumbnails/2.jpg)
Grading policy: aim for transparency(This is a summary; logistics tab on course website has full details)
�165 total points. No curve. Standard letter grade scale (e.g., 90% is A-)�Assignments (107 points total for 8 assignments)�The staff will grade based on a public rubric�You will also self-assess to give yourself a grade based on same rubric�For team assignments, you will also assess your teammates� (ungraded, but may be used in extreme cases to rebalance scores for fairness)
�Completing self-assessment form (8 points, 1 for each assignment)�Exam 1 (15 points)�Exam 2 (15 points)�Studio attendance and participation (20 points)
![Page 3: Human-Computer Interaction Design - University of …ixd.ucsd.edu/home/f16/lectures/IntroHCI-f16-Week2.pdf · · 2016-10-24Human-Computer Interaction Design COGS120/CSE170 - “Intro](https://reader033.vdocuments.mx/reader033/viewer/2022051803/5afe79057f8b9a434e8f250d/html5/thumbnails/3.jpg)
Learning Objective to create prototypes of varying degrees of fidelity throughout the design process.
Outline - Prototyping: what, why, and how? - Storyboards, paper prototypes, Wizard-of-Oz - Prototyping in-class activity & discussion
![Page 4: Human-Computer Interaction Design - University of …ixd.ucsd.edu/home/f16/lectures/IntroHCI-f16-Week2.pdf · · 2016-10-24Human-Computer Interaction Design COGS120/CSE170 - “Intro](https://reader033.vdocuments.mx/reader033/viewer/2022051803/5afe79057f8b9a434e8f250d/html5/thumbnails/4.jpg)
Before this class: “Let’s build
something cool!!!” <code code code>
![Page 5: Human-Computer Interaction Design - University of …ixd.ucsd.edu/home/f16/lectures/IntroHCI-f16-Week2.pdf · · 2016-10-24Human-Computer Interaction Design COGS120/CSE170 - “Intro](https://reader033.vdocuments.mx/reader033/viewer/2022051803/5afe79057f8b9a434e8f250d/html5/thumbnails/5.jpg)
After Week 1 of class: “Let’s do some needfinding. OK, found some needs. Let’s
build something cool!!!” <code code code>
![Page 6: Human-Computer Interaction Design - University of …ixd.ucsd.edu/home/f16/lectures/IntroHCI-f16-Week2.pdf · · 2016-10-24Human-Computer Interaction Design COGS120/CSE170 - “Intro](https://reader033.vdocuments.mx/reader033/viewer/2022051803/5afe79057f8b9a434e8f250d/html5/thumbnails/6.jpg)
Today’s big question: Why shouldn’t you <code code code>
right away?
![Page 7: Human-Computer Interaction Design - University of …ixd.ucsd.edu/home/f16/lectures/IntroHCI-f16-Week2.pdf · · 2016-10-24Human-Computer Interaction Design COGS120/CSE170 - “Intro](https://reader033.vdocuments.mx/reader033/viewer/2022051803/5afe79057f8b9a434e8f250d/html5/thumbnails/7.jpg)
What is a prototype? Why
build prototypes?
![Page 8: Human-Computer Interaction Design - University of …ixd.ucsd.edu/home/f16/lectures/IntroHCI-f16-Week2.pdf · · 2016-10-24Human-Computer Interaction Design COGS120/CSE170 - “Intro](https://reader033.vdocuments.mx/reader033/viewer/2022051803/5afe79057f8b9a434e8f250d/html5/thumbnails/8.jpg)
Prototypes facilitate
conversations
![Page 9: Human-Computer Interaction Design - University of …ixd.ucsd.edu/home/f16/lectures/IntroHCI-f16-Week2.pdf · · 2016-10-24Human-Computer Interaction Design COGS120/CSE170 - “Intro](https://reader033.vdocuments.mx/reader033/viewer/2022051803/5afe79057f8b9a434e8f250d/html5/thumbnails/9.jpg)
Time
Fidelity(realism)
Storyboards
Paper Prototypes
Digital Mock-ups (e.g., Photoshop, PowerPoint)
Interactive Prototypes(e.g., web app with fake data)
Final Product
![Page 10: Human-Computer Interaction Design - University of …ixd.ucsd.edu/home/f16/lectures/IntroHCI-f16-Week2.pdf · · 2016-10-24Human-Computer Interaction Design COGS120/CSE170 - “Intro](https://reader033.vdocuments.mx/reader033/viewer/2022051803/5afe79057f8b9a434e8f250d/html5/thumbnails/10.jpg)
Time
Fidelity(realism)
Storyboards
Paper Prototypes
Digital Mock-ups (e.g., Photoshop, PowerPoint)
Interactive Prototypes(e.g., web app with fake data)
Prototypes facilitate conversations about …
User tasks
User interactions
Picky usability details
Visual design
![Page 11: Human-Computer Interaction Design - University of …ixd.ucsd.edu/home/f16/lectures/IntroHCI-f16-Week2.pdf · · 2016-10-24Human-Computer Interaction Design COGS120/CSE170 - “Intro](https://reader033.vdocuments.mx/reader033/viewer/2022051803/5afe79057f8b9a434e8f250d/html5/thumbnails/11.jpg)
What are the chances that your initial design ideas are the best ones?
![Page 12: Human-Computer Interaction Design - University of …ixd.ucsd.edu/home/f16/lectures/IntroHCI-f16-Week2.pdf · · 2016-10-24Human-Computer Interaction Design COGS120/CSE170 - “Intro](https://reader033.vdocuments.mx/reader033/viewer/2022051803/5afe79057f8b9a434e8f250d/html5/thumbnails/12.jpg)
Prototypes allow you to quickly test on
users, get feedback, iterate, and pivot.
![Page 13: Human-Computer Interaction Design - University of …ixd.ucsd.edu/home/f16/lectures/IntroHCI-f16-Week2.pdf · · 2016-10-24Human-Computer Interaction Design COGS120/CSE170 - “Intro](https://reader033.vdocuments.mx/reader033/viewer/2022051803/5afe79057f8b9a434e8f250d/html5/thumbnails/13.jpg)
STORYBOARDS (slides adapted from Amal Dar Aziz)
![Page 14: Human-Computer Interaction Design - University of …ixd.ucsd.edu/home/f16/lectures/IntroHCI-f16-Week2.pdf · · 2016-10-24Human-Computer Interaction Design COGS120/CSE170 - “Intro](https://reader033.vdocuments.mx/reader033/viewer/2022051803/5afe79057f8b9a434e8f250d/html5/thumbnails/14.jpg)
STORYBOARD = A hand-drawn comic that features:Setting + Sequence + Satisfaction
No artistic skill required!
![Page 15: Human-Computer Interaction Design - University of …ixd.ucsd.edu/home/f16/lectures/IntroHCI-f16-Week2.pdf · · 2016-10-24Human-Computer Interaction Design COGS120/CSE170 - “Intro](https://reader033.vdocuments.mx/reader033/viewer/2022051803/5afe79057f8b9a434e8f250d/html5/thumbnails/15.jpg)
STORYBOARD = A hand-drawn comic that features:Setting + Sequence + Satisfaction
![Page 16: Human-Computer Interaction Design - University of …ixd.ucsd.edu/home/f16/lectures/IntroHCI-f16-Week2.pdf · · 2016-10-24Human-Computer Interaction Design COGS120/CSE170 - “Intro](https://reader033.vdocuments.mx/reader033/viewer/2022051803/5afe79057f8b9a434e8f250d/html5/thumbnails/16.jpg)
STORYBOARD = A hand-drawn comic that features:Setting + Sequence + Satisfaction
![Page 17: Human-Computer Interaction Design - University of …ixd.ucsd.edu/home/f16/lectures/IntroHCI-f16-Week2.pdf · · 2016-10-24Human-Computer Interaction Design COGS120/CSE170 - “Intro](https://reader033.vdocuments.mx/reader033/viewer/2022051803/5afe79057f8b9a434e8f250d/html5/thumbnails/17.jpg)
STORYBOARD = A hand-drawn comic that features:Setting + Sequence + Satisfaction
![Page 18: Human-Computer Interaction Design - University of …ixd.ucsd.edu/home/f16/lectures/IntroHCI-f16-Week2.pdf · · 2016-10-24Human-Computer Interaction Design COGS120/CSE170 - “Intro](https://reader033.vdocuments.mx/reader033/viewer/2022051803/5afe79057f8b9a434e8f250d/html5/thumbnails/18.jpg)
STORYBOARD = A hand-drawn comic that features:Setting + Sequence + Satisfaction
![Page 19: Human-Computer Interaction Design - University of …ixd.ucsd.edu/home/f16/lectures/IntroHCI-f16-Week2.pdf · · 2016-10-24Human-Computer Interaction Design COGS120/CSE170 - “Intro](https://reader033.vdocuments.mx/reader033/viewer/2022051803/5afe79057f8b9a434e8f250d/html5/thumbnails/19.jpg)
STORYBOARD = A hand-drawn comic that features:Setting + Sequence + Satisfaction
Benefits:- focuses the conversation and feedback on user tasks- gets everyone on same page about the app’s goals- avoids nitpicking about user interface details
![Page 20: Human-Computer Interaction Design - University of …ixd.ucsd.edu/home/f16/lectures/IntroHCI-f16-Week2.pdf · · 2016-10-24Human-Computer Interaction Design COGS120/CSE170 - “Intro](https://reader033.vdocuments.mx/reader033/viewer/2022051803/5afe79057f8b9a434e8f250d/html5/thumbnails/20.jpg)
STORYBOARD = A hand-drawn comic that features:Setting + Sequence + Satisfaction
![Page 21: Human-Computer Interaction Design - University of …ixd.ucsd.edu/home/f16/lectures/IntroHCI-f16-Week2.pdf · · 2016-10-24Human-Computer Interaction Design COGS120/CSE170 - “Intro](https://reader033.vdocuments.mx/reader033/viewer/2022051803/5afe79057f8b9a434e8f250d/html5/thumbnails/21.jpg)
PAPER PROTOTYPES
![Page 22: Human-Computer Interaction Design - University of …ixd.ucsd.edu/home/f16/lectures/IntroHCI-f16-Week2.pdf · · 2016-10-24Human-Computer Interaction Design COGS120/CSE170 - “Intro](https://reader033.vdocuments.mx/reader033/viewer/2022051803/5afe79057f8b9a434e8f250d/html5/thumbnails/22.jpg)
PAPER PROTOTYPE = A hand-drawn user interface (usually) on multiple sheets of paper of varying sizes
You can photocopy your hand-drawn components, but don’t create anything on the computer! Paper prototype of Hanmail.net https://
www.youtube.com/watch?v=GrV2SZuRPv0
![Page 23: Human-Computer Interaction Design - University of …ixd.ucsd.edu/home/f16/lectures/IntroHCI-f16-Week2.pdf · · 2016-10-24Human-Computer Interaction Design COGS120/CSE170 - “Intro](https://reader033.vdocuments.mx/reader033/viewer/2022051803/5afe79057f8b9a434e8f250d/html5/thumbnails/23.jpg)
Paper prototype of Hanmail.net https://www.youtube.com/watch?v=GrV2SZuRPv0
![Page 24: Human-Computer Interaction Design - University of …ixd.ucsd.edu/home/f16/lectures/IntroHCI-f16-Week2.pdf · · 2016-10-24Human-Computer Interaction Design COGS120/CSE170 - “Intro](https://reader033.vdocuments.mx/reader033/viewer/2022051803/5afe79057f8b9a434e8f250d/html5/thumbnails/24.jpg)
PAPER PROTOTYPE = A hand-drawn user interface (usually) on multiple sheets of paper of varying sizes
Benefits:- much easier than writing GUI code- starts conversation about user interactions- change elements on-the-fly when given feedback Paper prototype of Hanmail.net https://
www.youtube.com/watch?v=GrV2SZuRPv0
![Page 25: Human-Computer Interaction Design - University of …ixd.ucsd.edu/home/f16/lectures/IntroHCI-f16-Week2.pdf · · 2016-10-24Human-Computer Interaction Design COGS120/CSE170 - “Intro](https://reader033.vdocuments.mx/reader033/viewer/2022051803/5afe79057f8b9a434e8f250d/html5/thumbnails/25.jpg)
Time
Fidelity(realism)
Storyboards
Paper Prototypes
Digital Mock-ups (e.g., Photoshop, PowerPoint)
Interactive Prototypes(e.g., web app with fake data)
Video Prototypes
Increasing the fidelity a bit …
![Page 26: Human-Computer Interaction Design - University of …ixd.ucsd.edu/home/f16/lectures/IntroHCI-f16-Week2.pdf · · 2016-10-24Human-Computer Interaction Design COGS120/CSE170 - “Intro](https://reader033.vdocuments.mx/reader033/viewer/2022051803/5afe79057f8b9a434e8f250d/html5/thumbnails/26.jpg)
Video prototype combining storyboard and paper prototype concepts. From Lisa Seeman, Stanford University: https://www.youtube.com/watch?v=FXSk9UJM738
![Page 27: Human-Computer Interaction Design - University of …ixd.ucsd.edu/home/f16/lectures/IntroHCI-f16-Week2.pdf · · 2016-10-24Human-Computer Interaction Design COGS120/CSE170 - “Intro](https://reader033.vdocuments.mx/reader033/viewer/2022051803/5afe79057f8b9a434e8f250d/html5/thumbnails/27.jpg)
VIDEO PROTOTYPE = A video that conveys your storyboard and/or paper prototype concepts.
Benefits:- clean & self-contained; just share a YouTube link- can more vividly inspire people’s imagination- good for “pitching” or “selling” to management
![Page 28: Human-Computer Interaction Design - University of …ixd.ucsd.edu/home/f16/lectures/IntroHCI-f16-Week2.pdf · · 2016-10-24Human-Computer Interaction Design COGS120/CSE170 - “Intro](https://reader033.vdocuments.mx/reader033/viewer/2022051803/5afe79057f8b9a434e8f250d/html5/thumbnails/28.jpg)
WIZARD-OF-OZ (a way to “run” your prototypes without writing code)
![Page 29: Human-Computer Interaction Design - University of …ixd.ucsd.edu/home/f16/lectures/IntroHCI-f16-Week2.pdf · · 2016-10-24Human-Computer Interaction Design COGS120/CSE170 - “Intro](https://reader033.vdocuments.mx/reader033/viewer/2022051803/5afe79057f8b9a434e8f250d/html5/thumbnails/29.jpg)
Time
Fidelity(realism)
Storyboards
Paper Prototypes
Digital Mock-ups (e.g., Photoshop, PowerPoint)
Interactive Prototypes(e.g., web app with fake data)
Wizard-of-Oz
![Page 30: Human-Computer Interaction Design - University of …ixd.ucsd.edu/home/f16/lectures/IntroHCI-f16-Week2.pdf · · 2016-10-24Human-Computer Interaction Design COGS120/CSE170 - “Intro](https://reader033.vdocuments.mx/reader033/viewer/2022051803/5afe79057f8b9a434e8f250d/html5/thumbnails/30.jpg)
WIZARD-OF-OZ= A human operator pretending to be an interactive computer app
![Page 31: Human-Computer Interaction Design - University of …ixd.ucsd.edu/home/f16/lectures/IntroHCI-f16-Week2.pdf · · 2016-10-24Human-Computer Interaction Design COGS120/CSE170 - “Intro](https://reader033.vdocuments.mx/reader033/viewer/2022051803/5afe79057f8b9a434e8f250d/html5/thumbnails/31.jpg)
WIZARD-OF-OZ= A human operator pretending to be an interactive computer app
Benefits:- makes your prototypes interactive without writing backend logic code- gets more sophisticated feedback on complex tech- you can learn a lot by being the wizard
![Page 32: Human-Computer Interaction Design - University of …ixd.ucsd.edu/home/f16/lectures/IntroHCI-f16-Week2.pdf · · 2016-10-24Human-Computer Interaction Design COGS120/CSE170 - “Intro](https://reader033.vdocuments.mx/reader033/viewer/2022051803/5afe79057f8b9a434e8f250d/html5/thumbnails/32.jpg)
WIZARD-OF-OZ= A human operator pretending to be an interactive computer app
Tips:- Have one teammate be wizard, and another be the study facilitator- Write an “algorithm”/prompt for wizard so that they follow pre-set rules- Practice on friends first
![Page 33: Human-Computer Interaction Design - University of …ixd.ucsd.edu/home/f16/lectures/IntroHCI-f16-Week2.pdf · · 2016-10-24Human-Computer Interaction Design COGS120/CSE170 - “Intro](https://reader033.vdocuments.mx/reader033/viewer/2022051803/5afe79057f8b9a434e8f250d/html5/thumbnails/33.jpg)
Time
Fidelity(realism)
Storyboards
Paper Prototypes
Digital Mock-ups (e.g., Photoshop, PowerPoint)
Interactive Prototypes(e.g., web app with fake data)
Final ProductWizard-of-Oz
Video Prototypes
Summary of prototyping techniques
![Page 34: Human-Computer Interaction Design - University of …ixd.ucsd.edu/home/f16/lectures/IntroHCI-f16-Week2.pdf · · 2016-10-24Human-Computer Interaction Design COGS120/CSE170 - “Intro](https://reader033.vdocuments.mx/reader033/viewer/2022051803/5afe79057f8b9a434e8f250d/html5/thumbnails/34.jpg)
OK YOUR TURN!
IN-CLASS STORYBOARD ACTIVITY (designed along with TA Shawn Kang, Fall 2016)
![Page 35: Human-Computer Interaction Design - University of …ixd.ucsd.edu/home/f16/lectures/IntroHCI-f16-Week2.pdf · · 2016-10-24Human-Computer Interaction Design COGS120/CSE170 - “Intro](https://reader033.vdocuments.mx/reader033/viewer/2022051803/5afe79057f8b9a434e8f250d/html5/thumbnails/35.jpg)
Remember the restaurant-picking needfinding activity from Week 1?
�Person A: wants to find a restaurant to go to lunch with B, who is their boss.
�Person B: boss who plans to go to lunch with A but doesn’t have access to web/mobile themselves. is not very tech-savvy, but is very picky about food and has strong opinions overall.
�Person C: observer who watches A and B interact. (needs to not be shy about maybe reporting findings in front of class)
![Page 36: Human-Computer Interaction Design - University of …ixd.ucsd.edu/home/f16/lectures/IntroHCI-f16-Week2.pdf · · 2016-10-24Human-Computer Interaction Design COGS120/CSE170 - “Intro](https://reader033.vdocuments.mx/reader033/viewer/2022051803/5afe79057f8b9a434e8f250d/html5/thumbnails/36.jpg)
Review of Week 1’s needfinding activity:
� Person A and B should try to agree on a place for lunch, with Person A using their cell phone to look up places (if they have decent Internet access on it), or their laptop (if they don’t).
� Remember, Person B is the non-tech-savvy, super-picky-about-food, strongly-opinionated boss. Get into the role :)
� Person C is a silent observer watching how A interacts with their phone/laptop, and how A interacts with B. Do not talk to either A or B. Get a clear view of the phone/laptop, though.
![Page 37: Human-Computer Interaction Design - University of …ixd.ucsd.edu/home/f16/lectures/IntroHCI-f16-Week2.pdf · · 2016-10-24Human-Computer Interaction Design COGS120/CSE170 - “Intro](https://reader033.vdocuments.mx/reader033/viewer/2022051803/5afe79057f8b9a434e8f250d/html5/thumbnails/37.jpg)
Person C’s (People C’s?) report back …
� What difficulties or stumbles did A have when using mobile or web app?
� Did A and B both look on the screen at once? Did A and B both try to interact with the app?
� Any unusual interactions with the app?� What did you wish you could jump in to suggest but couldn’t, since you had to remain silent?
� What do you think A or B need to make this restaurant-picking scenario go smoother?
� [focus on problems & needs; don’t jump to solutions just yet]
![Page 38: Human-Computer Interaction Design - University of …ixd.ucsd.edu/home/f16/lectures/IntroHCI-f16-Week2.pdf · · 2016-10-24Human-Computer Interaction Design COGS120/CSE170 - “Intro](https://reader033.vdocuments.mx/reader033/viewer/2022051803/5afe79057f8b9a434e8f250d/html5/thumbnails/38.jpg)
Right now: form a group of 3-4 with your neighbors
�Doesn’t need to be the same group as Week 1’s activity, but if you’re sitting next to the same people again, go for it!�Create a point-of-view from the most compelling need that your group-mates discovered in class last week�As a group, on a sheet of paper, write down your point-of-view sentence and draw a 4-panel storyboard that illustrates a potential technology solution to a need you identified (don’t focus on UI or technical details).�At the end of class, I will get volunteers to bring me their storyboards, and I will try to comprehend/explain them.
![Page 39: Human-Computer Interaction Design - University of …ixd.ucsd.edu/home/f16/lectures/IntroHCI-f16-Week2.pdf · · 2016-10-24Human-Computer Interaction Design COGS120/CSE170 - “Intro](https://reader033.vdocuments.mx/reader033/viewer/2022051803/5afe79057f8b9a434e8f250d/html5/thumbnails/39.jpg)
� Create a point-of-view from the most compelling need that your group-mates discovered in class last week
� As a group, on a sheet of paper, write down your point-of-view sentence and draw a 4-panel storyboard that illustrates a potential technology solution to a need you identified (don’t focus on UI or technical details).
STORYBOARD = Setting + Sequence + Satisfaction
![Page 40: Human-Computer Interaction Design - University of …ixd.ucsd.edu/home/f16/lectures/IntroHCI-f16-Week2.pdf · · 2016-10-24Human-Computer Interaction Design COGS120/CSE170 - “Intro](https://reader033.vdocuments.mx/reader033/viewer/2022051803/5afe79057f8b9a434e8f250d/html5/thumbnails/40.jpg)
NOW I WILL TRY TO EXPLAIN YOUR STORYBOARDS Who wants to volunteer?
![Page 41: Human-Computer Interaction Design - University of …ixd.ucsd.edu/home/f16/lectures/IntroHCI-f16-Week2.pdf · · 2016-10-24Human-Computer Interaction Design COGS120/CSE170 - “Intro](https://reader033.vdocuments.mx/reader033/viewer/2022051803/5afe79057f8b9a434e8f250d/html5/thumbnails/41.jpg)
Learning Objective to create prototypes of varying degrees of fidelity throughout the design process.
TODOs after class - Make sure you're registered for Gradescope - Assignment 1 due Thursday night on Gradescope