comp 3020: human-computer interaction...
TRANSCRIPT
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
User Centered Design Process
2
Produce something tangibleIdentify challengesUncover subtleties
COMP 3020
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
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
Low-Fidelity Prototyping
How:
Paper-based sketches
Paper prototypes
Physical mock-ups using paper, cardboard
5COMP 3020
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
paper prototype
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
paper prototypes
Examples:http://speckyboy.com/2010/06/24/10-effective-video-examples-of-paper-prototyping/
COMP 3020 9
tangible prototypes
COMP 3020 10
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
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
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
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
vertical vs. horizontal prototypes
15
Vertical prototype(e.g., photoshopmock up)
Scenario
Horizontal prototype(e.g., paper prototype)
Full interface
high(er)-fidelity prototyping
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
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
horizontal high-fi prototypes
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
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
prototyping tools
• https://www.youtube.com/watch?v=KWGBGTGryFk&t=6s
vertical high-fi prototypes
(a common focus for HCI research!!!)
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
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
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
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
Wizard of Oz: anti-gravity bar
http://www.youtube.com/watch?v=DL9cAcQ-gKQd
28
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
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
robot interaction – how to test?
robot interaction
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
34
video prototype - very powerful and convincing as it can look perfect
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
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
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