Chapter 5
Prototyping
The process of design
A simplified view of four main phases plus an iteration
loop, focussed on the design of interaction
scenarios
what is task analysis
wanted guidelines
principles
interviews analysis precise
ethnography specification
design
what is there
vs. dialogue implement
what is wanted notations and deploy
evaluation
prototype
heuristics architectures
documentation
help
Prototyping
• you never get it right first time
• if at first you don’t succeed …
OK?
design prototype evaluate done!
re-design
Prototyping
A prototype is essentially a model of the
system
The prototype (model) can have limited or full
range of functionalities of the proposed
system
A widely used technique in engineering
where novel products are tested by testing
a prototype
Prototyping
Prototypes can be “throw away” (e.g., scale
models which are thrown away after they serve
their purpose) or can go into commercial use
In software development, prototypes can be
Paper-based: likely to be thrown away after use
Software-based: can support few or all functionalities of
the proposed system. May develop into full-scale final
product
Prototyping in HCI
Essential element in user centered design
Is an experimental and partial design
Helps involving users in testing design ideas
without implementing a full-scale system
Typically done very early in the design process
Can be used throughout the design life cycle
Why prototypes (1)
Get feedback earlier
Prototypes are faster to build than finished implementations
Get feedback early about the good and bad points of design
Get feedback cheaper
Prototypes are cheaper
Experiment with alternatives
If design decision is hard to resolve → build multiple
prototypes
Easier to change or throw away
If problems in the design, change easily
If design flaws are serious, throw away
Why prototypes (2)
Stakeholders can see, hold, interact with a prototype more
easily than a document or a drawing
Team members can communicate effectively
You can test out ideas for yourself
It encourages reflection: very important aspect of design
Prototypes answer questions, and support designers in
choosing between alternatives
Maximizes your creative freedom
Filtering dimensions of prototyping
Examples
What is a prototype?
In interaction design it can be (among other things):
a series of screen sketches
a storyboard, i.e. a cartoon-like series of scenes
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
...
What is a prototype?
We can categorize all these different forms of
prototypes in three groups
Low fidelity prototypes
Medium fidelity prototypes
High fidelity prototypes
Fidelity: how similar is an interface to the finished
product
Low Fidelity Prototypes
Basically paper mock-up of the interface look, feel,
functionality
Quick and cheap to prepare and modify
Purpose
Brainstorm competing designs
Elicit user reaction (including any suggestions for
modifications)
Low fidelity: omits details
User cheaper materials (Paper prototype,
storyboard, ...)
Low Fidelity Prototypes:
Sketches
Interface of a proposed system A sketch of the interface
Sketching
Sketching is important to low-
fidelity prototyping
Don’t be inhibited about
drawing ability. Practice simple
symbols
In a sketch, the outward
appearance of the intended
system is drawn
– Typically a crude
approximation of the final
appearance
Storyboards
Probably the simplest of a prototype is the
storyboard.
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
Storyboard do not require must in term of
company system power to construct.
Storyboards
For Interactive system design, storyboard
provides snapshot of interface at particular points
of interaction.
Storyboard usually includes annotations and
scripts indicating how the interaction will occur.
Used early in design
Generate storyboard from
scenario
Generate storyboard from
scenario
Initial screen. Shows the
layout of interface
options.
Generate storyboard from
scenario
Once a stroller is
selected by the
customer, its tag is
scanned with a hand-
held scanner. The details
of the stroller is
displayed on the
interface if the scanning
is successful. Also, the
option buttons become
active after a successful
scan.
Generate storyboard from
scenario
However, the customer
can choose a different
product at this stage and
the same procedure is
followed. For example,
the customer may
choose a stroller with
different color.
Generate storyboard from
scenario
Once the customer
finalizes a product, a bill
is generated and
displayed on the
interface. The option
buttons become inactive
again.
Card-based prototypes
Index cards (3 x 5
inches)
Each card represents
one screen or part of
screen
Often used in website
development
Medium Fidelity
Prototypes
Prototypes built using computers
More powerful than low fidelity prototypes
Simulates some but not all functionalities of the system
More engaging for end users as the user can get better
feeling of the system
Can be helpful in testing more subtle design issues
Medium Fidelity
Prototypes
Broadly of two types:
Vertical prototype where in-depth functionalities
of a limited number of selected features are
implemented. Such prototypes helps to evaluate
common design ideas in depth.
Example: working of a single menu item in full
Medium Fidelity
Prototypes
Broadly of two types:
Horizontal prototype where the entire surface
interface is implemented without any functionality.
No real task can be performed with such
prototypes.
Example: first screen of an interface (showing
layout)
Medium Fidelity
Prototypes: scenarios
Computer are more useful (than drawing on paper
as in storyboarding) to implement scenarios
Provide many useful tools (e.g., power point slides,
animation)
More engaging to end-users (and easier to elicit
better response) compared to hand-drawn story-
boarding
Hi Fidelity Prototypes
Typically a software implementation of the design
with full or most of the functionalities
Requires money, manpower, time and effort
High Fidelity: more like finished product
Similar to the finished product (simulated,
electronic prototype)
Types of prototypes and
Management issues
• Types of Prototypes
• throw-away
• incremental
• evolutionary
• Management issues
– time
– planning
– non-functional features
– contracts
Throw - away
Prototypes are used only to elicit user reaction. Once their
purpose is served, they are thrown away.
Typically done with low and some medium fidelity
prototypes
The prototype is built and tested.
The design knowledge gained is used to build the final
product
But the actual prototype is discarded.
Throw - away
Incremental
Final product is built as a separate
component.
The final product is partitioned into
independent and smaller components.
The final product is then released as a
series of products, each subsequent
release including one more
component.
Typically done with medium and hi
fidelity prototypes
Evolutionary
Prototype is not discarded it serves as basic for the
next iteration of design.
Actual system evolves from the limited initial
version to its final release.
Typically done with hi fidelity prototypes
Comparison of Prototype Types
Comparison of Prototype Types
Comparison of Prototype Types
Comparison of Prototype Types
Management issues (1)
TIME:
Building prototype takes time.
Value of prototyping is appreciated only if it was Fast.
At the same time it should not produce erroneous
results.
Planning:
Most project managers do not have the experience
necessary for adequately planning and costing a
design process which involves prototyping.
Management issues (2)
NON-FUNCTIONAL FEATURES
Most important features of the system will be non-
functional one.
This problem is similar to the technical issue of
prototype realism
CONTRACTS
The design process is often governed by contractual
agreements between customer and designer.
There must be an effective way of translating the
result from prototype into document.
Warning About Iterative
Design
There are 2 problems
First,it is often the case that design decisions taken at
the very beginning stage of prototyping is wrong.
Second,if in the process of evaluation, a potential
usability problem is diagnosed,it is important to
understand the reason for the problem