PROTOTYPING

Communicating Ideas
Introduction

■ Prototypes can be used to communicate ideas to our stakeholders

■ Cheaper to fail earlier
Microsoft Mouse
■ 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

3
Use Stage-Appropriate Tools

Fidelity

Time

4
Prototyping Types

Low Fidelity
Medium Fidelity
High Fidelity

5
Prototyping Techniques

■ The level of "fidelity" of a prototype refers to how closely it resembles the final product

6
Low Fidelity Prototyping

■ Storyboards
■ Sketching
■ Card Based

7
Story Boarding

■ 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

8
 Storyboard

9
Story boards should convey

■ 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?

10
Storyboarding

■ …should be quick.
■ Should set strict time limit on yourself (Around 10 mins)

11
Benefits of Storyboarding

■ Holistic focus: Helps emphasize what 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

12
Sketching and Card Based prototypes

■ 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)

13
14
Remember to try out
multiple alternative
prototypes
simultaneously
15
Strengths of Paper prototypes

■ 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

16
Card Based

■ Similar to sketching but each card represent a screen

■ You can imitate how an entire interaction will take place.
■ Each card will be representing a screen

17
18
http://academiccomputing.wordpress.com/2012/06/19/what-about-hci/
20
High Fidelity Prototype

21
Presentation and Critique

■ 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

22
Wizard-Of-Oz Prototyping...

■ ...simulates machine behavior with human operators

23
■ Used initially to simulate speech recognition systems

24
Wizard of Oz

■ 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

25
Wizard of Oz Prototyping

■ Hi-fidelity: users think it’s more real

■ Low-fidelity: more license to suggest changes

26
Making a Wizard-Powered Prototype

■ 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

27
Wizards can be used throughout the
development
■ They can be used with low fidelity as well as high fidelity

28
Disadvantages

■ Simulations may misrepresent otherwise imperfect tech

■ May simulate technologies that do not exist (and may never)
■ Wizards require training and can be inconsistent
■ Some features (and limitations) are difficult/ impossible to simulate effectively

29
Video Prototyping

■ 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

30
Video prototypes can be any fidelity

31
What should the video show?

■ 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

34
35
Must Read!

Perils of Prototyping
http://www.cooper.com/journal/2008/5/
the_perils_of_prototyping

36