Designing Interactions

Bill Moggridge

The MITPress
Cambridge,Massachusetts
London, England
Foreword
WhatIs InteractionDesign?
by Gillian Cramp ton Smith
 Gillian Crampton Smith, the director of Interaction Design Institute Ivrea,
is the foremost academic in the emerging discipline of interaction design.
She studied philosophy and art history at Cambridge University ,

V~EW~
OF graduating in 1968. She spent the next decade as a designer, first in book
publishing, and then on the Sunday Times and TimesLiterarySupplement.
"f/1£SjSTE?/V\ In 1981, at the leading edge of desktop publishing, she designed and
5~STEM1>1""1 implemented a page layout program to help her with magazine design.
51'"
0R-'ft30AR-t) S This experience convinced her that designers have an important role to
ScE N A-R.,vOS play in creating information technologies. In 1983 she joined the faculty
of London's St Martin's School of Art and established a graduate program
in graphic design and computers for practicing designers. In 1989 she
~ IMM,LA
1tDNS moved to the Royal College of Art, Britain's only purely graduate school of
5vRiEE"N~KO art and design , and set up the Computer Related Design Department with
PAPeR P. advice from Bill Moggridge, the external assessor for the program. Now
called the Interaction Design Department, this was the first program in the
world where graduate designers could learn to apply their skills to
interactive products and systems. Under her guidance, the CRDResearch
Studio achieved an international reputation as a leading center for
interaction design. In 2001 she moved to Ivrea-the Italian town in the
foothills of the Alps famous as the home of Olivetti-to establish
Interaction Design Institute Ivrea, 1 which offers the world's first post-
experience interaction design program .

Gillian Crampton Smit h

viii I Foreword What Is Interaction Design? I ix

 In the same way that industrial designers have shaped our
everyday life through objects that they design for our offices
and for our homes, interaction design is shaping our life with
interactive technologies-computers, telecommunications,
mobile phones, and so on. If I were to sum up interaction
design in a sentence, I would say that it's about shaping our
everyday life through digital artifacts-for work, for play, and
for entertainment.

Gillian Crampton Smith, interview of January 30, 20022

Designingfor EverydayLife
TWENTY YEARS AGO, when personal computers were first
• "Collabolla," becoming popular, they were mostly used as professional tools, or
a video game
with Spacehopper games machines for teenagers. The situation has changed radically.
balls as input
devices. Now everybody-kids, parents, grandparents-uses them every
Interaction day, at work, at school, and at home. So today we need to design
DesignInstitute
Ivrea, Triennale computer technology differently, to make it a graceful part of
di Milano,2004.
everyday life, like the other things we own: our clothes, the plates
Photo we eat off, the furniture we buy for our houses. We've come to a
Ivan Gasparini
stage when computer technology needs to be designed as part of
everyday culture, so that it's beautiful and intri guing, so that it has
emotive as well as functional qualities.
This book traces how the design of the way people interact
with computer technology developed: from the earliest days of
Star, the first screen-based graphical user interface and the
precursor of the Apple and Windows interfaces, to the plethora of
mobile multimedia devices and systems we use now. It describes
the challenges designers face in making this powe1ful technology
fit easily into people's everyday lives, rather than forcing their lives
to fit the dictates of technology.

What Is Interaction Design? I Xl


• DavidLiddle
• Stage 1: enthusiast-EE Lab at IDEO
• Stage 2: professional- medical equipment
• Stage 3: consumer- iPod at Apple Store
xii I Foreword
ThreeStages of TechnologyUse
3 MANY ADVERTISEMENTS
DAVIDLIDDLE, WHOled th e team that design ed th e Star graphi cal
user int erface, has talked about thr ee stages in the development of
a technolo gy-of photography, for instance, or co mput ers-a nd
how peopl e int eract with it. The first stage is the enthusiast stage.
Enthusiasts don 't care if th e technolo gy is easy or hard to use
because th ey're so exc ited by th e technolo gy itself or by what it
will do for th em. They want it , how ever difficult it is to use.
The seco nd stage is th e prefessionalstage, when tho se who use
th e technology are oft en not thos e who buy it. Offi ce computers,
for exampl e, are usually chosen by a pur chasing departm ent, not
by th eir users; the purch asers don't care about the difficulty
becau se th ey don 't experience it, and are anyway more int erested
in factors like pri ce, performan ce specification s, or after-sal es
support. At this stage, ind eed, some peo ple even: have a vested
int erest in th e technology being difficult because th ey're selling
their ability to use it ; th e hard er it is, th e mor e valuable th eir skills.
The third stage Liddle id entifi es is th e consumerstage . Peo ple
now are less int erested in th e technolo gy in itself than in what it
can do for th em . They don't want to spend mu ch time learning
how to use it and hat e bein g mad e to feel stupid. So if it 's hard to
use, th ey won't bu y it. Thi s is th e current stage in th e use of
co mput er and telecommuni cation s technolo gy: it's no lon ger used
only by prof ession als but by a wide ran ge of non experts , who just
want to use it to pur sue th eir everyday lives.
In th e past, those who built int eractive systems tended to
focus on th e technolo gy th at mak es th em po ssible rather than on
the int erfaces that allow p eople to use th em . But a system isn't
co mpl ete without th e peopl e who use it. Like it or not , peopl e-
irritabl e, demanding, and oft en distracted people like our selves-
and th eir goals are th e point of our systems, and we mu st design
for th em .
Designing for this new broad spe ctrum of hum anity is m ore
challenging than devising specialist tool s for technic al prof ession als.
Our users are, ju stifiably, not prepared to spend time mastering
trick y new system s. And th ey're not obliged to use our produ cts: if
they can't make th em work, they take th em back to the store.
FromUsabilityto Sociability
NOW boast about co mputer technologi es
that are easy to use: usability has beco me a bu zzwo rd . But usabilit y
is only th e first of th e qu alities we should expec t from th e system s
we use; they also need to be useful. This sounds obvious, but too
many systems don 't really help peo ple do what the y want to do.
Mit ch Kapor, creator of th e hug ely suc cessful spreadshe et Lotus
1-2-3, propo sed an "architectural" mod el of software design,
distin guishin g design from engineering and buildin g. Hi s 1990
"So ftware D esign Manif esto" 4 rem ind ed us th at we must start by
thinkin g about design in g thin gs so that th ey're right for peo ple,
rath er th an by thinking first about how to build it. H e admitted
he was no softwar e engin eer, no ace at writing co de. Rath er, his
role was to design what Lotu s 1-2 -3 should be and do , m akin g
sure th at thi s was what peo ple n eeded . Others mor e skilled in
software engin eerin g ensured that it worked. Lotus 1-2 -3 wasn't
th e first spr eadsheet, but it was th e first th at really did what peo ple
needed in a way th at fitted how th ey worked. Thus its success.
That said , there's mor e to living than utilitari an needs an d th e
fun ction s w hi ch satisfy th em. As computers be gin to shap e
everyday life, we're int erested not only in what thi s technolo gy
can do for us, but also in what owning it means for us. Wh en we
buy something for our home , a toast er for instanc e, we choose it
because it to asts bread, certainly , but maybe also be cause of how
it look s, feels, sound s.Wh at do es it say to us? Is it satisfying? Do es
it enri ch, by how ever littl e, our ju st-c rawled-from-b ed state of
mind?
And of co ur se we choo se the things we surround ourselves
with not ju st because of what th ey mean to us, but also because
of w hat th ey mean to other peo ple. Mo st Italian s have a mobil e
phone but m any yo ung Sicilians, for instan ce, can't afford th e calls.
They still bu y th e phon es, though, because sporting on e says,
fairly explicitl y, 'Tm co nne cted to a network of family and
friends." The symbolic function is as important as th e practic al
one, perhap s more.
What Is Int eraction Design? I x111
 T he in teractive system s we design have impli cit as we ll as
explicit m eanin gs. A design may com muni cate its purpos e clearly,
GoodInteraction Design
so th at it 's obvious w hat it is and what we should do w ith it . But
AN ELECTR OMECHAN ICAL OBJ ECT, a radio say, link s its ph ysical
its qualities, its aesth etic qu alities parti cularly, speak to peopl e in a
m echanical co mpon ent s to its electroni c elem ent s in a fairly
different way. C on sciously or not, peop le read mea nin gs into
dir ect way.Wh en we turn th e dial, our fingertip s and mu scles can
artifacts. A chapel speaks a different archit ectur al language than a
alm ost " feel" th e statio ns being scann ed . With comput ers,
sup er m arket, and everybod y can read th e difference. In a
ho weve r, th e distance betw een , on on e hand, keystrok es and
dru gsto re we can usually distin guish a m edicin e bottle from a
screen im age, and , on th e oth er, wh at's happ enin g in side the
perfum e bottle even if we can 't read th e label. Arti sts and designers
comput er, is usually mu ch less direct. Our ph ysical world and th e
are train ed to use th e language of impli cit m eanin gs to add a rich
comput er's virtu al world seem mil es apart.
co mmuni cative eleme nt over and above dir ec t fun cti on al
In thi s (histori cally unpr ece dent ed) situ ation we need a clear
com muni cation . If we on ly design th e fun ction of some thi ng, not
rnental m.odel of w hat we' re int eractin g w ith. H yperCa rd ,5 for
w hat it also co mm uni cat es, we ri sk our design b ein g
in stance, an early scripti ng system on th e Appl e, had a very clear
misint erpr eted. Wor se, we waste an opp ortuni ty to enh ance
m ent al mod el, a stack of cards: a pr ecise analogy of w hat and h ow
everyday life.
th e pro gram wo rked. It was obvious to its users th at in effect th ey
To designin g fo r usabilit y, utilit y, satisfac tion, and
we re flippin g throu gh a stack of cards: everythin g about th e
comm unicative qu aliti es, we should add a fifth imp erative:
design reinfo rce d thi s me taphor. Sadly, th e sam e can 't b e said of
designin g for sociability.Wh en IT system s fail to supp or t th e social HyperCard
m any other appli cation s. Help
aspec t of work and leisure, wh en th ey dehum ani ze and de-c ivilize
A w ell- designed system has reassuring f eedback, so th at we o lntroduct ion
our relation ship w ith each oth er, the y imp overish th e ri ch social
kn ow w hat we've don e w hen we' ve don e it . On a keyboar d, for Click the Browse t&b below
we b in w hi ch we live and operate, essenti al for both we ll-bein g aft er you·ve seen the
exa mpl e, we can tell w hat we've ju st done because not onl y do Introduction.
and efficiency.
characters app ear on th e screen but we can th e feel th e travel of
Th e techn ologies we design can erod e or enh ance thi s social
th e key itself and hear th e littl e click it m akes. U sin g an early wo rd
we b, so we mu st design for thi s explicitly, because technol og ically
pro cessor to do som ethi ng repetitive, I often had to do a sequ ence
dri ven social changes can be creative.Wh en youn g peopl e are out
of key comm and s th at we nt " tetick, tick , tick-ti ck; tetick, tick,
socializin g th ey are reluctant to m ake app ointm ent s.Th ey say" Oh
tick- tick." If it went " tick , tetick, to ck," I'd kn ow I'd m ade a
yeah , I'm around tomo rro w. Do n 't kn ow w hen. Give m e a call,
m.istake. Th e aural feedb ack let m e go faster th an if I'd relied ju st
I'll see w here I am ."
on my eyes.
T he m obile ph one has brought to hangin g out-ind eed, to
Nav igability is also essenti al, particul arly w ith thin gs th at are
time itself-an alto geth er mor e fluid and relaxed app roac h .
pri ma rily on screen . You need to kno w w here yo u are in th e
system , w hat yo u can do th ere, w here you can go next, and h ow
to get back . T h e Star and M acinto sh int e1faces we re very
influ enti al in thi s way.T he m enu at th e top of th e screen lays out
all th e pos sibiliti es; it 's clear how yo u access th em and wh at w ill
Radio- Henry Kloss •
happ en w hen yo u do . Radio dial mechanism •
HyperCard •
Equ ally cru cial is consistency. A cert ain co mm and in on e part Keyboard •
of th e system should have th e sam e effect in ano th er part. An
exa mpl e, again from some tim e ago, was Appl ew ork s, one of th e

xiv I Foreword What Is Inte raction Design? I xv

 first int egrated office pro gram s on th e Appl e II. Those were
the days of green " ransom - not e" character s on a black screen , and
Languagesof Interaction Design
very limit ed fun ctiona lity. But Applework s was beautifull y, WHEN NEW TECHNOLOGIES are born , we tend to think of th e
satisfyingly, co nsistent. You kn ew exac tly w hat to do. A command new in ter m s of th e fam iliar. Wh en cin em a started, peopl e
in th e database did exac tly the sam e in the wo rd pro cessor; th ought of it as pointin g a cam era at a th eater stage, and divid ed PtInt

wherever you were, th e escap e key took yo u back up a level.You Prlnt•r. 'tic 1lso &Prlnt : I
silent films with " chapt er headin gs" as if they we re book s. N ew P11uu : '. S11nd&1d ~; I
never got lost and rarely m ade a mistake. C ompar e th at with "languag es" eventually emerged th at were tru e to, and fully ~ Cop~o & P.agu --·-- ... -·-rn
modern " int eg rated" appli cation s. Consistency, like all forms of exploit ed, th e uniqu e qualiti es of cin ema itself-Eisenstein's Coplu : ~ Collated

satisfyin g simplicit y, is very difficult to achi eve. langua ge of montage, for instance. But th e old analogies never
Pago: ® All
Q cuu tntp• gt
When we inter act with everyday artifa cts, like a car, we lose th eir validi ty: films co ntinu e to use the co nvention s of th e CStt,ulOfl
Q r,om: -, - 10 : rr--
don 't spen d too mu ch tim e thinkin g about th e int erac tion: we th eater and th e novel. They are ju st augn1ent ed by th e new tnm p191 numbt r1 and/01 pagt r• ngu
think about where we're headin g and what we want to do. up &r,n td by commu 1,.g . 2. s-s,
languages.
Intuitive interaction minimi zes th e burd en of con scious thou ght I beli eve that int eraction design is still in th e equival ent of
needed to op erate th e system , leaving us to co ncentr ate on our th e early stages of cinema. As yet, we have no fully develop ed
goals. A go od exa mpl e was Quark Express, which let you alm ost langu age uniqu e to int eractive technology. So we are still
XN uncon sciously zoo m in on your im age by holding down two keys
aco drawing on th e language of previou s creative mod es. It may
OOP and clicking on what yo u wanted to see better. It was like shifting h elp to categorize th ese languages according to th eir
Move To Trash 00@
Cl ose Window oo
w your gaze: you didn't have to mar ch off som ew here to find the
" dim ension s": 1-D, 2-D, 3- D, and 4-D.
Get Info ._ ri ght tool. But too m any systems still keep demandin g too mu ch 1-D includ es wo rds and po etry. Are th e words in a m en u
.,, None
Duplicate 000 att ention , like in co mp eten t bo sses, distracting us from gettin g on th e mo st accurat e encapsulati ons of th e action th ey denot e? Are
• Essential
Make Alias XM with the job.
- Hot
Add To Favorites
• In Progress
th ey used consistently? And the "tone of voice" of th e dialog
Put Away acv • cool
When we design a co mput er- based system or device, we're bo xes in your system: Are th ey too abrupt and imp erious , or too
Find... acF • Personal designing not ju st what it looks like but how it behaves. We're
Show Original OO
R • Project I cloyin gly conv ersational ?
• ProJect2 designin g th e quality of how we and it int eract. Thi s is th e skill of The 2-D languages that int eraction design can borrow
th e int eraction design er. It's partl y respon siveness: when you mo ve from includ e paintin g, typography, diagrams, and ico ns. Wh en
your mouse , for instanc e, do es it feel slug gish, or nipp y and
sprightly? Wh en yo u manipul ate your iPod dial, th e co mbination
we look at a painting , even if it 's not represent ational, it's
difficult not to int erpret it as a perspectival space; we can use
fl!§
""'if.flll(f

,..,,,.
.,.
Ou~io,4
kttU I S#t ll
- ...... ~-
!I ~ ~
WM1Mtllo6:ol
(!

-k.. "" -
of sound and feel, as well as telling yo u what yo u 're doin g, is
such compo sition al trop es to layer th e screen in app arent depth
subtl e and satisfying. We can design those qua lities of int eraction , or to foreg round its curr ently mo st important element. We can
......
0 @ (OJ4 0'o1>4
"'""' lw"
'-o
..... .._ hiM4 tn
6
ll\ltrntt6N t tl'IOfk
relating what we see to what we hear or feel with th e same use the fami liar hi erarchi cal co nventions of typography to ~ Q ........
refinemen t with which typographers adjust th e spacin g of type, or stru ctur e th e screen, and our shared sensitivity to minute
""" Ql,ie\tl!M

S)'tltrn
produ ct designers th e radius of a curve. <~)- ...... ...........
But th e qualities of int erac tion must be appropriate to the
context . An adventure gam e n ee ds an int eraction offering
differe nc es in letter forms to add distin ctions of tone and
m eanin g. We can also use th e lang uage of dia grams a_nd
infor mation graphics to co mmuni cate a co mple xity whJCh
.IL (11111c
...
O.tt l fir.t

-
.... @
uz::::
1·

subtl ety of atmosphere and intri guin gly challenging navigation;

Dialogbox •
• Xerox Star interface
can't be int elligibly rend ered in standard tex t, particularl y on a Painting •
•
•
Apple Macintosh menus
Driving central-heating contro l system s offer in g th ese qualities, small screen . Anoth er specialist 2-D lang uage, much used in
Icons •
how ever, wou ld be as welcome as a fire alarm wit h a snoo ze
button .

What Is Int eraction Design? I xvii

XVl I Foreword
 computer int e1faces, is of course that of icons: tiny simplified between people and devices or systems: speed of response, say,
images that stand for a larger idea or a thing. or the commun icative capacity of a small screen. But at the
3-D languages are those of physical, sculptura l form. One symbo lic level of mood and meaning, of sociability and civility,
movement in product design, "product semantics," exp lores we haven't quite achieved the breathtaking innovativeness, the
how people understand what the different elements of a subtlety and intuitive "rig htn ess," of Eisenstein's language of
product represent. If somet hin g has a handle, for examp le, we montage .
know we are meant to grab it ; if something has a base bigger By telling the stor ies of those who have been committed to
than its apex, our exper ience of gravity suggests that we should making interact ive products useful, meaningfu l and joyful,
keep the base downward. Des igners use thi s language to make however, this imp ortant book nevertheless suggests that we are
things clear, but somet im es also to play w ith expectations, on our way.
inserting an element of surprise and w it in wha t otherwise
might have been mundane.
The four th dimension is time. The 4-D languages include
sound, film, and anim ation . In the 1980s Bill Gaver 6 designed a
beautiful sonic interface, the SonicFinder, an augmentation of
the Apple Desktop: when you dropped a folder into anot h er
folder, it made a sound according to its size: an alm ost-empty
folder went "pink," a fuller one "p lonk ." It gave good feedback,
but the sounds were also poetic and appropr iate for their
purpose. Another important 4-D lang uage is film: in twenty
seconds a TV advertisement can tell a comp lex story
und ersto od by everyone. And animators have been developing
their spare language for more than a cent ur y, so that with very
limit ed means they can express plot, emotion, anticipation, and
action.
We're designing for a public that understands the richness
of all these different lang uages: dialog, graphics, typograp hy, 3-D
form, sound, film, and animation. T his makes things difficult
because nobody can be fluent in all these languages. We must
collaborate with those who have other skills and experience. An
interaction designer can never be a hermit.
However, after twenty years of drawing on ex isting
expressive languages, we now need to develop an independent
language of interaction with "smart systems and devices, a
• Fridgehandle language true to the medium of comp ut ation, networks, and
• Bill Gaver
• Animation
telecommunications. In terms of perceptual psychology, we're
start in g to und erstand the functional lim its of int eraction

xviii I Foreword What Is Interaction Design? I XlX