Human Computer Interaction

1
Introduction
◼ Prototyping is a design technique where users
can be involved in testing design ideas by
using experimental, incomplete designs known
as prototypes.
◼ Developing prototypes is an integral part of
iterative user-centered design, because it
enables designers to try out their ideas with
users and to gather feedback.

2
Paper-based Prototyping
◼ Paper-based prototyping produces
paper sketches, storyboards and scripts.
◼ Paper-based prototypes are quick,
inexpensive, and they provide very
valuable insights, but they do not
demonstrate functionality.

3
Computer-based Prototyping
◼ Computer-based prototyping provides a
version of the system with limited
functionality so that users can actually
interact with it.

4
Software Prototypes
A software prototype is a system that:
◼ Actually works, it is not an idea or a drawing.

◼ May be thrown-away after use, or may evolve

◼ Must be built quickly and cheaply.

◼ Is an integral part of iterative user-centered

5
Prototyping Functions
◼ Prototyping resolves uncertainty about
how well a design suits users’ needs. It
helps designers to make decisions by
eliciting information from users on:
◼ The necessary functionality of the system.
◼ Operation sequences.
◼ User support needs.
◼ Required representation.
◼ Look and feel of the interface. 6
Other Prototyping Techniques
(1)
◼ A Full Prototype contains complete
functionality with lower performance.
◼ A Horizontal Prototype shows the user
interface but has no functionality behind
the buttons.
◼ A Vertical Prototype contains all of the
high level and low level functionality for
a restricted part of a system.

12
Other Prototyping Techniques
(2)
◼ High Fidelity Prototyping refers to
prototyping through a medium such as
video, which resembles as closely as
possible the final interface.
◼ Low Fidelity Prototyping involves the
use of materials that are further away
from the final version and that tend to
be cheaper and faster to develop.
13
Other Prototyping Techniques
(3)
◼ Chauffeured Prototyping involves the user
watching while a team member demonstrates
the system.
◼ Wizard of Oz Prototyping. The user interacts
with a screen, but instead of a piece of
software responding to the user’s requests, a
developer is sitting at another screen
answering the queries and responding to the
real user, without the awareness of the user.
14
Two-phase view of iterative
design: First Phase
◼ First Phase: Prototypes are developed
to gather different forms of information,
and radically different alternatives may
be tested in parallel. It ends with a
proposal for a single full initial design.
◼ Divergent, exploratory and bold stage.
◼ Fast Cycle times.
◼ Preservation of alternative designs.
15
Two-phase view of iterative
design: Second Phase
◼ Second Phase: One solution is then
iterated through design, code and test
cycles. Any further radical changes are
unlikely, as production standards will
now be in force, and major changes will
be expensive.
◼ Convergent fine-tuning stage
◼ Slow cycle time.
◼ One Design Solution.
16
Prototyping to support design
◼ Prototyping can be useful at different
stages of design:
◼ For product conceptualization.
◼ At the task level.
◼ For determining aspects of screen design.

17
Task Level Prototyping
◼ Once the requirements for a system have
been determined, and its functionality is
clearer, prototyping can help to establish the
suitability of the interface at the task level.
◼ The aim is to ensure that the user can
perform the tasks necessary for the job, and
to ensure that a task sequence can be
completed easily and efficiently.
◼ A Vertical Prototype might be appropriate to
be used in testing the task sequence.
19
 Screen Design Prototyping
◼ Screen Design Prototyping concentrates on
icons, menus and screen layouts.
◼ Issues to be resolved at this level include the
suitability of icons and screen layouts, the use
of color, visual and audio effects, the
grouping of commands within menus.
◼ Initial ideas can be prototyped using paper-
based sketches and drawings.
◼ A true understanding of the effect of these
issues requires high fidelity prototyping in the
form of a software prototype.
20
Prototyping Tools
◼ Prototyping can be achieved with the
use of production tools, but this can be
infeasible as they are not designed to
accommodate the kind of compromises
which prototyping needs.
◼ Prototyping tools must compromise on
quality in order to produce working
systems quickly.
21
Further Reading
◼ Preece, chapter 27

22