ITE 254

Human-Computer Interaction
A. Mintra Ruensuk
mintra.ruensuk@stamford.edu
ITE254: Human-Computer Interaction
Week5: Prototyping

“There’s a mantra at IDEO: “Never go

to a meeting without a prototype.” At
whatever stage of development, one
week, one month, or 6 months. ”

— [ Tim Brown, President, IDEO, speaking at CHI

2004 in Vienna. ]
ITE254: Human-Computer Interaction
Week5: Prototyping

Prototyping
• Perform usability evaluation and obtain feedback
as early as possible in the design cycle by building
and evaluating prototypes.

• Finally, throw prototypes away and implement final

design.
ITE254: Human-Computer Interaction
Week5: Prototyping

Topics
• Types of Prototype

• Verbal Prototype

• Low-Fidelity Paper Prototypes

• High-Fidelity Paper Prototypes

• Interactive Sketches

• Working Prototypes

• Implementation
ITE254: Human-Computer Interaction
Week5: Prototyping

Types of Prototype
• In increasing order of complexity:
• Verbal Prototypes: textual description of choices and
results.
• Paper Prototypes:
– Low-Fidelity: hand-drawn sketches.

– High-Fidelity: more elaborate printouts.
• Interactive Sketches: interactive composition of hand-
drawn sketches.
• Working Prototypes: interactive, skeleton implementation.

• Then, throw prototypes away and implement final design.

ITE254: Human-Computer Interaction
Week5: Prototyping

Topics
• Types of Prototype

• Verbal Prototype

• Low-Fidelity Paper Prototypes

• High-Fidelity Paper Prototypes

• Interactive Sketches

• Working Prototypes

• Implementation
ITE254: Human-Computer Interaction
Week5: Prototyping

Verbal Prototype
• Simple textual description of choices and results.

• Write the user guide first, before anything is

implemented.

• Have it reviewed by someone else.

ITE254: Human-Computer Interaction
Week5: Prototyping

Topics
• Types of Prototype

• Verbal Prototype

• Low-Fidelity Paper Prototypes

• High-Fidelity Paper Prototypes

• Interactive Sketches

• Working Prototypes

• Implementation
ITE254: Human-Computer Interaction
Week5: Prototyping

Low-Fidelity Paper Prototypes

• Paper prototypes simulate screen and dialogue
elements on paper.

• First hand-drawn sketches (lo-fi), later perhaps more

elaborate printouts (hi-fi).

• Early usabilty feedback with throwaway designs:

maximum feedback for minimum effort!

• Greeking (drawing squiggly lines) is used to

represent text which would otherwise be a distraction.
ITE254: Human-Computer Interaction
Week5: Prototyping

Low-Fidelity Paper Prototypes

• Paper prototype for an online radio station
ITE254: Human-Computer Interaction
Week5: Prototyping

Low-Fidelity Paper Prototypes

• Working prototype for an online radio station
ITE254: Human-Computer Interaction
Week5: Prototyping

Paper Prototype of Customer

Information Terminal
• Design interface for customer information terminal
to be placed in branches of the (fictional)
Northumberland Bank.

• Specifically prototype the loans section: tasks

include information about loans and calculation of
loan repayments. 

ITE254: Human-Computer Interaction
Week5: Prototyping

Paper Prototype of Customer

Information Terminal
• Paper prototype 1 for a customer information terminal. [Image
used with kind permission of Cliff Brown, Northumbria University.]
ITE254: Human-Computer Interaction
Week5: Prototyping

Paper Prototype of Customer

Information Terminal
• Paper prototype 2 for a customer information terminal. [Image
used with kind permission of Cliff Brown, Northumbria University.]
ITE254: Human-Computer Interaction
Week5: Prototyping

Paper Prototype of Customer

Information Terminal
• Paper prototype 3 for a customer information terminal. [Image
used with kind permission of Cliff Brown, Northumbria University.]
ITE254: Human-Computer Interaction
Week5: Prototyping

Topics
• Types of Prototype

• Verbal Prototype

• Low-Fidelity Paper Prototypes

• High-Fidelity Paper Prototypes

• Interactive Sketches

• Working Prototypes

• Implementation
ITE254: Human-Computer Interaction
Week5: Prototyping

High-Fidelity Paper Prototypes

• Elaborate screen designs created with drawing
editors such as Adobe Illustrator or Corel Draw.

• Printed out in color.

• The often look too much like a finished design, and

not enough like a prototype.

• Users tend to comment on the choice of fonts and

colors, rather than the flow through the application.
ITE254: Human-Computer Interaction
Week5: Prototyping

High-Fidelity Paper Prototypes

ITE254: Human-Computer Interaction
Week5: Prototyping

Topics
• Types of Prototype

• Verbal Prototype

• Low-Fidelity Paper Prototypes

• High-Fidelity Paper Prototypes

• Interactive Sketches

• Working Prototypes

• Implementation
ITE254: Human-Computer Interaction
Week5: Prototyping

Interactive Sketches
• Scan in hand-drawn interface sketches.

• Assemble interactive prototype with clickable

elements. 

ITE254: Human-Computer Interaction
Week5: Prototyping

Interactive Sketches
• 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].
ITE254: Human-Computer Interaction
Week5: Prototyping

Interactive Sketches
• A storyboard of individual page wireframes
modeled using DENIM.
ITE254: Human-Computer Interaction
Week5: Prototyping

Interactive Sketches
• A wireframe of a Facebook Group page, modeled
using Balsamiq Mockups.
ITE254: Human-Computer Interaction
Week5: Prototyping

Topics
• Types of Prototype

• Verbal Prototype

• Low-Fidelity Paper Prototypes

• High-Fidelity Paper Prototypes

• Interactive Sketches

• Working Prototypes

• Implementation
ITE254: Human-Computer Interaction
Week5: Prototyping

Working Prototypes
• Simple algorithms: ignore special cases.

• Fake data: similar data, images instead of video,

etc.

• Wizard of Oz: human expert operating behind the

scenes to simulate interface responses.
ITE254: Human-Computer Interaction
Week5: Prototyping

Dimensions of Working Prototypes

• Working prototypes cut down on either the number of
features, or the depth of functionality of features:

• Vertical Prototype: in-depth functionality for a few

selected features.

• Horizontal Prototype: full interface features, but no

underlying functionality.

• Scenario Prototype: only features and functionality

along the specific scenarios or paths through the
interface which are to be evaluated.
ITE254: Human-Computer Interaction
Week5: Prototyping

Dimensions of Working Prototypes

• Working prototypes vary according to the breadth or depth of
features implemented. From Figure 9 of [Nielsen, 1993b].
ITE254: Human-Computer Interaction
Week5: Prototyping

Topics
• Types of Prototype

• Verbal Prototype

• Low-Fidelity Paper Prototypes

• High-Fidelity Paper Prototypes

• Interactive Sketches

• Working Prototypes

• Implementation
ITE254: Human-Computer Interaction
Week5: Prototyping

Implementation
• Competitive analysis of software components:

• Use existing interface framework as far as

possible (Motif, MS-Windows, Java Swing) –
saves a lot of work.

• Use existing components and applications rather

than re-inventing the wheel.
ITE254: Human-Computer Interaction
Week5: Prototyping

Quiz
• You are now a designer who is responsible to create a
restaurant queue system for MK restaurant at The Mall
Bangkapi.

• There are two main users in this systems, which are staff and
customer. However, MK restaurant wants to have one more
screen for displaying queue for customers who are waiting for
the queue at the restaurant. (There are 3 screens: Staff,
Customer, Screen display at the restaurant)

• Draw the interactive sketch for each screen. Think about the
useful features that can be integrated in to each scenario.

• Your prototype should be close to the real website/application.