Scribd
Upload
71 views33 pages

Prototyping: The Best Way To Have A Good Idea Is To Have Lots of Ideas - Linus Pauling

The document discusses various prototyping techniques used in user interface design including storyboarding, paper prototyping, and video prototyping. It emphasizes that prototyping should be done quickly using low-fidelity methods at first to explore design options before progressing to higher fidelity digital or physical prototypes. Prototypes should be presented to and critiqued by others to help refine the design. The document also discusses techniques like wizard of oz prototyping that can be used to simulate interactive systems without fully implementing functionality.

Uploaded by

Hassan Asghar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
71 views33 pages

Prototyping: The Best Way To Have A Good Idea Is To Have Lots of Ideas - Linus Pauling

The document discusses various prototyping techniques used in user interface design including storyboarding, paper prototyping, and video prototyping. It emphasizes that prototyping should be done quickly using low-fidelity methods at first to explore design options before progressing to higher fidelity digital or physical prototypes. Prototypes should be presented to and critiqued by others to help refine the design. The document also discusses techniques like wizard of oz prototyping that can be used to simulate interactive systems without fully implementing functionality.

Uploaded by

Hassan Asghar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 33

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

You might also like