jerrs ranging     fiiom the basic meLa-       Now considrr a diffcrrnt    situation,phor to the choice of background      ...
nity. One of them “plays computer,”                      The Problems with Hi-Fi                                    In con...
Lo-fi prototyping works because it effectively educatesdevelopers to have a concern for usability and formative evalu-atio...
Ciawe I. AfewcomponentsOf a paper prototvpe.  Themain window is in the mid-dle, showing a few Pieces of dataadded with str...
gets, producing large amo”“ts of            preparation that will help lo-ii proto-    by the intrusion of a new system in...
Practical        Progmmmer                        ..    .e     _..    bb    _L.    ~__ -w..                               ...
,...     L      _.   ,..       .   .   .   .    .     LL    _.b.              >van, part of the paper prototype.Constructi...
Upcoming SlideShare
Loading in …5

Rettig onprototyping


Published on

  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Rettig onprototyping

  1. 1. jerrs ranging fiiom the basic meLa- Now considrr a diffcrrnt situation,phor to the choice of background one I have witnessed first-hand overcolor. The team .just barely has time the past few months: a developmentto incorporatr these comments into a team spends weeks designing an in-rwiscd design brforr committing terface. During the first few days, they construct a paper prototype of their initial thinking about all aspects of the design, and test it with typical by Marc Rettig representatives of the user commu-
  2. 2. nity. One of them “plays computer,” The Problems with Hi-Fi 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 to the users’ actions. The oth- timedia tools to high-level languages tent rather than appearance.ers observe and take notes. After the to build prototypes. Lo-fi proponents l Developers resist changes. They aretests they take a week to distill lessons call these “hi-h prototypes.” They attached t” their work because it wasfrom their observations, redesign the have their place: selling an idea, test- so hard to implement. Spend enoughinterface, and retest with several new ing look-and-feel, detailed proof-of- time crafting something and you areusers. This process continues until, at concept, testing changes to an exist- likely to fall in love with it. Knowingthe end of the time allotted for inter- ing system, and so forth. I’m not sug- this, team members may feel reluc-face design, the team has revised gesting we should stop building tant t” suggest that their colleaguetheir design four times and tested it them. But they also have problems. should make drastic changes to thewith many typical users. lovely looking, weeks-in-the-making This technique-building proto- l Heji ~ro@#~e.i take too long to budd software prototype. They would bctypes on paper and testing them with andchange. Even with high-level tools, less hesitant to suggest redrawing areal users-is called low-fidelity pro- a fully functional prototype can take sketch that took an hour to create.totyping or “lo-t7 for short. The weeks to create. I have seen teams . A @,tot@e in software can .sel e$mLa-value of promtyping is widely recog- build a complete working lo-Ii proto- lions thrill wzll be hard to change. Proto-nized, but as thr first situation exenl- type in four hours. The goal is to get typing tools let you do wonderfulplilies, that value is not always gained through as many iterations as you can things in a (relatively) short time. Youin practice. If that has brrn your ex- during the design phase, because can make something that looks like aperience, you might want t” try lo-C each iteration means improvement. If finished product, fooling testers andpromtyping, which requires little testing flushes out problems with the even management into thinking howmore in the way of implementation basic metaphor or control structure far you are along. If it tests well, youskills than the ones you learned in in a design, changing the prototype may wind up spending time on “re-kindergarten. can again take weeks. This is what verse damage control,” handling The idea oflo-fi prototyping (a.k.a. Debbie Hix and Rex Hartson, re- questions about your sudden lack of“paper prototypes”) has been around searchers and faculty members at progress.a long time. So long, in fact, that Virginia Tech, call the “Software de- l A single bug in a hi-/i protolype funnmre than one person in the CHI veloper’s dilemma.” You can’t evalu- bring a lest lo n comfilele halt. To testcommunity expressed surprise when ate an interaction design until after it effectively, your prototype needs to be I said I was planning to write a col- is built, but after building, changes t” complete and robust enough for some-umn on the subject. But I see this as a the design are difficult. one TV try to do something usefulwonderfully simple and effective tool Paper prototypes, on the other with it. Even with the coolest of high- that has somehow failed to come int” hand, are extremely fast to develop level tools, building a prototype is stillgeneral use in the software commu- and the technique is very easy to essentially a programming exercise- nity. I say this based on the success of learn. It is the fastest of the so-called and we all know how hard it can he t”the teams I’ve watched over the past rapid prototyping techniques. To get all the bugs out of a program. Onseveral months together with the fact make a broad generalization, inter- the other hand, 1 often see teams cor-that this is the first commercial proj- face designers spend 95% of their recting “hugs” in a paper prototypeect where I’ve seen paper prototypes time thinking about the design and while the test is in progress.employed. anly 5% thinking about the mechan- Paper prototyping is potentially a ics of thr t”“l. Software-based tools, A Trojan Memebreakthrough idea for organizations no matter how well executed, rcversc The spread of lo-6 design throughthat have never tried it, since it allows this ratio. my current project started with a visityou to demonstrate the behavior of l Reuiewm and L&en lend lo commcnl from Jared Spool (with User Inter-an interface very early in develop- on “f;l nndfin~~h”rsua You are trying face Engineering in Andover, Mass.).ment, and test designs with real users. m get feedback on the big things: the He and his associate presented the If quality is partially a function of the flow of the conversation, the general basic ideas, then put us to work in number of iterations and reftnements layout of the controls, the terminol- four trams to design and build a pro-a design undergoes before it hits the ogy, the expressiveness and power of totype of an automated menu for astreet, lo-fi prototyping is a technique the basic metaphor. With a slick soft- fast food restaurant. For three hours,that can dramatically increase quality. ware prototype, you are just as likely we discussed, designed, sketched and It is fast, it brings results early in de- t” hear criticisms about your choice of glued, then ran the results in a face-velopment (when it is relatively cheap fonts, color combinations, and button off competition with “real users” and to make changes), and allows a team sires. On the back side of the same a “real task.” That is, we brought to try far more ideas than they could coin, developers easily become ob- people in from elsewhere in the with high-fidelity prototypes. Lo-fi sessed with the prettiness-power of a building and told them, “you have prototyping helps you apply Fudd’s good tool, and spend their hours $4.92. Order as much food as you first law of creativity: “To get a good choosing colors instead of coming up can.” The designs were measured by idra, grt lots of ideas.” with new ideas. how quickly and efficiently people
  3. 3. Lo-fi prototyping works because it effectively educatesdevelopers to have a concern for usability and formative evalu-ation, and because it maximizes the number of times you get to refine your design before you must commit to code.could use the interfaces without once after the product is complete. l Various adhesives. Tape: clear, col-coaching from the designers. Be- With summary evaluation you find ored, double-backed, pin stripintween tests, each team had a few min- out how well you did, but you find tape, whatever. Glue sticks, and mostutes to refine their interface. out too late to make substantial importantly, Post-It glue-a stick of We were all impressed with the re- changes. the kind of glue that’s on the back ofsuits of the exercise. In about six Lo-ii prototyping works because it those sticky yellow notes. Rolls ofhours we had learned the technique, effectivelv educates dewlowers to white correction tape arc great fordesigned an interface and built a have a Concern for usability and button labels and hurriedly writtenmodel of it, conducted tests, and formative evaluation, and because it field contents.measurably improved the original maximizes the number of times you l Various markers-colored pensdesign. That was four months ago, get to refine your design before you and pencils, highlighters, tine andand now we have scores of people must commit to code. To make the thick markers, pastels.working on lo-ti designs, refining most of these advantages, the proto- l Lots of sticky note pads of variousthem through repeated tests with ac- typing effort needs to be carefully sires and colors.tual “sers. Interface sketches are planned and followed by adequate l Acetate sheets--the kind you USCIOlying all over the place, scans are put testing and evaluation. (It also helps make overhead presentations. Hixon the network for peer review, and to have someone who can enthusias- and Hartson swear by these as theterms like “affordance” and “mental tically champion the idea.) Hix and primary construction material formodel” are common parlance. Hartson have an excellent chapter on lo-ii interfaces. I call this a “Trojan meme” instead formative evaluation in their book, l See what you find in the architrc-ofjust a “selfish mcme” because it did Develofing User Interfam If you plan ture section. They have sheets of rub-more than reproduce itself through to adopt any of these techniques, I on texture, for example, which couldthe department. (A meme is an idea- recommend you read their book. give you an instant shading pattern.the mental equivalent of a gene, and The rest of this is drawn from our l Scissors, X-act” knives, straight-selfish ones try to replicate them- experience over dozens of designs edges, Band-Aids.selves in as many minds as possible.) and scores of tests, notes from JaredAs it spread, it served as a vehicle for Spool’s workshop, and Hix and Just like kindergartners, lo-6 dr-spreading a general appreciation of Hartson’s book. signers sometimes find inspiration inthe value of usability design: develop- the materials at hand. So go ahead-ers saw first-hand the difference in Building a Lo-F1 Prototype buy that package of colored constructpeople’s reactions to successive re- I. Assemble a kit. In this decadent tion paper. The worst that can hap-finements in their designs. Within age of too many computers and too pen is you won’t USC it. Eventuallydays of designing an interface, they few paint brushes, it might be hard to your tram will develop their own con-saw exactly how their work was per- get all the materials you need by rum- struction methods, and settle on aceived by people just like those who maging through the supply closet in list of essentials for their lo-iiwill eventually be using their prod- the copy room. Make a trip to the of- construction kit.uct. The value of two important laws fice supply store, or better yet, the art 2. Set a deadline. There is a terrificof interaction design was memorably supply store, and buy enough school temptation to think long and harddemonstrated: “Know Your User,” supplies to excite the creative im- about each aspect of the interface be-and “You Aren’t Your User.” pulses of your team. Here’s a shop- fore you commit anything to paper. Testing for iterative refinement is ping list: How should you arrange the menus?known in the interface design com- What should be in a dialog box, whatmunity as “formative evaluation,” l White, unlined, heavy paper that is should be in menus, and what shouldmeaning you are evaluating your de- bigger than letter size (11 by I7 be in a tool palette? When you aresign while it is still in its formative inches is nice), and heavy enough to faced with a blank sheet of paper,stages. Testing is used as a kind of endure the rigors of repeated testing these kinds of decisions crowd yournatural selection for ideas, helping and revision. thoughts all at once. “Wait,” youyour design evolve toward a form l Hundreds of 5-by-&inch cards. think, ?ve haven’t thought about thisthat will survive in the wilds of the These come in handy as construction enough!”user community. This is in contrast to material, and later you’ll use them by That’s exactly the point: no matter“summary evaluation,” which is done the score for note taking during tests. how hard you think about it, you
  4. 4. Ciawe I. AfewcomponentsOf a paper prototvpe. Themain window is in the mid-dle, showing a few Pieces of dataadded with strips Of Correctiontape. and controls stuck on withPost-It paper. The window is sur-rounded by POP-UP menus, dia-log boxes, and sundry interfacewidgets.
  5. 5. gets, producing large amo”“ts of preparation that will help lo-ii proto- by the intrusion of a new system intodata, or rendering artistic and attrac- typing become a normal part of your their work (perhaps justifiably!), ortive designs. Exploit these talenu and design process. Preparing a widget there may be a competitive situationdivide the labor accordingly. library, writing down guidelines, and that makes your employer reluctant Construct a first version com- taking time to train people will make to expose “ew ideas outside the wallspletely by hand. Sketch the widgets, everyone more enthusiastic and of your building.hand-letter the labels. Don’t eve” productive. Since you are looking for appro-worry about “sing a straightedge at priate knowledge and skills, not jobfirst. Just get the ideas down on Preparing for a Test titles, you can often get by with “sur-paper. Test small details on one an- However much care you take in rogate users”-people who fit theother, 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-draw” sketches, for them. Be sure to attend to the fol- that prevents you from testing withno matter bow carefully done, may lowing matters. the clients themselves. I’ve heard ofnot be appropriate for some testing all kinds of tricks for attracting peo-situations. For example, a customer 1. Select your trsers. Before you start ple to the test. Spool says he’s donemay be willing to let you test your designing, you should do enough everything from running ads in thedesign with actual users. They may user and task analysis to understand newspaper to recruiting universityunderstand the transience of the pro- the people who will he using your students to contacting local usertotype, but you still 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 customers, employees, or friendssharp. computers, their familiarity with the and family. (The latter may be acces- Some of the teams on my project domain, typical tasks involved in sible, but there are a lot of thingshave made remarkably attractive their job, and so on. Based on this about sharing ties in the same socialpaper interfaces using components study, you can look for pools of po- web that can conspire to damage acreated with drawing software, then tential testers for your prototype. usability test. For example, testersprinted on a laser printer. Some of With a good user profile on band, who know you or the project maythem build up a familiar look with you can develop a questionnaire that skew the results by trying hard toelements taken from screen captures. will help to choose the best represen- please you or do what they think youTo facilitate this kind of thing, they tative users from available candidates. expect them to do.)set up a library of lo-ti widget images: If would seem reasonable to ar- Finally, remember that no twoblank 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 tields, 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 representsize them on the photocopier, and bona fide members of the user com- the whole range of characteristics inmake them part of their standard lo-t7 munity may be hard to corral for the your target audience. Our practicekit. Or they resize them on the com- time it takes to run a test, and using has been to conduct at least oneputer, add labels, and print o”t a cm- them may not be the best idea in thetom part for their work in progress. long run. Be sensitive to the political This is a” example of the kind of climate. People may feel threatened elgure2. A lo-fl testing session
  6. 6. Practical Progmmmer .. .e _.. bb _L. ~__ -w.. ..-.mund of resting in our off& with the only team member who is allowed the sessions) so it points down oversurrogates, then go t” the field fog to speak freely during the test. Facili- the user’s shoulder t” lo”k at the in-testing with the m”st typical end tating means three things: giving the terface and the hands moving over it.users we can find. user instructions, encouraging the No ““e’s face ever appears on tape.2. Prepare test scenarios. Write a set user t” express his or her thoughts During the test, the Facilitatorof scenarios, preferably drawn fl-om during the test, and making sure ev- hands written tasks t” the user one attask analysis, describing the product crything gets donr on time. This is a a time. These must be very clear andduring use in a typical work situati”n. difficult enough job that the facili- detailed. As the person works on eachDesign your prototype to support a tat”r should not be expected t” take task, the facilitator tries t” elicit thefew of these scenarios, narrowing the notes during a session. user’s thr,ughts without influencingscope of your &orts f” a reasonably l Compulw. One tram member acts as his or her choicer. “What are yousmall set of functions, but broad the “computer.” He or she knows the thinking right now?” “What quca-enough t” allow meaningful tests. application I”gic thowughly, and sus- ti”ns are “n your mind?” “Are you If possible, ask someone t” review tains the illusion that the paper pi”- confused about what you’re seeing?”the scenarios and sample data and totype behaves similar to a real com- While this is going on, the rest oftell you whether they look realistic. In puter (with an unusually slow the tram members “bsrrve and takeour experience, people find a lo-fi response time). A pointing fingel- notes, and may occasionally interjectinterface more engaging-more real- serves as a cursor, and expressions a question. But they must neveristic-if it shows data that looks famil- like, “I ‘YP’ ‘half-silvered laugh, gape, say “a-ha.” nudge oneiar and we ask them t” perform real- bicuspidon in that field” substitute another, “r “then-wise display theiristic tasks. This helps draw them into for keyboard entry. If the use,. reaction to what’s happening to theirthe “let’s pretend you’re really using touches a control, the computer in- careful design. This kind of thing cana cnmputer at your job” world, which ranges the prototype t” simulate the intimidate or humiliate users. ruiningleads to better tests. On the other response, taking care not t” explain the arlationship and spoiling the test.hand, unrealistic scenari”s and data anything other than the bebavi”~- of It can be terribly difficult to keep stillcan severely damage the credibility of the interface. while the user spends IO minuteayour design. l Obsuwrs. The rest of the tram using all the wrong conools for all the3. Practice. Just as a bug in a soft- members quietly take notes “n s-by- wnmg reasons. You will feel a com-ware prototype can ruin a test se,- X-inch index cards, writing one ob- pelling urge to explain the de+ t”sion, so can a bug in a lo-fi prototype. servation prr card. If they think “1 a your users. Don’t give in.That bug could be a missing compw recommended solwi”n, they write it When the hour is over, we spend a“em, a misunderstanding “n the pan on the same card that record, the IO-minute debriefing session asking“f the person playing “computer,” “I problem. questions, gathering imp,-essions,even excessive hesitation and c”nf& Since all of these r”les can be ex- and expressing our thanks.Sian because the team is unfamiliar- hausting, we rotate them among thewith how to conduct a tat. So to tram when we amduct more than Evaluating ReSultSavoid embarrassment, conduct xv- OFF session a day (and we very “lien I.“-fi “1 hi-Ii, prrnotyping is worthleaseral dry runs belore you test with schedule low sessions in a day). unless information is gathered andpeople from outside your team. Each Typical tat sessions usually last a the product is relined based on you)team member should be comfortable little wee- an haul-, and go through findings. As I wr”te earlier, Hix andwith his or her role, and you need I” three phases: getting ready, conduct- Harts”” nicety cover the details ofmake SUE you have the supplies and ing the test, and debriefing. We begin gathering and analyzing trst data. Weequipment needed TV gather gaod with greetings, introductiwr. ire- spend quite a bit of time (at least ainformation. frrshmrnts and general ire-bl-eaking, day per iteration) sorting and priori- trying our very best to assuw people tizing the n”tr cards we wr”tr duringConducting a Test that the test is confidenti the results the test sessions. Ow methr,d in-We find it takes four pcoplc t” get tbr will remain anonymous, and their volves arranging the paper prototypemat “ut of a test session (see Figure supervisor won’t hear a w”rd about “n a big table. then piling the n”tc2). and that their activities fall int” whether or not they “got it.” people cards next t” its relevant interfacefour essential roles: often say things like, “Am I flunking component. Then team members the test? Am I getting it right?” To divide the labor ofgoing through thel Greeler. Much the same as the usher which we anwet-, “Don’t worry, the piles t” summarize and prioritize rhcin a church, thr greeter welc”mes qurstion is whether or not we are problems.users and tries t” put them at ease. flunking. The interface is on trial, not These sorted piles inform a writtenWe have some forms we ask people t” you. If you fail t” understand some- report on findings from the test, andlill out-an experience profile, for thing or can’t complete one of the form the agrnda of a merting t” dis-example--a job the greeter handles tasks, that’s a sign of trouble with the cuss recommended changes f” thewhile other team members are setting design, not a lack of intelligence on design. The team warks through theup for the test. your part.” piles and agrees “n suggestedl Facililnlor. Once the test is set up, While this is going “n, someone changes, which are written on Post-Itthe facilitator takes the lead, and is positkms a video camera (we tape all n”tes and affixed directly to the rele-
  7. 7. ,... L _. ,.. . . . . . LL _.b. >van, part of the paper prototype.Constructing the revised prototypebecomes a procrss of taking eachcomponent, and following the recom-mendations that were stuck to it.Hix, who for years has been teachingcourses and workshops in interfacedesign, says that people consistentlyenter the tint lo-f, exercise with skep-ticism. After trying it they invariablysay something to the extent of, “Ican’t believe how much we learnedfrom this!” If this column is the firstplace you have heard about the lo4technique, one danger is that you willset aside this magazine with justenough skepticism that, howevermuch interest I’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 alreadyhave a working high-fidelity proto-type, it probably isn’t worth abandon-ing that course to switch to lo-L But ifyou 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 topick up. 0Ku&l, J. and knee. s. Twn,y-two upsfor a happier, healthirr prototype. lnlerar.I, I “a”. ,994). 35-4”.