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