Chapter 52
Prototyping Tools and Techniques
Michel Beaudouin-Lafon, Université Paris-Sud,
Wendy E. Mackay, INRIA,
1. Introduction
“A good design is better than you think” (Rex Heftman, cited by Raskin, 2000).
Design is about making choices. In many fields that require creativity and
engineering skill, such as architecture or automobile design, prototypes both
inform the design process and help designers select the best solution.
This chapter describes tools and techniques for using prototypes to design
interactive systems. The goal is to illustrate how they can help designers generate
and share new ideas, get feedback from users or customers, choose among design
alternatives, and articulate reasons for their final choices.
We begin with our definition of a prototype and then discuss prototypes as design
artifacts, introducing four dimensions for analyzing them. We then discuss the
role of prototyping within the design process, in particular the concept of a design
space, and how it is expanded and contracted by generating and selecting design
ideas. The next three sections describe specific prototyping approaches: Rapid
prototyping, both off-line and on-line, for early stages of design, iterative
prototyping, which uses on-line development tools, and evolutionary prototyping,
which must be based on a sound software architecture.
What is a prototype?
We define a prototype as a concrete representation of part or all of an interactive
system. A prototype is a tangible artifact, not an abstract description that requires
interpretation. Designers, as well as managers, developers, customers and end-
users, can use these artifacts to envision and reflect upon the final system.
Note that prototypes may be defined differently in other fields. For example, an
architectural prototype is a scaled-down model of the final building. This is not
possible for interactive system prototypes: the designer may limit the amount of
information the prototype can handle, but the actual interface must be presented at
full scale. Thus, a prototype interface to a database may handle only a small
pseudo database but must still present a full-size display and interaction
techniques. Full-scale, one-of-a-kind models, such as a hand-made dress sample,
are another type of prototype. These usually require an additional design phase in
order to mass-produce the final design. Some interactive system prototypes begin
as one-of-a-kind models which are then distributed widely (since the cost of
duplicating software is so low). However, most successful software prototypes
evolve into the final product and then continue to evolve as new versions of the
software are released.
Beaudouin-Lafon & Mackay Draft 1 - 1 Prototype Development and Tools
, Hardware and software engineers often create prototypes to study the feasibility
of a technical process. They conduct systematic, scientific evaluations with
respect to pre-defined benchmarks and, by systematically varying parameters,
fine-tune the system. Designers in creative fields, such as typography or graphic
design, create prototypes to express ideas and reflect on them. This approach is
intuitive, oriented more to discovery and generation of new ideas than to
evaluation of existing ideas.
Human-Computer Interaction is a multi-disciplinary field which combines
elements of science, engineering and design (Mackay and Fayard, 1997, Djkstra-
Erikson et al., 2001). Prototyping is primarily a design activity, although we use
software engineering to ensure that software prototypes evolve into technically-
sound working systems and we use scientific methods to study the effectiveness
of particular designs.
2. Prototypes as design artifacts
We can look at prototypes as both concrete artifacts in their own right or as
important components of the design process. When viewed as artifacts,
successful prototypes have several characteristics: They support creativity,
helping the developer to capture and generate ideas, facilitate the exploration of a
design space and uncover relevant information about users and their work
practices. They encourage communication, helping designers, engineers,
managers, software developers, customers and users to discuss options and
interact with each other. They also permit early evaluation since they can be tested
in various ways, including traditional usability studies and informal user
feedback, throughout the design process.
We can analyze prototypes and prototyping techniques along four dimensions:
• Representation describes the form of the prototype, e.g., sets of paper
sketches or computer simulations;
• Precision describes the level of detail at which the prototype is to be
evaluated; e.g., informal and rough or highly polished;
• Interactivity describes the extent to which the user can actually interact with
the prototype; e.g., watch-only or fully interactive; and
• Evolution describes the expected life-cycle of the prototype, e.g. throw-
away or iterative.
2.1 Representation
Prototypes serve different purposes and thus take different forms. A series of
quick sketches on paper can be considered a prototype; so can a detailed computer
simulation. Both are useful; both help the designer in different ways. We
distinguish between two basic forms of representation: off-line and on-line.
Off-line prototypes (also called paper prototypes) do not require a computer. They
include paper sketches, illustrated story-boards, cardboard mock-ups and videos.
The most salient characteristics of off-line prototypes (of interactive systems) is
that they are created quickly, usually in the early stages of design, and they are
usually thrown away when they have served their purpose.
On-line prototypes (also called software prototypes) run on a computer. They
include computer animations, interactive video presentations, programs written
with scripting languages, and applications developed with interface builders. The
cost of producing on-line prototypes is usually higher, and may require skilled
programmers to implement advanced interaction and/or visualization techniques or
Beaudouin-Lafon & Mackay Draft 1 - 2 Prototype Development and Tools
Prototyping Tools and Techniques
Michel Beaudouin-Lafon, Université Paris-Sud,
Wendy E. Mackay, INRIA,
1. Introduction
“A good design is better than you think” (Rex Heftman, cited by Raskin, 2000).
Design is about making choices. In many fields that require creativity and
engineering skill, such as architecture or automobile design, prototypes both
inform the design process and help designers select the best solution.
This chapter describes tools and techniques for using prototypes to design
interactive systems. The goal is to illustrate how they can help designers generate
and share new ideas, get feedback from users or customers, choose among design
alternatives, and articulate reasons for their final choices.
We begin with our definition of a prototype and then discuss prototypes as design
artifacts, introducing four dimensions for analyzing them. We then discuss the
role of prototyping within the design process, in particular the concept of a design
space, and how it is expanded and contracted by generating and selecting design
ideas. The next three sections describe specific prototyping approaches: Rapid
prototyping, both off-line and on-line, for early stages of design, iterative
prototyping, which uses on-line development tools, and evolutionary prototyping,
which must be based on a sound software architecture.
What is a prototype?
We define a prototype as a concrete representation of part or all of an interactive
system. A prototype is a tangible artifact, not an abstract description that requires
interpretation. Designers, as well as managers, developers, customers and end-
users, can use these artifacts to envision and reflect upon the final system.
Note that prototypes may be defined differently in other fields. For example, an
architectural prototype is a scaled-down model of the final building. This is not
possible for interactive system prototypes: the designer may limit the amount of
information the prototype can handle, but the actual interface must be presented at
full scale. Thus, a prototype interface to a database may handle only a small
pseudo database but must still present a full-size display and interaction
techniques. Full-scale, one-of-a-kind models, such as a hand-made dress sample,
are another type of prototype. These usually require an additional design phase in
order to mass-produce the final design. Some interactive system prototypes begin
as one-of-a-kind models which are then distributed widely (since the cost of
duplicating software is so low). However, most successful software prototypes
evolve into the final product and then continue to evolve as new versions of the
software are released.
Beaudouin-Lafon & Mackay Draft 1 - 1 Prototype Development and Tools
, Hardware and software engineers often create prototypes to study the feasibility
of a technical process. They conduct systematic, scientific evaluations with
respect to pre-defined benchmarks and, by systematically varying parameters,
fine-tune the system. Designers in creative fields, such as typography or graphic
design, create prototypes to express ideas and reflect on them. This approach is
intuitive, oriented more to discovery and generation of new ideas than to
evaluation of existing ideas.
Human-Computer Interaction is a multi-disciplinary field which combines
elements of science, engineering and design (Mackay and Fayard, 1997, Djkstra-
Erikson et al., 2001). Prototyping is primarily a design activity, although we use
software engineering to ensure that software prototypes evolve into technically-
sound working systems and we use scientific methods to study the effectiveness
of particular designs.
2. Prototypes as design artifacts
We can look at prototypes as both concrete artifacts in their own right or as
important components of the design process. When viewed as artifacts,
successful prototypes have several characteristics: They support creativity,
helping the developer to capture and generate ideas, facilitate the exploration of a
design space and uncover relevant information about users and their work
practices. They encourage communication, helping designers, engineers,
managers, software developers, customers and users to discuss options and
interact with each other. They also permit early evaluation since they can be tested
in various ways, including traditional usability studies and informal user
feedback, throughout the design process.
We can analyze prototypes and prototyping techniques along four dimensions:
• Representation describes the form of the prototype, e.g., sets of paper
sketches or computer simulations;
• Precision describes the level of detail at which the prototype is to be
evaluated; e.g., informal and rough or highly polished;
• Interactivity describes the extent to which the user can actually interact with
the prototype; e.g., watch-only or fully interactive; and
• Evolution describes the expected life-cycle of the prototype, e.g. throw-
away or iterative.
2.1 Representation
Prototypes serve different purposes and thus take different forms. A series of
quick sketches on paper can be considered a prototype; so can a detailed computer
simulation. Both are useful; both help the designer in different ways. We
distinguish between two basic forms of representation: off-line and on-line.
Off-line prototypes (also called paper prototypes) do not require a computer. They
include paper sketches, illustrated story-boards, cardboard mock-ups and videos.
The most salient characteristics of off-line prototypes (of interactive systems) is
that they are created quickly, usually in the early stages of design, and they are
usually thrown away when they have served their purpose.
On-line prototypes (also called software prototypes) run on a computer. They
include computer animations, interactive video presentations, programs written
with scripting languages, and applications developed with interface builders. The
cost of producing on-line prototypes is usually higher, and may require skilled
programmers to implement advanced interaction and/or visualization techniques or
Beaudouin-Lafon & Mackay Draft 1 - 2 Prototype Development and Tools
