Introduction to Usability

Engineering

Prototyping
Presented to
Ma’am Naveera Sahar

Group Members
Kainat Javaid (015)
Uzma Shaheen (029)
Fazeelat Bibi (002)
Outline

What is a prototype?
Prototyping process
Goals of prototyping
Prototyping Approaches and Techniques
Fidelity
Advantages and disadvantages of prototyping
Prototyping
 A limited representation of a design that allows users to interact
with it and to explore its suitability.
 Making something tangible to test for usability.
 It can also be described as a concrete but partial implementation
of a system design.
 Aim is to save money and time.
Prototyping
 You never get it right first time.
 If at first you don’t succeed…
Prototyping Process
Goals of prototyping

Prototyping enables evaluation, happens throughout

 Exploring requirements
 Choosing among alternatives
 Empirical usability testing
 Evolutionary development
Prototyping Approaches and Techniques

Approaches:
 Throw away vs Evolutionary vs Incremental
 Horizontal vs Vertical
 Low vs High fidelity
Different techniques including:
 Storyboards
 Paper prototypes
 Wizard of Oz
 Software prototypes
Prototyping Techniques

The three major types of prototyping are

 Throw away prototyping (rapid prototyping) is used exclusively
in requirements gathering.
 Incremental prototyping is not actually prototyping at all, but the
delivery of prioritized functions incrementally to a single, overall
design.
 Evolutionary prototyping (Rapid Application Development,
RAD) is as for incremental prototyping but with evolving design.
Other Prototyping Techniques

 Full prototype
• Full functionality, lower performance than production software.
 Horizontal prototype
• displays “breadth” of functionality, no lower level detail “back
end” support Ex. Database link.
 Vertical prototype
• Full functionality and performance of a “slice” or small part of the
system.
Horizontal vs Vertical Prototyping
Fidelity

 Degree to which prototype accurately represents the appearance

and interaction of the product.
 Judged by how it appears to the person viewing it.
 Not similarity to actual application.
Fidelity Spectrum
• High fidelity
close to final product
Electronically faithful
Uses similar media
• Low fidelity
Basis for final product
Proof of concept
Use of low cost, non-electronic media
Low-Fidelity Prototyping
 Does not look very much like the final product
 Use during early stages of development
 Examples of low fidelity prototyping are
• Storyboards
A series of key frames as sketches
• Sketching
Drawing of the outward appearance of the
intended system.
• Index cards
Index cards (3*5 inches). Each card represents
one screen. Often used in website development.
• Wizard of Oz
The user thinks they are interacting with a
computer, but a developer is responding to
output rather than the system. It is the wizard (a
person from the design team) who is responding
rather than the system. Usually done early in
design to understand users expectations.
High-Fidelity Prototyping

 Choice of materials and methods

• Similar or identical to the ones in the final product.
 Looks more like the final system
• Appearance, not functionality.
 Common development environments
• Power point, Visual basic web development tools.
 Misled user expectations
• Users may think that they have a full system.
 Examples of High-Fidelity Prototype
HCI-Prototype, iPod calendar. Android used to
build high fidelity prototype for HCI
adjustments.
Advantages and disadvantages of
Prototyping
Advantages
 Reduced time and costs
 Improved and increased user involvement
 Improves the quality of the specifications and requirements provided
to customers
Disadvantages
 Insufficient analysis
 User confusion
 Developer misunderstanding of user objectives
 Excessive Development Time