Prototyping

Oct 3, 2016

Announcements

A1 marks available

A2 due Wednesday

Fall 2016 COMP 3020

Questions?

Fall 2016 COMP 3020

What is a prototype?

In interaction design a prototype can be (among other things):

a series of screen sketches

a storyboard, i.e. a cartoon-like series of scenes

a Powerpoint slide show, e.g., simulation

a video simulating the use of a system

a lump of wood (e.g. PalmPilot)

a cardboard mock-up

a piece of software with limited functionality written in the target language or in another language

Fall 2016 COMP 3020

Why Prototype?

Prototypes are useful for numerous purposes including:

Promoting reflection (Schon 1983)

Clarifying requirements

Exploring alternatives

Initial user testing

Fall 2016 COMP 3020

What to Prototype

Screen layouts and information display: placement of different widgets, types of widgets, etc

e.g. should edit fields come after/before control buttons

Work flow, task design: the sequence of steps required to achieve the task

e.g. flow from one screen to another, changes on the screen

Difficult, controversial, critical areas:provide alternative solutions to be assessed

e.g. business critical reports with specific alignment of fields

Technical issues:E.g., will the graphics rendered be fast enough?

Fall 2016 COMP 3020

Low-Fidelity Prototyping

How:

Paper-based sketches

Physical mock-ups using paper, cardboard

Fall 2016 COMP 3020

Paper Prototyping

Two common types:

Index cards

Storyboards

Fall 2016 COMP 3020

Storyboards

Fall 2016 COMP 3020

Low-Fidelity Prototyping

Some issues

Sometimes difficult to fake/simulate behaviour

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., speech recognition)

Fall 2016 COMP 3020

Higher-Fidelity Prototyping

Prototyping with a computer

Simulate some but not all features of the interface

Purpose

Provides sophisticated but limited scenario for the user to try

Can test more subtle design issues

Fall 2016 COMP 3020

Limiting Functionality

Vertical prototypes

includes in-depth functionality for only a few selected features

common design ideas can be tested in depth

Horizontal prototypes

the entire surface interface with no underlying functionality

a simulation; no real work can be performed

Scenario

scripts of particular, fixed uses of the system; no deviation allowed (i.e., system won’t work with deviations)

Fall 2016 COMP 3020

Limiting Functionality

Fall 2016 COMP 3020

Vertical prototype

Horizontal prototype

Scenario

Full System

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

Fall 2016 COMP 3020

Interface Builders (or HTML + CSS with no interactivity)

tools for letting a designer lay out the common widgets

excellent for showing look and feela broader horizontal prototypebut constrained to widget library

vertical functionality added selectivelythrough programming

Fall 2016 COMP 3020

vertical high-fi prototypes

(a common focus for HCI research!!!)

Fall 2016 COMP 3020

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

Fall 2016 COMP 3020

Wizard of OzA method of testing a system that does not exist

the listening typewriter, IBM 1983

Dear Henry

What the user sees

Speech

Computer

Fall 2016 COMP 3020

Wizard of Oz

A method of testing a system that does not existthe listening typewriter, IBM 1984

What the user sees The wizard

Speech

Computer

Dear Henry

Dear Henry

Fall 2016 COMP 3020

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

Fall 2016 COMP 3020

Wizard of Oz: anti-gravity bar

http://www.youtube.com/watch?v=DL9cAcQ-gKQd

Fall 2016 COMP 3020

Wizard-of-Oz: some issues

not always as easy as it seems

need some means of controlling system

may need ways to perform hard computations quickly

must be realistic

If simulating error-prone technology (e.g., speech recognition), must include such errors in testing

COMP 3020Fall 2016

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!

Fall 2016 COMP 3020

Summary: Hi-Fi vs. Lo-Fi

Lo-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?)

Fall 2016 COMP 3020

Summary: Prototypes

Vertical prototypes

includes in-depth functionality for only a few selected features

common design ideas can be tested in depth

Horizontal prototypes

the entire surface interface with no underlying functionality

a simulation; no real work can be performed

COMP 3020Fall 2016

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 » PowerPointfunctionality » software… etc.

Alternately, maybe you are at different stages in the design. Early on, use techniques that are cheap and quick; later on, use techniques that give a stronger sense of finished idea.

Fall 2016 COMP 3020

Lifetime of Prototypes

Question: how do we integrate prototyping into the overall development cycle?

Three methods for managing this integration:

1. evolutionary

2. modular (incremental)

3. throw-away

Fall 2016 COMP 3020

Evolutionary Prototypes

design prototype

implement prototype

test prototype

system

iteratively change the prototype to incorporate changes

eventually, the reworked prototype becomes the final systemFall 2016 COMP 3020

Modular (Incremental) Prototyping

Design component

Implement component

Test component

system

Build the system as separate modules/components

Each module is designed, prototyped and build separately before being combed into a final system

Design component

Implement component

Test component

Design component

Implement component

Test component

Fall 2016 COMP 3020

Throw-Away PrototypingDesign

prototype

Implement prototype

Test prototypePrototype is used to

get rapid feedback (i.e. to learn lessons)

Prototype is built, tested, and deployed (or discarded)

Design prototype

Implement prototype

Test prototype

Design prototype

Implement prototype

Test prototype

Fall 2016 COMP 3020

Summary: Prototyping

Prototyping is a very useful way to help reduce the number of designs by:

trying them, getting input on them, exploring if they would actually work, etc.

We learned about a range of high and low-fidelity prototyping methods, for both horizontal and vertical prototypes

Prototyping can be integrated into the product design cycle in various ways, including as evolutionary, modular, and throwaway prototypes

Fall 2016 COMP 3020