comp 3020: human-computer interaction...
TRANSCRIPT
![Page 1: COMP 3020: Human-Computer Interaction Ics.umanitoba.ca/~young/Files/Courses/3020F17/13-Prototype-2.pdfpaper-prototyping/ COMP 3020 9. tangible prototypes. COMP 3020 10. low-fidelity](https://reader033.vdocuments.mx/reader033/viewer/2022060506/5f1f5546b3314605c37e788b/html5/thumbnails/1.jpg)
COMP 3020: Human-Computer Interaction I
Low fidelity prototypesFall 2017
James Young, with acknowledgements to Anthony Tang, Andrea Bunt, Pourang Irani, Julie Kientz, Saul Greenberg, Ehud Sharlin, Jake Wobbrock, Dave Hendry, Andy Ko, Jennifer Turns, & Mark Zachry
![Page 2: COMP 3020: Human-Computer Interaction Ics.umanitoba.ca/~young/Files/Courses/3020F17/13-Prototype-2.pdfpaper-prototyping/ COMP 3020 9. tangible prototypes. COMP 3020 10. low-fidelity](https://reader033.vdocuments.mx/reader033/viewer/2022060506/5f1f5546b3314605c37e788b/html5/thumbnails/2.jpg)
User Centered Design Process
2
Produce something tangibleIdentify challengesUncover subtleties
COMP 3020
![Page 3: COMP 3020: Human-Computer Interaction Ics.umanitoba.ca/~young/Files/Courses/3020F17/13-Prototype-2.pdfpaper-prototyping/ COMP 3020 9. tangible prototypes. COMP 3020 10. low-fidelity](https://reader033.vdocuments.mx/reader033/viewer/2022060506/5f1f5546b3314605c37e788b/html5/thumbnails/3.jpg)
what is a prototype?
a prototype is defined less by form, and more by its function:
A prototype expresses and realizes a design concept for the purposes of trying it out and for communication.
3
prototype qualitiesFastDisposableFocused
role of prototypesTest | Get feedbackCommunicatePersuade
![Page 4: COMP 3020: Human-Computer Interaction Ics.umanitoba.ca/~young/Files/Courses/3020F17/13-Prototype-2.pdfpaper-prototyping/ COMP 3020 9. tangible prototypes. COMP 3020 10. low-fidelity](https://reader033.vdocuments.mx/reader033/viewer/2022060506/5f1f5546b3314605c37e788b/html5/thumbnails/4.jpg)
prototyping phases
brainstorm different representationschoose a representation
sketch out interface styletask centered walkthrough
fine tune interface, screen designheuristic evaluation and redesign
usability testing and redesign
limited field testing
alpha/Beta tests
low fidelity prototypes
medium-fidelity prototypes
high-fidelity prototypes / restricted systems
working systems
Early design
Late design4COMP 3020
less cost
more cost
![Page 5: COMP 3020: Human-Computer Interaction Ics.umanitoba.ca/~young/Files/Courses/3020F17/13-Prototype-2.pdfpaper-prototyping/ COMP 3020 9. tangible prototypes. COMP 3020 10. low-fidelity](https://reader033.vdocuments.mx/reader033/viewer/2022060506/5f1f5546b3314605c37e788b/html5/thumbnails/5.jpg)
Low-Fidelity Prototyping
How:
Paper-based sketches
Paper prototypes
Physical mock-ups using paper, cardboard
5COMP 3020
![Page 6: COMP 3020: Human-Computer Interaction Ics.umanitoba.ca/~young/Files/Courses/3020F17/13-Prototype-2.pdfpaper-prototyping/ COMP 3020 9. tangible prototypes. COMP 3020 10. low-fidelity](https://reader033.vdocuments.mx/reader033/viewer/2022060506/5f1f5546b3314605c37e788b/html5/thumbnails/6.jpg)
paper prototyping
Hand-drawn interfaces
interactive
Elements can be added, modified, etc. based on user actions
Purpose
Instantiate/explore/refine specific ideas and interactions
6COMP 3020
![Page 7: COMP 3020: Human-Computer Interaction Ics.umanitoba.ca/~young/Files/Courses/3020F17/13-Prototype-2.pdfpaper-prototyping/ COMP 3020 9. tangible prototypes. COMP 3020 10. low-fidelity](https://reader033.vdocuments.mx/reader033/viewer/2022060506/5f1f5546b3314605c37e788b/html5/thumbnails/7.jpg)
paper prototype
![Page 8: COMP 3020: Human-Computer Interaction Ics.umanitoba.ca/~young/Files/Courses/3020F17/13-Prototype-2.pdfpaper-prototyping/ COMP 3020 9. tangible prototypes. COMP 3020 10. low-fidelity](https://reader033.vdocuments.mx/reader033/viewer/2022060506/5f1f5546b3314605c37e788b/html5/thumbnails/8.jpg)
paper prototyping
have cutouts of, e.g., finger, mouseuse sticky notes to make widgets and screens on the flyuse transparencies for overlays, backgrounds, etc.
how to draw on transparencies?white board markers!
8COMP 3020
![Page 9: COMP 3020: Human-Computer Interaction Ics.umanitoba.ca/~young/Files/Courses/3020F17/13-Prototype-2.pdfpaper-prototyping/ COMP 3020 9. tangible prototypes. COMP 3020 10. low-fidelity](https://reader033.vdocuments.mx/reader033/viewer/2022060506/5f1f5546b3314605c37e788b/html5/thumbnails/9.jpg)
paper prototypes
Examples:http://speckyboy.com/2010/06/24/10-effective-video-examples-of-paper-prototyping/
COMP 3020 9
![Page 10: COMP 3020: Human-Computer Interaction Ics.umanitoba.ca/~young/Files/Courses/3020F17/13-Prototype-2.pdfpaper-prototyping/ COMP 3020 9. tangible prototypes. COMP 3020 10. low-fidelity](https://reader033.vdocuments.mx/reader033/viewer/2022060506/5f1f5546b3314605c37e788b/html5/thumbnails/10.jpg)
tangible prototypes
COMP 3020 10
![Page 11: COMP 3020: Human-Computer Interaction Ics.umanitoba.ca/~young/Files/Courses/3020F17/13-Prototype-2.pdfpaper-prototyping/ COMP 3020 9. tangible prototypes. COMP 3020 10. low-fidelity](https://reader033.vdocuments.mx/reader033/viewer/2022060506/5f1f5546b3314605c37e788b/html5/thumbnails/11.jpg)
low-fidelity prototyping
Some issues
Sometimes difficult to fake/simulate behavior
Can miss nuances of actual technology (e.g., choppy animation, responsiveness, etc.)
Client (i.e., the person paying you) might be confused by the lack of programming
Can give a mistaken impression of how hard stuff is
User/client feedback might involve requests for things that are extremely difficult to implement (e.g., gesture recognition)
11COMP 3020
![Page 12: COMP 3020: Human-Computer Interaction Ics.umanitoba.ca/~young/Files/Courses/3020F17/13-Prototype-2.pdfpaper-prototyping/ COMP 3020 9. tangible prototypes. COMP 3020 10. low-fidelity](https://reader033.vdocuments.mx/reader033/viewer/2022060506/5f1f5546b3314605c37e788b/html5/thumbnails/12.jpg)
Additional videos for at home
Prototyping and user feedback in a tight loophttp://www.youtube.com/watch?v=szr0ezLyQHY
Iphone paper prototypehttp://www.youtube.com/watch?v=6TbyXq3XHSc
12
![Page 13: COMP 3020: Human-Computer Interaction Ics.umanitoba.ca/~young/Files/Courses/3020F17/13-Prototype-2.pdfpaper-prototyping/ COMP 3020 9. tangible prototypes. COMP 3020 10. low-fidelity](https://reader033.vdocuments.mx/reader033/viewer/2022060506/5f1f5546b3314605c37e788b/html5/thumbnails/13.jpg)
prototype “types”: two dimension classification schemehigh vs. medium vs. low fidelity
choice of medium is close to or far from that of the final designe.g. high = software; low = paper prototype
horizontal vs. verticalrange of capabilities in the prototypehorizontal = wide range of features without full “implementation” of anyvertical = select features are “implemented” all the way through
13
![Page 14: COMP 3020: Human-Computer Interaction Ics.umanitoba.ca/~young/Files/Courses/3020F17/13-Prototype-2.pdfpaper-prototyping/ COMP 3020 9. tangible prototypes. COMP 3020 10. low-fidelity](https://reader033.vdocuments.mx/reader033/viewer/2022060506/5f1f5546b3314605c37e788b/html5/thumbnails/14.jpg)
Limiting Functionality – too hard to prototype everything at onceVertical prototypes
includes in-depth functionality for only a few selected featurescommon design ideas can be tested in depth
Horizontal prototypesthe entire surface interface with no underlying functionalitya simulation; no real work can be performed
Scenarioscripts of particular, fixed uses of the system; no deviation allowed
COMP 3020 14
![Page 15: COMP 3020: Human-Computer Interaction Ics.umanitoba.ca/~young/Files/Courses/3020F17/13-Prototype-2.pdfpaper-prototyping/ COMP 3020 9. tangible prototypes. COMP 3020 10. low-fidelity](https://reader033.vdocuments.mx/reader033/viewer/2022060506/5f1f5546b3314605c37e788b/html5/thumbnails/15.jpg)
vertical vs. horizontal prototypes
15
Vertical prototype(e.g., photoshopmock up)
Scenario
Horizontal prototype(e.g., paper prototype)
Full interface
![Page 16: COMP 3020: Human-Computer Interaction Ics.umanitoba.ca/~young/Files/Courses/3020F17/13-Prototype-2.pdfpaper-prototyping/ COMP 3020 9. tangible prototypes. COMP 3020 10. low-fidelity](https://reader033.vdocuments.mx/reader033/viewer/2022060506/5f1f5546b3314605c37e788b/html5/thumbnails/16.jpg)
high(er)-fidelity prototyping
![Page 17: COMP 3020: Human-Computer Interaction Ics.umanitoba.ca/~young/Files/Courses/3020F17/13-Prototype-2.pdfpaper-prototyping/ COMP 3020 9. tangible prototypes. COMP 3020 10. low-fidelity](https://reader033.vdocuments.mx/reader033/viewer/2022060506/5f1f5546b3314605c37e788b/html5/thumbnails/17.jpg)
prototyping phases
brainstorm different representationschoose a representation
sketch out interface styletask centered walkthrough
fine tune interface, screen designheuristic evaluation and redesign
usability testing and redesign
limited field testing
alpha/Beta tests
low fidelity prototypes
medium-fidelity prototypes
high-fidelity prototypes / restricted systems
working systems
Early design
Late design17COMP 3020
less cost
more cost
![Page 18: COMP 3020: Human-Computer Interaction Ics.umanitoba.ca/~young/Files/Courses/3020F17/13-Prototype-2.pdfpaper-prototyping/ COMP 3020 9. tangible prototypes. COMP 3020 10. low-fidelity](https://reader033.vdocuments.mx/reader033/viewer/2022060506/5f1f5546b3314605c37e788b/html5/thumbnails/18.jpg)
high(er)-fidelity prototyping
prototyping with a computersimulate some but not all features of the interface
engaging for end users (requires little imagination)
purposeprovides sophisticated but limited scenario for the user to try
can test more subtle design issues
proof of concept
![Page 19: COMP 3020: Human-Computer Interaction Ics.umanitoba.ca/~young/Files/Courses/3020F17/13-Prototype-2.pdfpaper-prototyping/ COMP 3020 9. tangible prototypes. COMP 3020 10. low-fidelity](https://reader033.vdocuments.mx/reader033/viewer/2022060506/5f1f5546b3314605c37e788b/html5/thumbnails/19.jpg)
horizontal high-fi prototypes
![Page 20: COMP 3020: Human-Computer Interaction Ics.umanitoba.ca/~young/Files/Courses/3020F17/13-Prototype-2.pdfpaper-prototyping/ COMP 3020 9. tangible prototypes. COMP 3020 10. low-fidelity](https://reader033.vdocuments.mx/reader033/viewer/2022060506/5f1f5546b3314605c37e788b/html5/thumbnails/20.jpg)
prototyping with mock-up tools…PowerPoint, photoshop, etc. can also be used to simulate very specific interaction scenarios
Limits flexibility, but more concrete -> higher end of low-fidelity prototype
http://www.boxesandarrows.com/files/banda/interactive/SamplePrototype.ppt
20
![Page 21: COMP 3020: Human-Computer Interaction Ics.umanitoba.ca/~young/Files/Courses/3020F17/13-Prototype-2.pdfpaper-prototyping/ COMP 3020 9. tangible prototypes. COMP 3020 10. low-fidelity](https://reader033.vdocuments.mx/reader033/viewer/2022060506/5f1f5546b3314605c37e788b/html5/thumbnails/21.jpg)
interface builders(or html+css without logic)
tools for letting a designer lay out the common widgets
excellent for showing look and feel
looks familiar to users
often constrained to library
vertical functionality added selectivelythrough programming
COMP 3020 21
![Page 22: COMP 3020: Human-Computer Interaction Ics.umanitoba.ca/~young/Files/Courses/3020F17/13-Prototype-2.pdfpaper-prototyping/ COMP 3020 9. tangible prototypes. COMP 3020 10. low-fidelity](https://reader033.vdocuments.mx/reader033/viewer/2022060506/5f1f5546b3314605c37e788b/html5/thumbnails/22.jpg)
prototyping tools
• https://www.youtube.com/watch?v=KWGBGTGryFk&t=6s
![Page 23: COMP 3020: Human-Computer Interaction Ics.umanitoba.ca/~young/Files/Courses/3020F17/13-Prototype-2.pdfpaper-prototyping/ COMP 3020 9. tangible prototypes. COMP 3020 10. low-fidelity](https://reader033.vdocuments.mx/reader033/viewer/2022060506/5f1f5546b3314605c37e788b/html5/thumbnails/23.jpg)
vertical high-fi prototypes
(a common focus for HCI research!!!)
![Page 24: COMP 3020: Human-Computer Interaction Ics.umanitoba.ca/~young/Files/Courses/3020F17/13-Prototype-2.pdfpaper-prototyping/ COMP 3020 9. tangible prototypes. COMP 3020 10. low-fidelity](https://reader033.vdocuments.mx/reader033/viewer/2022060506/5f1f5546b3314605c37e788b/html5/thumbnails/24.jpg)
prototyping functionality: Wizard-of-Oz
common problem: it’s difficult to prototype some piece of functionality
need: test whether it is actually good before building it!!!
solution: fake it! Make the interaction as authentic as possible
key: user has no idea that the interaction is being faked
24
![Page 25: COMP 3020: Human-Computer Interaction Ics.umanitoba.ca/~young/Files/Courses/3020F17/13-Prototype-2.pdfpaper-prototyping/ COMP 3020 9. tangible prototypes. COMP 3020 10. low-fidelity](https://reader033.vdocuments.mx/reader033/viewer/2022060506/5f1f5546b3314605c37e788b/html5/thumbnails/25.jpg)
Wizard of Oz
25
A method of testing a system that does not existthe listening typewriter, IBM 1983
Dear Henry
What the user sees
SpeechComputer
![Page 26: COMP 3020: Human-Computer Interaction Ics.umanitoba.ca/~young/Files/Courses/3020F17/13-Prototype-2.pdfpaper-prototyping/ COMP 3020 9. tangible prototypes. COMP 3020 10. low-fidelity](https://reader033.vdocuments.mx/reader033/viewer/2022060506/5f1f5546b3314605c37e788b/html5/thumbnails/26.jpg)
Wizard of Oz
26
A method of testing a system that does not existthe listening typewriter, IBM 1984
What the user sees The wizard
SpeechComputer
Dear Henry
Dear Henry
![Page 27: COMP 3020: Human-Computer Interaction Ics.umanitoba.ca/~young/Files/Courses/3020F17/13-Prototype-2.pdfpaper-prototyping/ COMP 3020 9. tangible prototypes. COMP 3020 10. low-fidelity](https://reader033.vdocuments.mx/reader033/viewer/2022060506/5f1f5546b3314605c37e788b/html5/thumbnails/27.jpg)
Wizard of Oz: the point
Up until the point the wizard is discovered, the thoughts, feelings, and actions of Dorothy and the others were all genuine
They were genuinely experiencing what it would be like to talk to a powerful and terrible wizard
27
![Page 28: COMP 3020: Human-Computer Interaction Ics.umanitoba.ca/~young/Files/Courses/3020F17/13-Prototype-2.pdfpaper-prototyping/ COMP 3020 9. tangible prototypes. COMP 3020 10. low-fidelity](https://reader033.vdocuments.mx/reader033/viewer/2022060506/5f1f5546b3314605c37e788b/html5/thumbnails/28.jpg)
Wizard of Oz: anti-gravity bar
http://www.youtube.com/watch?v=DL9cAcQ-gKQd
28
![Page 29: COMP 3020: Human-Computer Interaction Ics.umanitoba.ca/~young/Files/Courses/3020F17/13-Prototype-2.pdfpaper-prototyping/ COMP 3020 9. tangible prototypes. COMP 3020 10. low-fidelity](https://reader033.vdocuments.mx/reader033/viewer/2022060506/5f1f5546b3314605c37e788b/html5/thumbnails/29.jpg)
Wizard-of-Oz: some issues
not always as easy as it seemsneed some means of controlling systemmay need ways to perform hard computations quickly
must be realisticIf simulating error-prone technology (e.g., speech recognition), must include such errors in testing
29COMP 3020
![Page 30: COMP 3020: Human-Computer Interaction Ics.umanitoba.ca/~young/Files/Courses/3020F17/13-Prototype-2.pdfpaper-prototyping/ COMP 3020 9. tangible prototypes. COMP 3020 10. low-fidelity](https://reader033.vdocuments.mx/reader033/viewer/2022060506/5f1f5546b3314605c37e788b/html5/thumbnails/30.jpg)
High-Fidelity Prototyping: Issues
Feedback often minimal and detail-oriented
Users reluctant to challenge designer
Little reflection on overall interaction or information flow
Client/management may think its real!
COMP 3020 30
![Page 31: COMP 3020: Human-Computer Interaction Ics.umanitoba.ca/~young/Files/Courses/3020F17/13-Prototype-2.pdfpaper-prototyping/ COMP 3020 9. tangible prototypes. COMP 3020 10. low-fidelity](https://reader033.vdocuments.mx/reader033/viewer/2022060506/5f1f5546b3314605c37e788b/html5/thumbnails/31.jpg)
robot interaction – how to test?
![Page 32: COMP 3020: Human-Computer Interaction Ics.umanitoba.ca/~young/Files/Courses/3020F17/13-Prototype-2.pdfpaper-prototyping/ COMP 3020 9. tangible prototypes. COMP 3020 10. low-fidelity](https://reader033.vdocuments.mx/reader033/viewer/2022060506/5f1f5546b3314605c37e788b/html5/thumbnails/32.jpg)
robot interaction
![Page 33: COMP 3020: Human-Computer Interaction Ics.umanitoba.ca/~young/Files/Courses/3020F17/13-Prototype-2.pdfpaper-prototyping/ COMP 3020 9. tangible prototypes. COMP 3020 10. low-fidelity](https://reader033.vdocuments.mx/reader033/viewer/2022060506/5f1f5546b3314605c37e788b/html5/thumbnails/33.jpg)
prototyping functionality: video prototypingprototype functionality without needing to be physically present (unlike paper prototypes)
constrains you to a limited scenario
no interaction
https://speckyboy.com/10-effective-video-examples-of-paper-prototyping/
33
![Page 34: COMP 3020: Human-Computer Interaction Ics.umanitoba.ca/~young/Files/Courses/3020F17/13-Prototype-2.pdfpaper-prototyping/ COMP 3020 9. tangible prototypes. COMP 3020 10. low-fidelity](https://reader033.vdocuments.mx/reader033/viewer/2022060506/5f1f5546b3314605c37e788b/html5/thumbnails/34.jpg)
34
video prototype - very powerful and convincing as it can look perfect
![Page 35: COMP 3020: Human-Computer Interaction Ics.umanitoba.ca/~young/Files/Courses/3020F17/13-Prototype-2.pdfpaper-prototyping/ COMP 3020 9. tangible prototypes. COMP 3020 10. low-fidelity](https://reader033.vdocuments.mx/reader033/viewer/2022060506/5f1f5546b3314605c37e788b/html5/thumbnails/35.jpg)
summary … hi-fi vs. lo-fiLo-Fi Hi-Fi
Advantages » ***fast***, explore» cheap» easy – kindergarten skills!» can simulate actual product» great way to communicate with / get feedback from stakeholders» evaluate multiple ideas» encourage criticism
» better sense of finished product» interactive» can judge aesthetic appeal» more realistic experience» can evaluate the experience better» probably more convincing for stakeholders
Disadvantages » slow response time» can’t get feedback about aesthetics» poor error checking» user may question design quality» limited use for usability, testing
» users may focus on unnecessary details» takes a lot of time to make» users may lose track of big picture» not effective for developing requirements (why?)
35
![Page 36: COMP 3020: Human-Computer Interaction Ics.umanitoba.ca/~young/Files/Courses/3020F17/13-Prototype-2.pdfpaper-prototyping/ COMP 3020 9. tangible prototypes. COMP 3020 10. low-fidelity](https://reader033.vdocuments.mx/reader033/viewer/2022060506/5f1f5546b3314605c37e788b/html5/thumbnails/36.jpg)
summary…prototypes
vertical prototypesincludes in-depth functionality for only a few selected features
common design ideas can be tested in depth
horizontal prototypesthe entire surface interface with no underlying functionality
a simulation; no real work or task can be performed
COMP 3020 36
![Page 37: COMP 3020: Human-Computer Interaction Ics.umanitoba.ca/~young/Files/Courses/3020F17/13-Prototype-2.pdfpaper-prototyping/ COMP 3020 9. tangible prototypes. COMP 3020 10. low-fidelity](https://reader033.vdocuments.mx/reader033/viewer/2022060506/5f1f5546b3314605c37e788b/html5/thumbnails/37.jpg)
which prototyping method is best?Choose the method that works best for what you are trying to achieve (pragmatics).
user flow » storyboardscreen layouts/page flow » paper prototypesoverall experience » video prototypelook and feel » PowerPoint or PSDfunctionality » software… etc.
Alternately, early on, use techniques that are cheap and quick; later on, use techniques that give a stronger sense of finished idea.
37