Prototyping
●
●
●
●
What prototyping is
The benefits of prototyping
Low-fidelity prototypes
High-fidelity prototypes,
–
●
And the advantages of each
How to build paper prototypes
Why Prototype?
●
Traditional software development:
–
●
Implementation is expensive,
–
●
you can’t test until you implement
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
–
design errors, unless they are really bad, are left in the
product
Breaking this implementation
paradox
●
Build a prototype of the basic functionality,
–
●
Test the prototype,
–
●
●
●
●
Especially the interface
which will uncover design errors
Correct the errors
Repeat until you have a clean design
A major tool for improving usability
Heavily used in industry
User-centered development cycle
●
●
Design --> prototype --> evaluate
Prototyping is a technique, not an specific tool
– Supports successive refinements
– Based on user input
– Goal is to provide ways to observe aspects of
the website
To evaluate design ideas
● Consider alternatives
–Before committing to implementation
●
The views of the stakeholders
●
●
●
Software designers may not adequately
understand prototyping
HCI practitioners may not adequately understand
implementation
The two groups need to talk to each other—
early—
and prototyping facilitates communication
The stages in website development
●
●
Design
One or more prototypes,
–
●
●
Each followed by testing and redesign
Implementation
Site goes live
Two types of prototypes
●
Evolutionary:
–the prototype eventually becomes the
product
●
Revolutionary, or throwaway:
–the prototype is used to get the
specifications right,
then discarded
Horizontal prototype:
broad but only top-level
Vertical prototype:
deep, but only some functions
Functionality & Range of prototypes
●
Horizontal:
– Little depth of functionality, but broad in terms of
features
●
Vertical:
–
●
Global:
–
●
only limited features but functionality fully developed
has breadth and depth
Local or scenario:
–
Models a very small part of the site
Benefits of prototyping
●
Improves the chances of creating a usable
product,
–
●
●
Higher user satisfaction
Users are good at criticizing an existing system;
–
●
mistakes and omissions are flushed out early in the
development process, not after implementation
They are much less able to imagine how
specifications would translate into a product
Prototyping brings the users into the process at a
much earlier stage
Benefits were recognized
two decades ago
●
●
●
Maryam Alavi. An Assessment of the Prototyping
Approach to Information Systems Development.
Communications of the ACM. June, 1984.
Barry Boehm et. al. Prototyping vs. Specification: A
Multi-Project Experiment. IEEE Transactions on
Software Engineering. May, 1984.
Wasserman and Shewmake. The Role of Prototypes in
the User Software Engineering Methodology. In
Advances in Human-Computer Interaction, H. R.
Hartson, Ed. Norwood, NJ: Ablex, 1985.
Implementation is expensive
●
●
So expensive
–
in people time and schedule time
–
that in practice it is only done once
If testing waits to complete implementation
–
there are no resources and no time to do it over when
a interface design mistake is uncovered
The core of the problem
The vast majority of usability problems come from a
single cause: the development team was lacking
a key piece of information. If team members had
known it earlier, they would have designed to
accommodate it and the usability problem would
never have occurred.”
Jared Spool, Tara Scanlon, and Carolyn Snyder. Product
Usability: Survival Techniques. Proceedings of ACM
CHI 98 Conference on Human Factors in Computing
Systems.
Disadvantages
●
Users may be unfamiliar with the technique.
–
●
But this situation is improving.
If the prototype is “too good,”
–
management may think that the project is nearly
finished, or
–
That the prototype can be converted into the final
product.
The right way:
use low-fidelity prototypes
●
●
●
●
Inexpensive—in materials cost, people time, and
schedule time
No risk of being mistaken for the final product
Simple and fast to repeat as lessons are learned
When interface testing of the prototype is
complete, implementation can proceed with
confidence
Paper prototype to generate user
reactions
●
Team constructs paper prototype
●
Test it with user
–
●
●
One team member “plays computer” in response to
user actions
Another takes careful notes
At the end of the session, team distils notes to see
what aspects need to be changed
Elements of a paper prototype
Menu Bar
Scroll
Bar
Opening
Contents
Secondary
Menu
Advantages of paper prototype
●
Easier to build
●
Not necessary to wait for developers to code
●
Fast to change
Erasing a link and writing another faster than re-coding
●
●
Maximizes # of times design is refined before
committing to implementation
Lack of polish does not affect user opinion of
prototype
Problems with High-Fidelity
Prototype
●
Correctly functioning software takes too long to
build
●
●
●
●
●
Changes take too long
One bug can destroy a user test
Creates unrealistic expectations in management
When testing, users tend to comment on “fit and
finish” issues having little effect on usability
Once implemented, developers have an
investment on it
Disadvantages of Low-Fidelity
●
May need to create convention to indicate
“clickable” items
●
Do not show well to management –lack polish
●
Does not simulate response time
Following are some pages by students
Thanks to Team Cairo, HCI 310, Fall 2001,
DePaul University:
Roy Calayo
● Marek Dzik
● Dan Jung
● Connie Pappas
● Jessica Watson
●
They started with an 18 x 12 drawing
pad
Their home page
User “clicks on” (points to) Clubs
button
The Music page
One Club page
The Club Info page for Red No. 5
A few pages from another student
group
Thanks to Team 2, Computer Science 473, Spring 2003,
City College of New York
Ashford Charleus
● Shahana Dewan
● Khairul Kabir
● Libai Qu
●
The home page
Pulldown
menu
A second-level page
Another second-level page
After prototyping and user testing,
their home page looked like this
Materials for building a paper
prototype
●
White, unlined heavy paper or card stock;
–
●
●
●
11 x 14 or 12 x 18 inches are good sizes
Regular 8.5 x 11 unlined paper
5x8 index cards, for taking notes
Colored paper if you wish
Materials, continued
●
●
●
●
●
Adhesives:
–
rubber cement,
–
Scotch® tape,
–
glue sticks
Markers of various colors
Sticky note pads, in various colors and sizes
Acetate sheets—a few
Scissors
Steps for building a paper prototype
●
Assemble materials
●
Set a firm deadline and stick to it
●
Construct the prototype
–
Construct a model –not an illustration
–
Include representation of every element that the user
will encounter
–
Create stock for anything that moves, changes or
appears/disappears
–
Done by hand – not over concerned with “prettiness”
Evaluation of your prototype
●
●
Evaluation is the subject of the next chapter
There you will learn
–
–
–
–
–
The testing set up
Roles of people involved in testing
Procedure for testing
Interpreting the results
Reporting the results
Prototyping
●
●
What prototyping is
The benefits of prototyping:
–
catching design errors early,
●
●
when they are cheap to fix
The difference between and the advantages of
Low-fidelity prototypes
High-fidelity prototypes
●
●
How to build paper prototypes
Samples of the paper prototypes of two groups of
students in HCI courses