1 Prototyping
The best way to have a good idea is to have lots
of ideas
-Linus Pauling
Microsoft Mouse
2
Designers may build
dozens of prototypes to get
a more complete
understanding of a design
space
For example, Paul Bradley
at IDEO built about eighty
foam models for the
original Microsoft mouse
to quickly explore different
directions
Use Stage-Appropriate Tools
3
Fidelity
Time
Story Boarding
4
Story boarding is all about tasks
It doesn’t focus on the actual user interface but how
would people be using this.
Don’t worry if you can’t draw
Its not about beautiful drawings but conveying
ideas
5
Story boards should convey
6
Setting
People involved
Environment
Task being accomplished
Sequence
What steps are involved?
What leads someone to use the app?
What task is being illustrated?
Satisfaction
What’s motivates people to use this system?
What does it enable people to accomplish?
What need does the system fill?
Storyboarding
7
…should be quick.
Should set strict time limit on yourself (Around 10
mins)
Benefits of Storyboarding
Holistic focus: Helps emphasize how an interface
accomplishes a task
Avoids commitment to a particular user interface
(no buttons yet)
Helps get all the stakeholders on the same page in
terms of the goal
Paper prototypes
9
After you have gotten a clear idea about what your
application should accomplish you can start
thinking about how you will accomplish that.
Again it shouldn’t take too much time.
You can mix and max fidelities (mixture of screen
shots and hand drawings)
10
Paper Prototypes
11
You can use any material that you want
Transparencies
Paper
Cardboard
Colored markers
….
Be creative
12
Remember to try out
multiple alternative
prototypes
simultaneously
Strengths of Paper prototypes
13
Anyone can do it.. You can involve users by asking
them to make any changes they want
It helps you to focus on what's important early on,
without going into details such as color schemes
and fonts
14
Digital Mockups
15
Prototyping Techniques
16
The level of "fidelity" of a prototype refers to how
closely it resembles the final product
Presentation and Critique
17
Presentation and critique is arguably the most
important part of prototyping process
This is where we focus on quality
The goal is to find the best ideas
You present the strengths of your concept, and your
peers highlight areas that need work or further
clarification
That’s it—discuss, evaluate, and move on
http://academiccomputing.wordpress.com/2012/06/19/what-about-hci/
Paper Prototyping Tips & Tricks
19
Keep all your materials in one place!
Small interface widgets tend to get lost or damaged easily
Work quickly and make reusable components (buttons, etc)
If something is difficult to simulate (progress indicators, right mouse menus,
hyperlinks), have the user ask if it is available and then verbally describe the
interaction
Backgrounds (11”x14” poster board) can be useful to contain the prototype and
provide context for the user
Don’t be afraid to mix and match hardware and software! for instance, if size
constraints are important, you might want to make a blinder using a photograph
of the device that would be used and manipulate the prototype within the frame
When appropriate, add context by including familiar operating system elements
Wizard-Of-Oz Prototyping...
20
...simulates machine behavior with human
operators
21
Used initially to simulate speech recognition
systems
Wizard of Oz
22
Make an interactive application without (much)
code
Front end interface
(Remote) wizard controls user interface
Makes sense when it’s faster/cheaper/easier than
making real thing
Get feedback from users people
23
Hi-fidelity: users think it’s more real
Low-fidelity: more license to suggest changes
Making a Wizard-Powered Prototype
24
Map out scenarios and application flow •
what should happen in response to user behavior? •
Put together interface “skeletons” •
Develop “hooks” for wizard input
Where and how the wizard will provide input
selecting the next screen, entering text, entering a zone,
recognizing speech, etc.
remember that later you’ll need to replace with computer
Rehearse wizard role with a colleague
Example: Aardvark
25
Social search engine
Wizard of oz was used
Wizards can be used throughout the development
26
Disadvantages
27
Simulations may misrepresent otherwise imperfect
tech
May simulate technologies that do not exist (and
may never)
Wizards require training and can be inconsistent
Playing the wizard can be exhausting
Some features (and limitations) are difficult/
impossible to simulate effectively
Video Prototyping
28
Cheap and fast
Great communication tools
Helps achieve common ground
Ideally, portable and self-explanatory
Can serve as a ‘spec’ for developers
Ties interface designs to tasks
Aligns and orients interface choices
Makes sure you have a complete interface
And that there’s nothing extra
Video prototypes can be any fidelity
29
What should the video show?
30
Like a storyboard, the whole task,
including motivation and success
Establishing shots and narrative help
Draw on tasks you’ve observed
Illustrate important tasks your system enables
Can help scope a minimum-viable product
Changes what design teams argue about
(in a good way)
32 The Prototyping Process
33
Must Read!
34
Perils of Prototyping
http://www.cooper.com/journal/2008/5/the_perils_of_prototypin
g
