Topic 4b – Prototyping

Instructor: Dr. Bii

 Introduction

In previous lecture …

2
 … Introduction

 A prototype is an early version of a

system that is used to demonstrate
concepts, try out design options, and
find out more about the problem and its
possible solutions (Sommerville, 2016).
 Prototyping is a process of coming up
with a prototype - repetitive sequence of
analysis, design, modelling and testing.
 Examples of artefacts prototyped include a home, computer, aircraft, etc.
3
 … Introduction
 A prototype is tried out on real users to
determine the extent of fit between user
needs (requirements) and the design
outcome.
 Is the outcome acceptable to the users
and are there areas that may be
improved?

4
 … Introduction
 Prototype may differ in terms of amount
of functionality or performance, and may
be:
– An animation, with no functionality –
used to give users a “look and feel”;
– A prototype with some or all real
functionality.

5
 … Introduction
 Broadly categorised as:
– Low-fidelity – mostly based on paper
or drawing applications – i.e. sketches,
screen mockups, and storyboards;
– High-fidelity – software-based and may
be executed

6
 Purposes of Prototyping

 To check the feasibility of ideas with users

 To check the usefulness of the application
 To allow users to contribute to the design of
the application
 To allow users to test ideas
 To validate the requirements (i.e., to reveal
inconsistent or incomplete requirements)
 To negotiate requirements
7
 Prototyping Approaches
 Dix, et al. (2004: 241) identify 3
approaches to prototyping:
– Throw-away,
– Incremental, and
– Evolutionary.

8
 (a) Throw-away Prototyping
 In this approach, a prototype is built and
tested.
 Knowledge gained from this exercise is
used to build the final product.
 The actual prototype is discarded.
<next slide shows diagram>

9
 … throw-away prototyping

10
 (b) Incremental prototyping
 In this approach, the overall design of
the system is partitioned into
independent and smaller components.
 Prototypes of final product incorporating
the separate components are released,
one at a time i.e. the final product is
released as a series of products, each
subsequent release including one more
11 component.
 … incremental prototyping

12
 (c) Evolutionary Prototyping
 In this approach, the prototype is not
discarded.
 It serves as a basis for the next iteration
of design.
 This means that the actual system is
seen as evolving from a very limited
initial version to its final release.

13
 … Evolutionary prototyping

14
 Prototyping techniques
 Some of the techniques that may be
used to produce rapid prototypes
include:
– Storyboards;
– Simulations (limited functionality ~); &
– High-level programming support.

15
 (a) Storyboards
 A storyboard is a graphical depiction of
the outward appearance of the intended
system, without any accompanying
system functionality.
 Storyboards may be done without the
aid of any computing resource.
 They provide snapshots of the
interaction at particular points in the
16 design.
 … storyboards
 Getting user impressions of the
storyboards can help tell if the design is
heading in the right direction.
 Graphical drawing packages may be
used to create storyboards – that may
be animated in sequence.

17
 … storyboard example:
 Sketch (ink on paper)

18
 … storyboard example:
 If one clicked on Help:

19
 … storyboard example:
 On clicking Return:

20
 (b) Simulations (limited
functionality ~)
 This is where a portion of the
functionality is simulated by the design
team.
 Programming support rapidly builds
graphical and textual interaction objects
and attach some behavior to mimic the
system’s functionality.

21
 … simulations
 Once built, it is presented to the real
users to interact with it.
 Comments/views obtained from this
interaction are used to improve the
prototype – redesign & further
evaluation.
 Tools: various graphics, simulation
software, including scripting languages.
22
 … simulations
 May vary by features implemented and
functionality (horizontal vs vertical):

23
 (c) High-level programming
support
 High-level programming language is
used to program certain features of an
interactive system.
 Programmer attaches functional
behavior to the specific interactions that
the user will be able to do e.g. position
and click on the mouse over a button on
the screen – Java, Visual Basic, etc.
24
 Prototyping Process
 Somerville (2016: 63):

25
 (i) Establish prototype
objectives
 At the outset, objectives should be
made explicit.
 For instance, to develop a resource
request interface or to develop a system
to demonstrate the application to
managers.
 Different prototypes may be developed
for each objective.
26
 … Establish prototype
objectives
 Objectives help users and management
to (not mis) understand the prototype.
 A good understanding of the prototype
is necessary to reap the benefits
expected from the prototype
development.

27
 (ii) Define prototype
functionality
 Decide what to put into and what to
leave out of the prototype system.
 Leave out some functionality to reduce
prototyping costs and accelerate the
delivery schedule.
 Relax non-functional requirements e.g.
response time and memory utilization.

28
 (iii) Develop the prototype
 Build the prototype.
 As noted earlier, there are a number of
technologies that may be used to rapidly
simulate or code it.
 Examples: scripting languages, Java,
etc.

29
 (iv) Evaluate the prototype
 This is the final stage of the prototyping
process.
 Limited user training is done to make
(potential) users confortable with the
system and settle into normal pattern of
usage.
 Original prototype objectives are used
to derive a plan for evaluation.
30
 … Evaluate the prototype
 Evaluation reveals requirements errors
and omissions.

31
 Challenges
 Sommerville identifies a number of
management challenges faced during
prototyping:
– Time - Building prototypes takes time esp.
a throw-away prototype. It is of value if it is
fast (rapid prototyping).
– Planning – Lack of experience necessary
to adequately plan for and cost a design
process which involves prototyping.
32
 … Challenges
– Non-functional features - Prototypes often
sacrifice certain non-functional features of
a system which may be the most important
e.g. safety, reliability, response time, etc.
– Contracts - While the design process is
often governed by contractual agreements
between customer and designer,
prototypes do not form the basis for a legal
contract.
33
 … other challenges
 Users may not use the prototype in the
same way as they use the final system.
 Prototype testers may not be typical of
system users.
 There may not be enough time to train
users.

34
 … But prototyping has benefits:
 Users and systems developers can
avoid misunderstandings.
 System developers can create accurate
specifications for the finished system
based on the prototype.
 Managers can evaluate a working model
more effectively than a paper
specification.
35
 … benefits
 Developers can use a prototype to
develop testing and training procedures
before the finished system is available.
 Prototyping reduces the risk and
potential financial exposure that occur
when a finished system fails to support
(business) interaction needs.

36
 References
a) Dix, A., Finlay, J., Abowd, G.D. & Beale, R.
(2004) Human–Computer Interaction, 3rd ed.
Harlow: Pearson Prentice-Hall.
b) Sommerville, I. (2016) Software Engineering,
10th ed. Boston: Pearson.

37
 Exercises
1) Discuss the role of prototyping in HCI
design and development.
2) Describe vertical and horizontal
prototyping.
3) Analyze the key approaches to
prototyping in HCI.

38
 … Exercises

4) You have been asked to develop a

system to store and manage student
exam results. Your plan is to use
prototyping to confirm user requirements
and to test the design on real users.
Describe how you will carry out this
exercise.

39
 … Exercises – develop:

40