Hartmann 2009 Prototypes Ch2
Hartmann 2009 Prototypes Ch2
Hartmann 2009 Prototypes Ch2
This dissertation proposes novel tools for the prototyping of user interfaces as part of a larger
user interface design process. Doing so successfully requires understanding underlying
principles and practices of design. This chapter presents a brief review of different models of
design and the role prototypes play in the process.
User interface design is informed and influenced by professional design disciplines such as
product design on one side and by software engineering on the other side. This section
provides a brief overview of the history of professional design and introduces some
established models of the design process to motivate the development of design-specific tools.
Herbert Simon provided a very broad definition of design as “devising courses of action aimed
at changing current situations into preferred ones” [34]. Countless competing definitions
exist. Common to many definitions is the focus on a specific process, with the goal of creating
plans or models for the creation of new artifacts, which have to fit potentially conflicting sets of
constraints, requirements, and preferences. To elaborate on these three core characteristics:
1) Design is a process and has structure — there is a set of core activities designers engage
in, regardless of the domain of design.
2) Design is not manufacturing — for physical artifacts, the final realization is done by
someone else. For software, the division between design and implementation may be less
clear. In both domains, the end product of design is often a specification that will be
interpreted and implemented by someone else.
3) Design has a client and users — it is accountable to external judgment. Different
stakeholders may have conflicting expectations.
Design is thus distinguishable as a unique discipline from art (creation which is accountable
to the vision of the artist); engineering (“the application of scientific and mathematical
Excerpt from: Björn Hartmann, Gaining Design Insight Through Interaction Prototyping Tools.
Ph.D. Dissertation, Stanford University Computer Science Department, September 2009.
principles to practical ends” [1]); and science (the development of generalizable knowledge
through observation, experimentation and hypothesis testing).
A more pragmatic characterization would be that design is what professional designers do. The field
of design research adopts this perspective and describes the practices of successful
practitioners to analyze what makes these practices effective. Cross [8], a prominent design
researcher, argues that design has a “unique way of knowing” and distills four core abilities
exercised by professional practitioners:
1) resolving ill-defined problems
2) adopting solution-focused cognitive strategies
3) employing abductive or appositional thinking
4) using non-verbal modeling media
In ill-defined or “wicked” [31] problems, the problem formulation itself is not clear at the outset
and remains to be defined. Because the problem statement itself is not fixed, it is not possible
to enumerate all possible options or to find an optimal solution. Simon argued that design
problems therefore cannot be solved by optimizing, they can only be satisficed [34] — one can
tell an adequate solution from an inadequate one, and make relative judgments of fit, but no
global optimum exists.
Designers adopt solution-focused strategies by generating possible solutions first, then
checking to what extent the generated ideas are adequate for the problem. Cross, reporting on
a study of designers, summarizes: “Instead of generating abstract relationships and attributes,
then deriving the appropriate object to be considered, the [designers] always generated a
design element and then determined its qualities.” [8:100]. Creation comes before analysis,
and only through the creation of prototypes and other representations is it possible to test to
what extent a design idea fulfills the design goals.
This tendency to produce proposals first is an expression of abductive reasoning which, in
contrast to deductive or inductive thinking, starts with concrete observations and guesses,
which only later lead to theories about a design space. Making the right guesses or creative
leaps requires experience.
Finally, designers tend think with, and communicate through artifacts and models rather
than written language – sketches, diagrams, models and prototypes are used both to work
through problems as well as to anchor communication with design team members and other
stakeholders [8:28].
2
2.1.2 A SHORT HISTORY OF PROFESSIONAL DESIGN
Architecture has the claim to being the oldest design discipline. Its focus is on the holistic
creation of structures that simultaneously satisfy requirements of functionality, economy, and
aesthetics. Notably the architect is not the one who creates the building itself: her role is to
transform needs, requirements, and constraints into a suitable plan that can then executed by
a builder. Professional product design as a discipline emerged as a result of the shift from one-off
artifacts created by craftspersons to mass production after the industrial revolution. While
craftsmen would iterate from project to project and slowly evolve a product over time, mass
production yielded many identical copies [24,36]. Because making changes to the tooling for
mass manufacturing became more expensive, while marginal cost of production decreased,
more care and planning was needed before manufacturing commenced to ensure that the
manufactured product was in fact functional and desirable to consumers. Notable pioneers of
product design in the first half of the 20th century include Henry Dreyfuss, Raymond Loewy,
Walter Dorwin Teague, and Norman Bel Geddes. Their autobiographies offer detailed
accounts of the mid-century industrial design process in North America [10,24,36].
Product design as a methodology has since been assimilated by the software industry.
One of the formative academic works that advocated for this transfer of process was
Winograd’s “Bringing Design to Software” [37]. As software is ultimately used by people, its
user interfaces should be created with the same concern for utility, usability, and satisfaction
as other artifacts of daily life.
How do the underlying principles of designerly knowledge introduced in section 2.1.1 find
expression in designers’ work practices? The process that evolved from architecture and
product design is characterized by four core strategies: need finding through user research
methods to establish constraints, ideation to generate many possible ideas and subsequently
select promising ideas, prototyping to create concrete models and approximations based on
those ideas, and iterative refinement based on testing generated prototypes. A more detailed
model of this iterative process, as described by Moggridge [26], is shown in Figure 2.1.
Need finding involves learning about the target users of a new product — what are their
unmet needs and unresolved pains; what are their motivations? Needs, requirements, and
constraints may be expressed in narrative form, e.g., as personas and scenarios [7:p. 123]; or
more formally, e.g., as user and task models [13]. The data gathered from such user research is
3
Figure 2.1: Design process stages according to Moggridge
[189]. Diagram redrawn by the author.
then used to construct a concrete point of view or framing that encapsulates the goals a new
design seeks to achieve. Given a framing, designers generate a multitude of concrete
proposals. Initially, idea generation can take the shape of brainstorming or sketching of
alternatives. To move from graphical envisioning towards concrete, testable artifacts,
designers next generate concrete prototypes. These proposals are then compared an evaluated
— against each other, or against user or stakeholder feedback. The gained knowledge is then
used to drive the next iteration.
The process model described above is commonly observed, but by no means canonical. A
wide-ranging overview of different design methodologies can be found in Jones [19]. Jones
categorizes these methods and distills an important common thread: design is a sequence of
divergent steps, where ideas are produced; and convergent steps, where ideas are eliminated.
Buxton echoes this theme, writing that design alternates between concept generation and
concept selection [3].
The prior section established that prototyping is a core activity in design across different
domains. This section reviews some conceptions of prototypes in design and computer
science and summarizes the literature on the purpose, role, and place of prototypes.
4
2.2.1 PROTOTYPES, DEFINED
The notion of a prototype is overloaded and there is no generally agreed upon definition. As a
broad, inclusive definition, Moggridge regards a prototype as “a representation of a design,
made before the final solution exists.” [26]. Houde and Hill similarly point to the purpose of
prototypes as indicators of a future reality, and distinguish between two functions —
exploration and demonstration [16]. Buchenau and Suri add a third function of prototypes as
tools for gaining empathy: “[A]n Experience Prototype is any kind of representation, in any
medium, that is designed to understand, explore or communicate what it might be like to
engage with the product, space or system we are designing” [2]. Lim and Stolterman
foreground the role of prototypes as learning vehicles: “Prototypes are the means by which
designers organically and evolutionarily learn, discover, generate, and refine designs.” [23]
The above definitions place very little restrictions on the medium of the prototype or the
attributes of a design it tries to represent. In the software engineering literature, prototypes
are often defined more narrowly as working models, created in the same software medium as
the final deliverable. Lichter writes that “Prototyping involves producing early working
versions (‘prototypes’) of the future application system and experimenting with them” [22].
Connell and Schafer explicitly distinguish software prototypes from — in their view
insufficient — other modeling media: “A software prototype is a dynamic visual model
providing a communication tool for customer and developer that is far more effective than
either narrative prose or static visual models for portraying functionality.” (quoted in [28])
In contrast to the software engineering focus on producing functional software, Rettig
[29] and Wong [38] advocate that user interface prototypes should not be constructed in
software in early project stages. Both argue for low-fidelity paper-based prototypes. To better
understand this multitude of viewpoints, this section summarizes prior publications about
prototypes and prototyping in design in general, and within HCI and software engineering in
particular.
5
2.2.2.1 Quantifying the Value of Prototyping
The ideal experimental result in favor of prototyping would be that prototyping leads to
better design outcomes. However, operationalizing design quality in experimental settings is
difficult and isolating the impact of prototyping has proven to be problematic for real-world
design tasks. The most concrete result to date is reported by Dow et al. [9] who found that for
a constrained experimental design task with a time limit and a concretely measurable
outcome, participants who built early prototypes and iterated outperformed those who did
not prototype. Dow’s experimental task was the mechanical engineering egg-drop exercise —
participants are asked to create a vessel that protects a raw egg from a vertical fall and
subsequent impact, using a limited set of everyday materials. In a between-subjects design,
the treatment group, which had to build a testable prototype early and was forced to iterate
on that prototype, outperformed the control group, in which prototyping was not
encouraged. In particular, novices unfamiliar with the task who prototyped performed as well
as experts who did not prototype.
In the absence of other strong experimental results, a frequently cited benefit by
proponents is that prototyping leads to earlier identification of problems and blind alleys,
when it is still feasible to fix them. McConnell summarizes several studies that have shown
that for software defects, the cost of finding an error increases by an order of magnitude for
each product phase [25:29], and it appears reasonable to extrapolate similar costs to usability
and user experience problems.
Embodied cognition theory argues that thought (mind) and action (body) are deeply
integrated and co-produce learning and reasoning [4,5,6]. In this view, “thinking through
doing” — engaging with ideas on a tangible level — is a more successful strategy for design
than thinking hard about the problem alone. Why might this be the case?
Polanyi argues that much of our expertise and skill are “action-centered” and as such not
available to explicit, symbolic cognition. Polanyi introduced the term tacit knowledge to
6
describe such expertise. A well-known example is the problem of describing to someone else
how to ride a bicycle. Riding a bike is an action-centered skill, one gained through repeated
practice and one only accessible as an action in the context of sitting on a bike. Practicing
designers such as Moggridge [26] argue that much knowledge in design is tacit and that
designers therefore need to create concrete artifacts to express their tacit knowledge [27].
Proponents of distributed cognition argue that what is cognitive extends beyond the individual
and encompasses the environment, artifacts and other people [15,17]. Hutchins describes in
detailed case studies how people solve hard problems by offloading tasks into appropriate
artifacts in their environment. For example, medieval navigation was aided by the Astrolabe;
airline navigation is a task distributed between pilot, co-pilot, and instruments.
In this view, designers need concrete artifacts such as prototypes to be more effective in
their reasoning. Along the same lines, Hutchins also argues that “material anchors” help
stabilize conceptual knowledge [18]: “Reasoning processes require stable representations of
constraints. [...][T]he association of conceptual structure with material structure can
stabilize conceptual representation.”
Kirsh and Maglio introduced a distinction between pragmatic and epistemic actions [21]:
pragmatic actions are those that advance us toward a known goal; epistemic actions in
contrast uncover more information about the goal. Kirsh and Maglio showed, through a study
of Tetris players, that external actions in the world can be faster or more efficient than mental
operations. Their study measured the amount of piece rotations performed by novice and
expert Tetris players, and found that experts rotated their pieces more frequently. Why?
Because the cost of performing the rotation in the game and then visually comparing the
shape of the piece with the shape of open gaps on the board was faster than mentally rotating
and checking for fit. Similar results have been found for the game of Scrabble, where expert
players rearrange their set of letters to help them reason about possible words that can be
formed with that set. Constructing concrete prototypes could thus be faster than trying to
reason about a design problem in the abstract.
7
of a design challenge by working it through, rather than thinking it through. For Schoen,
successful product and architectural designs result from a series of “conversations with
materials.” Here, the “conversations” are interactions between the designer and the design
medium — sketching on paper, shaping clay, building with foam core. The production of
concrete prototypes provides the crucial element of surprise, unexpected realizations that the
designer could not have arrived at without producing a concrete manifestation of her ideas.
Schoen terms this element of surprise “backtalk”. The backtalk that artifacts provide helps
uncover problems or generate suggestions for new designs.
What questions do prototypes answer? When and how should they be constructed? This
section summarizes arguments from product design and human-computer interaction
research. The subsequent section will present contrasting arguments from software
engineering.
8
Figure 2.2: The Houde & Hill model distinguishes Role,
Implementation, and Look and Feel functions of prototypes.
Role refers to questions about the function that an artifact serves in a user’s life—the way
in which it is useful to them. Look and feel is concerned with questions about the concrete
sensory experience of using an artifact—what the user looks at, feels and hears while using it.
Implementation refers to algorithms and engineering techniques used to realize functionality
of a product — “the ‘nuts and bolts’ of how it actually works.”
For reasons of economy, any given prototype will only address some of these aspects, or
prioritize some over others. For example, a video clip that shows a “commercial” of an
envisioned product in use would prioritize its role (Figure 2.2–1); a screen mockup of a new
graphics application showing menus and toolboxes would prioritize look and feel (Figure
2.2–2); while a demonstration of algorithms required for that graphics application would
prioritize implementation. Prototypes that strive to strike a balance and address all three
questions are labeled “integration prototypes” (Figure 2.2–3). Such prototypes most closely
approximate the final design and permit testing of the overall user experience, but are also
most resource intensive to construct.
9
Figure 2.3: The IDEO three-stage model of prototyping: as
a design project progresses, the number of entertained ideas
decreases, and prototypes turn from inspiration tools to
validation tools. Diagram redrawn by the author.
To understand existing situations that call for better design solutions, experience
prototyping may involve role playing to gain empathy for target users. As an example, the
authors cite the redesign of a remote control interface for an underwater camera vehicle. The
existing experience was prototyped by one designer “playing” the vehicle with a shoulder
mounted camera, and another designer yelling commands (“move up”) and watching the
video feed on a television monitor.
To explore future situations, Buchenau and Suri advocate creating multiple concrete
artifacts or repurposing found artifacts and everyday objects. Designers on the project team
have enough shared context to interpret these objects as stand-ins for future artifacts. For
example, a pebble might be used to suggest a handheld wireless controller. However, if
exploration requires input from external users, experience prototypes may have to be more
specific and functional, as end users don’t share the same background or conceptual
framework with the team.
When communicating design solutions to clients and other external parties through
prototypes, the intent is frequently to persuade. Such prototypes are often polished and
complete and can take on the role of a “living specification.” The authors caution that
prototypes that succeed in conveying a complete experience can easily be mistaken to be a
complete product.
10
generated to get inspiration. Here, prototypes are often very dissimilar from each other to
explore fundamentally different design options. Later on, a smaller number of ideas are
iteratively evolved to resolve more focused design questions. Through both phases, project
specifications are derived from the prototypes. Towards the end of a project, very complete
prototypes are built to validate the design specification as a whole. Haenlein also makes an
explicit distinction between prototypes used internally by the design team for exploration,
and prototypes created for communicating design insights to external clients and other
stakeholders.
Buxton [3] draws a distinction between sketches and prototypes. For him, sketches are
“quick, timely, inexpensive, disposable, plentiful”; “they suggest and explore rather than
confirm”. Prototypes in contrast are “didactic, they describe refine, answer, test, resolve; they
are specific and are depictions” [3:140]. While the distinction in nomenclature is unique to
Buxton, the expressed difference between prototypes used for inspiration and those used for
experimentation, evolution and validation matches the IDEO model.
11
advocates against building functional software prototypes of user interfaces early on because
their surface finish is too high at a time when the general resolution of the project is still low.
According to Rettig, building functional UI prototypes (“high-fidelity prototypes”) early on
squanders design resources and yields the wrong kind of feedback. Particularly, Rettig cites
four problems:
1) High-fidelity prototypes take too long to construct and modify.
2) Testers of the prototype are lead to comment on surface attributes such as typography
and alignment, when those are not the attributes tested.
3) The act of constructing a high-fidelity prototype creates emotional investment by
developers in that prototype, which results in resistance to act on feedback that asks for
fundamental changes. Similarly, a high-fidelity prototype creates expectations by users
exposed to the prototype that may be hard to change later.
4) High-fidelity prototypes are too brittle and have no graceful “repair strategies” if users
run into bugs.
As an alternative, Rettig proposes paper prototyping of user interfaces, where interfaces are
assembled out of different layers of cut out paper strips. A designer simulates the logic of the
application by rearranging paper strips. Wong is also concerned with the fidelity of UI
prototypes and suggests taking inspiration from graphic design by creating “rough” UI
prototypes through sketching and omission of concrete details.
One fundamental shortcoming of paper-based UI prototyping is that the human
“computer” who rearranges UI elements fundamentally changes the experience of interface
dynamics. While useful for exploring questions of interface layout, content, and structure,
paper prototypes are therefore less useful for exploring interactive behaviors in user
interfaces.
This section summarizes publications on prototyping from outside the field of human-
computer interaction and product design. Not surprisingly, software engineering prototypes
are more frequently concerned with testing implementation strategies than user experience.
However, the software engineering literature also departs from human-computer interaction
publications on prototyping in additional ways: prototypes are frequently seen as early
version of the final software, rather than standalone artifacts to be discarded after testing. In
12
addition, more emphasis is placed on capturing and documenting what questions a prototype
explored, and what was learned from it.
Table 2.1: Three purposes of prototypes according to Floyd [79] (table redrawn from
Schneider’s summary [220].)
13
advocated by designers, which are created with the expectation of being discarded.
14
system). Lichter et al.’s review of five real-world case studies showed little consistency in the
selection of prototyping strategies in the surveyed companies.
Given the previous review of both human-computer interaction and software engineering
literature on prototyping, we can now combine the various presented perspectives in to a
single framework that addresses purpose, aspects, and functionality of user interface
prototypes. For this dissertation, we will define a user interface prototype as a concrete artifact
that can be experienced by a user as if it possessed some or all of the interactive qualities of the envisioned
interface, constructed for the purpose of generating feedback.
Three high-level goals why designers prototype have been presented (Figure 2.4): First,
15
Figure 2.5: What aspects of a product can prototypes
approximate?
prototypes are built to give the designer experiential insight into some situation that already
exists [2]. Second, prototyping is a technique to gain information about possible future
situations [12]. As described by Floyd [11] and Haenlein [14], this stage of prototyping can
have three different goals: to explore the space of alternatives, to conduct more focused
experiments comparing two or more options, and to get real-world validation. Third,
prototypes are used to aid communication between different project stakeholders with
different “languages.” Within a design team, experts with different realms of expertise use
prototypes to serve as boundary objects [35] that can bridge language differences and serve as
a common referent in discussion. For communication with clients, prototypes are frequently
constructed to persuade the client.
Three different aspects of a final product can be tested in a prototype (Figure 2.5), as
described in Houde & Hill [16]: The role a current or future product plays for a users; the look
and feel of the product, and its implementation strategies. Within the category of look and
feel, designers further distinguish between “looks like” prototypes that express the aesthetic,
16
visual, and material qualities of a product, and “works like” prototypes that exhibit
interactive behaviors.
Works-like prototypes can either exhibit full functionality, or limit functionality by
selecting a horizontal or vertical slice of behavior (Figure 2.6). The functionality in a works-
like prototype may or may not share implementation strategies and tools with the final
product. Thus, four different realization methods are possible: building a working
implementation with the same toolset as the final product; building a working
implementation with a different toolset specifically geared towards prototyping; creating a
lower-fidelity approximation; or simulating the functionality.
The prototyping tools in this dissertation support the creation of a specific subset of
prototypes (shown through shading in Figure 2.4–Figure 2.6). The introduced tools focus on
prototypes created to explore design options or test specific ideas through experiments; these
prototypes have working interactive behaviors, but are not necessarily comprehensive and are
expressed in a new, prototype-specific tool, rather than in production-ready code.
With this particular point-of-view established, we next review related prior research
into authoring techniques and systems.
17
REFERENCES
1. The American Heritage Dictionary of the English Language. Houghton Mifflin Company, 2000.
2. Buchenau, M. and Suri, J.F. Experience prototyping. Proceedings of the 3rd conference on
Designing interactive systems: processes, practices, methods, and techniques, ACM (2000), 424-433.
3. Buxton, B. Sketching User Experiences: Getting the Design Right and the Right Design. Morgan
Kaufmann, 2007.
4. Clark, A. Being There. MIT Press, 1997.
5. Clark, A. Supersizing the Mind. Oxford University Press US, 2008.
6. Clark, A. and Chalmers, D. The Extended Mind. Analysis 58, 1 (1998), 7-19.
7. Cooper, A. The Inmates Are Running the Asylum. Sams Publishing, 1999.
8. Cross, N. Designerly Ways of Knowing. Birkhäuser Basel, 2007.
9. Dow, S., Heddleston, K., and Klemmer, S.R. The Efficacy of Prototyping Under Time
Constraints. Proceedings of Creativity & Cognition 2009, ACM (2009).
10. Dreyfuss, H. Designing for people. Simon and Schuster, 1955.
11. Floyd, C. A Systematic Look at Prototyping. In Budde, ed., Approaches to Prototyping.
Springer Verlag, 1984, 105-122.
12. Gedenryd, H. How Designers Work. Lund University, 1998.
13. Hackos, J.T. and Redish, J.C. User and Task Analysis for Interface Design. Wiley, 1998.
14. Haenlein, H. Personal Communication. 2007.
15. Hollan, J., Hutchins, E., and Kirsh, D. Distributed cognition: toward a new foundation for
human-computer interaction research. ACM Trans. Comput.-Hum. Interact. 7, 2 (2000), 174-
196.
16. Houde, S. and Hill, C. What do Prototypes Prototype? In M. Helander, T.K. Landauer and
P. Prabhu, eds., Handbook of Human-Computer Interaction. Elsevier Science BV, 1997.
17. Hutchins, E. Cognition in the Wild. MIT Press, 1995.
18. Hutchins, E. Material anchors for conceptual blends. Journal of Pragmatics 37, 10 (2005),
1555-1577.
19. Jones, J.C. Design Methods. Wiley, 1992.
20. Jørgensen, A.H. On the psychology of prototyping. In R. Budde, ed., Approaches to
Prototyping. Springer Verlag, 1984, 278-289.
21. Kirsh, D. and Maglio, P. On distinguishing epistemic from pragmatic action. Cognitive
Science 18, 4 (1994), 513-549.
22. Lichter, H., Schneider-Hufschmidt, M., and Züllighoven, H. Prototyping in Industrial
Software Projects-Bridging the Gap Between Theory and Practice. IEEE Trans. Softw. Eng.
20, 11 (1994), 825-832.
23. Lim, Y., Stolterman, E., and Tenenberg, J. The anatomy of prototypes: Prototypes as
filters, prototypes as manifestations of design ideas. ACM Trans. Comput.-Hum. Interact. 15, 2
(2008), 1-27.
24. Loewy, R. Never Leave Well Enough Alone: The Personal Record of an Industrial Designer. Simon
and Schuster, 1951.
25. McConnell, S. Code Complete: A Practical Handbook of Software Construction, 2nd ed. Microsoft
Press, 2004.
26. Moggridge, B. Designing Interactions. The MIT Press, 2007.
27. Polanyi, M. The Tacit Dimension. Doubleday, 1966.
28. Pomberger, G., Bischofberger, W.R., Kolb, D., Pree, W., and Schlemm, H. Prototyping-
Oriented Software Development - Concepts and Tools. Structured Programming 12, 1 (1991),
18
43-60.
29. Rettig, M. Prototyping for tiny fingers. Communications of the ACM 37, 4 (1994), 21-27.
30. Riddle, W.E. Advancing the state of the art in software system prototyping. In R. Budde,
ed., Approaches to Prototyping. Springer Verlag, 1984, 19-26.
31. Rittel, H. and Webber, M. Dilemmas in a General Theory of Planning. Policy Sciences 4,
(1973), 155-169.
32. Schneider, K. Prototypes as assets, not toys: why and how to extract knowledge from
prototypes. Proceedings of the 18th international conference on Software engineering, IEEE
Computer Society (1996), 522-531.
33. Schon, D.A. The reflective practitioner. Basic Books, 1983.
34. Simon, H.A. The sciences of the artificial. MIT Press, 1996.
35. Star, S. and Griesemer, J. Institutional Ecology, `Translations' and Boundary Objects:
Amateurs and Professionals in Berkeley's Museum of Vertebrate Zoology, 1907-39. Social
Studies of Science 19, 3 (1989), 420, 387.
36. Teague, W.D. Design This Day; the Technique of Order in the Machine Age. Harcourt, Brace and
Company, New York, 1940.
37. Winograd, T., ed. Bringing design to software. ACM, 1996.
38. Wong, Y.Y. Rough and ready prototypes: lessons from graphic design. Posters and short
talks of the 1992 SIGCHI conference on Human factors in computing systems, ACM (1992), 83-84.
19