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 designer...
Michel Beaudouin-Lafon, Université Paris-Sud, mbl@lri.fr
Wendy E. Mackay, INRIA, wendy.mackay@inria.fr
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
, to meet tight performance constraints. Software prototypes are usually more
effective in the later stages of design, when the basic design strategy has been
decided.
In our experience, programmers often argue in favor of software prototypes even
at the earliest stages of design. Because they already are already familiar with a
programming language, these programmers believe it will be faster and more
useful to write code than to "waste time" creating paper prototypes. In twenty
years of prototyping, in both research and industrial settings, we have yet to find
a situation in which this is true.
First, off-line prototypes are very inexpensive and quick. This permits a very
rapid iteration cycle and helps prevent the designer from becoming overly attached
to the first possible solution. Off-line prototypes make it easier to explore the
design space (see section 3.1), examining a variety of design alternatives and
choosing the most effective solution. On-line prototypes introduce an intermediary
between the idea and the implementation, slowing down the design cycle.
Second, off-line prototypes are less likely to constrain how the designer thinks.
Every programming language or development environment imposes constraints
on the interface, limiting creativity and restricting the number of ideas considered.
If a particular tool makes it easy to create scroll-bars and pull-down menus and
difficult to create a zoomable interface, the designer is likely to limit the interface
accordingly. Considering a wider range of alternatives, even if the developer ends
up using a standard set of interface widgets, usually results in a more creative
design.
Finally and perhaps most importantly, off-line prototypes can be created by a
wide range of people: not just programmers. Thus all types of designers, technical
or otherwise, as well as users, managers and other interested parties, can all
contribute on an equal basis. Unlike programming software, modifying a story-
board or cardboard mock-up requires no particular skill. Collaborating on paper
prototypes not only increases participation in the design process, but also
improves communication among team members and increases the likelihood that
the final design solution will be well accepted.
Although we believe strongly in off-line prototypes, they are not a panacea. In
some situations, they are insufficient to fully evaluate a particular design idea. For
example, interfaces requiring rapid feedback to users or complex, dynamic
visualizations usually require software prototypes. However, particularly when
using video and wizard-of-oz techniques, off-line prototypes can be used to create
very sophisticated representations of the system.
Prototyping is an iterative process and all prototypes provide information about
some aspects while ignoring others. The designer must consider the purpose of
the prototype (Houde and Hill, 1997) at each stage of the design process and
choose the representation that is best suited to the current design question.
2.2 Precision
Prototypes are explicit representations that help designers, engineers and users
reason about the system being built. By their nature, prototypes require details. A
verbal description such as "the user opens the file" or "the system displays the
results" provides no information about what the user actually does. Prototypes
force designers to show the interaction: just how does the user open the file and
what are the specific results that appear on the screen?
Beaudouin-Lafon & Mackay Draft 1 - 3 Prototype Development and Tools
, Precision refers to the relevance of details with respect to the purpose of the
prototype1. For example, when sketching a dialog box, the designer specifies its
size, the positions of each field and the titles of each label. However not all these
details are relevant to the goal of the prototype: it may be necessary to show where
the labels are, but too early to choose the text. The designer can convey this by
writing nonsense words or drawing squiggles, which shows the need for labels
without specifying their actual content.
Although it may seem contradictory, a detailed representation need not be precise.
This is an important characteristic of prototypes: those parts of the prototype that
are not precise are those open for future discussion or for exploration of the
design space. Yet they need to be incarnated in some form so the prototype can be
evaluated and iterated.
The level of precision usually increases as successive prototypes are developed
and more and more details are set. The forms of the prototypes reflect their level
of precision: sketches tend not to be precise, whereas computer simulations are
usually very precise. Graphic designers often prefer using hand sketches for early
prototypes because the drawing style can directly reflect what is precise and what
is not: the wigglely shape of an object or a squiggle that represents a label are
directly perceived as imprecise. This is more difficult to achieve with an on-line
drawing tool or a user-interface builder.
The form of the prototype must be adapted to the desired level of precision.
Precision defines the tension between what the prototype states (relevant details)
and what the prototype leaves open (irrelevant details). What the prototype states
is subject to evaluation; what the prototype leaves open is subject to more
discussion and design space exploration.
2.3 Interactivity
An important characteristic of HCI systems is that they are interactive: users both
respond to them and act upon them. Unfortunately, designing effective interaction
is difficult: many interactive systems (including many web sites) have a good
“look” but a poor “feel”. HCI designers can draw from a long tradition in visual
design for the former, but have relatively little experience with how interactive
software systems should be used: personal computers have only been common-
place for about a decade. Another problem is that the quality of interaction is
tightly linked to the end users and a deep understanding of their work practices: a
word processor designed for a professional typographer requires a different
interaction design than one designed for secretaries, even though ostensibly they
serve similar purposes. Designers must take the context of use into account when
designing the details of the interaction.
A critical role for an interactive system prototype is to illustrate how the user will
interact with the system. While this may seem more natural with on-line
prototypes, in fact it is often easier to explore different interaction strategies with
off-line prototypes. Note that interactivity and precision are orthogonal
dimensions. One can create an imprecise prototype that is highly interactive, such
as a series of paper screen images in which one person acts as the user and the
other plays the system. Or, one may create a very precise but non-interactive
1 Note that the terms low-fidelity and high-fidelity prototypes are often used in the literature. We
prefer the term precision because it refers to the content of the prototype itself, not its
relationship to the final, as-yet-undefined system.
Beaudouin-Lafon & Mackay Draft 1 - 4 Prototype Development and Tools
The benefits of buying summaries with Stuvia:
Guaranteed quality through customer reviews
Stuvia customers have reviewed more than 700,000 summaries. This how you know that you are buying the best documents.
Quick and easy check-out
You can quickly pay through credit card or Stuvia-credit for the summaries. There is no membership needed.
Focus on what matters
Your fellow students write the study notes themselves, which is why the documents are always reliable and up-to-date. This ensures you quickly get to the core!
Frequently asked questions
What do I get when I buy this document?
You get a PDF, available immediately after your purchase. The purchased document is accessible anytime, anywhere and indefinitely through your profile.
Satisfaction guarantee: how does it work?
Our satisfaction guarantee ensures that you always find a study document that suits you well. You fill out a form, and our customer service team takes care of the rest.
Who am I buying these notes from?
Stuvia is a marketplace, so you are not buying this document from us, but from seller Noman011. Stuvia facilitates payment to the seller.
Will I be stuck with a subscription?
No, you only buy these notes for $24.49. You're not tied to anything after your purchase.
