Paper PrototypingIS 403 – Fall 2013 6

2

Admin• TODAY: Paper prototyping

• Thursday: HTML programming in ENGR 104A (not here)

• Making up participation

• Project ideas?

3

But first, scenarios

4

Scenarios• A descriptive story about a use of your

design

• Designed to capture– User’s goals– User’s steps– Environmental context

5

How scenarios are used• Create during design process, keep

throughout

• Help balance design decisions

• Typical projects may have 5 to 500 scenarios

6

Example scenarios• From http://www.usability.gov/how-to-and-

tools/methods/scenarios.html

7

8

Elaborated Scenarios give more user story details. These details give the Web team a deeper understanding of the users and users’ characteristics that may help or hinder site interaction. Knowing this information, the team is more likely to develop content, functionality, and site behavior that users find comfortable and easy to work with.

9

Mr. and Mrs. Macomb are retired schoolteachers who are now in their 70s. Their Social Security checks are an important part of their income. They've just sold their big house and moved to a small apartment. They know that one of the many chores they need to do now is tell the Social Security Administration that they have moved. They don't know where the nearest Social Security office is and it's getting harder for them to do a lot of walking or driving. If it is easy and safe enough, they would like to use the computer to notify the Social Security Administration of their move. However, they are somewhat nervous about doing a task like this by computer. They never used computers in their jobs. However, their son, Steve, gave them a computer last year, set it up for them, and showed them how to use email and go to websites. They have never been to the Social Security Administration's website, so they don't know how it is organized. Also, they are reluctant to give out personal information online, so they want to know how safe it is to tell the agency about their new address this way.

10

Back to paper prototyping• Why?• How to do it• Clever examples

What is a prototype?• Prototype = “working” model• Full-size or to scale• Fully or partially functioning• Limited representation of an idea

• Common in almost every field of engineering design– Airplanes, chemical structures, architecture…

• In HCI prototypes may be virtual or physical

Prototype Examples• A series of screen sketches (paper)

• A storyboard, cartoon-like series of scenes illustrating key points of a scenario

• A PowerPoint Slide show

• A video simulating the use of a system

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

• An electronic mock-up (hardware)

• A cardboard mock-up

13

Why prototype?

Why Prototype?• To identify user interface and functional requirements

– Almost impossible to specify in advance• Can’t always get things right the first time…

Why Prototype?• Reveals problems/prevents

mistakes• Building artifacts immediately

leads to costly errors– We did not have to consider

the stove, cup holder, or door to see the design flaws, we only considered pictures of them

Why Prototype?• Enables quick evaluation and feedback

throughout design process• Fosters discussion, reflection and innovative ideas

(from designers and users): concrete artifact• Keeps design focused on users• Cheap, easy way to test designs with users

– Help choose between design alternatives (risky/critical features, go/no-go decisions)

– Help answer specific questions– Users enjoy prototyping and feel involved– Provides continuous feedback on the current design

situation

Prototyping: When/How?Brainstorm different representationsChoose a representationRough out interface Style

Task centered walkthrough and redesign

Fine tune interface, screen designHeuristic evaluation and redesignUsability testing and redesign

Limited field testing

Alpha/Beta tests

Low fidelity paper prototypes

Medium fidelity prototypes

High fidelity prototypes

Working Systems

Early Design

Late Design

Different types of prototypes• Fidelity: High vs. low• Scope: Horizontal vs. vertical• Materials: Paper, PowerPoint, screen…

Prototype Compromises• All prototypes involve compromises…

Identify the compromises being made• Examples of compromises in software-based

prototyping: – Slow reaction time– Limited functionality– Use “placeholder” images: clipart, stock icons– Simulate data or input

• Two common types of compromise: horizontal and vertical

Fidelity in Prototyping• Low Fidelity

– Quickly made representations of interface, interaction is imagined

• Medium Fidelity– Prototypes that are more finalized than low

fidelity, simulate interaction• High Fidelity

– Prototypes that look like the final product, build interaction elements

– Will cover in a future lecture….

Horizontal vs. Vertical

Horizontal“thin” prototype

Vertical“thick” prototype

Horizontal vs. Vertical• Horizontal Designs

– First level of user interface is fully present– No, or limited, functionality (but looks complete)– Fast implementation– Full extent of interface can be tested, but not in a real-use

context– Often does not capture the interaction “feel”

• Vertical Designs– Restricted to a subset of the system– This subset offers the interface and functionality– Can undertake realistic testing

Fidelity• Designers create prototypes at multiple

levels of detail, or Fidelity• Example: Web sites are iteratively refined

at all levels of detailSite Maps Storyboards Schematics Mock-ups

Low HighFidelity

Fidelity Example

Fidelity in Prototyping• Low Fidelity

– Quickly made representations of interface, interaction is imagined

• Medium Fidelity– Prototypes that are more finalized than low

fidelity, simulate interaction• High Fidelity

– Prototypes that look like the final product, build interaction elements

– Will cover in a future lecture….

Wizard of Oz• A method of testing a system that does

not exist yet• Example: a system that transcribes text.

What the user sees The Wizard

27

How to do low fidelity prototyping

• You need: 3 people– 1 participant– 1 “computer”– Someone to take notes (observer)

• You need: a quiet place– What is a good location?

• You need: example tasks– What are good tasks?

What tools do I need?

Suggestions?

What is this device?

Index Cards• Index cards (3”x5”)… a great size!• Each card represents one screen or one

element of a task• Great for software prototypes with multiple

screens– Website design– Mobile devices– Windows of software

Index Cards (Example)• Include enough detail for users to interact

with the prototype

Useful Low Fidelity Tools• Large, heavy, white paper• Index cards• Tape, stick glue, correction tape• Pens & markers (many colors

and sizes)• Large sheet of foam core,

poster board, butcher paper• Scissors, X-acto knives• Band-aids

Explore your local art store for supplies!

Make a Low Fidelity PrototypeOnce you like your layout,

you can focus on details of the design– example data values,

menu content, buttons, labels, etc

– More specific layout of interface objects

– You can even annotate your paper prototype!

Fancier Low Fidelity PrototypesOnce the details are

ironed out, you can create your interface “toolkit”– Cut out each of the

components (windows,dialogs,menus,etc) into it’s own window

• These can be used to dynamically simulate the entire interface following a storyboard, or flow.

Storyboarding

36

Paper prototyping activity• Let’s make: a mobile app for browsing

courses at UMBC, viewing reviews, adding reviews

• Tasks:– Search for class by course name/number– Browse reviews for a class– Add a review for a class

Prototyping Examples• Pieces of paper

http://www.youtube.com/watch?v=ykJ60H4Qkvg&feature=related

• Simulated screen with paperhttp://www.youtube.com/watch?v=oITeUEjrY3Q&feature=related

• Cell phone testinghttp://www.youtube.com/watch?v=Bq1rkVTZLtU&feature=related

• Prototype usability testing http://www.youtube.com/watch?v=L7oPR2aTGlM&feature=related

• Complete prototyping processhttp://www.youtube.com/watch?v=5Ch3VsautWQ

• Kid’s game design (what not to do)http://www.youtube.com/watch?v=L3yl9vaJuFE&feature=related