2. OUTLINE
What is a prototype?
Goals of prototyping
How to Prototype?
Why prototype?
What to prototype?
General Features of Prototyping
Benefits of Prototyping
Disadvantages of Prototyping
Prototyping Approaches and Techniques
References 2
3. PROTOTYPING
A limited representation of a design that allows users to
interact with it and to explore its suitability
Allows stakeholders to interact with the envisioned
product, gain some experience of using and explore imagined
uses
Production of an intermediary product to be used as a basis
for testing
Aim is to save on time and money
Aim is to have something that can be tested with real users
3
4. PROTOTYPING
You never get it right first time
If at first you don‟t succeed …
prototype evaluatedesign
re-design
done!
OK?
4
6. WHAT IS A PROTOTYPE
In interaction design it can be any of the following
(and more):
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
6
8. PITFALLS OF PROTOTYPING
Moving little by little … but to where
1. need a good start point
2. need to understand what is wrong
8
9. GOALS OF PROTOTYPING
Prototyping enables evaluation, happens throughout
Exploring requirements
Market analysis, participatory design
Choosing among alternatives
Risky or critical features, go/no-go decisions
Empirical usability testing
As early as possible, try out ideas with target users
Evolutionary development
May deliberately choose a malleable software platform, building software in
incremental, iterative fashion
9
11. HOW TO PROTOTYPE?
Build a prototype of the basic functionality, especially the
interface
Test the prototype, which will uncover design errors
Correct the errors
Repeat until you have a clean design
Prototyping is
a major tool for improving usability
Heavily used in industry 11
12. JOURNEY OF THE PROTOTYPING PROCESS
Goals
Functionality
Evaluate
Develop
12
14. WHY PROTOTYPE
Evaluation and feedback are central to interaction design
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
14
15. WHY PROTOTYPE
Traditional software development: you can‟t test until
you implement
Implementation is expensive, and there is nothing to test
until you have made that expenditure of effort and
schedule time
Result: any design errors are built in to the first thing you
can test, and it is very expensive to make changes
Result: design errors, unless they are really bad, are left
in the product
15
16. WHAT IS PROTOTYPED ?
Technical issues
Work flow, task design
Screen layouts and information display
Difficult, critical areas
16
18. GENERAL FEATURES OF PROTOTYPING
Enables the designer to quickly build or create examples
of :-
The data entry form
The menu structure and order
The dialogue styles
Error messages
Should be inexpensive to develop – intention is to
discard/modify it
Should not require programming skills
18
19. PROTOTYPING FOR USABILITY
Usability = ease of use of an application
Design typical user task scenarios
Identify tasks based on the scenarios
Use “Real Users” to test
Watch user performing task
Iterate design based on test
19
20. COST OF PROTOTYPING
Cheaper than not doing it......
Cost of repairing an error made in analysis and design phase can
cost up to 100 times the original cost
Usability work should amount for 5-10% of a project‟s budget
Testing early, iterating often makes the product cheaper.
Prototyping offers a cheap means of testing usability early in
the lifecycle
20
21. USERS & PROTOTYPES
The only way to really test the interface of a prototype is with
real users
The lifecycles give us a way to feed what we discover back
into the development process
The question remains of the best way of involving the users
21
22. Early prototyping
Used to evaluate function and interface
Late prototyping
Used to evaluate performance
22
EARLY PROTOTYPING VS. LATE PROTOTYPING
23. BENEFITS OF PROTOTYPING
Can be used to test every detail of the final product
before the product is built
Results in higher user satisfaction
Users are better at evaluating an existing (vs described)
system
It brings the users into the process early
23
24. DISADVANTAGES OF PROTOTYPING
Users may be unfamiliar with the technique.
Management may think that the project is nearly finished
if the prototype is “too good,”
or that the prototype can be converted into the final
product.
24
25. EVALUATION
It is no good building a prototype if you do not evaluate
it!!
Evaluation is another key feature of user centred design
Evaluation will be covered later in the module
25
26. PROTOTYPE REPRESENTATION
How to represent the prototype?
Mockup
Storyboard
Sketches
Scenarios
Screenshots
Functional interface
26
27. EXAMPLE USE TAGLINES / CAPTIONS
Keep it short: show as much as necessary but not more
27
28. MOCKUPS / WIREFRAMES
Good for brainstorming
Focuses people on high-level design notions
Not so good for illustrating flow and the details
28
29. PROTOTYPING APPROACHES AND TECHNIQUES
Approaches:
Throwaway vs Evolutionary vs Incremental
Horizontal vs Vertical
Low vs High fidelity
Different techniques including:
Storyboards
Paper prototypes
Wizard of Oz
Software prototypes
29
30. PROTOTYPING TECHNIQUES
The three major kinds of prototyping are
“Throw away” prototyping ( “rapid prototyping”)
used exclusively in requirements gathering
Incremental prototyping
not actually prototyping at all, but the delivery of prioritized functions
incrementally to a single, overall design
Evolutionary prototyping (“Rapid Application
Development, RAD)
as for incremental prototyping but with evolving design
30
31. THROWAWAY-EVOLUTIONARY-INCREMENTAL
Throwaway (or revolutionary) prototypes
are built, tested and thrown away (useful in early stages)
knowledge gained contributes to final system / next prototype
can be expensive
The prototype is used to get the specs right, then discarded!!
Incremental prototypes
final system built as separate components which are released
separately and gradually integrated
Evolutionary prototypes
are not discarded but serve as basis for next iteration of the design
danger of initially bad designs persisting
The prototype eventually becomes the product 31
35. OTHER PROTOTYPING TECHNIQUES
Full prototype
full functionality, lower performance than production software
Horizontal prototype
displays “breadth” of functionality, no lower level detail “back
end” support Ex. Database link
Vertical prototype
full functionality and performance of a “slice” or small part of
the system
35
39. HORIZONTAL PROTOTYPING
Disadvantages
Not possible to perform real work
Users cannot interact with real data
Often possible to create a wish list interface
Advantages
Can be created quickly
Gives an idea of how the whole interface will hang together
Identifies top level functionality
39
40. VERTICAL PROTOTYPING
Reduction of number of features
In-depth functionality for a few selected features
Tests part of system
Tests in depth under realistic circumstances with real
user tasks
Main limitation: users cannot move freely through the
system
40
42. FIDELITY
Degree to which prototype accurately represents the
appearance and interaction of the product
Judged by how it appears to the person viewing it
Not similarity to actual application
Not the degree to which the code and other attributes
invisible to the user are accurate
42
43. FIDELITY SPECTRUM
High Fidelity
Close to final product
Electronically faithful
Uses similar media
Low Fidelity
Basis for final product
Proof of concept
Use of low cost, non-electronic media
43
44. LOW-FIDELITY PROTOTYPING
Does not look very much like the final product
Uses materials that are very different from the intended final version,
such as paper and cardboard rather than electronic screens and
metal
Used during early stages of development
Cheap and easy to modify so they support the exploration of
alternative designs and ideas
It is never intended to be integrated into the final system. They are
for exploration only
44
45. EXAMPLES OF LOW-FIDELITY PROTOTYPING
Storyboards
Sketching
Index cards
„Wizard of Oz‟
45
46. STORYBOARDING
A series of key frames as sketches
Originally from film; used to get the idea of a scene
Snapshots of the interface at particular points in the interaction
Users can evaluate quickly the direction the interface is
heading
46
49. SKETCHES
Drawing of the outward appearance of the intended system
Crudity means people concentrate on high level concepts
But hard to envision a dialog’s progression
Computer Telephone
Last Name:
First Name:
Phone:
Place Call Help
49
55. „WIZARD-OF-OZ‟ PROTOTYPING
55
• The user thinks they are interacting with a computer, but a
developer is responding to output rather than the system.
• It is the „wizard‟ (a person from the design team) who is
responding rather than the system
• Usually done early in design to understand users‟
expectations
>Blurb blurb
>Do this
>Why?
User
56. HIGH-FIDELITY PROTOTYPING
Choice of materials and methods
Similar or identical to the ones in the final product
Looks more like the final system
Appearance, not functionality
Common development environments
Macromedia Director, PowerPoint, Visual BasicWeb
development tools
Misled user expectations
Users may think they have a full system
56
57. EXAMPLE
HCI Prototype - iPod iCalendar. Android used to build
high-fidelity prototype for HCI adjustments
57
59. ADVANTAGES/DISADVANTAGES
59
Prototype Advantages Disadvantages
Low-fidelity
prototype
- low developmental cost
- evaluate multiple design
concepts
- limited error checking
- navigational and flow
limitations
High-fidelity
prototype
- fully interactive
- look and feel of final
product
- clearly defines
navigational scheme
- more expensive to
develop
- time consuming to
build
- developers are
reluctant to change
something they have
crafted for hours
60. COMPROMISES IN PROTOTYPING
All prototypes involve compromises
Compromises in low-fidelity prototypes:
device doesn't actually work
Compromises in high-fidelity prototypes:
slow response
sketchy icons
limited functionality available
Two common types of compromise
„horizontal‟: provide a wide range of functions, but with little
detail
„vertical‟: provide a lot of detail for only a few functions
60
61. CONSTRUCTION
61
• Taking the prototypes (or learning from them) and creating a
whole
• Quality must be attended to: usability , reliability, robustness,
maintainability, integrity, portability, efficiency, etc..
• Product must be engineered
• Evolutionary prototyping
• „Throw-away‟ prototyping
62. CONCLUSION
Prototyping is used to evaluate, iterate and improve
Different kinds of prototyping are used for different
purposes and at different stages
Construction: avoid temptation to build the final product
from Hi-Fi prototypes
62
63. REFERENCES
Paper Prototyping: the fast and easy way to design and refine user interfaces
http://paperprototyping.com/
Models, Prototypes, and Evaluations for HCI Design: Making the Structured Approach
Practical George Casaday, Cynthia Rainis
http://www.sigchi.org/chi95/proceedings/tutors/gc_bdy.htm
www.sigchi.org/chi95/proceedings/tutors/gc_bdy.htm
http://hci.stanford.edu/research/prototyping/
http://pages.cpsc.ucalgary.ca/~saul/hci_topics/topics/prototyping.html
http://hci.epfl.ch/teaching/hci/course_material/lofi-prototype/lecture5-lofi_proto-x6.pdf
63
