Download - Paper Prototyping IS 403 – Fall 2013 6
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