0% found this document useful (0 votes)
25 views23 pages

Prototyping for Designers

Human computer interaction prototyping

Uploaded by

Sharjeel
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
25 views23 pages

Prototyping for Designers

Human computer interaction prototyping

Uploaded by

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

Prototyping

1
Overview
• Prototyping

•Low-fidelity Prototyping

•High-fidelity Prototyping

• Compromises in prototyping

• Construction
Prototyping and construction
• What is a prototype?
• Why prototype?
• Different kinds of prototyping
low fidelity
high fidelity
• Compromises in prototyping
vertical
horizontal
• Construction
What is a prototype?

In other design fields a prototype is a small-scale


model:
• a miniature car
• a miniature building or town
What is a prototype?
In interaction design it can be (among other things):
• a series of screen sketches
• a storyboard, i.e. a cartoon-like series of scenes
• a Powerpoint slide show
• a video simulating the use of a system
• a lump of wood
• a cardboard mock-up
• a piece of software with limited functionality written in the
target language or in another language
Example Prototypes

6
Why prototype?
• Evaluation and feedback are central to interaction design

• Stakeholders can see, hold, interact with a prototype more


easily than a document
• Team members can communicate effectively

• You can test out ideas for yourself

• It encourages reflection: very important aspect of design

• Prototypes answer questions, and support designers in


choosing between alternatives
What to prototype?
• Technical issues

• Some unclear requirements

• Task design

• Screen layouts and information display

• Difficult, controversial, critical areas


Low-fidelity Prototyping
• Is unlike the final product, e.g. paper, cardboard

• Is quick, cheap and easily changed

• Examples:
sketches of screens, task sequences, etc
storyboards
‘Wizard-of-Oz’
Low-fidelity Prototyping
1. Sketching

2. Storyboards

3. Card-based prototypes

4. Wizard-of-Oz
Sketching
• Sketching is important to low-fidelity prototyping
• Don’t be inhibited about drawing ability. Practice
simple symbols
Storyboards
• Often used with scenarios, bringing more detail,
and a chance to role play

• It is a series of sketches showing how a user


might progress through a task using the device

• Used early in design


Card-based prototypes
• Index cards (3 X 5 inches)
• Each card represents one screen or part of
screen
• Often used in website development
‘Wizard-of-Oz’ prototyping
• The user thinks they are interacting with a computer, but a
developer is responding to output rather than the system.
• Usually done early in design to understand users’
expectations
• What is ‘wrong’ with this approach?

User

>Blurb blurb
>Do this
>Why?
‘Wizard-of-Oz’ prototyping
Advantages
• Useful if a system is expensive or demanding to implement
• Useful if difficult interaction technique demanding to
implement.

Disadvantages
• Evaluators need deep knowledge of the operation of the
system
• Difficult to evaluate systems with a large graphical interface
element

15
Low-fidelity Prototyping- example

16
High-fidelity prototyping
• Uses materials that you would expect to be in the final
product.
• Prototype looks more like the final system than a low-fidelity
version.
• For a high-fidelity software prototype common environments
include Macromedia Director, Visual Basic, and Smalltalk.
• Danger that users think they have a full system…….see
compromises
High-fidelity prototyping- example

18
low- vs. high-fidelity prototypes
Advantages Disadvantages
 Lower development cost.  Limited error checking.
 Evaluate multiple design
Low- concepts.  Limited usefulness for
fidelity  Useful communication usability tests.
prototype device.
 Address screen layout  Navigational and flow
issues. limitations.
 Complete functionality.  More expensive to
High-  Fully interactive. develop.
fidelity  Clearly defines
prototype navigational scheme.  Time-consuming to create.
 Look and feel of final
product.

19
Compromises in prototyping
• All prototypes involve compromises, e.g.
• Paper prototypes clearly do not actually work
• For software-based prototyping maybe there is a slow
response? limited functionality?
• Two common types of compromise
• ‘horizontal’: provide a wide range of functions, but
with little detail
• ‘vertical’: provide a lot of detail for only a few
functions
• In developing final product, Compromises in prototypes
mustn’t be ignored.
Construction
• Taking the prototypes (or learning from them) and creating a
whole
• Two different development philosophies :
Evolutionary prototyping: evolving a prototype into the
final product. testing along the way is needed
‘Throw-away’ prototyping: prototype is discarded, and
the product built from scratch.
Summary
• Different kinds of prototyping are used for different purposes and at different
stages

• Prototypes answer questions, so prototype appropriately

• Construction: the final product must be engineered appropriately


References
1. Interaction design book 2end edition
2. http://www.tiresias.org/tools/wizard_of_oz.htm [accessed
22/04/11]

You might also like