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