Prototvping For Tiny Fingers: Ra Ca! Ro MM R
Prototvping For Tiny Fingers: Ra Ca! Ro MM R
Programmer
Prototvping for
Tiny Fingers
>
Considt:r thi . . familiar situation: a generales seores orcommcnts on suh- their work to pro<luction.
devvlopruetu team spcnds wccks de- jects ranging from the basic meta- Now considera different situation,
.-.ig11i11g: ,111 interface. 'l"hcy draw phor Lo the choice of background one I have witnessed first-hand over
.-.kcrchcs on rhc board, di . . cus... each color. The team just barely has time the past few months: a development
point in dctnil, .uid fiually specify a to incorporare these commerus into a team spends weeks designing an in-
dcsrgn. lhc de.-.ign is either ceded revised design before commiuing terface. During the first few days,
inlo rhc applic11io11 l.111g:uage or sim- they construct a paper prototype of
ulau-d with a voftware prototyping their initial thinking about ali aspects
tool. rl1t result _., linally shown to of the design, and test it with typical
l!StTS lor approval. in et session thal by Marc Rettig representatives of the user commu-
Practica! Programmer
-,-._ ._ -- -,--. .,,. ... , 1--
nity. One of them "plays computer," The Problems with HiFi In contrast, the hand-made ap-
moving components of the paper in- For years developers have used ev- pearance of a paper or acetate proto-
terface around on the table in re- erything from demo-builders to mul- type forces users to think about con-
sponse lo the users' actions. The oth- timedia tools to high-level languages tent rather than appearance.
ers observe and take notes. After the to build prolotypes. Lo-fi proponents Developers resist changes. They are
tests they take a week to distill lessons call these "hi-fi prototypes." They altached to their work because it was
from their observations, redesign the have their place: selling an idea, test- so hard to implement. Spend enough
interface, and retest with severa! new ing look-and-feel, detailed proof-of- time crafting something and you are
users. This process continues until, at concept, testing changes to an exist- likely to fall in lave with it. Knowing
the end of the time allotted for inter- ing system, and so forth. J'm not sug- this, team members may feel reluc-
face design, the team has revised gesting we should stop building tant to suggest that their colleague
their design four times and tested it them. But they also have problems. should make drastic changes to the
with many typical users. lovely looking, weeks-in-the-making
This technique-building proto- Hi-fl prototypes take too long lo buzld software prototype. They would be
types on paper and testing them with and change. Even with high-level tools, less hesitant to suggest redrawing a
real users-is called low-fidelity pro- a fully functional prototype can take sketch that took an hour to create.
totyping or "lo-fi" for short. The weeks to create. 1 have seen teams A prototype in software can ,\el expecla-
value of prototyping is widely recog- build a complete working lo-fi proto- tions that will be hard to change. Proto-
nized, but as the first situation exem- type in four hours. The goal is to get typing tools Jet you do wonderful
lhrough as many iterations as you can things in a (relatively) short time. You
plifies, that value is not always gained
can n1ake something that looks like a
in practice. lf that has been your ex- during the design phase, because
finished product, fooling testers and
perience, you might want to try lo-fi each iteration means irnprovement. If
even management into thinking how
prototyping, which requires little testing flushes out problems with the
far you are along. If it tests well, you
more in the way of implementation basic metaphor or control structure
may wind up spending time on "re-
skills than the ones you learned in in a design, changing the prototype
verse damage control," handling
kindergarten. can again take weeks. This is what
questions about your sudden lack of
The idea oflo-f prototyping (a.k.a. Debbie Hix and Rex Hartson, re-
progress.
"paper prototypes") has been around searchers and faculty members at
A single bug in a hi-Ji prototype ca11
a long time. So long, in fact, that Virginia Tech, call the "Software de-
bring a tesl to a co"iplete halt. To test
more than ene person in the CH l veloper's dilernma." You can't evalu- effectively, your prototype needs to be
community expressed surprise when ate an interaction design until after it complete and robustenough for so1ne-
l said I was planning to write a col- is built, but after building, changes to one to try to do something useful
umn on the subject. But I see this as a the design are diflicult. with it. Even with the coolest ufhigh-
wonderfully simple and effeclive too] Paper prototypes, on the other level tools, building a prototype is still
that has somehow failed to come into hand. are extremely fast to develop essentially a programming exercise-
general use in the software commu- and the technique is very easy to and we ali know how hard it can be to
nity. I say this based on the success of learn. lt is rhe fastest of che so-called get all the bugs out of a program_ On
the teams I've watched over the past rapid prototyping techniques. To the other hand, l often see teams cor-
several months together with the fact make a broad generalization. inter- recting "bugs" in a paper prototypt
that this is the first commercial proj- face designers spend 95% of their while the test is in progress.
ect where I've seen paper prototypes time thinking about the design and
ernployed. only 5% thinking about the mechan- A TroJan Meme
Paper prototyping is potentially a ics of the tool. Software-based tools, The spread of Jo-fi design through
breakthrough idea for organizations no matter how well executed, reverse my current project started with a visit
that have never tried ir, since it allows this ratio. from Jared Spool (with User Inter-
you to demonstrate the behavior of Reoeioers and testers tend to comm.enl face E.ngineering in Andover, Mass.).
an interface very early in develop- on ''fit und finh" issues. You are tryng He and his associate presented the
ment, and test designs with real users. to get feedback on the big things: the basic ideas, then put us to work in
Jf quality is partially a function of the flow of the conversation, the genr.ral four tea1ns to design and build a pro-
number ofiterations and refinements layout of the controls, the terminol- totype of an automated menu for a
a design undergoes before it hits the ogy, the expressiveness and power of fast tOod restaurant. For three hours
streer, lo-f prototyping is a technique the basic metaphor. With a slick soft- we discussed, designed, skerched and
that can dramatically in crease quality. ware prototype, you are just as likely glued, then ran the results in a face-
lt is fast, it brings results early in de- to hear criticisms about your choice of off competition with "real users'' and
velopment (when it is relatively cheap fonts, color combinations, and button a "real task," That is, we brought
to makc changes), and allows a ream sizes. On the back side of the same people in from elsewhere in the
to try far more ideas than they could coin, developers easily become ob- building and told them, "you have
with high-fidelity prototypes. Lo-ti sessed with rhe prettiness-power of a $4-92- Order as much food as you
prototyping helps you apply Fudd's good too), and spend their hours can." The designs were 1neasured by
first law of creativity: "To get a good choosing colors instead of coming up how quickly and efficiently people
idea, get lots of ideas." with new ideas.
22 Apr,ll!I\H/VvlJ7,N<.>4COMMU_.,_. _
Practica! Programmer
1
1
l-1
',, ,....,,... . 1 1
j ,, .,,.... ,
,,_ ,. j 1
Figure 1. A few components rorucv through iu-r <II\'l' 1 efincmcnt. l\c<d 1o ll'plt'',l'lll .i long- .',tTolling
of a paper prototype. The (;et thc hig thing 1 ig-ht during lo-li. Ji...,1? ! lo\\ ;1bout c.111t111g . .,!ot:-. in the
rnaln wlndow is in the mld-
dle, showlng a few creces of data .md tlu- link thing_.., will lollow in 1'11- di;ilog bo;,., and I u1111ing adding- n1.1-
added with strlps of correction turc itc-r.uions. 1..hi11e p<tper through it? \\'ant ,1 work-
tape, and controts stuck on with '.). Construct models, not llustratons. ing tahbcd notchook 111etaphor C111
Post-lt paper. The window is sur-
rounded by oop-uo menus. eta- A:-. )OU huild. makc ..,on1ethi11g thar up carel or fill' lolde1 to 111ke the111
log boxes, ano sunorv interface will he l'<I',\' lo control for the pc1:-.on the right ..,/l', d1 <1w the i11terL1ce co111-
widgets.
pla) 1ng e cunpun-r. Draw a 14cneti, ponl'llh helow thc t,tlJ-", .111d :-.tack up
Iranu- (,1 window fr amc, il you arv thc ,e.-,ulb o the tab:-. staggc1 thc way
building ,1 window ing intc-rfac c-) on ,1 you \,anl. Lsc colo1cd acetarc to 1cp-
aren't going to start gc1ting it right big piecc of hcavy vtock. lIu-n 111;1kt rc:-.cnt :-.clccti<111 higl1lightin_{. Ltpe
unril you put :-.01ncthing in f1011t of each rt14ion ol thc -rrevu 011 .t diffe- clcar ,uctat< hdndlt' . ., to thing_.., that
actual uscrs and st.ut 1 efiniug your eut picc c of card stock. Anything that nHn't..' ;11<iu11d .i lot, o )OU 1..an handlc
idea bavcd 011 thr-ir vxperience wirh 1110\'C',, e han ge appt'<tr,1111..c, or 1hc1n e.1..,il) witliout ob...,tructing the
your de:-.ign. So set .t deadline. ()bli- 1..01nc:-. and goe..,, should probably he ll',('l\ \'lCW.
g<1tc yourscll so you ;11e fon.. ed to takr- a on it:-. own piec e of ',IOLk. Rcmcrnbc-r rhe photoLopier can he a lo-li ar-
prclimin.u-y c rac k <11 cvcry irnpor- you'Il event ually he pl:1}ing com- 1..hitcct's he:-.t lricnd. J\1akc your,..,clf
1,1111 aspecr ol your prohlcrn. 11 you puter , ,111<l you'll nccd 10 have .i 1 e.rdy lots of blank windows, dialo_{, but-
know four users are conling totuor- l"t'pon_..,e for almos: anything the uscr rons and ficlcb, in severctl ize. (el a
I uw expecting to ork wirh your pro- mighr do whilc 1rying to complete thc fre_..,h -"lart by pai11ti11g \\ hite-out ovcr
totype, you'Il have la, less troublc text tnsks. Make what you nr-cd lo 111istc1kt's. the11 u_..,i11g thc copicr to
with lixations on 111i11or details. You :-.i11111\atc 1nenu . ., dropping down, da- produ1..e .i 11ew unoilcd vt'r...,ion.
\\ ill rnakc sorne de-cision , any dcci- log..., popping up, selection highlighb, You'll Jind thctt dilll::rcnt pcoplc
siou, about the 1110.'!)t important as- and so forth (sce Figure 1 ). cxLel at di!Terent a:-.pccts of lo-li con-
pcct:-, ol your design, and gct thcm Making a working model of ;111 in- struction: de.',ign, inventing ingc-
do,\ n on paper for t e . .,ting. Quality terface challcng"l you to be c.reativc. ni11u:-. papcr in1plln1c11tatio11s of wid-
gets, producing large amounts of preparation that will help lo-fi proto- by the intrusion of a new system into
data, or rendering artistic and attrac- typing become a normal part of your their work (perhaps justifiably!), or
tive designs. Exploit these talents and design process. Preparing a widget there may be a competitive situation
divide the labor accordingly. library, writing clown guidelines, and that makes your employer reluctant
Construct a first version com- taking time to train people will make to expose new ideas outside the walls
pletely by hand. Sketch the widgets, everyone more enthusiastic and of your building.
hand-letter the labels. Don't even productive. Since you are looking for appro-
worry about using a straightedge at priate knowledge and skills, not job
first. J ust get the ideas down on Preparlng for a Test titles, you can often gel by with "sur-
paper. Test small details on one an- However- much care you take in rogate users" -people who fit the
other, or drag people in from the hall building your prototype, the tests will same profile as your actual clients,
for quick tests of alternative solutions. be ineffective unless you prepare well but free from whatever association
Of course, hand-drawn sketches, for them. Be sure to attend to the fol- that prevents you from testing with
no matter how carefully done, may lowing matters. the clients themselves. I've heard of
not be appropriate for sorne testing all kinds of tricks for attracting peo-
situations. For example, a customer l. Select your users. Before you start ple to the test. Spool says he's done
may be willing to let you test your designing, you should do enough everything from running ads in the
design with actual users. Tbey 1nay user and task analysis to understand newspaper to recruiting university
understand the transience of the pro- the people who will be using your students to contacting local user
totype, but you slill want to make a software-their educational and groups. Anything to avoid using ac-
good impression. You want to look training background, knowledge of tual cuscomers, employees, or friends
sharp. computers, their familiarity with the and fumily. (The latter may be acces-
Sorne of the teams on my projecr domain, typical tasks involved in sible, but there are a lot of things
have made remarkably attractive their job, and so on. Based on this about sharing ties in the same social
paper interfaces using components study, you can look for pools of po- web that can conspire to damage a
created with drawing software, then tencial testers for your prototype. usability test. For exarnple, testers
printed on a laser printer. Sorne of With a good user profile on hand, who know you or the project may
them build up a familiar look with you can develop a questionnaire that skew the results by trying hard to
elements taken from screen captures. will help to choose the best represen- please you or do what they think you
10 facilitate this kind of thing, they tative users from available candidates. expect them to do.)
set upa library oflo-fi widget images: It would seem reasonahle to ar- Finally, remember that no two
blank buttons of all sizes, window and range it so the people testing your people are the same, and your prod-
dialog frames, scroll bars, entry fields, prototype are the same people who uct's users may be a diverse group.
and so on. People print these out, re- will be using the final product. But Try to recruit testers that represent
size them on the photocopier, and bona fide members of the user com- the whole range of characteristics in
make them part of their standard lo-fi munity may be hard to corral for the your target audience. Our practice
kit. Or they resize them on the com- time it takes to run a test, and using has been to conduct ar least one
puter, add labels. and print out a cus- them may not be the best idea in the
tom part for their work in progress. long run. Be sensitive to the political
This is an example of the kind of climate. People may feel threatened 11ure 2. A lofl testlng sesston
round of testing in our office with the only team member who is allowed the sessions) so it points clown over
surrogates, then go to the field for to speak freely during the test. Facili- the user's shoulder to look at the in-
testing with the most typical end tating means three thngs: giving the terface and the hands moving over it.
users we can find. user instructions, encouraging the No one's face ever appears un tape.
2. Prepare test scenarios. Write a sel user to express his or her thoughts During the test, the facilitato1
of scenarios, preferably drawn from during the test, and rnakng sure ev- hands written tasks lo the user one ;:u
task analysis, describing the producl erything gets done on time. Ths is a a time. lhcse must be very clear and
during use in a typical work situation. difficult enough job that che facili- detailed. As the person works on each
Design your prototype to support a tator should not be expected to take task, the 13cilitator tries to elicit the
Iew of these scenarios, nar.-owing the notes during a session. user's thoughts wthout influencing
scope of your efforts to a reasonably Computer. One team mernber acts as his or her choices. "What are you
small set of functions, but broad the "computer." He or she knows the thinking right now?" "Whal que:,,-
enough to allow meaningful tests. application logic thoroughly. and sus- tions are on your mind?" "Are you
If possible, ask someone to review tains the illusion that the paper pro- confused about what you're seeing?"
the scenarios and sample data and totype behaves similar to a real corn- \\'hile this is going on, the rest of
tell you whether they look realistic. In puter (with an unusually slov.. the team members observe and take
our experience. people find a lo-fi response time). A ponting finger notes, and may occasionally interject
interface more engaging-more real- serves as a cursor, and expressions a question. But they n1ust neve,
istic-if it shows data that looks tamil- like, "I type 'hall-silvered laugh, gape, say "a-ha," nudge one
iar and we ask them to perform real- bicuspidors' in thar field" substitute ano1her, or otherwise display their
istic tasks. This helps draw them into 10r keyboard enu-y. If the user reaction to what's happening to their
the let's pretend you're really using touches a control, the cornputer ar- <.:areful design. This kind ofthing can
a compute.-- ar you.-- job" world, which ranges the prototype to simulare the intimidate or hu1niliate users, ruining
leads to bener tests. On the other response, taking ca,e not to explain the relationship and spoiling the test.
hand, unrealistic scenarios and data anything other than the behavio1 of lt can be terribly difficult to keep still
can severely damage the credibility of the interface. "'hile the u ser spends l O 1ninute:,,
your design. Obsen1ers. rhe .--et of the tean1 using ali the wrong controls for all the
3. Practice. Just as a bug in a soft- n1en1bers quietly take notes on 5-by- ,,.,rong reasons. You will feel a com-
ware prototype can ruin a test ses- 8-inch index cards, writing one ob- pelling u.--ge to explain the design to
sion, so can a bug in a lo-fi prototype. servation per card. If chey think of a your use1s. Don't give in.
That bug could be a missing compo- reco1nrnended solution, they write it \\1hen the hour is over, we spend i:I
nent, a misunderstanding on the part on the same card that record:,, the 10-minute debriefing session asking
ofthe person playing "computer," or problem. questions, gathering impressions,
even excessive hesitation and confu- Since all of 1hese roles can be ex- and expressing our thanks.
sion because the team is unfamiliar hausting, we rotate them a1nong the
with how to conduct a test. So to team ,vhen we conduct more than Evaluatlng Results
avoid embarrassment, conduct sev- one session a <lay (and we very often Lo-fi 01 hi-li, pn>lotyping is worthless
era! dry runs before you tesr with schedule li:Ju1 sessions in a day). L1nless infonnation is gathered and
people from outside your team. Each rypical tes1 sessions usually last a the product is refined based on your
team member should be comfortable lictle over an hour, and go through findings. As l wrote earlier, Hix and
with his or her role, and you need to three phases: getting reacly, conduct- Hart:,,on nicely cover the details of
make sure you have the supples and ing the test, and debriefing. \Ve begin gathering and analyzing test data. We
equipment needed to gather good with greetings, introductions, re- spend qule a bit of time (at least a
information. fresh1nents and general ice-breaking. <lay per iteration) sorting and priori-
rrying our very best to assure people tizing the note <.:ar<ls we wro1e during
Conductlng a Test that the test is c:onfidential, thc results the test sessions. ()ur rnethod in-
We find it rakes four pcople to get the will remain anonymous, and their volves arranging the paper prototype
most out of a test session (see Figure superviso1 won't hear a word ahout on a big table. then piling the note-
2), and that their activities 1311 into whcther or nol they "got it." People cards next to its relevant interfilce
four essential roles: often say things like, "Anl I flunking component. Then team 1nernbers
the test? Am I getting it right? To divide the labor of going through the
Greeter. Much the same as the usher which v.e answer, "Don't worry, the piles to summarize an<l prioritize rhc
in a church, the greeter welcomes question is v.hether or nol we are proble1ns.
users and tries to put them at ease. flunking. The interface is on tria!, no! These sorted piles infonn a wriuen
We have sorne IOrms we ask people to you. Jf you filil lo understand sorne- report un findings from the test, and
fill out-an experience profile, for thing or can't complete one of the for1n the agenda uf a meeting to dis-
example-a job the greeter handles tasks, that's a ign uf trouble with the cuss recommended changes to the
while otber team members are seuing design, not a lack of intelligence on design. The tcan1 works through thc
up for the test. you.-- part." piles and agrees on suggested
Facililalor. ()nce the test is set up, While thi is going on, someone changes, which are written on Post-lt
the facilitator takes the lead, and is positions a video came.-a (we tape ali notes and alixed directly to the rele-
vanl part of thc paper prototype.
Constructing the revised prototype
becomes a process of taking each
component, and following the recom-
mendations that were stuck to it.
Try lt
Hix, who for years has been teachng
courses and workshops in interface
design, says that people consistently
enter the first lo-fi exercise with skep-
ticism. After trying it they invariably
say something to the extent of, "I
can't believe how much we leas-ned
from this!" lf this column is the first
place you have heard about the lo-fi
technique, one danger is that you will
set aside this magazine with just
enough skepticism that, however
much interest l've managed to create,
you will fail to actually try it.
Having seen other skeptics con-
verted, I'm confident in recommend-
ing this technique. If you already
have a working high-fidelity proto-
type, it probably isn't worth abandon-
ing thatcourse to switch to Jo-fi. But if
you are in the very early stages of de-
sign and exploring broad questions,
or if you need to learn more now,
lo-fi prototyping is just the tool to
pickup.O
ReSOUl'Ct:S
Browu. !). STUVIU: Stn1r1111nf Usrr-Lnter-
farr' D,-s,g11 [or tnteraction Opti,111)tlito11. New