Prototyping in HCI

1
Objectives
2
of
Lecture
 Overview of Prototyping
 What is prototyping
 Aims of prototyping
 Prototyping techniques
 Prototyping tools
Overvie
3
w
 Prototyping is a well understood and used
technique in engineering where new products
are tested, by testing a model prototype
 prototypes can be ―throw away‖ (e.g., scale
models) or those that go into commercial use
(evolutionary)
 In software development, prototypes can be
 paper-based -
 software-based
What
4
is
Prototyping?
 Essential element in user centred design
 Is an experimental and partial design approach to
system development
 Involves users in testing design ideas
 Typically done very early in the design process
 Can be used throughout the SDLC
 Different types of prototyping are appropriate for
different stages of design such as product
conceptualization, requirements, development,
implementation
 What is a prototype?
5

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
Why
6

Prototype?
Traditional software development: you can‘t test until

you implement
 Implementation is expensive, and there is nothing to
test until you have incurred that expenditure - effort and
schedule time
 Result: any design errors are built into the first thing
you can test, and it is very expensive to make changes
 Result: design errors, unless they are really bad, are
left in the product
 7 Breaking this
implementation paradox
 Build a prototype of the basic functionality,
especially the interface
 Test the prototype, which will uncover design
errors
 Correct the errors
 Repeat until you have a clean design
 A major tool for improving usability
 Heavily used in industry
 What to prototype?
8

•Work flow, task design

•Screen layouts and information

display

•Difficult, controversial, critical areas

Low-fidelity Prototyping
9

Uses a medium which is unlike the final medium,

 e.g. paper, cardboard

Is quick, cheap and easily changed

Examples:
 sketches of screens, task sequences, etc
‘Post-it’ notes
 storyboards
 ‘Wizard-of-Oz’
 Storyboards
10

•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

 Sketchin
11
g

•Sketching is important to low-fidelity

prototyping

•Don’t be inhibited about drawing ability.

Practice simple symbols
12
Using index cards

•Index cards (3 X 5 inches)

•Each card represents one screen

•Often used in website development

 Elements
13
of a paper
prototype Menu Bar

Scroll
Bar

Opening Secondary
Contents Menu
Some
14
examples……
A 15home
page
16 User ―clicks on‖ (points to)
Clubs button
The
17
Music
page
The
18
home
page

Pull down
menu
A 19second-level
page
Another
20
second-level
page
After prototyping and user testing,
this21is what their home page looked
like
22 Materials for building a paper
prototype
White, unlined heavy paper or card
stock; 11 x 14 or 12 x 18 inches are
good sizes
 Regular 8.5 x 11 unlined paper
 5x8 index cards, for taking notes
 Colored paper if you wish
Materials,
23
continued
Adhesives: rubber cement, Scotch® tape,
glue sticks
 Markers of various colors
Sticky note pads, in various colors and
sizes
 Acetate sheets—a few
 Scissors
‘Wizard-of-Oz’
24
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
User

>Blurb blurb
>Do this
>Why?
High-fidelity prototyping
25

•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,
Dreamweaver, Visual Basic, and Smalltalk.

•Danger that users think they have a full

system…….see compromises
Aims
26
of Prototyping in
Software
The aim of prototyping is to resolve
uncertainty about
 functional and user requirements
 operation sequences

 user support needs

 required representations

 ―Lookand Feel‖ of the interface

 appropriateness of the design

General Features of
27
Prototyping
 Enables the designer to quickly build or
create examples of :-
 The data entry form
 The menu structure and order

 The dialogue styles

 Error messages

 Should be inexpensive to develop –

intention is to discard/modify it
 Should not require programming skills
Prototyping
28
(cont)
 Traditionally users lack the ability to envisage designs
conceptually
 Alternatively their may be a conceptual mismatch
between the designer and the user
 This may not manifest itself until very late
 Users often lack the ability to imagine the ramifications
of design decisions
 Users are often unable to comment on technical
design documents –make use of realia
 A prototype provides users with a concrete
representation of the proposed design
Prototypin
29
g
 Users are therefore more able to :-
 Confirm change or elaborate upon the specification
 Software prototyping is a dynamic simulation
 It should reflect the users real task with
appropriate task scenarios
 Input a customer order given on the telephone
 This will provide information on task sequence
operations and any difficulties which the user
may experience
Paper
30 Based Prototyping

 Paper based prototypes

 These have no functionality but can still be useful
for:-
 Generating ideas
 Gaining insights into what the user might want or is thinking
Eg a paper based design of a data entry screen
 Storyboards and Snapshots
 using ―film-scripting‖ techniques to visualise
interactions between users and the system
 This is very quick and cheap
Software
31
Prototyping
 A software prototype will be a version of the proposed
system with limited functionality
 Will differ from the final system in terms of
 Size, reliability, robustness & completeness
A software prototype
 is ―executable‖
 can be thrown away, or evolve
 may serve many different purposes
 should be ―quick and dirty‖ (and cheap!)
 is an integral part of user-centred design approaches
based on the evaluation/modification cycle
Prototyping
32
Techniques
The two major kinds of prototyping are
 ―Throw away‖ prototyping (a.k.a. ―rapid
prototyping‖)
 used exclusively in requirements gathering

 Evolutionary prototyping (a.k.a. ―RapidApplication

Development‖, RAD)
 Section of the system delivered progressively but with
evolving design i.e. they keep evolving
Rapid
33
Prototyping
 Aims to collect information on
requirements and the adequacy of
possible designs
 Recognises that requirements are likely
to be inaccurate when first specified
 The emphasis is on evaluating the
design before discarding it
34 Throwaway Prototyping (Figure 6.4)

Need

Planning

Analysis Design

Design Implementation
Design Prototype
Not OK Implementation
System

Design
Prototype
Rapid Prototyping -Advantages
35

 Helps the designer to evaluate the design very

early in the design cycle
 It is good for addressing the problem of users
not knowing or being unable to state their
requirements
 Provides the opportunity for continued
evaluation and refinement of the design
 Increases the chance of getting a well
designed system acceptable to the users with
the required functionality and ease of use
Rapid Prototyping – Disadvantages
36

 Can consume a lot of resources – users, analysts,

programmers. Therefore can be costly as well as time
consuming
 The continued process of design - evaluate - redesign
may mean that the design phase of the cycle is
considerably increased – when to stop designing?
 May be a long time before getting a working system
 Reluctance to ‗throw away‘ or discard the prototype
 Users may develop expectations/wishes which may be
unrealistic – giving them ideas?
 May not be technically or economically feasible
Evolutionary prototyping –
37
RAD
 Additions and amendments are made following
evaluation and the system is regenerated in its
amended form
 In this case the prototype evolves into the final system
38
Prototyping (Figure 6.3)

Need

Planning

Analysis

Design

Implementation

Prototype
Prototype Not OK
Prototype OK
System
ICS412
Evolutionary prototyping –
39
Advantages
 The system can cope with change during and
after implementation
 Again helps to overcome the gap between
specification and implementation
 Users get some functionality quickly
Evolutionary prototyping -
40
Disadvantages
 Can lead to a long development timescale
 May have limited functionality early on which
may not be apparent to the user
 May believe that they have the final complete
system and may therefore be unimpressed!
Other
41
Prototyping
Techniques

 Full prototype
 full functionality, lower performance than
production software
 Horizontal prototype
 displays ―breadth‖ of functionality, no lower level
detail ―back end‖ support e.g. Database link
 Vertical prototype
 full functionality and performance of a ―slice‖ or
small part of the system
Horizontal prototype: broad but
only
42 top-level
Vertical prototype: deep, but
only
43 some functions
Compromises
44
in prototyping

•All prototypes involve compromises

•For software-based prototyping maybe there is a
slow response? sketchy icons, may not capture all
requirements? 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
•Compromises in prototypes mustn’t be ignored.
Product needs engineering
Evaluatio
45
n
 It is no good building a prototype if you
do not evaluate it!!
 Evaluation is another key feature of user
centred design
 Summary
46

•Different kinds of prototyping are used for different

purposes and at different stages
•Prototypes answer questions, so prototype
appropriately
•Prototypes and scenarios are used throughout
design
•Evaluation of the prototype is essential