Prototyping

Lecture 5

Credits
Some of the contents of these slides are gotten from the following sources:

Interaction Design: Beyond Human Computer Interaction (Authors: Rogers, Y., Sharp, H. and
Preece, J. (2007)) 4th Edition, Wiley & Son.
MIT 6.813/6.831 User interface design and implementation lecture notes (spring 2013 Lecture
10)

Readings
Chapters 11 of Interaction Design: Beyond Human Computer Interaction (Authors:
Rogers, Y., Sharp, H. and Preece, J. (2007)) 4th Edition, Wiley & Son.
Lecture note 10 of MIT 6.813/6.831 User interface design and implementation lecture
notes (spring 2013).

Content
Types of design
Prototyping
Paper prototype
Computer prototype

Types of Design
Conceptual
developing a conceptual model that captures what the product will do and
how it will behave

Concrete
concerned with details of the design such as screen and menu structures,
icons, and graphics

What to know about users

It is often said that users can't tell you what they want, but when
they see something and get to use it, they soon know what they don't
want.

Circumstances for Design

Creation of a new product (starting from scratch)
Modification of an existing product

What is a prototype?
A prototype can be described as a question rendered as an artefact
A prototype can be anything from a paper-based storyboard
through to a complex piece of software, and from a cardboard
mockup to a molded or pressed piece of metal.
A prototype allows stakeholders to interact with an envisioned
product, to gain some experience of using it in a realistic setting,
and to explore imagined uses.

Prototyping is a strategy for

efficiently dealing with things
that are hard to predict

Reasons for Prototyping

solicit feedback
answer questions and support designers in choosing between alternatives
test out the technical feasibility of an idea
clarify some vague requirements
do some user testing and evaluation
check that a certain design direction is compatible with the rest of the system
development.

Types of prototype
Low-fidelity
Hi-fidelity

Fidelity is multidimensional

Other Dimensions of Fidelity

Comparing Fidelity of Look and Feel

Low-fidelity prototype
A low-fidelity prototype is one that does not look very much like the final
product.
It uses materials that are very different from the intended final version, such as
paper and cardboard rather than electronic screens and metal.
Low-fidelity prototypes are useful because they tend to be simple, cheap, and
quick to produce.
They are never intended to be kept and integrated into the final product. They
are for exploration only.

What to prototype?
Technical issues
Work flow, task design
Screen layouts and information display
Difficult, controversial, critical areas

Houde & Hill

www.id-book.com

16

Low-fidelity Prototyping
Uses a medium which is unlike the final medium, e.g. paper,
cardboard
Is quick, cheap and easily changed
Examples:

sketches of screens, task sequences, etc

post-it notes
storyboards
Wizard-of-Oz

www.id-book.com

17

Why Paper Prototyping?

Tips for good paper prototype

Sketching
Sketching is
important to lowfidelity prototyping
Dont be inhibited
about drawing
ability. Practice
simple symbols

www.id-book.com

14

Card-Based Prototypes
Index cards (3 X 5 inches)
Each card represents
one screen or part of screen
Often used in website
development

www.id-book.com

15

Low-fi not always paper

How to test paper prototypes

What you can learn from paper prototype

What you cant learn from paper prototypes

Storyboards
Often used with scenarios, bringing more detail, and a
chance to role play
It is a series of sketches showing how a user might
progress through a task using the device

Used early in design

www.id-book.com

27

Example storyboard

www.id-book.com

28

Wizard-of-Oz prototyping
The user thinks they are interacting with a computer, but a
developer is responding to output rather than the system.
Usually done early in design to understand users expectations
What is wrong with this approach?
User
>Blurb blurb
>Do this
>Why?

www.id-book.com

30

High-fidelity prototyping
Uses materials that you would expect to be in the final product
Prototype looks more like the final system than a low-fidelity
version
High-fidelity prototypes can be developed by integrating
existing hardware and software components
Danger that users think they have a complete system.see
compromises

www.id-book.com

31

The Rights of a Prototype

Should not be required to be complete
Should be easy to change
Gets to retire