PROTOTYPING

Prototyping

“ There’s a mantra (repetition) at IDEO

(by the CEO of global design company ):
“Never go to a meeting without a prototype.”

At whatever stage of development, one week, one month,

or 6 months. ”

Perform usability evaluation and obtain feedback as

early as possible in the design cycle by building and
evaluating prototypes.
WHY PROTOTYPE?

 communication: discuss ideas with stakeholders

 develop requirements specifications

WHY PROTOTYPE?
 evaluate interface effectiveness for communicating
conceptual model

 save time and money

• Don’t waste time coding/building the wrong thing
BEFORE YOU CAN PROTOTYPE
 before you build, identify:

• users and tasks to build your prototype around

requirements

As you have done user and task analysis

APPROACHES TO PROTOTYPE
 throw-away
 prototype only serves to elicit user reaction
 creating prototype must be rapid, otherwise too expensive

 incremental
 product built as separate components (modules)
 each component prototyped and tested, then added to the
final system
 evolutionary prototype
 altered to incorporate design changes
 eventually becomes the final product
APPROACHES TO ‘SCOPING’
PROTOTYPE FUNCTIONALITY
 vertical prototype
 includes in-depth functionality for only a few selected
features
 key design ideas can be tested in depth

 horizontal prototype
 full interface features, but no underlying functionality.

 prototype scenario
 only features and functionality along the specific scenarios
through which the interface is to be evaluated.
How to do it?
Step 1:
 creating mock-ups

 paper and digital low-fidelity prototypes

 high-fidelity prototypes

Step 2:
 testing mock-ups
 Heuristicevaluation (refers to the entire system)
 Cognitive walkthrough (refers to a specific task)
 Thinking aloud (refers to entire systems & specific task)
The Prototype Becomes The Product

 Historically, best practice was to throw the

prototype away and implement the final design
(efficiently) from scratch.

 With the advent of agile development that practice

is changing.

 It is now quite common to incrementally develop a

prototype until it becomes the product.
Low-fidelity Prototypes
 Very coarse-grained (not in detail)
 Fuzzy (vague) layouts of general system requirements
 Paper-based and digital
 sketching
 screen mock-ups
 storyboards

used to gather feedback on the basic functionality or

visual layout
LOW FIDELITY PROTOTYPES
 meant to be rough, quick to build, easy to throw
away purposes
• proof of concept(s)
• rough (but flexible) interface design
• facilitate communication with users early on
• can be useful for generating and narrowing
requirements
Paper Prototypes
Sketches and screen mock-ups
• quick to build
• easy to run

Users love paper prototypes

• opportunity to contribute to the new design
Paper prototype
Paper prototype
Paper prototype
PAPER PROTOTYPING
 low fidelity technique popular in industry, despite
prevalence of ‘mockup’ software tools.

 because: easy to
 build
 alter on the fly
 show
 stick on wall & compare
 discuss
TECHNIQUE: DIGITAL STORYBOARDS

 draw each storyboard scene on computer

 use wire framing/mockup software (e.g., balsamiq)
• or painting/drawing packages (e.g., photoshop)
Interactive sketch

 An interactive sketch
made in Shockwave.
Screen designs
sketches are scanned
and assembled into
an interactive
prototype with
Macromedia Director.
Screenshot taken
 from Chris Edwards’
Sketchy Thing
[Edwards, 1999].
 Storyboard
Storyboards
• sequence of screens focusing on a user action
• don’t capture every detail, just systems’ major
functionality
• could be limited in scope
Storyboard
MEDIUM-FIDELITY PROTOTYPES
 prototyping with a computer
 engaging for end users
 simulate some but not all features of the interface
(interactive)
 can test more subtle design issues
High-fidelity Prototypes
 fine-grained (detailed)
 highly elaborate and digital versions of the system
Low vs High fidelity
THE SITUATION TODAY FOR PROTOTYPING TOOLS (VS.
DEVELOPING ON FINAL PLATFORM)

for simple prototyping.

• balsamiq, Framer X, Flinto, MockFlow , Principle
proto.io and many more

advanced UIs still require (scripting) language +

libraries

• HTML + javascript • Python • C++, C#, Objective

C, Java etc.
Thank you and Allah Hafiz