Interaction Design Sketchbook by Bill Verplank
Frameworks for designing interactive products and systems.

1. SKETCHING – beyond craft to design – the importance of alternatives.
2. INTERACTION – do? feel? know? Products, computers and networks.
3. DESIGN – motivation, meaning, modes, mappings.
4. PARADIGMS – brain, tool, media, life, vehicle, clothes.

Interaction Design Sketchbook

Bill Verplank 1 December 2009

p- 1/20

1. SKETCHING
Design is what people do. When we are being “ more than animals”, we plan and learn
and think about what is to come. It is usually best to have some design before building or
acting on the world. Sketches may be a first step in design but here I use sketches tocapture the emergent frameworks of a professional practice.

Computers are changing the process of design. It is easy now to copy and modify, tomimic and adapt, and to evolve from “working code” the next iteration of a system. This
direct engagement with the materials, producing immediate results, is what makes for a
craft tradition. There is no time to step back and plan or abstract and analyze. We need noprinciples, textbooks or classrooms, only studios. Masters pass on their practices toapprentices; the only learning is by doing.

The introduction of architecture and engineering as distinct from construction andmanufacture made explicit the role of drawings and design. Are we returning to craft andforgetting design?

I think we can have both. Professional practice must necessarily rely on learning by
doing, but it must also rely on anticipation and reflection. These sketches try to bridge theimmediacy of craft with the perspectives of design.

Interaction Design is design for people – design for human use. When we interact withtechnology or with others through technology we are increasingly faced with computers.
Computers are what make interaction design challenging. (EMBEDDED andUBIQUITOUS)

Interaction Design Sketchbook

Bill Verplank 1 December 2009

p- 2/20

Sketches are an essential designer’s tool for capturing preliminary observations and ideas.
If they are fluent and flexible they support creativity. Sketches can be concrete or abstract,
representational or symbolic, loose or tight, improvisational or rehearsed.

Robert McKim in Experiences in Visual Thinking teaches how to Draw by teaching how
to See and how to Imagine. Seeing feeds drawing, drawing improves seeing. What we see
is influenced by what we imagine; what we imagine depends on what we see. McKim’s
creative ideal of rapid visualization or Idea Sketching is the craft of doing all three at thesame time. This is similar to the experience of any craftsman in direct engagement withhis materials: imagining, shaping, seeing all at the same time.

Interaction Design Sketchbook

Bill Verplank 1 December 2009

p- 3/20

McKim also describes the rapid search for alternatives as an uncritical mode of thinking
that must be separated from criticism. Brainstorming is such a mode where the goals arefluency and flexibility – quantity and variety. If an idea is criticized before being
expressed it dies prematurely. Design as opposed to craft has this quality of separate
phases or modes. For example, an Express mode, producing many choices can befollowed by a Test phase, followed by a Cycle phase where the next strategy is chosen.
The basic design process is seen as cyclic or iterative, with distinct phases or modes.

Interaction Design Sketchbook

Bill Verplank 1 December 2009

p- 4/20

There is a danger in iteration if alternatives are not considered, if you are only working
on one design at a time, comparisons are never drawn, criteria are never challenged. At
the core of invention might be a hunch followed by a hack followed by another hunch(craft) but an idea or generalization is needed for generating alternatives, prototypes andtests (design). The end-goal is principles, which organize the value of a product which
creates a market which creates a paradigm and we are back to a fixed orbit. Design is the“transfer orbit” that gets us out of a small orbit into a larger one.

2. INTERACTION
INTERACTION DESIGN and INDUSTRIAL DESIGN
modes and mappings: the plasticity of computers.

Industrial design is a profession that grew up in the 20th century to shape manufactured
products. It was a response to the design freedom provided by modern materials andmanufacturing processes – especially plastics. With plastic, a product could take on
almost any shape, color and pattern. It could mimic metal or wood, look sleek orInteraction Design Sketchbook

Bill Verplank 1 December 2009

p- 5/20substantial, reveal or hide. The most famous industrial designer, Henry Dreyfus, camefrom theater design. Happily, his contributions went beyond the illusions of stagecraft toinclude basic design guidelines for communication (Symbol Source Book) andanthropometrics (Human Scale).

Interaction design is a profession that will mature in the 21st century. The central concern
is how to design for people – for their physical and emotional needs and increasingly for
their intellect. With computers, we can make products take on almost any behavior. The
response to human input can be delayed or repeated (mappings). From moment tomoment, products can change how they respond (modes). With networks, the notion of astand-alone product is obsolete. The effect of my actions may be local or remote.

Interaction Designers answer three questions:
How do you DO? How do you FEEL? How do you KNOW?

Even the simplest appliance requires doing, feeling and knowing. What I DO is flip alight switch and see (FEEL?) the light come on; what I need to KNOW is the mappingfrom switch to light. The greater the distance from input (switch) to output (light), themore difficult and varied are the possible conceptual models; the longer the delay
between doing and feeling, the more dependent I am on having good knowledge.

Interaction Design Sketchbook

Bill Verplank 1 December 2009

p- 6/20

How do you DO?

What if the light can be dimmed? Then I might use a continuous control or handle. One basic
choice for how we do things is that of button or handle; discrete or continuous.

A handle allows continuous control both in space and time. When I press a button (e.g. ON) themachine takes over. Buttons are more likely symbolic. Handles can be “analogic”. With buttons,
I am more often faced with a sequence of presses. With a handle a sequence becomes a gesture. I
use buttons for precision, handles for expression.
How do you FEEL?
The choice of senses (hearing, seeing, touching, etc) determines what we feel about the world.
“The medium is the message.”Marshall McLuhan divided all media into cool and hot. Based on the sensory qualities of media,
he described indistinct or fuzzy media like TV as “cool” after the jazz of his age (‘50s). In
contrast, the high definition of things like print, he called hot – think of them as too “hot” totouch. McLuhan’s cool media invite completion and participation; hot media are definitive andalready complete, they discourage debate. Designers are continually faced with this choice ofsuggestion or clarity, metaphor or model, poetry or law.

Interaction Design Sketchbook

Bill Verplank 1 December 2009

p- 7/20

How do you KNOW?

The new challenge for Interaction Design is the complexity of behavior possible with ubiquitous
computers. Some simple theory of how people know may be useful. A conscious consideration ofwhat we are expecting of the people for whom we are designing is essential.
The easiest interaction requires knowing only one step at a time – path knowledge. Somesituations call for immediate performance by first-timers, for example, emergency procedures
like escaping an airplane. The best assumption about the user’s model is that they are expecting
step-by-step instructions.
Other situations benefit from map knowledge. Kevin Lynch, the city planner, believed that thebest urban design supports not only efficient paths but mental maps. He called this quality“imageability”.

Interaction Design Sketchbook

Bill Verplank 1 December 2009

p- 8/20

Lynch asked people to describe paths and to sketch maps of their city. He classified everythingmentioned as one of five elements: Landmark, District, Edge (between districts), Path or Node(where paths intersect). He found that more imageable cities, for example, have paths alongedges so that relationships between districts can be seen, or landmarks at nodes so that they canbe used for navigation.
There are a broad range of interaction designs from word processors and web browsers towatches and radios where Lynch’s notions are of use. Paths are the sequences of actions orcommands. Districts are modes or choices. If the “edges” between modes are visible, then I havea chance of constructing a more complete map while I follow various paths. Memorable graphic
devices at meaningful places in the interface help users construct coherent mental models fromwhich new tasks and uses can be inferred.

Interaction Design Sketchbook

Bill Verplank 1 December 2009

p- 9/20

Here, the choices for interaction designers are arranged around the three questions. Any productor system may feature one or the other but the best systems support both.
A novice needs a path, a learner needs a map. Skilled experts have their own efficient paths andmaps to refer to when new problems are presented.
The mouse is a handle for moving among millions of pixels with a button for selecting one.
Buttons with variation, for example, the keys of a music synthesizer keyboard with velocity andaftertouch allow not only discrete selections but expression.
The best web pages have “cool” attractors for engaging new visitors and also detailed anddefinitive “hot” information, for example, URL’s, product specifications or licenses.
Good interactions are the appropriate styles of doing, feeling and knowing plus the freedom tomove from one to the other.

Interaction Design Sketchbook

Bill Verplank 1 December 2009p- 10/20

3. DESIGN
Successful interaction design involves balancing a variety of concerns using a variety ofmethods or representations. These are not suggested as stages in a design process but asframework for checking to see that the proper concerns have been addressed.

At the top are overviews, along the bottom are details. From left to right the columns
could be called motivations, meanings, modes and mappings, the process from left toright might involve observation, invention, engineering and appearance.

The result of an interaction design is displays and controls and the behaviors that connect
them (mappings). In order to create a coherent implementation there must be both a task
analysis of the step-by-step interactions as well as an over-all conceptual model thatorganizes the behavior (modes) both for implementers and for users. The invention of aninteraction involves not only one compelling scenario and a unifying metaphor but
consideration of a variety of scenarios and a wide exploration of alternative and mixed
metaphors.

Interaction Design Sketchbook

Bill Verplank 1 December 2009p- 11/20

I will illustrate the framework with Stanford student Celine Perrin’s invention forMusic250a CHI Technology: a two-way “Haptic Pager”. The ERROR or annoyance isthat cell phones ring in public. Her IDEA is a one-to-one silent and personal link: whenholding hands, give a squeeze (METAPHOR). One SCENARIO has Sam at homewondering if Sally is just stuck in a check-out line at the store.

The necessary users’ conceptual MODEL is to think of it as 1. Single Channel where Sam
and Sally are directly connected, with 2. Packets which are sent out, and at some timelatter, replies are received. The corresponding TASK involves a SET-UP mode where the
Sam/Sally link is chosen and then a SQUEEZE mode where haptic messages areexchanged. A proposed DISPLAY shows a list of people and the corresponding
CONTROL is selecting with a tap of the stylus. The vibrator DISPLAY might be on anecklace for receiving and the CONTROL would be a squeeze of the necklace forsending.

Interaction Design Sketchbook

Bill Verplank 1 December 2009p- 12/20

The important thing about the framework is to use it as a check on the balance ofapproaches from invention to implementation and from overviews to details. It is notintended as a strict ordering of the invention and design process. Most of the projects
from the class actually started with some sort of CONTROL idea and only later
considered whose problem they might be solving.

With each perspective, alternatives can be considered. For example, how would the
product change if it was being designed for a mother with three kids or an elderly parent
living alone? What if the metaphor was dancing or arm-wrestling? The framework is also
useful in communicating a finished design but my preference is to focus on quick
sketches in early stages of design. That is where computers provide the least support andwhere new tools and techniques might focus.

Interaction Design Sketchbook

Bill Verplank 1 December 2009p- 13/20

4. PARADIGMS
The design of human-computer interaction has been organized around competing beliefs
and professional establishments. It is important to realize how insular each of theseparadigms can be and to consider how to cross paradigms.

Everything that comes between my environment and me presents an interaction design
problem. McLuhan called these “extensions” and in particular, he was concerned withsensory extensions. We must extend McLuhan’s analysis beyond electronics(instantaneous) to computers (arbitrary). We will soon have computers in everything, they
will sense and act and communicate with each other. How are we to design them so that
we can best interact with and through them?

To look for the competing paradigms, start by thinking about McLuhan’s extensions.
Electronics are extensions of our senses (media). Clothing is an extension of our skin
(fashion). Even architecture can be seen as an extension of our skin, which we leavebehind. Cars are extensions (vehicles) that we take with us that need roads that staybehind (infrastructure). What happens when our clothing has computers in it? What
happens when we think of computers as clothing?

The last fifty years of thinking about human-computer interaction can be understood as acompetition between three paradigms: brains, tools, media.

Computers are electronic brains.

Interaction Design Sketchbook

Bill Verplank 1 December 2009p- 14/20

In the early days of computers, they were described as “electronic brains” and many aprofessional career has been organized around the idea of “artificial intelligence”. Thiswas just the latest challenge to humans (we had long given up the hope that we arestronger than machines) and technological pundits love to play on our pride. (Minsky,
Kurzweil) The next challenges will be affect (emotional computers), consciousness (selfaware computers) and soul (spiritual computers).

Names: agent, recognition
Goal: intelligence and autonomy
Style: dialog and language, recognition, multi-modal
Result: better models for people (linguistics, cognitive science)
Failure: promises (anthropomorphism and animism)

In the end, trying to make computers more like us only helps to create a better mirror.
These are very self-centered concerns. We may have better models for language or
thought, for emotions and spirit, but we do not understand the world any better or how wemight change it.

Computers are tools.

In reaction to the idea of artificial intelligence, Doug Englebart at SRI created a groupdedicated to what he calls “augmented intelligence”. Earlier, JCR Lickleider had outlined
the promise of such “man-machine symbiosis”; and earlier yet, Vannever Bush had
dreamed about “how we may think”.
Interaction Design Sketchbook

Bill Verplank 1 December 2009p- 15/20

Englebart is important because he set in motion a style of human-computer interactionthat has become the norm: direct manipulation.

Names: tool, task, use, HCI
Goal: empowerment, usability
Style: graphical user interfaces, direct manipulation, point and click
Result: personal computers, word processing and desktop publishing, the web
Failure: no fun, “user friendly”

Computers are Media.

If we shift our focus from tasks to communication and entertainment, we realize thatcomputers are invading every medium from telephones and televisions to advertising andeducation. The focus is on expression.

Names: multi-media, the web, “being digital”
Goal: engaging, compelling, attention, expression
Style: flash, magic
Result: interactive TV
Failure: digital divide

Interaction Design Sketchbook

Bill Verplank 1 December 2009

p- 16/20

Computers are Life.

Names: Artificial Life, Chaos,
Heroes: R.Brooks, C.Sims
Goal: play god, evolution
Style: evolution, simple rules / complex behavior
Result: pretty pictures, Rorschach
Failure: no generalizations, no understanding

Computers are Vehicles.

The metaphor of vehicle nicely captures the goals of transportation and navigation(vehicles of thought or expression) and as well as the necessity for roadways, rules andmaps (infrastructure).

Underlying the tool metaphor is the larger task of making agreements about theunderlying representations that the tools are manipulating: infrastructure. When I send adocument to a printer, the representation used (Postscript) may be different from what I
edit (Word) or send to someone else (RTF).

These representations limit what can be sent and received but also what manipulations
are possible, how I can organize and re-organize, view, explore and edit.

Interaction Design Sketchbook

Bill Verplank 1 December 2009p- 17/20

Names: standards, infrastructure, super-highway
Heroes: ARPA, Berners-Lee
Goal: inter-operability, freedom/ownership/, compatibility
Style: open, dominance
Result: PC, Ethernet, Kanji/English
Failure: digital television, Microsoft

Computers are Fashion.

Heroes: Jobs
Names: wearables
Goal: belonging, recognition
Style: style
Result: pleasure
Failure: waste

How to deal with so many paradigms – don’t get too serious. Beware fanatics – ignore
them. Invent your own: “interaction design”. Live and thrive on in the reality of multidisciplinary teamwork.

In searching for metaphors, consider a deeper understanding of the essence of computers:
representation for manipulation.

Computers are simulators.

Interaction Design Sketchbook

Bill Verplank 1 December 2009p- 18/20

What computers do is to represent other things both real and imaginary. The form ofrepresentation is not arbitrary. The best representations are compact and extensible,
efficient and widely available. The goal of representation is usually some form ofmanipulation or translation.

There is a considerable body of theory and experience in the business of representation.
Shannon’s measure of information, the bit, is the foundation but his definition goes nofurther than statistics; with the statistics of a signal, the most efficient code can be
designed. Information theory is the foundation of coding but it does not cover the valuesof history and meaning.

Linguistics and semiology are the study of representations. Representations forcommunication and thought. They might be the root of fruitful metaphors. But for now,
consider these six.

From Brain to Tool to Media these three organize our differing approaches to the relation
between people and computers. The broader concerns of not just Brains but Life sustain
Interaction Design Sketchbook

Bill Verplank 1 December 2009p- 19/20

the prospect of autonomous, intelligent, evolving systems with which we live. Below
Tools are the deeper concerns of the infrastructure needed for the Vehicles oftransportation and communication. And ultimately, Media will both literally andfiguratively lead to Fashion – how we respond to the need for belonging and selfexpression.

Interaction Design Sketchbook

Bill Verplank 1 December 2009p- 20/20

Interaction Design Sketchbook

Bill Verplank 1 December 2009p- 21/20

Piaget described three stages of learning. We are born with ENACTIVE or kinesthetic
knowledge; we know how to grasp and suck. At a certain age we pay more attention to
how things look; our ICONIC thinking is mistaken for example by a tall glass as “more”.
Only at a certain age do we understand conservation; then we are ready for SYMBOLIC
thinking. Bruner says that we always have all three modes of thinking but in different
proportions (this sketch is from Alan Kay). Gardner has extended this notion to sevenintelligences and I suppose we could find a human-computer interaction style tocorrespond to each. For present purposes, three are enough.

The development of human-computer interfaces has followed the opposite path. The firstinteractive computers used teletypes (TTY) and the style of interaction was a dialog ofsymbols; I type and the computer types back at me. With CRTs we first emulated the oldstyle with “glass teletypes” but with the invention of mouse and bit-map display, theiconic graphical “direct manipulation” interface became the dominant style. This
progression suggests that the next stage is enactive interfaces, more suited to expressive
musical interaction than with pictures or symbols. One possibility is Ishii’s Tangible User
Interfaces (TUI).

Computer-as-person motivates dialog where the goal is autonomy and intelligence.
Computer-as-tool motivates direct manipulation where the goals are efficiency andempowerment. Computer-as-media motivates expression, engagement and immersion. In
the expressive realm, beyond media are all the notions associated with fashion withwearables as the most obvious implementation. Underneath tools are all the vehicles that
depend on infrastructure. Extending the autonomy realm are self-evolving computers thatare thought of as forms of life.

Interaction Design Sketchbook

Bill Verplank 1 December 2009p- 22/20

Interaction Design Sketchbook

Bill Verplank 1 December 2009p- 23/20