1
Download www.allitebooks.com
Transcript
www.allitebooks.com L COMPUTERGAMEDEVELOPMENT/DESIGN IGHTBOWN DesigningtheUserExperienceofGame DevelopmentTools “Davidisguidedbyhisbeliefthathecancontributetoraisingthebarforallofus:that wecanallspeakthesamelanguage,understandthesameconcepts,andusethesame techniques,sothatwecanallmakebettergames.Whatyouarereadingnowistheresult ofDavidLightbown’sfirstbigmissiononthatverylongquest.” DESI www.allitebooks.com —MikeActon,EngineDirector,InsomniacGames “UserexperienceisthepreeminentdesignchallengeofourtimeandDavidhasGNIN capturedandrefinedtheseconceptstohelpusproducebeautifullydesignedworkflows thatareapleasuretouse.Hisacclaimedlectures,nowdemonstratedandelaboratedin thisbook,arebrilliantandveryappropriatetoourindustry.” GTHEU theUser —JasonParks,Owner,ContinuityAI;FormerTechnicalArtistforSCEA,THQ,and Volition SER “DavidLightbown’sbookshinesalightonadarkcornerofthegames,butit’sacorneron thepathwetakeeverydayingamedevelopment.AlldevelopersoweEX ittotheirfutureselvestolearntoapplytheprocesspresentedinthisbooktoPER IEN Experience theirtools.” —CoreyJohnson,UnityTechnologies C “Ifyoubuildgamestoolsandarenotfamiliarwithuser-centereddesign,thenEO youshouldreadthisbook.…providesacomprehensiveintroductiontoF user-centereddesignwitheasy-to-understandexplanationsandplentyofGAME ofGame real-worldexamplesthatdemonstratetheprinciplesandbestpracticesyouneedtoknow tostartbuildingbettertoolstoday.” D —TomHoferek,PrincipalUserExperienceDesigner,AutodeskEVEL DesigningtheUserExperienceofGameDevelopmentToolsexplains OPMEN Development howtoimprovetheuserexperienceofgamedevelopmenttools.Thefirstpartofthebook detailsthelogicbehindwhytheuserexperienceofgametoolsmustbeimproved.The secondpartintroducestheconceptofuser-centereddesign,T aprocessthatrevolvesaroundunderstandingpeople’sgoals,watchingthemTO www.allitebooks.com OLS Tools theythink. Idealforanyonewhomakes,uses,orbenefitsfromgamedevelopmenttools,thebook presentscomplexconceptsinamannerthatisaccessibletothosenewtouserexperience design. K23310 ISBN:978-1-4822-4019-1 90000 DAVIDLIGHTBOWN 9781482240191 Designing theUser Experience ofGame Development Tools Designing theUser Experience ofGame Development Tools DAVIDLIGHTBOWN BocaRatonLondonNewYork CRCPressisanimprintofthe Taylor&FrancisGroup,aninformabusiness CRCPress Taylor&FrancisGroup 6000BrokenSoundParkwayNW,Suite300 BocaRaton,FL33487-2742 ©2015byTaylor&FrancisGroup,LLC www.allitebooks.com originalU.S.Governmentworks VersionDate:20140919 InternationalStandardBookNumber-13:978-1-4822-4021-4(eBook-PDF) Thisbookcontainsinformationobtainedfromauthenticandhighlyregardedsources. Reasonableeffortshavebeenmadetopublishreliabledataandinformation,buttheauthor andpublishercannotassumeresponsibilityforthevalidityofallmaterialsorthe consequencesoftheiruse.Theauthorsandpublishershaveattemptedtotracethe copyrightholdersofallmaterialreproducedinthispublicationandapologizetocopyright holdersifpermissiontopublishinthisformhasnotbeenobtained.Ifanycopyright materialhasnotbeenacknowledgedpleasewriteandletusknowsowemayrectifyinany futurereprint. ExceptaspermittedunderU.S.CopyrightLaw,nopartofthisbookmaybereprinted, reproduced,transmit-ted,orutilizedinanyformbyanyelectronic,mechanical,orother means,nowknownorhereafterinvented,includingphotocopying,microfilming,and recording,orinanyinformationstorageorretrievalsystem,withoutwrittenpermission fromthepublishers. Forpermissiontophotocopyorusematerialelectronicallyfromthiswork,pleaseaccess www.copyright. com(http://www.copyright.com/)orcontacttheCopyrightClearanceCenter,Inc.(CCC), 222RosewoodDrive,Danvers,MA01923,978-750-8400.CCCisanot-for-profit organizationthatprovideslicensesandregistrationforavarietyofusers.For organizationsthathavebeengrantedaphotocopylicensebytheCCC,aseparatesystem ofpaymenthasbeenarranged. TrademarkNotice:Productorcorporatenamesmaybetrademarksorregistered trademarks,andareusedonlyforidentificationandexplanationwithoutintenttoinfringe. VisittheTaylor&FrancisWebsiteat http://www.taylorandfrancis.com andtheCRCPressWebsiteat http://www.crcpress.com Dedication WhenIwasyoung,Itriedtoconvincemyparentstobuyavideogame console.Instead,theyboughtacomputer. Asaresult,Iplayedvideogamesatmyfriends’housesandinarcades. OndayswhenIwantedtoplaygamesathome,myonlyoptionwasto tryre-creatingthegamesonourcomputer.Tomysurprise,IfoundthatIenjoyedcreating gamesasmuchasIdidplayingthem.Ifmyparents hadboughtaconsole,Imightneverhavediscoveredmypassionfor www.allitebooks.com Myparentssacrificedtheirtimeandenergy(andattimes,theirsanity)toteachmefocus, patience,andtherewardsthatcomefromchallenging yourself.Oh,thefactthattheysentmetoagreatschooldidn’thurteither. Theyprovidedmewiththetools—intellectualaswellaselectronic—so thatIcouldhaveoneofthegreatestgiftsanyonecouldeveraskfor:ajobthatIlook forwardtoeveryday,whereIhavetheprivilegeofmakingtoolstohelppeopleturntheir ideasintoreality. Thanks,MomandDad.Iloveyou! Contents PraiseforDesigningtheUserExperienceofGame DevelopmentTools,xi Foreword,xiii Introduction,xvii THEBIGGREENBUTTONxvii MYSTORYxviii WHOSHOULDREADTHISBOOK?xx COMPANIONWEBSITEANDTWITTERACCOUNTxxii BEFOREWEBEGIN…xxii AbouttheAuthor,xxv Chapter1◾WelcometoDesigningtheUserExperience ofGameDevelopmentTools 1 WHATWILLWELEARNINTHISCHAPTER?1 WHATISTHISBOOKABOUT?1 DEFININGUSEREXPERIENCE2 THEVALUEOFIMPROVINGTHEUSEREXPERIENCEOF OURTOOLS7 PARALLELSBETWEENUSEREXPERIENCEANDGAME DESIGN10 HOWDOPEOPLEBENEFITFROMANIMPROVEDUSER EXPERIENCE?12 FINDINGTHERIGHTBALANCE13 www.allitebooks.com vii viii◾Contents Chapter2◾TheUser-CenteredDesignProcess 15 WHATWILLWELEARNINTHISCHAPTER?15 WHATISTHEUSER-CENTEREDDESIGNPROCESS?15 THEPHASESOFTHEUSER-CENTEREDDESIGNPROCESS16 THEPOWEROFPRE-VISUALIZATION19 GETTINGTOABETTERUSEREXPERIENCEFASTER22 INTEGRATINGTHEUSER-CENTEREDDESIGNPROCESS INTOAGILE24 WHOHASTHETIMETODOALLOFTHIS?25 WRAPPINGUP26 Chapter3◾WhatDoesItMeantoBe“User-Centered”? 27 WHATWILLWELEARNINTHISCHAPTER?27 STARTWITHTHEUSERS27 FOCUSONTHERIGHTUSERS30 FEATURESVERSUSGOALS32 DOONETHINGREALLYWELL34 CHOOSETHERIGHTFEATURES36 WRAPPINGUP38 Chapter4◾Analysis39 WHATWILLWELEARNINTHISCHAPTER?39 THEIMPORTANCEOFWATCHINGUSERSWORK39 INTRODUCTIONTOHUMAN–COMPUTERINTERACTION43 UNDERSTANDINGTHEMENTALMODEL54 INTERVIEWSTAKEHOLDERS57 PERFORMCONTEXTUALANALYSES58 CREATETASKFLOWS61 DISCOVERTHEUSERS’MENTALMODEL62 www.allitebooks.com ADVANCEDTECHNIQUES67 WRAPPINGUP69 Contents◾ix Chapter5◾Design71 WHATWILLWELEARNINTHISCHAPTER?71 HOWTHEBRAINANDTHEEYESWORKTOGETHER72 VISUALLANGUAGE73 INTERACTIONPATTERNS77 HIERARCHY80 CONSTRAINTS83 NATURALMAPPING85 REPRESENTATION87 FEEDBACK91 FEED-FORWARD95 GROUPING97 CHUNKING102 EXCISE104 PROGRESSIVEDISCLOSURE112 WRAPPINGUP116 Chapter6◾Evaluation117 WHATWILLWELEARNINTHISCHAPTER?117 HOWDOWEEVALUATETHEDESIGN? 117 CHOOSINGBETWEENCODEORPRE-VISUALIZATION 117 PRE-VISUALIZETHEINTERFACE 119 PERFORMAHEURISTICEVALUATION 121 DOUSERTESTS 126 www.allitebooks.com Chapter7◾BacktoAnalysis 131 DÉJÀVU131 COMPARINGMEASUREMENTS132 Chapter8◾Real-WorldUser-CenteredDesign 135 INTRODUCTION135 THEPROCESSINACTION 136 CALCULATINGTHERETURNONINVESTMENT144 x◾Contents CONCLUSION,147 SUMMARY147 CLOSINGWORD148 THANKS,151 WORKSCITED&RECOMMENDEDREADING,153 TRADEMARKS,155 PraiseforDesigningthe UserExperienceofGame DevelopmentTools “Asatechnicalartist,I’vebeenespousingthebenefitsoftoolsforartistsandproduction pipelinesformorethanadecade.Buthonestly,they’vebeen bare-bones,just-get-the-job-donekindofquality.It’sabouttimeweattachsome professionalismtothedesignofourtoolsaswell.Userexperienceisthepreeminent designchallengeofourtimeandDavidhascapturedand refinedtheseconceptstohelpusproducebeautifullydesignedworkflowsthatarea pleasuretouse.Hisacclaimedlectures,nowdemonstratedandelaboratedinthisbook,are brilliantandveryappropriatetoourindustry. MytoolsetsgoingforwardaregoingtoincorporateasmanyoftheseconceptsasIcansqueezeintothem.” —JasonParks Owner,ContinuityAI(formerTechnicalArtist forSCEA,THQ,andVolition) www.allitebooks.com completelyconversationalmannerthatisnotonlyapproach-able,butfunandinteresting toread.Hisexamplesareworthsharing,andputtingthemintoactionhasdefinitelymade meabetterdesigner.” —JimBrown EpicGames xi xii◾PraiseforDesigningtheUserExperienceofGameDevelopmentTools “DavidLightbown’sbookshinesalightonadarkcornerofthegames,butit’sacorneron thepathwetakeeverydayingamedevelopment.Alldevelopersoweittotheirfuture selvestolearntoapplytheprocesspresentedinthisbooktotheirtools.” —CoreyJohnson UnityTechnologies “IfyoubuildgamestoolsandarenotfamiliarwithUser-CenteredDesign,thenyou shouldreadthisbook.Davidexplainswhytheuserexperience ofthetoolsyoumakeisimportanttoyourusersandhowithasapositiveimpactonyour bottomline.Heprovidesacomprehensiveintroductionto User-CenteredDesignwitheasy-to-understandexplanationsandplenty ofreal-worldexamplesthatdemonstratetheprinciplesandbestpracticesyouneedto knowtostartbuildingbettertoolstoday.” —TomHoferek PrincipalUserExperienceDesigner,Autodesk “Throughhonestinsightandreal-worldpragmatism,Davidhasprovided awonderfulentrypointtothepracticeofUser-CenteredDesignwhile highlightingitspracticalapplicationtogamedevelopmenttools.David notonlydeliverstheconceptsandtechniquesthatcanbeusedtoimprovetheuser experienceofgamedevelopmenttools,healsooutlines—inclearandmeasurableterms— thereturnoninvestmentfordoingso.Amust readforanyonewho’sseriousaboutimprovingtheefficiency,creativity,andproductivity ofthecontentcreatorsontheirteam.” —LiamGrieg SeniorUXDesigner,Atlassian “Alltoooften,in-housesoftwaretoolsareneglectedchildren,withbafflinginterfacesand steeplearningcurves,whichtranslatesintocountlesshoursoflostproductivity.Inthis easy-to-read,comprehensiveguide,DavidLightbownappliesclassicprinciplesofUserCenteredDesigntothetool-buildingprocess,sothatdeveloperscanhelpusersunlockthe powerof www.allitebooks.com cess.Amust-read,evenifyou’renotinthegamesindustry.” —AJKandy Co-Founder/DirectorofDesign,Peterson/Kandy Foreword DavidandIfirstmetjustaftertheGameDevelopersConferencein2012. Theinterfacedesigneronmyteamhadjustgivenapresentationonour experienceandapproachtousabilityforourinternaldevelopmenttools. IthinkwhatsparkedthatfirstconversationwasDavid’sinitialsurprisethattherewas someoneelse,anyoneelse,outthereinourspacethatreallydidcareabouttheseissues. Gamedevelopment,especiallyintheconsolespacethatI’mmostfamiliarwith,isoften veryplayer-focused.Wewanttodowhatmakesforthebestplayerexperience.Asan industryandaculturewehaveaverylong,fruitfulhistoryinthatarea.Muchmorerarely dowetakethatsameexpertiseandfocusitinward.Howdowetakethelessonsofgames andapplythemtomakinggames? Overthelasttenyearsorso,therehasthoughbeenagrowingrealizationamongdevelopers,especiallyonlargerteams,thatthecostand complexityofmakinggamesisitselfinhibitingourcollectiveabilitytodevelopthebest experiencefortheplayer.InjustthepreviousgenerationofAAAgamedevelopmentit wasquitecleartoeveryonethatthese secondaryknock-oneffectswereactuallynotjustsignificant,butpossiblythemost significantpredictorofquality.Thephrase“iterationtime”washeardeverywhere.Wehad collectivelyrealizedthatinmakinggames,likemostcreativeendeavors,yougetitwrong thefirsttime.Andthesecondtime.Andthethird.Butyoulearnsomethingimportantin eachiterationandthemoreiterationsyoucando,thebetteratityoubecome.Thisisno surprisetoanyoneonanindividualscale.Therealchangewasthatnoonecouldescape thisuniversaltruthanylonger.Bruteforceworkswelltoapointandthatpointhaspassed. Manydifferent“solutions”tothatproblemhaveappearedsincethen. Inparticular,it’shardnottorecognizetheintroductionofAgilemethodologiesin particularintothegameindustryasaprocessresponseto thisveryproblem—asmuchasitsadherentswillinsistit’snotaprocess. xiii xiv◾Foreword Whilethesemethodsfromotherindustriesbroughtalongwiththemalot ofbaggageofdubiousvalue,theydidhelptocrystalizeoneimportantideainto developmentculture:youcannotknoweverythinginadvance.This isnottosayyoucannotknowanythinginadvance,whichinmyexperi- clearlystupid.Buttheveryideathatyoucannotplanforeverythinginacreativeproject, notjustthatyoushouldnot,wasbothcompellingand self-evidentinretrospect.Wehadneverbeenabletoplaneverything.Wejustpretended wecould. Theninthelastfiveyearsorso,everywherethingswerehappeningat aboutthesametime,whichwouldhelpmaturetheconceptof“iteration” intooneof“usability.”Peoplewerenolongeraskingwhethertheyshoulditeratemorebut ratherhowtomakethoseiterationsmorevaluable. Usabilityasadisciplineandusabilityresearchoutsidethegameindustry(aswellas withinthegameindustry,butstilllargelyfocusedontheplayerexperience)hadhelpedto definewhatwemeantbyiteration.Howdoesoneimproveorincreaseiterationsnotjust bymakinglongprocessesshorter,butbymakingthingsbetterordifferentlyaltogether? Wheredoesauserandherexpectationsfitintoallofthis?Thedisciplineofusability researchwasgrowingallaroundustoanswerthesekindsofquestions.Inparticular,the meteoricriseofwebappsandmobiledevelopment(gamesor otherwise)andtheunprecedentedsuccessoftheiPhoneinparticular broughtusabilitydesignintothelimelight.AndthencameGamification:themuch maligned,andinmyview,bothlargelymisunderstoodand completelymisapplied,ideathatyoucouldtakethelessonslearnedfromgamesandapply themtootherthings.Likemakinggames. ItwasasbothDavidandIwerepreparingforGDC2013thatIthink wefoundwhereallofthiswouldleadus.Iwaspreparingmypresentation “UsabilityIsNotRandom”basedonmytheorythatusabilitycouldbefor-malizedin termsofinformationandinformationtheory.Wecandescribe ourinteractionswithourtoolsasaformofcommunication,whichwe couldmeasureandanalyze.Icouldusethismodeltohelpimproveand guidemyapproachtodevelopingtoolswithmyteam,inmydayjobas enginedirectoratInsomniacGames. David,however,wasdrivenbysomethingevenlarger.Thatsameyear, wewerebothpartofaGoogleHangoutpaneltogether.Wediscussedwhat droveusandwhatwasmostimportanttous.Itbecameclearthatwhat Davidwantedwasnotjusttofigureouthowmuchhecouldimprovethe usabilityofaspecifictoolorsetofdevelopmenttoolsorevenforaspecificForeword◾ xv team,butthathewantedtoimproveusabilityeverywhereinourindustry. canallspeakthesamelanguage,understandthesameconcepts,andusethesame techniques,sothatwecanallmakebettergames. WhatyouarereadingnowistheresultofDavidLightbown’sfirstbig missiononthatverylongquest.Therestisaco-opcampaign,andhehasbroughtalong theseweaponstogetusstarted. MikeActon EngineDirector InsomniacGames June20,2014 Introduction Eventhoughtheyhadbeentryingforoveranhour,thetwomencould notgetthemachinetoperformitsgreatesttrick:printadouble-sidedpage.Theywere almostreadytogiveup.“We’reS.O.L.,”oneofthem said,finally.Fortunately,theinteractionanalystwaswatching,andshegotitallon videotape. THEBIGGREENBUTTON In1983,Xeroxintroducedtheirmosttechnologicallyadvancedphotocopier,theXerox8200.Ithadmanyinnovativefeaturesforthetime: double-sidedprintingandautomaticallycollatingpages,tonameafew. However,customerservicerepresentativesstartedreportingthatcustomerscomplainedthemachinewas“toocomplicated.”Ironically,Xerox advertisedthemachineasbeingsimpletouse—“Allyouhavetodois pushthegreenbutton.” Xeroxwasalsooneofthefirstcompaniestohiresocialanthropologistsandpsychologists tohelpwithproductdevelopment.Thisishow—afew yearsbeforetheXerox8200wasintroduced—adoctoralstudentwitha backgroundininteractionanalysisstartedworkingatXerox.Hername wasLucySuchman. WhentheXeroxexecutiveslearnedwhatcustomersweresayingabout themachine,Lucywasaskedtohelpfigureoutwhy.Sherequestedthat oneofthemachinesbeinstalledatthePaloAltoResearchCentersoshecouldwatch peopleusingit.* TwooftheparticipantswerespecificallychosenbyLucyfromtheinter- *TheXeroxPaloAltoResearchCenter,morecommonlyknownasXeroxPARC,would playahugeroleindrivingthefieldofhuman–computerinteractionforward.MichaelA. Hiltzik’sDealersofLightningoffersafantastichistoryofXeroxPARC,thepeople involvedinitsriseandfall,andallofthecompaniesthattheywouldgoontoinfluence, includingAdobe,Microsoft,Pixar,andApple. xvii xviii◾Introduction amicrophoneandacamera,andgavethemaseriesoftaskstoperform. Oneofthesetaskswastotestamajorsellingpointofthemachine:duplexprint,or printingdouble-sided. Afteranhourandahalfoffillinguptheroomwithpaperfromfailed attempts,thetwomenconcludedthattheycouldnotfigureitout.One ofthemexpressedtheirfrustrationwithaquotecapturedonthenowfamousvideorecording:“We’reS.O.L.” ThevideowaspresentedtotheXeroxexecutiveaspartofLucy’sreport. Afterwatchingthevideo,oneoftheexecutivesexclaimedthatthereasonthetwomen couldnotfigureouthowtoprintdouble-sidedwasthattheyarenotsmartenough.“You musthavegottheseguysofftheloadingdock!” That’swhenLucyrevealedthatthetwomenshehadchosenwereactuallytwoofthemostgiftedcomputerscientistsworkingatXerox:Ron Kaplan,abrilliantcomputationallinguist,andAllenNewel,oneofthe foundingfathersofartificialintelligence. Thiswasoneofthefirstdocumentedaccountsofapplyinguserresearch toimproveanofficeproductivitytool.*Itwouldbemanyyearsbefore thesetechniqueswouldbeappliedtotoolsdevelopmentinthevideo gamesindustry. MYSTORY LicensetoCompute WhenIwasateenager,oneofmyfirstfull-timejobswasworkingtechnicalsupportfor anInternetserviceprovider.IntheearlydaysoftheInternet,everyonewhoworkedin technicalsupportcoulddoabitofUNIXshell scriptingandknewhowtoconfigureTCP/IPforeveryimaginableoperatingsystem. Alldaylong,wewouldanswercallsfrompeoplewhodidnotknowas wouldmakefunofthecustomerswhenwegotoffthephone. Oneofthemoreinfamousstorieswasthatofacustomerwhowasworriedthattheyhad“deletedtheInternet,”becausetheyhadaccidentallydraggedthe InternetExplorericonintothetrash.Aftergettingoffaparticularlydifficultcall,I remembersayingtomycolleaguesthatpeopleshouldhavetopassanexamtousea computer. *ThefullversionofthisstorycanbefoundinLucySuchman’sbookHuman–Machine Reconfigurations. Introduction◾xix Irealizenowwhatafoolishstatementthatwas.Theproblemisnotthe user.Itistheuserexperience. MyBestandWorstDaysinGameDevelopment Yearslater,Iwasfortunateenoughtogetmyfirstjobinthegamesindustry.Inthattime,I haveheldavarietyofroles,suchasmodeler,technicalartist,andtechnicaldirector. SomeofmybestdaysworkingasatechnicaldirectorwerewhenIwould watchhowachangetoatoolorpipelinecouldmakeanartist,animator,orleveldesigner moreproductive.Italwaysmademefeelgoodwhentheywouldsay,“Thattoolyou workedonreallysavedmealotoftime,andIwasabletofocusoncreating!”Nothing makesmehappierthanenabling contentcreatorstodowhattheydobest. Bycontrast,someofmyworstdayswerewhenIwouldwalkbysomeone’sdeskandwatchthemjumpthroughmultiplefrustratingandinefficienthoops,justtomakeatinybitofprogress.Eveniftheydidn’tgetmuchdone,atleast theycouldfeelthattheyaccomplishedsomething. Seeingcontentcreatorslimitedintheirabilitytoexpressthemselvesforreasonsbeyond theircontrolisextremelyfrustratingtowatch. Atthattime,Ihadalimitedsetofoptionsatmydisposal,suchaswritingscriptsto accelerateproductivity,mentoringandcoaching,tryingtofindwaystostreamlinethe pipeline,andsoon.However,IalwaysfeltthattherewasmorethatIcoulddotoimprove thetools.Withoutadoubt,myexperienceinthegamesindustrygavemeanadvantage whenitcameto toolsdevelopment,butnoonecangetitrighteverytime.Ineededtofindamore consistentandmeasurableway. Thisdesiretohelpthecontentcreators—whoseworkIadmiredsomuch— ledmedownapaththatwouldchangemycareerinthegamesindustry. DiscoveringtheInmates waystomakecontentcreatorsmoreproductive,handedmeacopyof TheInmatesAreRunningtheAsylum.Thisbook—writtenbyAlanCooper,thecreatorof VisualBasic—hadbeencirculatinginwebanddesktopsoftwaredevelopmentstudiosbut hadnotyetmadeitswayintogamedevelopment.WhenIreadit,Iwasamazedathowperfectlyitcapturedthe softwaredevelopmentculturethatIhadbeenapartofacrossmanydifferentgame developmentteams. xx◾Introduction Thisbookalsointroducedmetothefieldofuserexperiencedesign. FromthefirstdaythatIstartedworkingingamedevelopment,Ihad thoughtsandopinionsonhowtodesigngamedevelopmenttoolsthat wouldmaketheusersmoreproductive,butIwasneverabletopinpointasystemor methodologytodoitconsistently.ThisbookopenedthedoortoaworldthatInevereven knewexisted. Afterfinishingthatbook,Istartedtoseekoutanyotherbooksonuserexperiencedesign thatIcouldgetmyhandson:DonNorman’sTheDesignofEverydayThings,Steve Krug’sDon’tMakeMeThink!,DanSaffer’sDesigningforInteraction,andJeffGothelf’s LeanUX,tonamejustafew. Itwasn’tlongbeforeIcametotherealizationthattheconceptspresentedinthesebookshadneverbeenformallyappliedtotoolsdevelopmentinthegamesindustry.Theuntappedpotentialforimprovement washuge. TheMainMessage Icreatedapresentationabouttheimpactthattheseconceptscouldhaveontools developmentinthegamesindustry,andIstartedshowingit aroundtovariousgamedevelopmentstudios.Thatpresentationwas essentiallymyjobinterview.Thisresultedinafull-timepositionfocusingonimproving theuserexperienceofgamedevelopmentpipelinesand toolsatUbisoftMontreal. Iwouldgoontogivethatpresentationatleastadozenmoretimes, mostnotablyattheMontrealInternationalGameSummit(MIGS)and theGameDevelopersConference(GDC),wherethefeedbackfromthe attendeesputitamongthemosthighlyratedpresentationsofbothconferences.Afeatured articleonGamasutrafollowed. Nolongafter,Iwasapproachedtoturnthepresentationintoabook, andofthisbookremainsthesame:thegamesindustryneedstomakethe userexperienceoftoolsapriority. WHOSHOULDREADTHISBOOK? Thisbookisforanyonewhomakes,uses,orbenefitsfromgamedevelopmenttools.However,anyoneinvolvedintheproductionofvideogamesingeneralshould beawareofthemessageinthisbook,becauseitismybeliefthatinvestinginbettertools canhelpusmakebettergames. Introduction◾xxi ThePeopleWhoMaketheTools,or“Developers” Sometoolsdevelopershaveareputationfornotcaringabouttheuser experienceofgamedevelopmenttools.Thisislargelyunfair:mosttoolsdeveloperswant toimprovetheuserexperiencebutarenotgiventhetime,lackthetechniques,ordonot knowwheretobegin.Thisbooksaimsto addressthoseissuesandempowertoolsdeveloperstomakepositivestepstoward improvingtheuserexperienceoftheirtools. Technicaldirectorsandtechnicalartistsareofteninoneofthebest positionstoinitiatechange,sincetheyactasabridgebetweentheusersandthe developers.Manyofthemarealsotoolsdevelopersintheirown right.Thisbookwillgivethemtheknowledgetomakethemostofthat positionandimprovetheprocesswithwhichourtoolsaredeveloped. ThePeopleWhoUsetheTools,or“Users” Thetermcontentcreatorsissometimesusedtodescribeanyonewhousesthetoolsto createcontentthatwillappearinthegame,thoughmost peoplesimplyknowthemas“theusers.”Thiscanincludemodelers,animators,leveldesigners,gamedesigners,audioengineers,specialeffectsartists,andsoon. Thisbookcanhelpthemimprovecommunicationwith thoseresponsibleformakingthetoolsandassistinidentifyingcommon issues,aswellasproposinghowtheycanbeimproved. ThePeopleWhoBenefitfromtheTools,or“Stakeholders” Thepeoplewhobenefitfromthecontentproducedbythetoolsaresometimescalledstakeholders.Thesepeoplemayneveruseorevenseethetoolswethat discussinthisbook.Despitethis,theycanbethemostimportantplayers,sincethey— sometimesindirectly—mandatethecreationofthe tools.Creativedirectors,producers,andmanagersareafewexamplesofpeoplewho belongtothisgroup.Astheyareresponsibleforsettingtherequirementsforthegameand improvingtheuser experiencecanreducerisk,aswellassavetimeandmoney. ANoteforUserExperienceDesigners Ifyouareauserexperiencedesignercomingfromanotherindustry,you willbefamiliarwithmanyoftheconceptsinthisbook.Youwillnoticethatsome conceptsandtechniqueshavebeensimplifiedinanefforttobeeasiertounderstandfor peoplenewtouserexperiencedesign. xxii◾Introduction However,thisbookalsoincludesalotofinformationspecifictogame toolsdevelopment.Thegamesindustryfacesuniquechallengesinregard toimprovingtheuserexperienceoftheirtools.Itisthosechalengesthatmakethework evenmoreinterestingforuserexperiencedesigners:thereisalotofworktodobutalsoa tonofuntappedpotential,waitingto beunlocked. ItCanTakeYearstoBecomeanExpertinUserExperience Althoughthisbookstrivestobeasthoroughaspossibleatpresentingwaysinwhichthe userexperiencecanbeimproved,itcannotturnyouintoa userexperienceexpertovernight.Ifyourgoalistobecomeanexpert,itwilltaketimeand dedication—andbyreadingthisbook,youaretaking yourfirstbigstep. FortheGamers WhenIvisitmylocalgamestore,Imakeapointoflisteningtopeopleinthestoretalk aboutgames.Itremindsmethatthecontentwecreatewithourtoolsisultimatelyforthe gamers.Hearingpeoplegetexcitedaboutupcominggamesandtalkingabouttheir experiencescanreminduswhy welovemakinggamesinthefirstplace. COMPANIONWEBSITEANDTWITTERACCOUNT Althoughthecontentofthisbookisstatic,thereareafewresources availabletomakeitdynamicandinteractive.Thecompanionwebsite, www.UXofGameTools.com,containsthelatestinformationandrevisions forthisbook,aswellascontactinformation.Youcanalsofollowtheoffi-cialTwitter account@UXofGameToolstoseethelatestupdatesandreadacuratedlistofarticles relatedtouserexperience. Yourquestionsandcommentsareallwelcome,sopleasefeelfreeto [email protected] BEFOREWEBEGIN… Theconceptsandtechniquesinthisbookreflectmyapproachtoimprovingtheuserexperienceofgamedevelopmenttools,anditisbynomeanstheonlyway. JustasIhaveborrowedideasonuserexperiencedesignfromothersourcesandtailored themtofitgametoolsdevelopment,youshouldtakewhatworksbestforyouandyour situation. Introduction◾xxiii Inaddition,thisisnotanacademictext,sosomeconceptshavebeen simplifiedforthosewhoarelearningaboutuserexperienceforthefirsttime.Wherever possible,Ihaveaddedresourcesinthefootnotesforpeoplewhowantmoredetails. Someoftheideasinthisbookmaybeverynewanddifferentifyouhavebeendeveloping gametoolsforalongtime.Keepinmindthatthegoalisnottocompletelychangetheway wework,buttoenhanceit.Thematerialpresentedhereistocomplementourexisting skills,inanefforttomakeusbettergamedevelopers. Attheendoftheday,aslongastheusers,stakeholders,anddevelopersworktogetherto makebettertools,thereisnorightorwrongway. Now,let’sjumpin! AbouttheAuthor Afterspendingmostofhisformativeyearsinhisparents’basementtryingtoclone8-bitconsolegamesonanAppleIIgs,DavidLightbowngotajobinthe gamesindustry.Sincethen,hehasdedicatedthemajorityofhiscareertoworkingon contentcreationtoolsandpipelines. Inadditiontocontributingtoavarietyofgamesasatechnicaldirector,Davidhas deliveredpresentationsattheGameDevelopersConference, MontrealInternationalGameSummit,andSIGGRAPH,invariouscities withinCanada,theUnitedStates,andEurope. HehasalsocollaboratedwithAutodesktocreateproductreviews, trainingmanuals,tutorialvideos,andmasterclasses.In2010,hereceivedtheAutodesk MasterAwardforhiscontributionstothe3Dcommunity. Theawardalsoincludedasweetleatherjacket. DavidcurrentholdsthetitleoftechnicaldirectoratUbisoftMontreal. xxv Chapter1 WelcometoDesigning theUserExperienceof WHATWILLWELEARNINTHISCHAPTER? •Whatisthisbookabout? •Whatisauserexperience? •Whatisthevalueofimprovingtheuserexperience? •Whataretheparallelsbetweenuserexperienceandgames development? •Howdopeoplebenefitfromimprovingtheuserexperience? •Whathappenswhentheneedsofonegroupareprioritizedover another? WHATISTHISBOOKABOUT? Thegoalofthisbookistopresentconceptsandtechniquesthatcanbe usedtoimprovetheuserexperienceofgamedevelopmenttools.Thisbookfocuseson User-CenteredDesign,aprocessthatrevolvesaroundunderstandingpeople’sgoals, watchingthemwork,learningthecontextin whichtheywork,andunderstandinghowtheythink.Wewilllearnhow eachphaseoftheprocesscancontributetoimprovingtheuserexperience. 1 2◾DesigningtheUserExperienceofGameDevelopmentTools Finally,wewillseehowthisprocesscanbeappliedtoareal-worldgamedevelopment tool. Beforewelearnabouthowtoimprovetheuserexperience,itwouldbe reasonabletobeginbydescribingthetermuserexperience. DEFININGUSEREXPERIENCE Ifyoudoawebsearchorreadbooksaboutuserexperiencedesign,you willnoticethattherearemanydifferentwaystodescribewhatauserexperienceis.One populardescriptioncomesfromElizabethSanders,who suggeststhattoolsneedtobe“useful,usable,anddesirable.”*Howarethesethree objectivesprioritized? TheUserExperiencePyramid YoumayhaveheardaboutMaslow’shierarchyofhumanneeds,whichis oftendepictedasapyramid.Essentially,itstatesthatphysiologicalneeds— suchasfoodandshelter—mustbefulfilledbeforemorecomplexneedsaremet—suchas creativityandconfidence(seetheleftsideofFigure1.1).† www.allitebooks.com tionsofapersonusingatoolmustbemetbeforeconsideringfunctionalitythatismore advanced.Inthiscase,atoolshouldbeusefulbeforeitcanbeusable,andatoolshouldbe usablebeforemakingitdesirable(seetherightsideofFigure1.1). Inotherwords,atoolmayhaveanice-lookinguserinterface(desirable),butifitis difficulttouse(notusable)anddoesnotfulfilltheuser’sneeds(notuseful),itcanresultin abaduserexperience. Self-actualization Desirable Esteem Love/Belonging Usable Safety Physiological Useful FIGURE1.1Maslow’shierarchyofhumanneeds(left).Theuserexperiencepyramid (right). *ThiswasoriginallyproposedinanarticlefortheDesignManagementJournal,entitled “ConvergingPerspectives.”Itcanbefoundhere:http://onlinelibrary.wiley.com/ doi/10.1111/j.1948-7169.1992. tb00604.x/abstract. †YoucanreadmoreaboutMaslow’shierarchyofhumanneedshere:http://en.wikipedia. org/wiki/Maslow’s_hierarchy_of_needs. WelcometoDesigningtheUserExperienceofGameDevelopmentTools◾3 Unfortunately,somegamedevelopmenttoolsonlyprovidethebase levelofthepyramid:theyareuseful.Thatalsomeansthattheyareneitherusablenor desirable.Inthecaseofin-housetools,peopleusethembecausetheyhavenoother choice.Tolearnhowwecanmaketoolsthat peoplewanttouse,wecanstartbyunderstandingthethreelevels. Useful Atthecoreofagooduserexperienceissomethingthatfulfillsaneed. Ifagamedevelopmenttooldoesnotfulfillaneed,whydoesitexist inthefirstplace?Ideally,theseneedsshouldcomefromtheusersand thestakeholders. Toexplainthisfurther,wewillusetheanalogyofavehicle.Asthisisabookaboutgame Halofranchise.AWarthogfulfillsaSpartan’sneedtogetfrompointAtopointBina shortamountoftime.Itisfaster—andinthecaseofenemyfire,oftensafer—than running.IfweweretodesignaWarthogthatsimplyfulfilledtheneedtogetfrompointA topointB,itmightresembleaframewithwheels,aturret,andanengine(seeFigure1.2). Howdowemakeatoolthatisconsidereduseful?Westartbyidentifyingtherightpeopletodesignforandthecontextinwhichtheyworkandbyunderstanding theirgoals.WewilltalkmoreaboutthisinChapters3 and4. ThisWarthoggetsusfrompointAtopointB,butithasamajorissue: wearesittingonametalplatformwithwheels.Wehavenoprotection,wearenot comfortable,anditisnoteasytouse:theonlywaytodriveistoreachourhandsintothe engineandconnectthewires.Thereisnovisiblewaytocontroltheturret.Surely,there mustbeabetterway!Thatbringsustothenextlevelinthepyramid:makingtoolsthatare moreusable. Useful FIGURE1.2Auserexperiencethatisuseful. 4◾DesigningtheUserExperienceofGameDevelopmentTools Usable FIGURE1.3Auserexperiencethatisusable. Usable Muchlikeuserexperience,therearemanydefinitionsofusability.The vastmajorityofthesedefinitionsincludequestionssuchas“Howefficientisittouse?”, “Howeasyisittolearn?”,“Howwellistheuserprotectedfrommakingmistakes?”,and “Howsatisfyingisittouse?”Therearemanywaystomeasureimprovementstousability, butinthisbook,wewillfocusontwo:efficiencyandlearnability. TocontinuewithourexampleoftheWarthog,whatwouldbethedefinitionofmakingitmoreusable?Wecouldaddpedalsandaseatthatis adjustablesothedrivercansitcomfortablyandreachthepedalswiththeirfeet.This wouldmakeitconvenienttoaccelerateanddecelerate,withouthavingtoreachintothe engineandconnectanywires.Tomakeiteasiertolearnhowtodriveandshoottheturret, wecouldaddstandardcontrolsthatanySpartanwhohasreceivedbasictrainingis familiarwith:apistolgripandasteeringwheel(seeFigure1.3). Howdoweimproveusability?Thereareavarietyoftechniques,basedonhumanfactors, interactiondesign,cognitivepsychology,andinformationarchitecture—justtonamea few—thatwewilllearnaboutinChapter5. WhatelsecouldbedonetoimproveourWarthog?Thisquestionbrings theinterfacelook“cool,”butthereismuchmoretoitthanthat. Desirable Desirabilityisoftenthelaststepthatweconsiderwhendesigninggamedevelopment tools.Typically,theperceptionisthatdesirabilityisnotimportantordoesnotcontribute enoughtotheuserexperiencetomake itworththecost. However,thefactisthatatoolwithanaestheticandappealingdesign notonlycontributestousersatisfaction,butitalsoconfirmstotheuserWelcometo DesigningtheUserExperienceofGameDevelopmentTools◾5 Desirable FIGURE1.4Auserexperiencethatisdesirable. thatthedesignershavetakenthetimetocreateahigh-quality,professionaltool.This givestheusermoreconfidenceintheabilitiesofthetool. Let’sreturntoourexampleoftheWarthog.Featuresliketintedwindows,shiningchrome,andanewpaintjobmayseemunnecessary,but considerthis:ifthewindowsarecracked,thelabelsonthecontrolsarepeelingoff,andthe bodyiscoveredinrustandfallingapart,howconfidentwouldyoubethatthisWarthog willprotectyouinbattle?Youmightaskyourself,“Whatelseiswrongwiththevehicle thatIcan’tsee?Isthisgoingtokeepmesafeonthebattlefield?”(seeFigure1.4). Usabilityanddesirabilityareoftenintertwined.Wewillseethiswhen welearnaboutthedesigntechniquesofhierarchyinChapter5,orheuristicssuchas aestheticandminimalistdesigninChapter6. MissingLevels Now,imagineiftheWarthogwasmissingonlythe“usable”levelofthe pyramid.Ithaswheels,anengine,andanarmoredshell,butyouhavetocrouchdown insideandfiddlewiththewirestocontroltheengineand steer.Furthermore,youwouldbesittingonametalplateinsteadofinaseat,withouta seatbelt.Itmightlooknice,butitwouldnotbeverysafeorconvenient(seetheleftsideof Figure1.5). Alternatively,youcouldhaveaWarthogthatismissingjustthe“useful” level:ithasaniceseatwithaseatbelt,asteeringwheel,pedals,andanarmoredshell,but ithasnoengineorwheels.Itmaylookgreatandhaveallofthecontrolsyouneedonthe inside,butitisnotgoingtogetyoufrompointAtopointB,whichiswhyyouwantedto useitinthefirstplace(seetherightsideofFigure1.5). FIGURE1.5Userexperiencesthatareneitherusable(left)noruseful(right). 6◾DesigningtheUserExperienceofGameDevelopmentTools DefinitionsfromCooperandNorman Anothercommondescriptionofagooduserexperienceissoftwarethat resemblesaninteractionwithahumanandnotamachine. InTheInmatesAreRunningtheAsylum,AlanCooperproposesthatweshouldbe “purposefullydesigningoursoftware-basedproductstobe morehumanandforgiving.”Anexampleofthiswouldbeagoodfriend, whowoulddothefollowing: •Rememberwhatyoulike •Dotheirbesttohelpyou •Clearlyexplainthemselves •Takeresponsibility •Beforgivingifsomethinggoeswrong •Beflexiblewhentryingtoassistyou TheartificialintelligenceCortanafromtheHaloseriesandthevirtualassistantSirifrom Applearegoodexamplesofmachinesthatappearto possessthesequalities. Whatistheoppositeofthat?Afrustratingperson.DonNorman echoesthisinhisbookTheDesignofEverydayThingswithexamplesonhowtomake somethingdifficulttouseonpurpose:“Beinconsistent,”“Beimpolite.”Everyonehashad todealwithsomeonelikethisintheirlifeatonepointoranother.Afrustratingperson doesthefollowing: •Forgetswhatyoulike •Willnothelpyou •Doesnotcommunicateclearly •Doesnottakeresponsibility •Isnotforgivingifsomethinggoeswrong •Isnotflexibleinhelpingyou TheevilartificialintelligenceSHODANfromSystemShockwouldbeanextreme exampleofthis,orevenGLaDOSfromthegamePortal. Howmanytoolscanyouthinkofthatresembleagoodfriend?Now, howmanycanyouthinkofthatresembleafrustratingperson? WelcometoDesigningtheUserExperienceofGameDevelopmentTools◾7 ComparingtheUserExperienceofNormalMappingTools human.”Itusessimplelanguagethatahumanmightuse (“Intensity”and“VeryLargeDetail”).Itcommunicatesclearlybyusing previewstoshowyouwhatwillhappenifyouchooseaspecificoption.Ittriestohelpyou bychoosingthebestoptionautomatically.Thismakesthetoollessintimidatingand encouragesuserstomakeitpartoftheirpipeline.Mostimportantly,italsomeanspeople aremorelikelytorecommendittotheirfriendsandcoworkers. AnotherexampleofthisistheUnityengine:whenyouassignatexture thathascharacteristicsofanormalmapbutyouforgettoflagitassuch,theengine automaticallydetectsthisandofferstoflagitasanormalmap. Thisisagreatexampleofsoftwareactinglikeagoodfriendbydoingitsbesttohelpyou (seetheleftsideofFigure1.7,atthebottom). WecancomparethistotheNVIDIANormalMapFilterontheright sideofFigure1.7.Itresemblesaninteractionwithafrustratingperson.Itisunclearwhat theoptionsdo,justlikesomeonewhodoesnotcommunicateclearly,the3DViewforgets thelastanglethatyousetittoafteryoucloseandreopenthewindow,andsoon. THEVALUEOFIMPROVINGTHEUSEREXPERIENCE OFOURTOOLS In2010,JimBrownofEpicGamespresentedatalkattheGameDevelopersConference titled“Tools:MakingaBetterGame.”Inthispresentation, hestatedthatevenasmallincreaseinefficiencycouldresultinasignificantsavingsof timeandmoney,whenyoulookatthebigpicture.Some improvementsmaynotseemlikealotontheirown,buttheycanaddup tohundredsofthousandsofdollarsandmanyman-monthsifyoudesign itfortherightpeople. Toillustratethis,letusassumethatwetakethetimetoimprovetheefficiencyofatool andmakeiteasiertolearn.Thoseimprovementsresultinasavingsof20minutesper8hourday.Thismaynotseemlikealotonitsown.However,wehavetoconsiderhow manypeopleareusingthattool, andhowoften.Ifthattoolisusedby20usersper8-hourday,20minutesperdaycansave thefollowing: •7hoursperday •32hoursperweek •1,800hoursperyear 8◾DesigningtheUserExperienceofGameDevelopmentTools lark. yanC face.©R nterpi razyBumeCTh 6 E1.RU FIG WelcometoDesigningtheUserExperienceofGameDevelopmentTools◾9 IAIDV eN left).Th ap( alm orm oanright). ialt aterlearly( onverunicatedc ocm asytom teotc ren akingihata ym oubptionst elpyfo ohbero esttum tsbingn oesihelmwvernspectordno nityIasa eUThilterh 7 apF E1.RalM U orm FIG N 10◾DesigningtheUserExperienceofGameDevelopmentToolsNow,whenbudgeting thestaffforagamedevelopmentteam,youalso havetoconsidersalary,floorspace,equipment,software,andmanyotherdetails.Asof thiswriting,thetypicalcostperman-monthontheEastCoastofNorthAmericaisabout $10,000.Thismeansthatifwesave20 users20minutesperday,afterayearwecansavethefollowing: •100man-months •$100,000 Ifweinvest$40,000tomakethesechanges,thereturnoninvestment is$60,000.Inthesecondyear,iftheimprovementsarestillsavingus minutesper8-hourday,thetotalreturnoninvestmentis$260,000.Allforaninitial $40,000investment. Therewillalwaysbeadifferencebetweenthesepredictionsandthe actualresults.However,eveniftherealnumbersarehalfofwhatwepredicted,westill comeoutaheadintheend.Thebottomlineisthatinvestingintheuserexperienceofour toolshasthepotentialtosaveustimeandmoney. PARALLELSBETWEENUSEREXPERIENCEANDGAMEDESIGN Somepeoplemaybesurprisedtolearnthattherearemanysimilaritiesbetweenthetechniquesusedtomakegamesandthoseusedinuser experiencedesign.Weareveryfortunatethatthisisthecase,becauseitcanmakethe adoptionofthesetechniquesforgamedevelopmenttools lessintimidatingcomparedtootherindustries,suchasbanking,sales, ormanufacturing. PersonasandCharacters InChapter4,youwilllearnaboutpersonas:profilesofpeoplethatrepresenttheaverage user.Insituationswheretherearealargenumberofusersforagiventool,thesecanbe veryusefulformakingdesigndecisionsandgivingeveryoneasharedvisionofwhowill usethetools. Thoughsomepeoplefindtheconceptofusingarchetypesofpeopleto helpusmakedesigndecisionsstrange,thinkaboutthis:wecreatecharactersinourgames andconsiderhowtheythinkandwhattheirgoalsarewhen WelcometoDesigningtheUserExperienceofGameDevelopmentTools◾11 writingtheirdialogue,creatingtheenvironmentstheylivein,andsoon. Thishasworkedwellforthecreationofourgames,sowhynotourtools? ScenarioStoryboardsandCinematicStoryboards Whencreatinggamedevelopmenttools,weoftenfixateonfeatureswithoutknowinghow andwhenthosefeatureswillbeused.Scenariostoryboards helptoremindusofthecontextinwhichatoolisused.Thiscanbeanextremely importantandpowerfulconceptinuserexperiencedesign.We willlearnmoreaboutthisinChapter4. Whileitmayseemoddtosomepeoplethatwewouldcreatesomething likethisforgamedevelopmenttools,keepinmindthatweusestoryboardsforcinematicsandcomplexgameplaymomentstoo.Weusethem toplanandestimaterisk,asopposedtogoingstraightintoimplementingeverythingatfull quality,whichcanbeexpensiveandrisky.Thereisnoreasonourtoolscannotbenefit Pre-VisualizationandGameplayVideos Pre-visualizations,whichwewilllearnmoreaboutinChapter6,comeinallshapesand sizeswithvariouslevelsofquality:sketches,paperprototypes,interactiveprototypes,and soon.Regardlessoftheform,thegoalisthesame:simulatetheuserexperiencesowecan getfeedbackfromtheuserearly,toensurewearegoingintherightdirection.Alltoo often,thefirsttimetheuserhasasenseofhowatoolworksiswhenitisalreadydone, andthatisoftenoneofthemainreasonswhyatoolcanhaveabaduserexperience. Bycomparison,gameplayvideoshaveasimilargoal:creatingavideothatsimulateswhat thegameplaylookslikeinanefforttogetfeedbackearly. Itmayevenbesemi-interactive:therecanbeseveralsmallvideosusedas “branch-points”toshowtheoutcomeofdifferentsituations.Aswithpre-visualization,the visualfidelityofthisvideocanvary,butthepurposeremainsthesame:findoutifweare goingintherightdirection.Ifwedothisforourgameplay,whywouldwenotapplythe sameconcepttoourtools? AnalyticsandMetrics Analyticsmaybemorefamiliartowebandmobileappdevelopers,but theycanbenefitgametoolsdevelopersaswell.Capturingstatistics—suchaswhoisusing certainfeatures,whentheyusethem,andhowoften—can 12◾DesigningtheUserExperienceofGameDevelopmentToolsbeanincredibly powerfultechniqueforimprovingtheuserexperienceofyourtool. AswewilldiscussinChapter4,analyticsareusefulwhenyouhave averylargenumberofusersandneedhelpdeterminingwheretostart. However,theresultsofanalyticsshouldnotbetheonlysourceofinformationusedto makedesigndecisions.Theyshouldbeusedasastarting pointbeforemeetingyourusersface-to-face.Nothinghelpsyoutounderstandhow peopleusethetoolslikewatchingthemwork. Whenagameisnotrunningatthedesiredframe-rate,gamedevelopers capturemetricsfortheprocessor,graphics,andmemoryandthenanalyzethemtoidentify whatneedstobeoptimized.Ifyouhavedonethisbefore,youmaybefamiliarwiththe toolsprovidedbyMicrosoftandSony,ortheprofilertoolsinUnity,justtonameafew.As withanalytics,metricscanbeastartingpointaswell.Ifaspecificeffectiscausingthe frame-ratetoslowdown,itdoesnotnecessarilymeanthatwecutitimmediately.We prioritizebasedonhowslowitis,takeacloserlookatwhy,andthenseehowitcanbe optimized. Ifthistechniqueisusefulforfiguringoutwhattooptimize,wecan certainlybenefitfromanalyticstohelpusimprovetheuserexperienceofourtools. HOWDOPEOPLEBENEFITFROMANIMPROVED Users If20userssave100man-months,thattheoreticallytranslatestoanextrafivemonthsper person.Thinkabouthowmuchmorepolishoneperson coulddoinfivemonths.Inaddition,savingtimecanhelpwithsomethingelsethatisall toocommoningamedevelopment:overtime.Itwouldbe greatifsavingtimeresultedinusersbeingabletoworkfivedaysaweekandgohome before6:00tohavetimetothemselves,ortoseetheirfamily,whilestillbeingableto deliveragamewithahighlevelofquality. Stakeholders Forthepeoplewhomandatethetools,improvingtheuserexperienceto savetimeandmoneyisabusinessdecision.Ifwecancreatecontentforourgamesmore efficiently,andrampupnewteammembersfaster,then wecanallocateresourcesmoreeffectivelytomakeabettergame. WelcometoDesigningtheUserExperienceofGameDevelopmentTools◾13 Inaddition,theprocesspresentedinthisbookcangiveeveryoneabettervisionofwhoisusingthetools,andwhatisgoingtobebuiltbeforewebuildit.This helpstoreducerisk,givingstakeholderstheabilitytomakebetterdecisions. Developers Fordevelopers,therearemultiplebenefits.Oneofthemostimportant benefitsisnotsomuchaboutimprovingtheuserexperience,butthetoolsdevelopment processitself.Inthisbook,wewilllearnaboutunderstandingwhattheusersneed, applyingguidelines,andgettingaclearerpictureofwhatthetoolwillbebeforewritinga singlelineofcode.Alloftheseconceptsandtechniqueshelptostreamlinethetools developmentprocess. Finally,toolsthatworkwellsurvivethetestoftime.Ifatoolisinefficientordifficultto learn,peoplewillwanttoreplaceitatthefirstopportunity.Agooduserexperiencewill helptoensurethatthetoolswehaveworkedsohardtocreateareusedtomakegreat gamesforyearstocome. FINDINGTHERIGHTBALANCE Aswediscussedintheintroduction,toolsaremandated,created,and usedbydifferentgroupsofpeoplewhoallhavevariousneeds.However, whathappenswhentheneedsofonegroupareprioritizedovertheneeds oftheothers? Iftheneedsofthedevelopersareprioritized,thetoolcouldlosefocusonachievingthe goalsofthebusiness(importanttothestakeholders)andcouldbedifficulttousefor creatinggamecontent(importanttotheusers). www.allitebooks.com respected(importanttothedevelopers)andresources couldbespentonfeaturesthatarenotimportanttocreatingthemain contentforthegame(importanttothestakeholders). Iftheneedsofthestakeholdersareprioritized,thetimetocreateasoftwarearchitecture thatiseasytomaintaincouldbelimited(important tothedevelopers)andthetoolcouldbeunstableandfrustratingtouse(importanttothe users). Foratooltobetrulysuccessful,theneedsofdevelopers,stakeholders,andusersmustallbeequallybalanced(seetheextremerightside ofFigure1.8).OneofthebestwaystodothisisbyapplyingtheUserCenteredDesignprocess,whichiscoveredinthenextchapter. 14◾DesigningtheUserExperienceofGameDevelopmentToolsFIGURE1.8Finding therightbalancebetweentheneedsoftheusers,stakeholders,anddevelopers. WRAPPINGUP Inthischapter,wereviewedafewcommondefinitionsof“userexperience,”andwelearnedthevalueofimprovingtheuserexperience.We alsolearnedabouttheparallelsbetweenuserexperiencedesignandgamedevelopment, andwediscussedhowdifferentgroupsofpeoplecanbenefitfromimprovingtheuser experience,aswellaswhathappenswhenthe needsofoneofthosegroupsisprioritizedoveranother. Inthenextchapter,wewilllearnabouttheUser-CenteredDesignprocess,whichisattheheartofimprovingtheuserexperienceofgamedevelopmenttools. Chapter2 TheUser-Centered DesignProcess WHATWILLWELEARNINTHISCHAPTER? •WhatistheUser-CenteredDesignprocess? •HowcanUser-CenteredDesignhelpustoachieveabetteruserexperiencefaster? •Howcanpre-visualizationbeusedtoimprovetheuserexperience? •HowcanweintegratetheUser-CenteredDesignprocessinto Agile(Scrum)? •HowdowedealwithalackoftimetoimplementtheUser-Centered WHATISTHEUSER-CENTEREDDESIGNPROCESS? TheUser-CenteredDesignprocessisoneofthemostwidelyused approachestouserexperiencedesign.Ithasbeenappliedinavarietyofdifferent industriesformanyyears.Themajorityofthisbookisfocusedonguidingyouthrough eachstepintheprocessand,alongtheway,presentingconceptsandtechniquesthatcan beusedtoimprovetheuserexperienceofgamedevelopmenttools. ThemostimportantconcepttounderstandabouttheUser-Centered Designprocessisthatitisnotamagicsolution.Thereisno“secretsauce” thatwillprovideimmediateresults,anditisnota“shinycoatofpaint” 15 16◾DesigningtheUserExperienceofGameDevelopmentToolsFIGURE2.1Iterative improvementstotheiPodClassicscroll-wheelacrossseveralgenerations. thatcanbeappliedattheendofdevelopment.Itisaniterativeprocess. Comparingthefirstfewgenerationsofthescroll-wheelontheAppleiPod(seeFigure 2.1)remindsusthatevenverypopularproductstaketimeandsometimesseveraliterations togetitright…andeventhen,theycan alwaysbeimproved. ByapplyingtheUser-CenteredDesignprocess,weacceptthatwemay notgetitrightthefirsttime.However,witheachquickiteration,wewillanalyzethetool tofindproblems,makeimprovementstothedesign,and evaluateitwiththeuserstoconfirmthatwearegoingintherightdirection. THEPHASESOFTHEUSER-CENTEREDDESIGNPROCESS “Itisashiftinattitudefromdesigningforuserstooneofdesigningwithusers.” ELIZABETHSANDERS(EMPHASISADDED) User-CenteredDesignisaniterativeprocessthatrevolvesaroundthe users.Therefore,itshouldcomeasnosurprisethattheusersareatthecenterofthe process(seeFigure2.2).Everythingthatwedoisdoneoutofconsiderationfortheusers. FIGURE2.2EachphaseoftheUser-CenteredDesignprocessrevolvesaroundtheusers. TheUser-CenteredDesignProcess◾17 Therearemanydifferentversionsofthisprocessusedinuserexperiencedesign,suchastheISO9241-210ISOstandardforhuman–computer interaction.*Wewilluseasimpleandstraightforwardprocessforthepurposesofthis book,madeupofthefollowingphases:Analysis,Design, Analysis Thisphase,whichiscoveredinChapter4,isallaboutexamininghow peopleusethetools.Wewilllearntheimportanceofwatchinguserswork,asopposedto relyingonlyonfocusgroups,surveys,orsimplyaskingtheuserstotellushowtheythink thattheywork.Wewillalsolearnhowthebrainprocessesactionsandmentalloads, whichwillhelpusfindwaystomakethetoolsbetterfortheusers. Throughavarietyoftechniques,wewilllearnhowtoobserveand interpretthewayinwhichpeopleusethetools.Wearenotlookingfor solutionsatthistime;weareonlyfocusingonidentifyingproblems(seeFigure2.3). Design Thereisanoldsayinginthefieldofuserexperience:“Designwithoutconstraintsisjust art.”OneofthemostimportantoutputsoftheAnalysisphaseistoprovideuswiththose constraints,sothatwecanusethemtochoosewhattoimproveduringtheDesignphase. Inthisphase,beginninginChapter5,wewilllearnanumberofconceptsandtechniques thatwe canusetoimprovethedesign(seeFigure2.4). FIGURE2.3TheAnalysisphaseoftheUser-CenteredDesignprocess. *FormoreontheISO9241-210standard,visitthewebsitehttp://www.iso.org/iso/ catalogue_detail. htm?csnumber=52075. 18◾DesigningtheUserExperienceofGameDevelopmentToolsFIGURE2.4The DesignphaseoftheUser-CenteredDesignprocess. Evaluation Finally,wecanmoveontotheEvaluationphase,whichiscoveredin Chapter6.Here,wewilllearnwhataheuristicevaluationis.Wewillalsolearnhowto buildatestplan,whichwillallowustodetermineifthe changestothedesignareimprovingtheuserexperience.Wewillalso determinewhenitisappropriatetogostraighttocodeortouseprevisualizationtechniquessuchassketchingandprototypes(seeFigure2.5). BacktoAnalysis Finally,westartoveragainattheAnalysisphase.Remember,thegoal isquickandconstantiteration.Wecan—andmostlikelywill—move backandfortharoundtheloop.Itisquitecommontomovebetweenthe AnalysisandDesignphasesafewtimesbeforegoingontotheEvaluationphase.Thereis nowrongwaysolongasweareconstantlyiteratingand FIGURE2.5TheEvaluationphaseoftheUser-CenteredDesignprocess. TheUser-CenteredDesignProcess◾19 FIGURE2.6ReturningbacktotheAnalysisphase. THEPOWEROFPRE-VISUALIZATION OneofthemostpowerfulaspectsoftheUser-CenteredDesignprocessisprevisualization,whichallowsustolearnmoreabouttheuserexperiencebeforewewriteany code.Thishelpstoensurethatthetimespentdevelopingthetoolsisasefficientas possible. Thedecisiontoinvestinthesepre-visualizationtechniquesdepends onavarietyoffactors:howcomplexthechangeis,theprogramming resourcesthatareavailableatthetime,andsoon.WewilldiscussthisinChapter6. Jeff’sBlockofWood Inthemid-1990s,electronicpocketorganizersweregaininginpopularity. Thesedeviceswereportablecomputersdesignedtoreplaceyouraddress book,calendar,andnotepad.Theproblemwasthatmostoftheirfeatureswerebadly implemented,andsomeweretoobigtodeservetheterm“pocket.” JeffHawkinswasoneofthefoundingmembersofPalm,andhedecided tochangethat.Heandhisteamstartedworkingonapocket-sizedpersonalorganizerthathadalimitedfeatureset.Throughobservationand analysis,Hawkinsidentifiedasmallsetoffeaturesthathefeltmostpeoplewanteda pocketorganizertodoreallywell. Gettingtherightsizeandformfactorforadevicethatfitsinyourpocketisnoteasy. Whenitcomestohardware,youcannotmakeachangeafter adevicecomesofftheassemblyline.Gettingitwrongcanbedisastrous. Palmdidnothaveunlimitedresourcestofabricateprototypes. OnedayJeffcameintoworkwithawoodblocksmallenoughtobeheld inonehand.Inameeting,hetookoutthewoodblockoutandstartedtappingonit.The nextday,hecameinwithanotherwoodblockthatwasa 20◾DesigningtheUserExperienceofGameDevelopmentToolsFIGURE2.7A prototypeofthefirstPalmPilot,createdbyJeffHawkins.©MarkRichards.Courtesyof theComputerHistoryMuseum. slightlydifferentsize.Approachingagroupofpeoplehavingadiscussion,hetookoutthe woodblockandpretendedtoentersomeone’sinformation intoanaddressbook.Thedayafterthat,hecameinwithaslightlysmaller,butthicker woodblock.Aftermakingplanstomeetsomeone,hetookout thewoodblockandpretendedtoenteranewmeetinginhiscalendar(seeFigure2.7). Hadhelosthismind?No,quitetheopposite.*Jeffwasworkingonfindingtherightsizeandformfactorearlyonintheprocess,inaninexpensiveandfastway. Insteadofgoingstraighttomanufacturingwithadesignthatwasuntested,hefoundaway totryoutdifferentoptionsinsituationssimilartothosewheretherealdevicewouldbe used.Overtime,heiteratedonthewoodblockstocreateprototypesthatwereincreasingly sophisticated,completewithaninterfaceprintedonpaperandastylusmadefroma chopstick.Whenhehadarrivedataformfactorthatfeltright,hewasabletousethe prototypestohelppeopleunderstandhisvision.Allofthisworkcontributedtotherelease ofthefirstPalmPilot,adevicethatwould *Infact,JeffHawkinsknowsathingortwoaboutthemind.Inadditiontobeinga brilliantinnova-tor,Jeffalsohasadeepunderstandingofthebrain.In2004,hewrotea bookabouthowwethink,titledOnInteligence.Knowinghowthebrainworksisuseful informationwhenyouaredesigningforpeople. TheUser-CenteredDesignProcess◾21 outsellthecompetition,spawnalonglistofimitators,andultimatelyhaveahugeimpact ontheworldofportableelectronics. Theimportantlessonthatwecanlearnfromthisisthatwhenresources everyonetohaveasharedvisionofwhatthetoolwillbe, andunderstandhowitwillbeusedincontext,beforeyoustartinvestingresourcesin development. GettingtheDesignRightandtheRightDesign Whencreatingafeatureforatool,itisoftenconsideredprohibitivetobuildafew alternativesinanefforttopickthebestoption.However,thelong-termcostofgettingthe featurewrongcanbemuchhigherthantakingthetimetocreateafewalternatives!Bill BuxtonsummarizesthisperfectlyinthesubtitleofhisbookSketchingUserExperiences: “GettingtheDesignRightandtheRightDesign.”Itisonethingtogetthedesignright, butmakesureyouaredoingtherightdesigninthefirstplace. WhileitistruethatJeff’swoodblocksdidnothavethefunctionality ofarealPalmPilot,itwasenoughtohelphimfailearlyandofteninaquickand inexpensiveway.Oncehehadlearnedallthathecouldfrom thatprototype,hewasabletoshareitwithotherpeopleandmoveontomore sophisticatedprototypes.Pre-visualizationcanhelpusdothesameforourgame developmenttools. HavingtheSameVision Ifyouhaveworkedingamedevelopmentlongenough,youmaybefamiliarwiththissituation:developersandusersaregatheredinameeting room,discussinghowatoolwillwork.Userstalkaboutwhattheyneed, anddevelopersaskquestions.Wheneveryoneagreesonwhattodo,an e-mailissentoutwithbullet-pointsthatsummarizethedecisions.Thedevelopersmake changestothetool,andafewdayslater,theusersgettheirhandsonit.Thefirstreaction fromtheusersis,“Thisisn’twhatweaskedfor!”Frustrated,thedevelopersreply,“Itis! It’swrittenrighthereinthee-mail!”Whenthestakeholdersfindoutaboutthesituation, theysay, “Whyaretheusersunabletoproducethecontentweneedforthegame? Whyarethedeveloperssayingtheyneedmoretimetomakechangesto thetool?”Ifwedonotvisualizewhatweintendtobuild,therewillalwaysberoomfor interpretationandmisunderstanding. Forexample,considerthewordLetters(leftsideofFigure2.8).Ifyouweretocloseyour eyesandvisualizewhatthatwordmeanstoyou, 22◾DesigningtheUserExperienceofGameDevelopmentToolsLetters FIGURE2.8Withoutvisualization,awordcanbeinterpretedindifferentways. whatwouldyousee?Astackofpaperlettersinenvelopesorlettersof thealphabet? developmenttool,weneedtovisualizethemeaningofourwords.Ifwedonot,thereisa goodchancethatwearenottalkingaboutthesamething. GETTINGTOABETTERUSEREXPERIENCEFASTER StartingCloser Ifwecouldtrackthedevelopmentofatoolonalineartimegraph,itmightlook somethingliketheleftsideofFigure2.9.Thebottomrepresentstime,andtheleftside representsthetargetzoneforauserexperiencethatisoptimallyusable,useful,and desirable.Ourgoalistohitthatzoneascloselyaspossible.* Whenwedonotdesignfortherightusersorfullyunderstandtheir goals,westartfarawayfromthetargetzone(representedbythetriangleontherightside ofFigure2.9). 012345678 012345678 FIGURE2.9Startingfarfromthetargetzoneincreasesthetimeittakestoachievean improveduserexperience. *ThebookEffectiveUIbyAnderson,McRee,Wilson,etal.usesaverysimilargraphto comparetheslowiterationofthewaterfallprocessversusthefastiterationofAgile. TheUser-CenteredDesignProcess◾23 012345678 012345678 FIGURE2.10Startingclosertothetargetzonemeansthatittakeslesstimetoachievean improveduserexperience,evenifyoutakeintoaccountthetimespentintheUserCenteredDesignprocess. However,ifweinvestintheAnalysisphaseoftheUser-CenteredDesignprocess,we startcloser.Thismeansthathittingthetargetzonetakeslesstime(representedbythe circleontheleftsideofFigure2.10).Evenifwestartalittlebitlaterbecausewehave chosentoinvesttimeintheAnalysisphase,wewillstillhaveabetterchanceofhitting ourtargetzonefaster(seetherightsideofFigure2.10)becauseweknowwhatweare buildingandwhowearebuildingitfor. Small,FrequentIterations Whenwedonotgetfeedbackfromtheusersonaregularbasis,everyiterationcanresult inbig,time-consumingchanges.Eachversionattemptstorealignthetooltoaddresswhat theusersneed,andthedegreeofsuccesscanvarywildly(seetheleftsideofFigure2.11). Bycomparison,theUser-CenteredDesignprocessemphasizesshort, frequentrepetitionsoftheiterationloop:analyzethesituation,designone012345678 012345678 faster,andwithmoreconfidence. 24◾DesigningtheUserExperienceofGameDevelopmentToolsormorefocused improvements,andthenevaluatetheimpactontheuser experience.Validatingthetoolwiththeusersonaregularbasismakesforsmaller,more concentratedadjustments(seetherightsideofFigure2.11). Thishelpstoachievethegoalofanidealuserexperiencemorequickly andefficiently. INTEGRATINGTHEUSER-CENTERED DESIGNPROCESSINTOAGILE Emphasizingshort,rapiditerationswillfeelfamiliartothosewhoworkwiththeScrum frameworkoftheAgilesoftwaredevelopmentprocess. However,despitethesimilaritiesbetweenAgileandtheUser-Centered Designprocess,itmaynotbeimmediatelyapparenthowtointegrate thetwo. BeforeJoiningtheSprint Atthebeginningoftheproject,itisnormaltospendabitoftimegatheringinformation aboutwhothestakeholdersandusersarebeforegoing throughthephasesofAnalysis,Design,andEvaluation.*Afrequentreactiontothisis, “Whatdothedevelopersdowhilethatishappening?”Thefactisthattherewillalwaysbe programmingtasksthatcanbedoneduringthistime,suchasworkontheback-end, technicalinvestigations,orotherthingsthatwillnotaffecttheuserinterface. LinkingtotheSprint OneoftheadvantagesofgoingthrougheachphaseoftheUser-Centered Designprocesswithinasinglesprintisthatitforcessmallchangeandrapiditeration. Hereishoweachofthephasescanbeintegrated. IterationLoop Onceyouhaveaplan,youcansetdeadlinesfortheAnalysis,Design,andEvaluation phaseswithinthesprint.Forexample,ifthesprintlaststwoorthreeweeks—acommon lengthformanyteams—youcansetadeadline tocompletetheAnalysisphasebeforethefirstthird,theDesignphase beforethesecondthird,andfinally,theEvaluationphasebeforetheendofthesprint(see Figure2.12). *Intheirarticle“AdaptingUsabilityInvestigationsforAgileUser-CenteredDesign”for theJournalofUsabilityStudies,authorsDesireeSyandLynnMillercallthis“Cycle0.” Youcanreadithere:http://www.upassoc.org/upa_publications/jus/2007may/agileucd.pdf. A B FIGURE2.12IntegratingtheUser-CenteredDesignprocesswithinasinglesprint. A B C FIGURE2.13IntegratingtheUser-CenteredDesignprocessacrossseveralsprints. MoreComplexDesigns Inthecaseofbigger,morecomplexfeaturesthattakemorethanaweek todesign,thereareotherapproachestointegratingtheiterationloopintothesprint. Oneapproachistopreparedesignsonesprintinadvance,anddedicate anentiresprinttoimplementation.Forexample,considerFigure2.13, whichshowsthreeconsecutivesprints.DuringsprintB,developersare implementingthechangesfromthepreviousDesignphase.Meanwhile, thepeopleinchargeoftheUser-CenteredDesignprocessdotheEvaluationphaseonthe latestbuildofthetoolfromsprintA.Then,theylookattheresultsintheAnalysisphase. Finally,changesareproposedintheDesignphaseanddeliveredrightbeforethestartof sprintC,andthenthecycleshiftsaheadbyonesprint. WHOHASTHETIMETODOALLOFTHIS? Thisprocessmightseemlikealotofwork.Formany,thisisabigshiftawayfromhow toolsdevelopmentistraditionallydone.However,ifwe agreethatthewaywehavebeenworkinginthepasthasresultedintoolswithabaduser experience,perhapsitistimetotrysomethingdifferent. Workingdifferentlywillrequireacultureshift,whichwewilldiscussinthefinalchapter. Inaperfectworld,therewouldbeonepersonineachtoolsteamdrivingtheUser-CenteredDesignprocess.However,whenthatisnotpossible,theteammustworktogetherandtakeituponthemselvestoapply 26◾DesigningtheUserExperienceofGameDevelopmentToolstheseconceptsinan efforttoshowthatimprovingtheuserexperienceisaworthyinvestment. Ifyoustudiedobject-orientedprogramminginschool,youprobably startedbycreatingclassdiagrams.Ifyoustudied3Dmodeling,youprobablystartedby usingafrontandsidereferencedrawing.Afterafewyearsofprogramming,younolonger neededtocreateaclassdiagramforeverysingleclass,andyounolongerneededfrontand sidereferencestocreateeverysinglemodel.Theywereusefultoolsintheearlydays,but applyingtheconceptsandtechniqueswithoutneedingaguide. ThatishowyoucanapplytheUser-CenteredDesignprocesspresented inthisbook.Startbyusingitasaguide.Onceyouhaveappliedtheprincipleslong enough,itwillnaturallybecomepartofyourdevelopment process.Thatiswhenyouwillbegintoseebigimprovementstotheuserexperienceof yourtools. WRAPPINGUP Inthischapter,welearnedabouttheUser-CenteredDesignprocessand howitcanhelpusachieveabetteruserexperience.Wealsolearnedhowpre-visualization canbeusedincertainsituationstohelpusimproveourdesignandalloweveryone involvedtohavethesamevisionofwhatwearegoingtobuild.Finally,wediscussedhow theUser-CenteredDesignprocesscanbeintegratedintoAgileandhowtojustifythetime andresources. Inthenextchapter,wewilllearnwhatitmeanstobe“User-Centered,” whichisoneofthemostimportantaspectsofimprovingtheuserexperienceofgamedevelopmenttools. Chapter3 WhatDoesItMeantoBe “User-Centered”? WHATWILLWELEARNINTHISCHAPTER? •Theimportanceofstartingwiththeusers •Howtofocusontherightusers •Understandingthedifferencebetweenfeaturesandgoals •Doingonethingreallywell •Whyitisimportanttochoosetherightfeatures STARTWITHTHEUSERS “You’vegottostartwiththecustomerexperienceandworkback towardthetechnology—nottheotherwayaround.” —STEVEJOBS Thatstatement,madein1996bythelateCEOofApplewhilehe washostinganopenquestion-and-answersession,*woulddefinea newdirectionforthecompany.Itwouldalsotaketheirsharesfromthe rockbottompriceoffourdolarstoover600dolarsinalittleoveradecade. www.allitebooks.com Innovation,” https://www.youtube.com/watch?v=1SIeTmORl0E. 27 28◾DesigningtheUserExperienceofGameDevelopmentToolsGoogleclearlyseems tosharethismindset.Onthecorporatesectionof theirwebpagethatliststheirphilosophies,onereads“Focusontheuserandallelsewill follow.”*Thatmentalityhasalsohelpedtakethemfromasmallstart-uptotheworld leaderinsearch. WeAreNottheUsers Ifyouareinvolvedinthecreationofgamedevelopmenttools,takeaminutetoask yourselfthesequestions: •Whoarethepeopleusingthetoolstoproducefinalcontentfor thegame? •Whousesthetoolsallday(andevenlateintothenight)? •Whosejobdependsonhowwelltheycanusethetools? Ifyouarereferringtosoftwareusedtoprogramgamedevelopmenttools (suchasMicrosoftVisualStudio,Eclipse,andAppleXcode)ordesign theinterfacesforgamedevelopmenttools(suchasAdobePhotoshop, MicrosoftExpressionBlend,andQtDesigner),thentheanswerisyou. However,ifyouaretalkingaboutanythingelse,thenthereisonlyone answer:theusers! Oneofthebiggestmistakesthatwemakeasgametoolsdevelopersis creatingtoolswithoutfirstunderstandingthepeoplewhousethem.We canassumethatweknowthegoalsoftheusersandthecontextinwhich theyusethetools.Someofusmaynotseethisasaproblembecausewe haveworkedthiswayforyears.†Changingthisviewisoneofthefirst stepsontheroadtoimprovingtheuserexperienceofourgamedevelopmenttools. Weneedtoacceptthatwedonotalwaysknowtheanswerstothese questions.Furthermore,weneedtomakeitpartofourjobtofindout— evenifwehavemanyyearsofexperienceintheindustry,evenifwehavepreviously workedinthesameposition,orevenifwehaveagoodrelationshipwithsomeonewho doesnow.Ouropinion,orthatofoneortwo majorityofthegame’scontent. *ThiscomesfromtheGooglecompanyphilosophypage,“TenThingsWeKnowtoBe True,”http:// www.google.ca/about/company/philosophy/. †Includingmyself! WhatDoesItMeantoBe“User-Centered”?◾29 Whenwelearnabouttheusers,wemustalsosharewhatwehave learnedwitheveryoneinvolvedinthedevelopmentofthetool.Ifeveryonesharesthe samevisionofwhomatoolisbeingdevelopedfor,theyarebetterpreparedtoworkasa teamtobuildagreatuserexperience. WhatHappensWhenWeDoNotKnow WhomWeAreDesigningFor? Whenwedonotknowwhomatoolisfor,weendupcreatingatoolfor everyone.Thereisanoldsayingaboutthat:“Whenyoutrytopleaseeveryone,youplease noone.” Whatdoesthatmeaninthecontextofgamedevelopmenttools? Considerthefollowingscenario:Threepeopleareworkingtogetherto createagamedevelopmenttool.Basedontheirownexperiences,eachonehasadifferent viewofwhousesthetool,whattheyneed,andhowtheyuseit.Theydonothaveashared visionofwhomtheyarebuildingfor.Theycombinetheirideastogetherintoonebiglist offeatures. Thefirstpersonaddsafewinitialfeatures(leftsideofFigure3.1).Then,thesecond personaddsafewmorefeatures,becausetheyhaveadifferentviewofwhattheusers need(middleofFigure3.1).Finally,thethirdpersonaddsmorefeaturesaswell,basedon theirviewofwhattheusersneed(rightsideofFigure3.1). Onceyouseethis,youbegintounderstandwhysomeuserssaythat theirgamedevelopmenttoolsareoverlycomplicatedanddifficulttolearn! DocumentationIsNottheMagicSolution Itmightseemlogicaltoexpectuserstoreadthedocumentationbefore sayingthattoolishardtounderstand.Thatwouldbetrue,ifthedocumentationisupto date,orifitevenexists.Whenitdoesexist,howmanypeopleactuallyreaditendtoend? Oftenitisthetechnicaldirectors,technicalartists,andtoolsdeveloperswhoactasthe documentation.TheyarealsoaFIGURE3.1Tryingtocreateaninterfaceto“please everyone”usuallyresultsinaninterfacethatwill“pleasenoone.” 30◾DesigningtheUserExperienceofGameDevelopmentToolssinglepointoffailure (WhatiftheyarerunoverbyaWarthogtomorrow?). howtousethetools,theyhavelesstimetosolveotherbigproblems. Ausermanualisimportantandshouldbecreatedandmaintainedif theresourcesareavailable,butwealsoneedtodoourbesttocreatetoolswherethebasic functionalityiseasytolearnwithoutrequiringtheusertoreadamanual. StoptheCultureof“RTFM” Onthetopicofmanuals,oneofthebiggestchallengestoimprovingthe userexperienceofgamedevelopmenttoolsisthecultureof“RTFM”: blamingtheuserwhentheydosomethingwrong.Contentcreatorsare goodatcreatingcontent.Thatisalreadyaverybigresponsibilityandcantakeyearsof hardwork!Notonlyisitunrealisticforustoexpecttheuserstounderstandeverything technicalrelatedtogamedevelopment,itcan alsobeseenashostile.Thishurtscommunicationandteamwork.Instead ofblamingtheusersorexpectingthemtobecomesomethingthattheyarenot,weneedto startunderstandingthem. FOCUSONTHERIGHTUSERS Aswelearnedearlier,whenwetrytopleaseeveryone,wepleasenoone. However,theoppositecanalsobetrue:itcanbeproblematictodesignforonlyoneortwo people.* Inthecaseofatoolthatismadetobeusedbyalotofuserswithminimaltechnical knowledge,designingforoneortwopeoplewhoarehighly technicalanddonotusethetoolsveryoftencanmakethissituationworse. Forexample,considerthatalloftheusersofatoolarespreadamongthefollowingtwo axes:technicalknowledgeandfrequencyofuse(seetheleftsideofFigure3.2).Ifweonly talktotheusersintheupperleftwhoaremoretechnicalanddonotusethetoolveryoften (forexample,tosetupapipelineortrainanewuser),wearemissingtheopinionsofa largepercentageoftheuserbase. Thekeyistoworkwithenoughuserssoweknowthemajorityofthe users’needs(highlightedareaontherightofFigure3.2)andtoworkwithuserswho representthemixofpeopleusingthetool(highlightedareaontheleftofFigure3.2),so wearenottryingtopleaseeveryoneatonce. *MalcolmGladwelldiscussesthiseffect,knownastheinvertedU-curve,inhisbook David&Goliath:Underdogs,Misfits,andtheArtofBattlingGiants. WhatDoesItMeantoBe“User-Centered”?◾31 Moretechnical More Less More ec frequent frequent EffsLes Varietyofusers Lesstechnical FIGURE3.2Focusingontherightusers:findingtherightbalance. MinimalInvestmentforMaximumResults Earlier,wespokeaboutthebenefitsofsaving20minutesper8-hourdayfor20users.Let usimaginethatinsteadwefoundawaytosave30minutesaday.Thissoundslikeagreat improvement.However,theimpactchangesifthatsavingsisonlyforfiveusers,instead of20.Alternatively,imagineifthoseusersactuallyusethetoolonlytwohoursperday, insteadofalleighthoursperday.Tomakemattersworse,ifoursavingsof30minutes comesfromtheimplementationofacomplexnewfeaturethatonlyfivepeople use,wehavealsospentalotoftimeandmoneyondevelopment.Thisisalose/lose scenario(seetheleftsideofFigure3.3). Wecanalsoimagineanotherscenariowherewesavetimefor50users. Thissoundslikewearehelpingalargenumberofpeople!However,becausewetriedto pleaseeveryone,wespentalotoftimeimplementingtoomanyfeaturesanddidnothave thetimetooptimizethem.Asaresult,weonlysaveeachuseroneminuteperday.Even thoughitseemsthatwearemakingthingsbetter,wearesavinglessoverall(seethe middleofFigure3.3). Spent Saved FIGURE3.3Howfocusingontherightuserscanmaximizetheimprovementtotheuser experience,foraminimalinvestment. 32◾DesigningtheUserExperienceofGameDevelopmentToolsInstead,weneedtofind thepeoplewhoareusingthetoolsforthemostnumberofhoursinthedayandfocuson deliveringafocusedfeaturesetthatsatisfiestheirneeds(seetherightsideofFigure3.3). Thiswillgiveusthemaximumresultsfortheminimuminvestment. We’reNotGoingtoMakeEveryoneHappy Itisimportanttokeepinmindthatwearenotgoingtomakeeveryone happy.Wehavetolookatthebigpicture.Wearegoingtomakethemostfrequentusers moreproductive.Thatwillresultinthebiggestimpactontheuserexperienceoverall. FEATURESVERSUSGOALS Ifyouhaveworkedinagametoolsdevelopmentteam,atsomepointyou haveheardsomeonesay,“Whydon’ttheusersknowwhattheywant?Why can’ttheyjusttellus?”Inaddition,youmaybefamiliarwiththeperceptionthatwhena userisaskediftheywantafeature,ninetimesoutoftentheywillsayyes,regardlessof thepriorityorusefulness. Bothofthesesituationshighlighttheproblemsthatoccurwhenwe focusonfeaturesinsteadofusergoals.Oneimportantpointthatweneedtounderstandis this:itisnottheuser’sjobtodesigntheuserinterface. However,itistheirjobtobeabletotelluswhattheirgoalsare! SwissArmyKnifeComparedtoScissors Tounderstandthisbetter,letusconsidertwocommontools:aSwissarmyknifeandpair ofscissors(seeFigure3.4). TheSwissarmyknifeisagreatinvention.Hiddeninsidetheaverage Swissarmyknifeisamultitudeoftools,fromsimplecuttingbladesto FIGURE3.4Featuresversusgoals:comparingaSwissarmyknifetoscissors. WhatDoesItMeantoBe“User-Centered”?◾33 corkscrews,mini-scissors,toothpicks,bottleopeners,andmore.Swiss armyknivesdoalotofgreatstuff.Therearetwotrade-offs,though:First,becausethey dosuchagreatvarietyofthings,theyarenotnecessarilyverygoodatanyonethingin clearhowitworksatfirstglance,orthevarietyoftoolscontainedwithin. Now,letuscomparethattoapairofscissors.Scissorsdoonethingreallywell:theycut paper!However,theyarenotgoodatmuchelse.Ifweneededtoopenabottle,andallwe hadwasapairofscissors,wewouldbeoutofluck.However,forcuttingpaper,scissors arehardtobeat.UnliketheSwissarmyknife,however,theyaremuchmoreintuitive:The twoholessuggestwhereweshouldplaceourfingers.Theycanonlymoveinoneaxis. Theydonothidetheirfunctionality.Theyareneverinaspecific“mode.” UnderstandWhattheUserIsTryingtoAccomplish Howdoesthisrelatetofeaturesversusgoals?Thetruthisthatmanyofourtoolsresemble theSwissarmyknife:theydomanythings,buttheytend todothosethingsmoderatelywellfromtheuser’sperspective.Itisalsonotclearwhat theydojustbylookingatthem.Thisisbecausewepack themwithfeatureswithoutalwaysunderstandingwhatthemajorityof theusers’goalsare. Iftheuser’sgoalistocutapieceofpaperinhalf,andwegivethemtheoptionofeithera Swissarmyknifeorapairofscissors,thescissorswouldbetheclearchoice.This illustratestheimportanceofunderstandingtheuser’sgoals.Beforewestartadding features,weneedtounderstandwhattheuseristryingtoaccomplish.Byknowingthis, wecandesigntherighttoolforthetask. AFasterHorse Whenaskedabouttheinventionoftheautomobile,itiswidelybelieved thatHenryFordsaid,“IfIhadaskedpeoplewhattheywanted,theywouldhavesaidfaster horses!”Thisquoteisoftenusedtosuggestthatyoucannotcreateinnovativeproductsif youasktheusersorstakeholderswhattheywant. Asitturnsout,HenryFordneveractuallysaidthat.*However,hedid saythis:“Ifthereisanyonesecretofsuccess,itliesintheabilitytogetthe *Noreferencestothisquotecanbefoundinbooks,inwebsearches,andevenfromthe historiansattheFordMuseum:http://blogs.hbr.org/2011/08/henry-ford-never-said-thefast/. 34◾DesigningtheUserExperienceofGameDevelopmentToolsotherperson’spointof viewandseethingsfromthatperson’sangleaswellasfromyourown.” Learningaboutpeopleandtheirgoalsisnotthesamethingasletting themdesignthefeatures.Ifyouunderstandwhatpeopleneed,youareinamuchbetter positiontoproposefeaturesthataddressthosegoals. Inotherwords,theuseristhebestpersontotellyouthattheywanttogofrompointAto pointB.Onceyouunderstandthat,youcansuggesta fasterhorseoranautomobile. “Gooddesignisaslittledesignaspossible.” —DIETERRAMS AnotherphilosophylistedontheGooglecompanywebpageisthis:“It’s besttodoonethingreally,reallywell.”Googledecidedearlyonthattheirfocuswouldbe search.Althoughtheywentontocreateavarietyofdifferentservices,searchhasalways beenattheircore.Theyhavechosennottodosomeotherthingssothattheycanallocate thenecessaryresources tocontinueprovidingthebestsearchexperience. BeingProudoftheThingsWeHaven’tDone AnotheroneofthephilosophiesthattransformedAppleintoahugesuccessaftertheturnofthemillenniumwasfocusingonafewkeyproductsandfeatures.ThatattitudeisperfectlyrepresentedinthisquotefromSteveJobs:“I’m asproudofthethingswehaven’tdoneasthethingswehavedone.” Itisimportanttonotethatsaying“no”doesnotmean,“We’llneverdo this.”Itmeans“notyet.”Knowingwhatnottodohelpsyouprioritize.Oneofthebest waystoknowwhatnottodoistoknowwhoyourusersareandwhattheyneed. Weareoftenoverwhelmedbythenumberoffeaturesthatwefeelmust beaddedtoatool.Thereisneverenoughtimetoaddeverything,andtheprioritiesare alwayschanging.However,ifweareaskingourselves,“Howarewegoingtocreateallof thesefeaturesbeforethedeadline?”perhapswearenotaskingtherightquestion.Instead, perhapsweshouldstartbyaskingourselves,“Arethesetherightfeatures?” ThismentalityisalsoreflectedinanotherquotefromMr.Jobs,this timewhilespeakingatWWDC1997:“Thelineofcodethatisthefastest WhatDoesItMeantoBe“User-Centered”?◾35 towrite,thatneverbreaks,thatneverneedsmaintenance,isthelinethatyouneverhaveto write.” TheMonkeysandtheBanana Wehaveatendencytosupportfeaturessimplybecausewehavealways doneso.Ifwehavebuiltorusedatoolinthepastwithacertainlistoffeatures,andit workedfortheusersatthetime,weassumethatweneedthosefeatures. Thisbehaviorissimilartothestoryofthemonkeysandthebanana (seeFigure3.5).Imaginethattherearethreemonkeysinaroom.Atonepoint,abananais placedintheroom.Oneofthemonkeyswalksoverto thebananaandpicksitup.Atthatmoment,adoorontheceilingopens andabucketofwaterisdumpedontheothertwomonkeysintheroom. ishappilymunchingaway.Naturally,theothermonkeys—now,soaking wet—arenotthrilled. Later,anotherbananaisplacedintheroom.Thesamethinghappens: oneofthemonkeystakesthebanana,andtheothermonkeysgetsoakingwet.Themonkeysstarttounderstandthatwhenonemonkeygetsthe banana,theothermonkeysareinforabadtime. Thenexttimeabananaisplacedintheroomandoneofthemonkeys reachesforit,theothermonkeysbeathimupbeforehecangettoit.Soonenough,allof themonkeysareafraidofgoingnearthebananas. Now,imaginethatwetakeoneofthemonkeysoutoftheroomand replaceitwithanotheronewhohasneverbeenintheroombefore.When abananaisplacedintheroom,thenewmonkeywillnaturallyattempttogetit.Thisis whentheothermonkeys,knowingwhatwillhappentothem,pileonthenewmonkeyand beathimup.Thenewmonkeyisterrifiedand doesnotunderstandwhytheothersaresoangry! Overtime,imaginethatwereplaceallofthemonkeysintheroomso thatalloftheoriginalmonkeysaregone.Themonkeysintheroomknow FIGURE3.5Theanalogyofthemonkeysandthebanana. 36◾DesigningtheUserExperienceofGameDevelopmentToolsthattheruleis“Noone goesnearthebananas,”buttheydonotknow why.Thatisjustthewayitis. Thisiswhywesometimesaddfeaturesordesigntoolsinacertainway withoutquestioningit:“We’vejustalwaysdoneitthisway.”However,wehavetoask ourselves,areallofthosefeaturesnecessary? CHOOSETHERIGHTFEATURES Tounderstandwhatisnecessary,weneedtounderstandtheneedsofthe peopleusingthetools.Ifwedonotdothis,wemayenduptryingtodelivertoomuchat onceorworkonthingsthattheusersdonotneedrightaway. Allofthisleavesuswithlesstimetocreateagreatuserexperienceforthethingsthatthe usersreallydoneed. LessofWhatYouDon’tNeed,MoreofWhatYouDo Intheearly2000s,laptopmakerswerestrugglingtofindwaystomake theirlaptopslighterwhilestillpackinginallofthecommoncomponents,suchasadisc drive.Theyneverquestionedthediscdrive,because“we’vejustalwaysdoneitthisway.” stillusediscdrivesonaregularbasis.Asaresult,theystartedphasingoutdiscdriveson alloftheirdevices.Now,ifyouabsolutelyneedadiscdrive,youbuyanexternalone. Thisfocushasnotonlyallowedthemtomaketheirlaptopslighterthan thecompetition(seeFigure3.6),buttheywereabletofillupsomeofthatextraspacewith alargerbattery.Theydeterminedthatincreasedbatterylifeisafeaturethatpeoplefind morecompellingthanhavingadiscdrive. AsisthecasewithotherdisruptivedecisionsthatApplehasmade,wenowseeother companiesfollowingtheirleadandremovingdiscdrivesinfavoroflargerbatteries. Beforeyoudecidewhattoworkonfirst,makecertainthatallofthefeaturesareusefulfor themajorityofusersandthereforeimportantenoughtojustifyyourefforts.Ifyour scheduletreatsfeaturesthatwillbeusefulfor80percentofusersequaltothosemadefor oneortwoexpertusers,* thenperhapsthoseprioritiesneedtobechallenged. *Aslongasthefeatureisnotakeyelementrelatedtosettingupapipeline,whichcould resultinabottleneckfortherestofthecontentcreators. WhatDoesItMeantoBe“User-Centered”?◾37 FIGURE3.6Whileothermanufacturerswereconstrainedwiththeassumptionthatall laptopsmusthaveadiscdrive(bottom),Appleobservedthatveryfewpeopleusedtheir laptopdiscdrives,anddecidedtousethatspacetomakeathinnerlaptopwithbetter batterylife(top). MoreFeaturesDoNotMakeaBetterTool TheAppleiPodisanotherexcellentexampleofthisphilosophy.Thebiggestcompetitortothethird-generationiPodwastheiRiverH300.Atthetime,iRiverwas arisingstarintheMP3playermarket.TheirH300had manyimpressivefeatures.Itsupportedalargenumberoffileformats:Notonlycouldit playmusicfromMP3,WMA,andOGGfiles,butitcould alsoplayvideosandviewpictures.IthadanFMtuner,twoheadphone generationiPodcomparetothis?Itonlyplayedmusic.ItdidnothaveanFMtuner.Ithad oneheadphonejack.Thedisplaywasblackand white.TheiPodhadfewerfeatures,byfar.(SeeFigure3.7.)However,notonlydidthe iPodoutselltheH300,italsooutsoldeveryotherMP3playeronthemarket.Perhapsmost tellingisthefactthatveryfewpeopletalkaboutiRiverthesedays. Video&images FMtuner Twoheadphonejacks Voicerecording Colordisplay FIGURE3.7Thethird-generationiPod(left)comparedtotheiRivierH300 (right). 38◾DesigningtheUserExperienceofGameDevelopmentToolsComplexity Complexity Numberoffeatures Numberoffeatures FIGURE3.8Addingmorefeaturesincreasescomplexityexponentially. HowdidAppledothis?SeveralfactorscontributedtothesuccessoftheiPod,butone thingiscertain:itwasnotbyhavingmorefeatures.Applefocusedalltheirresourceson therightfeatures,togivetheiPodthebestuserexperiencepossible.Productsthatchoose therightfeatures,anddothemwell,areinamuchbetterpositiontosucceed. ExponentialComplexity Wemaybelievethataddingfeaturesmakesaproductmorecomplexina linearfashion.However,thefactisthateachnewfeatureincreasescomplexity exponentially.(SeeFigure3.8.)Thisisbecauseeveryfeaturewillbeusedincombination withalloftheotherexistingfeatures,whichaddsanextradimensiontoallthosethatcame beforeit.Thisiswhyitisoftheutmostimportancetochoosetherightfeatures,and choosethemcarefully. WRAPPINGUP Inthischapter,wediscussedthevalueofincreasingtheinvolvementofusersinthe developmentprocess.Wediscussedtheimportanceofaccept-ingthat—moreoftenthan not—wearenottheusers,aswellasthedangersofnotknowingforwhomweare designing.Wealsolearnedthatdocumentationisnotthemagicsolutionandwhyit’s importanttostopthecultureof“RTFM.”Inaddition,welearnedhowfocusingonthe rightusers allowsustogetthemaximumresultsfromaminimalinvestment,accept- www.allitebooks.com betweenfeaturesandgoals,thefactthatmorefeaturesdonotmakeatoolbetter,andwhy understandingthegoalsoftheuserscanhelpuschoosetherightfeatures. Inthenextchapter,wewilllearnimportantconceptsandtechniquesthatwecanuseduringtheAnalysisphaseoftheUser-Centered Designprocess. Chapter4 Analysis WHATWILLWELEARNINTHISCHAPTER? Concepts •Theimportanceofwatchinguserswork •Introductiontohuman–computerinteraction •Understandingthementalmodeloftheusers Techniques •Interviewingstakeholders •Performingacontextualanalysis •Howtocreateataskflow •Howtodiscoverthementalmodelsoftheusers •Establishinghowtomeasureimprovementstothetools THEIMPORTANCEOFWATCHINGUSERSWORK JakobNielsenisoneoftheprincipalsoftherespectedusabilityconsultancyNielsen NormanGroup(ofwhichDonNormanisalsoaprincipal). Oneofhismorefamousarticlesisontheimportanceofwatchingusers work.Inhisarticle,hewrites,“Todiscoverwhichdesignsworkbest, watchusersastheyattempttoperformtaskswiththeuserinterface.”*Itis *Thefullarticlecanbefoundhere:http://www.nngroup.com/articles/first-rule-ofusability-dont-listen-to-users/. 39 40◾DesigningtheUserExperienceofGameDevelopmentToolsnotenoughtosimply asktheusersabouthowtheyusethetool.Thereareaspectsoftheuser’sworldintheheat ofproductionthatareimpossibletounderstandunlessyousitnexttothemandwatch themwork. TheLimitationsofMetricsandFocusGroups Twoofthemostcommontechniquesthatwemayusetounderstandhow basemuchofourtoolsdevelopmentdecisionsonthesetechniqueswithoutactuallysittingdownwiththeuserswatchingthemwork.Thiscan haveseriousimplications. Metricsareaquantitativetechniquethatmakeiteasiertogetinformationaboutalargenumberofpeople.Metricsareverygoodattellinguswhatishappening butnotverygoodattellinguswhyitishappening. Whenthemetricsreportthat90percentoftheusersneverclickaspecificbutton,wehave noideawhytheyarenotclickingonit.Theusersmayhaveaverygoodreasonthatwe cannotbeawareofunlesswewatchtheusers work:forexample,theymaynotunderstandthelabel,orthebuttonmay behiddenbehindanotherwindow. Inafocusgroup,theloudestandmoreinfluentialpersonwillusuallybeheardabove everyoneelse.Evenifmanyotherpeopleintheroomhaveanopinion,oractuallyusethe toolmorehoursperweek,theirvoicesarenotheard.Furthermore,JakobNielsen’s researchsuggeststhatwhatpeople saytheydocomparedtowhattheyactuallydoisoftenquitedifferent. Metricsandfocusgroupscanbegreatstartingpoints,buttheyshould becomplementedbysittingdownwiththeusersandwatchingthemwork. ProximitytotheUsers Outsideofthegamesindustry,havingusersnearbythatyoucanwatch isconsideredaluxury!Manycompaniesspendastronomicalamountsof moneygettingaccesstouserssotheycanaskthemforfeedbackontheirproducts.They maypayfortransportation,food,andevencashoragiftcardasincentiveforpeopleto participate.Theymightalsopayanonlineservicetofindusersanddotheanalysisfor them. Gamedeveloperswhoworkinthesamebuildingastheirusersareat ahugeadvantagetoimprovetheuserexperienceoftheirtools.Theycantalktotheirusers onaregularbasisandhaveaverytightiterationloop. Ifthisisyoursituation,youshouldmakethemostofitandsitascloseaspossibletothe users. Analysis◾41 Therearesomesituationswherethereareusersavailable,butthedevelopersdonothave easyaccesstothem.Someexamplesofthisareifyou workforamiddle-warecompany,ortheusersareinanotherbuildingorevenanother country.Inthiscase,youcanuseremotecollaborationtoolssuchasWebEx, GoToMeeting,andLiveMeeting.Theyprovidefeatures thatmakeiteasiertotalktousersandgetfeedbackonyourtools. Ifyouareanindependenttoolsdeveloper,youcantrytofinduserswiththerightprofilein onlinechatforums,suchastheCGSocietyforumsorPolyCount.Manypeoplewho participateinonlinecommunitieswould jumpattheopportunitytotryoutanewtoolortogivetheiropiniononhowtheywould useit. UncoveringWork-Arounds Watchingusersworkisalsoagreatwaytouncoverwork-arounds.After usingatoolforalongtime,usersforgetthattheydocertainthingsautomatically,which couldpotentiallyresultinreducedproductivity.The storyofthemonkeysandthebananafromChapter3isaperfectexample ofthisbehavior. Whenyouseetheuserdoingsomethingthatseemslikeawork-around, tryaskingthemwhy.Everytimeyouaskwhy,youdigdeeperintothe rootoftheproblem.Forexample,imaginethisexchangebetweenyouand auser: User:“So,firstI’llchooseanewobjectfromthislist.BeforeIdothat,Ihavetopress F5.”<userwaits> You:“OK.Whilewe’rewaiting,canyoutellmewhyyoudothat?” User:“Oh,pressingF5refreshesthelistsoIseeallofthelatestobjects.” You:“Whydoyoudothat?” User:“JustincasesomeoneaddedanewobjectsincethelasttimeIopenedthelist.” You:“Whyarethenewobjectsnotaddedtothelistautomatically?” User:“That’sagoodquestion.Idon’tknow…It’sjustalwaysbeenthatway!” UnderstandingContext Moreoftenthannot,toolsaremadetoworkwithothertools,andassetsarepassedaround betweenmultipleusers.Becauseofthis,itisessentialtounderstandthecontextinwhich thetoolsareused.Takingastepbackand42◾DesigningtheUserExperienceofGame DevelopmentToolsseeingthebigpicturecanmakethedifferencebetweenabaduser experienceandagoodone. JeffHawkinsunderstoodthiswhileexperimentingwithhiswoodblock. HelearnedsomeofthedifferentsituationsinwhichthePalmPilotwouldbeused:inthe contextofameeting,atadiscussionaroundthewater-cooler,andwhenbumpinginto someone.Hethoughtbeyondjustthe interfaceofthedevice.HeunderstoodthatafterusingtheirPalmPilotstostore information,peoplewouldwanttoreturntotheircomputersandbeabletoaccessthe chargeandsynchronizeyourdevicewithyourcomputer,whichwascrucialtothesuccess ofPalm. Bybeingawareofcontext,Applewasabletothinkbeyondhowpeople listentomusic,andunderstandhowpeoplewanttogetmusicontotheir devices.ThisledtothecreationofiTunes,oneofthebiggestsellingpointsoftheiPodand ahugesourceofincomeforApple. TheinformationthatwelearnintheAnalysisphasecanbeinvaluable forunderstandingcontext,whichcanhaveahugeimpactonimproving theuserexperience. WhatIstheProblemThatWeAreTryingtoSolve? Inadditiontouncoveringwork-arounds,watchingusersworkalsohelps ustoremembertheproblemthattoolwasoriginallymadetosolve.When atoolhasbeenusedinproductionforawhile,wemaytrytofindsolutionsthatconform totheexistinginterface.Thistunnelvisioncanhinderourabilitytoimprovetheuser experience. Forexample,imaginethatyouareworkingonashadercreationtoolfor textureartists.Themajorityofbeginnerusersarehavingtroubleunderstandingthatwhen theywanttransparency,theyneedtocheckthe“AlphaOn”checkboxontheshader options.Inaddition,thecheckboxishidden amongalonglistofvariablesintheOptionstabfortheshader.Ittakesseveralclicksto enable,whichhurtstheefficiencyoftheusers. Wemightthinkthatthesolutionwouldbetorenamethelabelfrom “AlphaOn”to“EnableAlphaTransparency”soitisclearerforbeginners,ortoreducethe numberofclicksrequiredtogettothecheckbox.Thesearebothgoodideas,butwemust alwaysaskourselves,“Whatistheproblemthatwearetryingtosolve?”Ourgoalisnotto makeabettercheckbox,oraclearerlabel.Whatwereallywanttodoismakeiteasierto enablealphatransparencyontheshader! Analysis◾43 Instead,wecouldautomaticallyactivatetransparencywhenthetexturemapinthediffuseinputhasanalphachannel.Thediffusetexture needstohaveanalphachannelanyway!Thissolvestherealproblemand ismuchmoreeffectivethanaclearerlabelorbettercheckboxplacement. Furthermore,thisalsoresultsinonelesscheckboxforthetoolsdeveloperstomaintain, andonelesscheckboxfortheusertolearn. INTRODUCTIONTOHUMAN–COMPUTERINTERACTION receiveaninput,processit,andthensendanoutput.Forexample,acomputerreceives inputfromthemouse,calculateswhatshouldhappen,and thendisplaystheresultonthemonitor(seetherightsideofFigure4.1,clockwisefrom top). Althoughwemaybefamiliarwiththecomputerside,noteveryone understandswhatisgoingoninsidetheuser’sheadwhilewearewatchingthemwork.As itturnsout,thehumansideisalmostamirrorimageof thecomputerside:wereceiveaninput,weprocessit,andthenwesendanoutput.For example,weseewhatisonthemonitor,wethinkaboutwhatitmeans,andthenweclick themouse.Afterourmouseclickchangeswhat weseeonthemonitor,westartbackatthebeginning(seetheleftsideofFigure4.1, clockwisefrombottom).Thiscommunicationloopiscalled thehuman–computerinteractionmodel,andunderstandingitiskeytoimprovingtheuser experience. Finally,inbetweenthehumanandthecomputeristheuserinterface (seethemiddleofFigure4.1).Thequalityoftheinterfacedetermineshowgoodthe interactionbetweenthehumanandthecomputerwillbe. FIGURE4.1Thequalityoftheinteractionbetweentheuser(left)andthecomputer(right) isdeterminedbytheinterface(middle). 44◾DesigningtheUserExperienceofGameDevelopmentToolsUnderstandingthe ActionCycle Thecommunicationlooponthehumansidecanbeboileddownto threephases:“Look,”“Think,”and“Act.”Thisissometimescalledthe “ActionCycle.”* Imagineforamomentthatyouhadneverusedacomputermouse before.Ifyouweretoldtomovethecursoronacomputerscreenusing theLogitechMK710WirelessDesktopMouseforthefirsttime,youmight startbylookingattheshapeofthemouse:alongtheleftside,thereisadeepgroove,and thetophastwoshallowergrooves.Thenyoumightthinktoyourself,“IfIweretohold thisobject,mythumbwouldfitintothatdeepgroove,andmyfingerswoulddrapeover theshallowergrooves.”†Finally,youwouldactbyplacingyourhandoverthemouseand perhapsmoving itabit.Finally,thecyclewouldstartbackfromthebeginning:lookatthescreen,and thinktoyourself,“Whatchanged?Oh,thecursormoved!” Withenoughexperience,younolongerneedtolookatthemousetosee wherethegroovesare,orthinkaboutwhattheymean.Youspendalmost allofyourtimeintheactphaseoftheactioncycle.Thefactthatthelookandthinkphases arereducedmeansyoucanspendmoretimeacting, resultinginincreasedefficiency(seeFigure4.2). TheLogitechmousehasbeendesignedtobeeasytounderstandso youcanstartusingitimmediately.However,notallcomputermiceare designedthisway.Forinstance,considertheMadCatzR.A.T.mouse(seeFigure4.3).For someonewhohasneverusedamousebefore,theshape FIGURE4.2Thedesignofamousecanmakeiteasiertolearn,reducingthetimespentin theActionCycle. *Theactioncycleispartofthefieldofactionresearch,pioneeredinthe1940sbyKurt Lewin,aprofessoratMIT.AccordingtoLewin,humansconstantlyiteratethroughthree recently,DonNormanproposeda“HumanActionCycle”moregearedtowardhuman– computerinteraction,whichfeaturesthreeverysimilarphases:goalforming,execution, andevaluation. †Whentheshapeofanobjectsuggestshowyoushouldinteractwithit,thisiscalled “Affordance,” whichyoucanreadmoreabouthere:http://en.wikipedia.org/wiki/Affordance. Analysis◾45 FIGURE4.3Anon-standardorconfusingdesigncanincreasetheamountoftimespentin theActionCycle. doesnotmakeitimmediatelyobvioushowyouaresupposedtoholdit.Italsohas differentmodes,whichmeansthatitworksdifferentlydependingonwhatmodethe mouseisin.Anotherexampleisanoveltycomputer mouse,especiallythosethataremadetolooklikeotherobjectslikecarsorsports timeinthelookphasetryingtounderstandwhattheyareseeing.Allofthiswastedtime couldbespentintheactphase. Noveltymiceareagoodexampleofdevicesthathavetheusefulanddesirablelayerofthe pyramidbutaremissingtheusablelayer. MentalLoads SusanWeinschenk’sbook100ThingsEveryDesignerNeedstoKnowaboutPeople presentstheconceptofloads,whicharethethreetypesofprocessesthatthebraincan perform:cognitive,visual,andmotor.Shedescribes themasfollows:“Therearethingsyou’rethinkingaboutandremembering(cognitive),thingsyou’relookingatonthescreen(visual),andbuttonsyouare pressing,mousemovements,andtyping(motor).” Shegoesontorevealthatnotallloadsareprocessedequally.Visual loadsrequiremoreresourcestoprocessthanmotorloads.Cognitive loadsrequiremoreresourcesthanvisualloads.Therefore,thehierarchyofloads—from mosttoleastresourcesrequired—iscognitive,thenvisual,andfinally,motor(seeFigure 4.4). Howdoesthisrelatetotheactioncycle?Whenyouareinthelook phase,youareprocessingavisualload.Whenyouareinthethinkphase,46◾Designing theUserExperienceofGameDevelopmentToolsFIGURE4.4Thehierarchyofmental loads,fromlightesttoheaviest:motor,visual,andcognitive. youareprocessingacognitiveload.Finally,whenyouareintheactphase,youare processingamotorload.Ifatoolhasacomplicateduserinterface(visualload),theuser willspendalotoftimeinthelookphase.Ifthetoolrequiresthattheuserdoalotof mentalcalculationandrememberthings(cognitiveload),theuserwillspendalotoftime inthethinkphase.Thisismadeworsebythefactthatcognitiveandvisualloadsaremore time consumingtoprocesscomparedtomotorloads. MoreClicksAreNotAlwaysBad Commonsensetellsusthataddingahundredclickstoataskisgoingtoreduceefficiency. However,itmaycomeasasurprisetofindthataddingjustafewextraclicks—resulting inaslightlyincreasedmotorload—canactuallyincreaseefficiency.Howcanthisbe? SusanWeinschenksupportsthisbydescribingresearchshedidcomparingdifferentmentalloads.Althoughtheusersinherresearchstudy hadto“gothroughmorethan10clickstogetthetaskdone,”theyconcludedthatthetaskwaseasy,because“eachstepwaslogicalandgavethemwhatthey expected.Theydidn’thavetothink.” SteveKrug,anotherwell-respectedauthorinthefieldofuserexperience,isprobablybest wehavetothink,themoretimewespendacting,andthereforethemoreefficientwecan be.HefurtherconfirmsSusanWeinschenk’sresearch,stating,“Itdoesn’tmatterhow manytimesIhavetoclick,aslongaseachclickisamindless,unambiguouschoice.” HowDoestheActionCycleAffectEfficiency? Toseehowtheactioncycleappliestoimprovingtheefficiencyofgame developmenttools,wewillwalkthroughanexample.InChapter1,wecalculatedhow saving20gamedevelopers20minutesperdaycouldsavetimeAnalysis◾47 AmbientLight Barrel Crate Fire PointLight SpotLight Sword Shield Tree FIGURE4.5Exampleoftheinterfaceforatoolusedtoplaceobjectsinalevel. andmoney.Imaginethatthose20usersareplacingobjectsinalevel,usingastandard leveleditor.Thestepsareasfollows: •Look:Theuserscansthelistofobjectsintheobjectlibrary. •Think:Basedonwhattheysee,theuserdeterminesiftheyhave foundtheobjecttheyneed. •Act:Oncethedesiredobjectisfound,theyselectitfromthelistandplaceitinthelevel. Theuserinterfacecouldusethesearchboxatthetop,butinthiscase,theuserdoesnot knowthenameoftheobjecttheyarelookingfor(see Figure4.5).Theywillknowitwhentheyseeit.Theyknowthattheobjectcanbesmashed intopiecesbythehero.Itisnotequipment,alight,oraparticleeffect.Howcanthelook, think,andactphasesbeoptimizedsothattheusercanfindtheobjectthattheyarelooking for?* Look Inthecurrentinterfacefortheobjectlibrary,therearemanydifferenttypesofobjects.It canbedifficultfortheusertodistinguishbetweenvariousobjecttypesataglance.How canwereducethetimespentinthelookphase? *Intheexamplethatfollows,thedesigntechniquesofhierarchy,progressivedisclosure, representation,grouping,feed-forward,constraints,andexcisearebeingapplied.Wewill 48◾DesigningtheUserExperienceofGameDevelopmentToolsPHYSICS_ACTIVE PHYSICS_ACTIVE Barrel Barrel Crate Crate FRAG_SHDR_LIGHTS AmbientLight PointLight SpotLight EQUIPMENT FIGURE4.6Improvingtheuserexperiencetoreducetimespentinthelookphase. Wecouldstartbyimprovingthewayinwhichtheobjectsareorganized sothatthecategoriesareeasiertodistinguish,andthenuseauniquecolorandiconfor eachobjecttype.Thesechangeswillmakeiteasierfortheusertoidentifytheobjectthey arelookingfor. Wecouldalsoaddtheabilitytofilterthelistbyobjecttype,reducingthenumberof objectsthattheuserhastoscanatonce.Thisdoesaddanadditionalclick,butremember thatsometimesaddingclickscanactuallyreducetimespentinthelookphase,thereby makingtheusermoreefficientoverall(seeFigure4.6). Think Thenamesoftheobjectcategoriesaretakenfromthedatastructures underneath.However,theaverageuserisnotawareofthat,andsotheydonotthinkabout thecategoriesinthesameway.Forexample,“Breakables” isamuchmorecommonnamefortheaverageuserofthistool,compared to“Physics_Active.”Byunderstandinghowtheywouldgrouptheobjects together,wecanhavecategorynamesthatwillallowtheusertofindwhattheyare lookingformorequickly(seetheleftsideofFigure4.7). Inaddition,someobjectscanonlybeplacedincertainareasofthelevel(forexample, onlyboatscanbeplacedinwaterzones).Theuserhasto thinkaboutthisbeforehand;otherwisetheobjectcannotbeplaced.By showingasemi-grayed-outversionoftheobjectwhenitisbeingdraggedontopofa non-validzone,theuserdoesnothavetospendalotoftimeinAnalysis◾49 BREAKABLES www.allitebooks.com Crate FIGURE4.7Improvingtheuserexperiencetoreducetimespentinthethinkphase. thethinkphase,wonderingiftheyareplacingtheobjectintherightspot(seetheright sideofFigure4.7). Act Byreducingthelookandthethinkphaseswiththetechniquesmentioned above,wecanspendmoretimeintheactphase:inotherwords,placing objectsinthelevel.However,thatdoesnotmeanthatwecannotalsooptimizetheact phaseitself! Wecanseethathavingthecategoryfiltersbelowthelistmeansalot ofmousemovementupanddown.Movingthemupbetweenthesearch fieldandthelistmeanslesstravelforthemouse(seetheleftsideofFigure4.8). Wecanalsoaddkeyboardshortcuts:oneforputtingthecursorinthe searchfield,andoneforeachofthecategoriestotogglethemonandoff(seetherightside ofFigure4.8). Alloftheseimprovementsincombinationhelptoreducethetimespent inthelook,think,andactphases.Thismakesitmuchmoreefficientfortheusertofind theobjecttheyarelookingforandaddittothelevel. HowDoestheActionCycleAffectLearnability? Atoolisconsideredtohavegoodlearnabilityifanewusercaneasily accomplishataskonthefirstattempt.Thelearnabilityofatoolcanalsobeassessedona long-termbasis:thespeedatwhichanexistingusercan50◾DesigningtheUser ExperienceofGameDevelopmentToolsCTRL F BREAKABLES Barrel Crate CTRL E CTRL L CTRL B X FIGURE4.8Improvingtheuserexperiencetoreducetimespentintheactphase. rememberhowtouseatoolafternothavinguseditforawhile(sometimescalled memorability),orhowquicklyabeginnercanbecomeanexpert.* Otherthanexperimentation,thetwomostcommonwaysthatanew userlearnsagamedevelopmenttoolarebeingtrainedbyanexpertuser andreadingdocumentation.However,thereareissueswithbothof theseapproaches. Whilesupportfromexpertusersiscommon,toomuchcancomeata cost.Anytimethatanexpertuserspendsprovidingtrainingandansweringquestionsistimethattheycouldbedoingwhatexpertusersdobest:solving complicatedproblems!Nottomention,thehourlywageforan expertusercanbehigh.Finally,theyarenotalwaysavailable:ifanewuserdoesnot knowhowtodosomethingwithoutthehelpofanexpertuser, theyarestuck. Documentationisalwaysanoption,butitisfrequentlyoutofdate,ifitexistsatall.Italso goeswithoutsayingthatitcanbeexpensivetocreateandmaintaingooddocumentation. DoIttheLongWay Expertsspendlesstimeinthethinkphasebecausetheyhaveadeeper understandingofhowatoolworks.However,ifatoolisdifficulttolearn,usersmaystay asbeginnersorintermediatesforalongtime. *FormoreonhowNielsenandothersdefinelearnability,seehere: http://www.measuringusability. com/blog/measure-learnability.php. Analysis◾51 ThissituationisdescribedperfectlyinJeffJohnson’sbookDesigningwiththeMindin Mind.Inhisbook,hetellsastoryaboutausabilitytestwhereheaskedausertoperforma task.Afterthinkingforaminute,theusertoldhim,“I’minahurry…soI’lldoitthelong way.”Thisseemslikeanunusualstatement…orisit? seethatoncetheylearnhowtoaccomplishataskinaspecificwaywithoutcrashingor causinganyotherproblemstheytendtosticktoit.Thismethodcouldcontainatonof work-aroundsandhacks,buttheyknow thatitworks.Ifthetoolmakesitdifficulttofigureoutabetterwayontheirown,theyare likelytosticktotheoldway.Now,imaginethatthereisanewer,betterway,buttheuser cannotfindit.Theirslowerapproachtakesanadditional20minutesperday.Howmuch timeandmoneycouldwe savebymakingthistoolmorelearnable? RampingUptheLearningCurve Understandingwhattheuserneedsateachstepoftheirlearningprocessiscrucialto designingatoolthatiseasytolearnbybeginnersandefficienttousebyexperts.Thisalso hasarelationshiptotheactioncycle:beginnersspendalotmoretimeinthethinkphase, becausetheyarestillfiguringouthowthetoolworks.Bymakingiteasierforbeginnersto becomeexperts,theywillspendlesstimeinthethinkphase,makingthemmoreefficient. ImagineascenariowithMicrosoftWord.Abeginnerwhohasnever usedWordbeforemaylookattheinterfaceandask,“Whatcanthisdo?” Theymayseethe“Font”section,andseethatitcontainsbuttonsforbold,italic,and underline.Bylookingattheicons,readingthetooltips,andexperimentingwiththe buttons,theystarttounderstandthatoneofthethingsWorddoesisformattext(seeFigure 4.9). FIGURE4.9Thecommandsexposedintheribbonhelpbeginnersunderstandwhatthe toolcando.UsedwithpermissionfromMicrosoft. 52◾DesigningtheUserExperienceofGameDevelopmentToolsFIGURE4.10 Contextualmenusallowintermediateuserstoworkmoreefficiently.Usedwith permissionfromMicrosoft. IntermediateusersalreadyknowthattheycanformattextinWord. accesstothebuttonsintheFontsection.Thecontextualmenuisnotvisibleallthetime.It isconvenientfortheintermediateuser,butitdoesnotclutteruptheinterface(seeFigure 4.10). AnexpertuserofWordalsoknowsthattheycanformattext,andthey wanttodoitasquicklyaspossible.Sincetheyhavelearnedthehotkeysforbold,italic, andunderline,theyneverusetheribbon.Infact,theyhavechosentohideit,thereby customizingtheirinterfaceandallowingthemtofocusontheircontent(seeFigure4.11). Whatisimportanttonotehereisthatifweremovedtheribbon,the beginneruserwouldneverseetheFontsection,anditwouldtakelongerforthemto understandhowtoformattext,blockingtheirprogresstowardbecomingexpertusers. However,iftherewerenohotkeys,theexperts wouldbelessefficientandfrustratedbyhavingtomovetheirmouseuptotheribbonto accessthebold,italics,andunderlinebuttons.Thesedifferentuserinterfaceelementsexist tohelpguidethebeginnertobecominganexpert. FIGURE4.11Expertuserscancustomizetheinterfaceandusehotkeys,maximiz-ingthe spaceusedtodisplaytheircontent.UsedwithpermissionfromMicrosoft. Analysis◾53 Keepinmindthattheexpertuser’sneedsmostlyapplytocomplexproductivitytoolswithdeepfunctionality.Asimplegamedevelopmenttoolwithtwobuttons andacheckbox—suchasaninstaler—isunlikelytorequiretheusertogopastthecriteria ofthebeginnerorintermediatestage. KnowledgeintheWorldandKnowledgeintheHead InhisbookTheDesignofEverydayThings,DonNormancomparestwotypesof knowledge:knowledgeintheworldandknowledgeinthehead. Knowledgeintheworldcouldbecomparedtowhatyouseeintheuser interface,andknowledgeintheheadcouldbetheequivalentofknowing whatatooldoesalready.Normansuggeststhatwhenthefunctionalitywearelookingfor is“intheworld”(inotherwords,visibleintheinterface),itiseasiertolearnforthefirst time,butthatefficiency“tendstobeslowedupbytheneedtofindandinterpretexternal information.”However,knowledge“inthehead”(somethingthattheuseralreadyknows howtodo) “requireslearning,whichcanbeconsiderable,”but“canbeveryefficient.” Agoodexampleofthiscanbeseenbylookingatthestepsrequired iPad. ThereisnoindicationintheAudacityinterfaceonhowtoaddatrack. Right-clickinginthewindowdoesnotcreateacontextualmenu,andtherearenobuttons toaddanewtrackinthetoolbar.Theusermustexplorethemenusandfindthe“Tracks→ AddNew→AudioTrack”menuitem(see Figure4.12).Oncetheyfindit,theyknowwhereitis.Furthermore,theycanusethe hotkey“Control+Shift+N”toaddanewtrackveryquickly. Thisisaveryefficientwaytoaddnewtracks,butyouhavetoknowthatitistheretotake advantageofit.Inotherwords,theknowledgehastobe “inthehead.” Ontheotherhand,AppleGarageBandforiPadmakesitveryeasytolearnhowtoadda newtrack.Atthetopoftheinterface,the“Instruments” buttonisprominentlydisplayed.PressingonthisbuttonbringsyoutoaFIGURE4.12 AddinganewaudiotrackinAudacity.Audacity®softwareiscopyright©1999–2014 AudacityTeam. 54◾DesigningtheUserExperienceofGameDevelopmentToolsFIGURE4.13Addinga newaudiotrackintheiPadversionofGarageBand. ©Apple. listofinstruments,withvisualrepresentationssoyouknowwhatyouaregetting.From here,youcanchoose“AudioRecorder.”Youcanthenreturntothetracksviewtoseeyour newtrack(seeFigure4.13).Whilethisiseasiertofindbecauseitisatthetopofthe interfaceandalwaysvisible—inotherwords,itis“intheworld”—itrequiresmoresteps. UNDERSTANDINGTHEMENTALMODEL Anotherimportantconceptthathelpsustounderstandhowtheusers thinkistounderstandtheirmentalmodelsandensurethattheymatch theconceptualmodel. WhatAretheMentalModelandtheConceptualModel? SusanWeinschenk,cognitivepsychologistandauthorofseveralbooks modelsandconceptualmodels. Amentalmodelisthewayinwhichauserunderstandshowsomething works.Forexample,almosteveryoneintheworldhasamentalmodelofabook:it containspages,eachpagehaswordsonit,andyoucanturntothenextpageorthe previouspage. Bycomparison,aconceptualmodelisthewayinwhichanobjector interfaceactuallyworks.Forexample,imaginethatyouhandedsomeone thedeviceontopofthebookinFigure4.14.Theyhaveneverseenthis objectbefore,andtheyhavenoideawhatitis. Whentheyexaminethisdevice,theywillnoticethatithasbuttonsand ascreen.However,manyotherdevicesalsohavebuttonsandascreen: laptops,tablets,evencalculators.Whatisthisdevice?Whatdoesitdo?It Analysis◾55 FIGURE4.14Usingthementalmodelofabooktoacceleratetheprocessoflearninghow touseane-reader. mighttakethispersonawhiletofigureouthowitworks,becausetheyhavenoprevious knowledgetodrawontohelpthemunderstandhowtouseit. Nowimagineadifferentscenariowhere,beforehandingoverthedevice, youtellthem,“Thisisjustlikeabook.”Astheyexaminethedevice,theycomparetheir mentalmodelofabooktotheconceptualmodelofthe device.Theylookatthewordsonthescreenandthink,“Thismustbelikethepagesona book.”Theylookatthebuttonsonbothsidesandthink, “Thismustbeforthenextpageandpreviouspage.”Byreferringtotheirmentalmodel, theyareabletomakeaconnectiontotheirexistingmentalmodelandunderstandwhatthe deviceis—andhowtouseit—muchmore quicklyandeasily. Majordifferencesbetweentheuser’smentalmodelandthetool’sconceptualmodelisoneofthekeyreasonswhyusershavedifficultyunder- mindcanhaveabigimpactonimprovingtheuserexperienceofourgame developmenttools. WhyIsItImportanttoUnderstandtheUser’sMentalModel? Thementalmodelsofprogrammersoftenincludetechnicalconcepts thattheuserisnotawareof,suchasclassstructureanddatamodels. Becausetheseconceptscomenaturallytothem,theymightforgetthat theaverageusermaynotunderstandthem.Considerthefollowingterms: stereoscopy,rasterize,andGouraudshading.Theseareallwordsthatarepartofthe commonvocabularyofgraphicsprogrammers.However,the majorityofnon-programmersmayknowthesewordsas3Dimaging, pixel-based,andsmoothshading.Eventhoughthesetermsmaynotbe 56◾DesigningtheUserExperienceofGameDevelopmentToolsFIGURE4.15Adobe Photoshopusesthementalmodelofapaintbrushtomakeiteasiertolearnthesettingsin theBrushpanel,reducingtheamountoftimespentinthethinkphase.Adobeproduct screenshot(s)reprintedwithpermissionfromAdobeSystemsIncorporated. perfectlyaccurate,theyareofteninterchangeableandmaybethemost recognizabletermsforthemajorityofusers. ThebrushespaletteinAdobePhotoshopprovidesagoodexampleofthis (seeFigure4.15).Thereisplentyoftechnicalterminologyinthebrushespalette.Tocreate ormodifyabrush,youcansetvaluesforabstractsound-ingconceptssuchas “Roundness,”“AngleJitter,”and“Purity.”Therearecategorieswithnameslike“Shape Dynamics,”“Transfer,”and“Dual Brush.”Evensomethingwithasimplenamelike“Spacing”cancausethe usertoask,“Thespacingofwhat?And,howmuchspacingdoIwant?” Alargeproportionoftheusersmanynotthinkofbrushesinthose terms.Thereareaccustomedtobrushesinfinearts.Theythinkabout vas.Fortunately,thebottomoftheBrushespanelhasapreviewofwhat thebrushwilllooklikewhenitisusedtocreateacurvedstroke,andtheupperleft-hand cornerofthewindowsshowstheprofileofthebrush(seethetopleftandbottomrightof Figure4.15).Thisnotonlyallowsabeginnertosimplyadjustthenumbersuntiltheysee thebrushstroketheyarelookingfor,butitalsoallowsthemtomovecloserto understandingwhatthenumbersmeanbyimmediatelyseeingtheeffectthateachsetting has onthebrushstroke. AnotherexampleistheTreeCreatorintheUnitygameengine.This toolrepresentsthetreestructureinasimplewaythatanyonecanunderstand:itvisualizes thetrunk,branches,andleavesinatree-likeview(seeFigure4.16).Itispossiblethat underneath,thetreeisrepresentedbya Analysis◾57 FIGURE4.16TheTreeCreatorintheUnityenginevisualizesthestructureofatreeina waythatmatchestheuser’smentalmodel,reducingthetimespentinthethinkphase. complexdatamodel,buttheuserdoesnotneedtoknowthat.Thisconceptualmodelismuchclosertotheirmentalmodelofthepartsthatmakeupatree. INTERVIEWSTAKEHOLDERS Oneofthefirststepstoimprovingtheuserexperienceofatoolistointerviewthe stakeholders.Itissurprisinghowmanypeopleforgetthisfunda-mentalstep!Herearea fewsuggestionsonwhatkindsofquestionstoaskthestakeholders. HowDoYouMeasureSuccess? Thefirstandprobablymostimportantquestiontoaskishowthestakeholdersmeasuresuccess.Isitbymakingthetoolsmoreefficient,easiertolearn,orsome othermeasurement?Thisinformationiskeytodetermininghowyouwillmeasurethe successofyourefforts.Itisnormalforthesetobemorebusiness-relatedascomparedto theusers’goals.Thesemeasurementsofsuccessareessentiallythestakeholders’goals. WhoArethePrimaryUsers? currentlyusingthetool,soyoucanwatchthemwork.Iftheycannotgiveyouthenames ofprimaryusers,theycanprobablygiveyouthenames ofpeoplewhoworkwiththeprimaryusers,suchastheirteamleadsand supervisors.Thisquestionisalsoimportanttoaskbecausemanyproblemsinresourceallocationcanarisefromthestakeholdersbeingunawareofwhothe primaryusersare. 58◾DesigningtheUserExperienceofGameDevelopmentToolsLinkingStakeholder GoalsandUserGoals Onceyouhaveidentifiedthestakeholdergoals,youwillwanttotrytofindaconnection betweentheirgoalsandtheusergoals,toensurethattheycanbeconnected.Forexample, imaginethatoneoftheusergoalsisto optimizethelevelgeometrytoimproveperformance.Atthesametime, oneofthestakeholdergoalsistohavethegamerunat60FPS.Thereisaclearconnection betweenthetwogoals. Incontrast,imaginethatanotheroneofthestakeholdergoalsisto improvetheefficiencyofatoolusedforcreatingagritty,urbanenvironmentwithminimal impactontexturememory.Meanwhile,oneofthe usergoalsistohaveaneasy-to-learntoolthatgenerateshyper-realistictreeswithhighresolutiontextures. Whenoneormoreusergoalshavenoconnectiontoanyofthestakeholdergoals,thiscouldbeasignthattoolsdevelopmentresourceswillnotbeinvested correctly,leadingtopotentialproblems. PERFORMCONTEXTUALANALYSES Oncewehavealistofusersofthetool,wecanwatchthemworkusingatechniquecalled contextualanalysis.Thewordcontextualemphasizesthefactthatwewanttowatchthe userworkinginthecontextoftheirenvironment,asopposedtoaninterview,whichcould takeplaceanywhere. Inotherwords,wewanttowatchthemworkingattheirdesk,withtheir tools,astheynormallydo.Thisensuresthatwegetasenseofwhatitisreallylikewhen theyusethetool. HowtoPerformaContextualAnalysis Toperformacontextualanalysis,startbymakingalistoftheuserstomeetandbooking individualmeetingswiththem.Whenyousitdownwitha usertowatchthemwork,keepthefollowingquestionsandideasinmind.* Introduction Someusersmightbeuncomfortablewithsomeoneshowingupattheir deskandaskingquestions.Remembertotakethetimetointroduceyourself,andasktheuseraboutthemselves.Askthemhowlongtheyhavebeendoingtheir job,oraskthemabouttheirfavoritegame.Iftheyhaveaction *Foranin-depthapproachtodoinginterviewsandperformingcontextualanalyses,you canalsoreadStevePortigal’sbookInterviewingUsers. Analysis◾59 figuresortoysontheirdesk,askaboutthem.Evenifyouknowtheuser,questionssuchas thesehelptoeaseintothecontextualanalysis. Itisalsoverycommonforpeopletobelievethattheyarebeingjudged ontheirperformance,orthatthisispartoftheiryearlyreview.Ifthisisthecase,remind themthatnotonlyisitsafetomakemistakes,but thatmakingmistakesmighthelptofindandfixproblemswiththetool. Emphasizethatthetoolisbeingevaluated,notthem. Allofthesethingshelptobreaktheice,whichwillresultintheuserbeingmorelikelyto tellyouhowtheyreallyfeel,insteadofwhattheythinkyouwanttohear. AskaboutGoals Aftertheintroduction,asktheuserwhytheyuseacertaintoolorhowatoolfitsintotheir pipeline,andwhattheyaretryingtoaccomplishwithit. Thiswillhelptounderstandwhattheirgoalsare.Forexample,auserdoesnotthink,“I wanttousethemeshexporter”;theythink,“Iwanttoaddanewobjecttothegame engine.”Thatistheirtruegoal.Focusonunderstandingwhattheirgoalsarewhentheyare usingatool.Askwhyseveraltimesifithelpstogettotherootofthegoal. MasterandApprentice Evenifyouknowthetoolsthattheusersareusing,imaginethatyouaretheapprentice andthattheyarethemaster.Askthemtoshowyouhow tousethetoolfromtheirperspective.Askthemquestions,andspendasmuchtimeasyou canjustlistening.Thiswillgiveyouabetterideaofhowtheyusethetools,whichcan helpyouidentifyhowtomakethembetter. Re-DirectFeatureTalktoGoalTalk Ifissueswithspecificfeaturesstarttodominatethecontextualanalysis,trytore-direct thediscussionbacktogoals.Forexample,iftheuserstartstodescribehowtochangea feature,respondwith,“Howwouldthathelp youaccomplishyourgoal?” Don’tAskLeadingQuestions Itisimportantnottoaskquestionsthatcouldforcetheuserintothinkingthattheymust answeronewayortheother.Questionslike“Doyou thinkthatthisshouldbered?”leadtheusertobelievethatthereisarightorwrong www.allitebooks.com dangerorerror?” 60◾DesigningtheUserExperienceofGameDevelopmentToolsAsktheUsertoTalk OutLoud Astheuserisperformingtheirtask,askthemtotalkoutloudaboutwhattheyare thinking.Userscangetwrappedupinwhattheyaredoingand forgettodothis.Ifthishappens,gentlyremindtheuserbysaying,“Sowhatareyou thinkingrightnow?”or“What’sgoingthroughyourmind atthispoint?”Someuserswillbeuncomfortablewithtalkingoutloud,sousecommon sensetodeterminehowyouneedthemtodothis. ResisttheUrgetoHelp Itmightbedifficult,butitisveryimportanttoresisthelpingtheuserduringthecontextual analysis.Theymighthavedifficultywithatask,ortheymightsaysomethingaboutthe toolthatyouknowiswrong.Ifyoucorrectthem,orinterruptthemandtellthemwhatto do,youmaymissvaluable informationthatcouldexplainwhytheyarehavingtrouble.Thatinformationcanhelpyoufindawaytomakethetoolbetter. Afterthecontextualanalysisisover,youmaychoosetotelltheuser howtodothetask,orcorrecttheirunderstandingofacertainconcept. StartWide,ThenFocusDown Ifyouareworkingonamassive,monolithictool,remember:eventhebiggestcontent creationtoolismadeupofparts.Forexample,afullyfeaturedleveleditorlooksbig,butit isessentiallymadeupofacollectionofsmallertoolsthatcommunicatewitheachother.If theamountofworkisoverwhelming,trytostartwidewiththefirstfewcontextual analyses,andthenfocusdowntoasmallerpartthatyoufeelwillgivethebiggestreturn oninvestment. TeamofTwo Itisalsostronglyrecommendedthatyouperformthecontextualanalysiswithtwopeople. Thishasadualpurpose:Thefirstisthataskingquestions,watchingtheuser,andtaking notesallatonceisverydifficult.Thesecondisthatacontextualinquiryisagreat opportunitytoinvitesomeonewhomightnothavethechancetowatchtheuserswork, suchasastakeholder,oranotherdeveloper.Thiscanhelptogetbuy-infromeveryone involved. WhatCanWeDoaftertheContextualAnalyses? Whenyouaresatisfiedwiththeamountofinformationthatyouhave gatheredthroughcontextualanalyses,gothroughyournotesandmakea Analysis◾61 prioritizedlistofthemostcommongoalssharedbythemostfrequentusers. ingtodotoomuchatonce,oryouareincludinggoalsthatareedgecases. Eitherconcentrateonasmalerpartofthetool,orreevaluatewhoyourtargetusersare. Thesegoalscanbeusedasastartingpointtocreatetaskflows,mentalmodels,personas, scenariostoryboards,andmostimportantly,measurements.Eachofthesetechniquesis describedbelow. CREATETASKFLOWS Whenattemptingtoaccomplishagoal,ausermayexecuteoneormore tasks.Eachtaskismadeupofaseriesofactions.Taskflowsareawayofthinkingabout theflowofthoseactions,whichcanhelpeveryone involvedinthedevelopmentofthetooltohaveasharedvisionofhowtheactionsare connected.Thismakesiteasiertopinpointwhereimprovementisneeded. HowtoCreateaTaskFlow Ataskflowisessentiallyaflowchartthatrepresentshowtheuserperformsatask,with eachnoderepresentinganaction.Foreachactionthatthe usersperform,makeanode.Connectittotheotheractionstocreatea flow.Iftheuserbranchesoff,splitoffanodeandcontinuefromthere(seeFigure4.17). Youcancreateataskflowforeachuserandthenmergethemintoone taskflowthatrepresentstheaverage.Inthecasethatasignificantnumberofusers performdifferentactions,notethepercentageofuserswhotypicallyexecuteoneactionas opposedtotheother,aswellasthefrequencyatwhichtheyperformthataction.Thiswill allowyoutoidentifywhichpartofthetaskflowrepresentsthemajorityoftheusers’time, whichcanhelpyoutoprioritizewhattoworkonfirst. %ofusers,frequency Action Action Action %ofusers,frequency Action Action Action FIGURE4.17Thestructureofataskflow. 62◾DesigningtheUserExperienceofGameDevelopmentToolsFromtheUser’s Perspective Keepinmindthatataskflowisdonefromtheuser’sperspective.Asa Tohelpreinforcethis,thetextineachnodeshouldcontainaverbdescribingtheaction, suchas“selecttheobject”or“exporttotheengine,”insteadof“firearay-cast”or“server parsesXAMLdata.” AddingDetails Duringthecontextualanalysis,youmayhavetakennoteofwheretheuserhadproblems ormademistakes.Youcannotewheretheseissuesoccurin thetaskflow.Foreachissue,alsoconsiderthefollowing: •Isthisanefficiencyproblem?Ifso,whichpartoftheactioncycle couldbetheproblem:thelook,think,oract?Isitmorethanone? •Isthisalearnabilityproblem?Willmakingthefeatureeasiertolearnresultinitbeing lessefficient?Isthataproblem,consideringhow frequentlythefeatureisused? CreatinganOptimizedTaskFlow Inadditiontocreatingataskflowthatrepresentstheaverage,itcouldalsobeusefulto createanoptimaltaskflow.Todothis,youcouldask,“Whichactionscouldberemoved? Whichactionscouldtakelesstime?Which actionsaredifficultfornewuserstounderstand?”Youcouldthencreateanewtaskflow thatrepresentstheoptimalsituation.Thiscanbeagreatwaytosetclearobjectivesfor everyoneinvolvedinthedevelopmentofthetool. DISCOVERTHEUSERS’MENTALMODEL Duringthecontextualanalysis,youcanalsotakesometimetounderstandthementalmodeloftheusers.Afewtechniquescanbeusedto dothis.Thesecanbeusedwithseveralusers,andthentheresultscan becombinedtocreateanaveragementalmodeloftheusersthatcanbe sharedwitheveryoneinvolvedinthedevelopmentofthetool. CardSort Thistechniqueisusefulwhenwedonotknowhowtheuserorganizesdifferenttermsorconceptsintheirmind.Forexample,letusassumethatwearebuildinga toolthatcontainsalistofobjectsthatwecanplaceinalevel. Analysis◾63 Wecanplacemanydifferenttypesofobjects:enemies,weapons,powerups,lights,particleeffects,andtriggerboxes.Inthemindofadeveloper,lightsand enemiesarerelatedbecausetheyarederivedfromthesameclassthatrepresentsthe positionofanobject.Forthisreason,itmightseemlogicaltogroupthemtogether. However,intheuser’smentalmodel,lightshavemoretodowithtriggerboxesand particleeffects,becausetheyareusedtogethertocreatethelightingandambienceofthe level.Theusersdonotassociatelightsandenemies,eventhoughtheyarerelatedinthe code. Hereishowacardsortcanbeusedtodothis: 1.Writeeachtermorconceptonacard. 2.Givethecardstoauserandaskthemtolaythemoutonatablein groupsthatmakesensetothem(seeFigure4.18). 3.Whentheyaredone,askthemwhytheyorganizedthecardstheway thattheydid. 4.Finally,takeaphotoorwritedownhowallthecardswereorganized,andtakenoteof theuser’snamesoyoucanaskfollow-upquestions later. 5.Repeatsteps2through4withanewuser.Dothiswithasmanyusers asyoucan. FIGURE4.18Exampleofacardsort. 64◾DesigningtheUserExperienceofGameDevelopmentToolsOnceyouaredone, comparetheresultsacrossalluserstofindtrendsandcommongroupings.Youcanusea spreadsheettodothis,oryoucanuse web-basedtoolstofacilitatetheprocess.* UserObjects Thetermuserobjectdescribesthementalmodelofaspecifictypeofobjectthattheuser canmanipulate.Theworduserinuserobjectisimportanthere,sincethisisabouthowthe editormaydefinerotationinradianswithanangle-axisVector4.However,theusermay notknow whatanyofthosewordsmean,andtheysimplythinkofrotationasbeingbetween0and 360degrees,onthex-,y-,andz-axes. Foreachuserobject,wetakenoteofhowtheuserperceivesthemby makingalistofattributesandactions:theattributesoftheobject,andtheactionsthatyou performwiththeobject.Ifthediscussionabouttheuserobjectsturnstofeaturesrequests, steertheconversationbacktowhattheuser’sgoalsare,andhowtheycanbetranslated intoattributesandactions. Oncewehaveperformedacontextualanalysiswithafewusers,we canstarttoidentifythemostcommonattributesandactionsrequested bymostusers.Thiswillhelpustofocusontherightfeaturesusedbythemajorityof users. Forexample,ifweworkedwithausertocreateauserobjectforapointlight,theresults mightlooklikeFigure4.19.Thisuser’smentalmodelofapointlightisthatithasthe attributesofcolor,intensity,andrange.TheyalsoconsiderthecolorasbeingsetasHSV (hue,saturation,andvalue),theintensityasanumber(where100isequalto100percent intensity),andtherangeismeasuredinmeters. Object Attributes Actions Pointlight Color(HSV) Movelight Intensity(100=100%) Changethecolor Range(inmeters) Settheintensity Setrange Enableordisable FIGURE4.19Exampleofauserobjectforapointlight. *TwopopularoptionsareOptimalSort(http://www.optimalworkshop.com/ optimalsort.htm)andWebsort(http://dirtarchitecture.wordpress.com/websort/).These servicesalsoprovideanautomatedanalysissuchasmostcommongroupings,trends,and soon. Analysis◾65 %ofusers HSVRGBHEX 1.0 100 0.0 M CM Color 100%Intensity Range FIGURE4.20Choosinghowdataisrepresentedbaseduponthemostcommonattributes oftheuserobjects. Ifyouhavealargenumberofusers,youcouldadduptheresultsoftheuserobjectsto determinethemostcommonattributesandactions,inan efforttobuildasharedmentalmodelforpointlights(seeshadedbarsinFigure4.20). Notethattheuserwhocreatedthepointlightuserobjectearlierpreferred100percentintensitytobethenumber100,whereasthemajority ofuserspreferred1.0.Rememberthatwearenotgoingtomakeeveryone happy.Startwith1.0.Ifitbecomesaproblemtoasignificantnumberofusers,wecan alwaysaddanoptiontoswitchbetween1.0and100. Developerswhoarefamiliarwithobject-orientedprogrammingwill noticethat—althoughtheyarefromtheuser’sperspective—creatinguser objectsisalmostlikedescribingaclass.Therefore,doingthisexercisebeforewritingcode canacceleratedeveloperproductivity,becauseit providesastartingpointthatprovidesthefunctionalitythattheusersareexpecting. ESTABLISHMEASUREMENTS OneofthemostimportantaspectsoftheUser-CenteredDesignprocessismeasuring progress,whichhelpstoensurethatyouaregoingintherightdirection.Theprocess describedinJeffGothelf’sbookLeanUXfocusesondoingsmall,rapiditerationsand measuringKeyPerformanceIndicators, orKPIs.TheISO9241-210specificationprovidesexamplesaboutwhatto measure,andhow.Takingthetimetotrackthesemeasurementsisoneof thebestwaystoensurethatyoureffortsareimprovingtheuserexperience. InChapter1,welearnedthattherearemanydifferentwaystomea- Choosingwhattomeasuredependsonavarietyoffactors,suchasthe goalsoftheusersandthestakeholders,aswellastheexperienceleveloftheusers. 66◾DesigningtheUserExperienceofGameDevelopmentToolsMeasuringEfficiency Ifthegoalsofthestakeholdersarerelatedtoproducingassetsfasterwithfewerpeopleor moreassetswiththesamenumberofpeople,efficiency couldbetherightchoice.Duringthecontextualinquiry,ifalargeproportionoftheusers complainthatthetoolisslow,orthatthenumberofstepsrequiredtocompletespecific tasksistoohigh,thiscouldalsopointtothedecisiontomeasureefficiency. Furthermore,iftheusersaremostlyexpertswhoareaccustomedto complextools,andtheyhaveadeadlineloomingonthehorizon,this couldfurtherconfirmadecisiontomeasureefficiency.Thisdecisioncouldmeanthatthe usersarerequiredtoreceivesometrainingonthechangestotheinterface,andtheymay requiredocumentation.However,theintentionwouldbehigherefficiencyoverall. Tomeasureefficiencywithinthetaskflow,youcanuseastopwatch totimehowlongtheusertakestoperformeithereachtaskorspecific actions.Ensurethattheusersareworkingwiththesameassetsorvalues,ifpossible,so thatthenumbersarecomparable.Thesenumberscanbe averagedacrossmultipleuserstogetabaselinemeasurementthatyoucancompare againsteachtimeyougothroughtheAnalysisphase.Wewill talkmoreaboutthisinChapters6and7. Youmayalsobeabletomeasureefficiencyoftasksandactionsbyusingmetrics. However,itcanbechallengingtomakedecisionsbasedonlyon thesenumbers,becauseitmaynotbepossibletodetermineifthetaskwascompleted successfully,andbecausetheusercouldbeawayfromtheir deskinthemiddleofanaction,inflatingtheresults.Asalways,acombinationofmetrics andwatchingtheusersworkcangivethebestresults. MeasuringLearnability Ifthegoalsofthestakeholdersaretorampupnewusersfaster,orto reducesupportcosts(suchasthesalariesofpeoplewritingthedocumentationorthetime spentbyexpertuserstrainingusersandansweringtheirquestions),learnabilitymaybea bettermeasurement.Additionally,ifyounoticethatduringthecontextualinquirytheusers havedifficultyrememberingallofthevariousfunctionswithinatool,ortheymakemany mistakesthatcouldpotentiallybeavoidedbyunderstandinghowthetool works,thiscouldconfirmadecisiontomeasurelearnability. Inaddition,ifthecontentcreatorsarelessexperienced,andtheteamisstillrampingupto fullproductionmode,leaningmoretowardlearnabilityAnalysis◾67 abilitycouldhaveanadverseeffectonefficiency,andtheintentionistocompensatefor thatbymakingthetoolseasiertolearn. Aswediscoveredearlierinthechapter,atoolisconsideredtohavegoodlearnabilityifa newuserunfamiliarwiththetoolcanaccomplishataskonthefirstattempt.Thiscanbe measuredbyusingastopwatchtotime howlongittakestheusertocompleteatasksuccessfully,withspecificassetsorvalues. MeasuringBoth Finally,itispossibletodesignatoolwherethemajorityofthefeaturesarebotheasyto learnandefficienttouse.Thisoftentakesmuchlongertomeasureanddesigncompared tosimplychoosingoneortheother, becauseefficiencyandlearnabilitycansometimesbeinoppositionwith eachother.Asaresult,youmayhavetocompromise,orchoosetoimprovebothforonly themostfrequentlyusedfeaturesinyourtool. Thereisagoodreasonwhyveryfewtoolsarebothefficientandlearnable:findingabalancebetweenthetwoisoneofthebiggestchallengesinuserexperience design. ADVANCEDTECHNIQUES Personas Ifyouperformacontextualanalysisonalargenumberofusersandit isdifficulttocommunicatethegoalsandmentalmodelsforallofthoseusers,youhave theoptionofcreatingpersonas.Personasarearchetypesofpeoplewhorepresentthe majorityofthepeoplethatusethetool.Notonlydoesitmakeiteasierforyoutoseethe bigpictureofwhomyouarebuildingfor,butitalsohelpstocommunicatewhothese peopleare. HowtoCreatePersonas Hereisaverybasicapproachtocreatingapersona:studyyourcontextualanalysisnotesandtrytoidentifythemostcommongoalsandmentalmodels.Group relatedgoalsandmentalmodelstogether.Eachgroupwill becomeapersona.Youmaychoosetocreateaseparatepersonaperjobrole,suchasone forleveldesignersandoneforanimators,orbemorespecific,suchasseparatepersonas forAIprogrammersandphysicsprogrammers.* *Formoreoncreatingpersonas,youcanreadChapter5ofCooper,Reinmann,and Cronin’sbookAboutFace3,orAdlinandPruitt’sTheEssentialPersonaLifecycle. 68◾DesigningtheUserExperienceofGameDevelopmentToolsGoals Goals Nullamquis Morbimetussapien Dapibusaugue Blanditeget Vitaeblanditjusto Ullamcorpertinci Donecmalesuad MentalModels MentalModels Pellentesquequis Ellentesqueornare Nibhindignissim Patrick Tinciduntfelis Rochelle LevelDesigner Atultricesaliquam Animator Fasellusimperdiet FIGURE4.21Examplepersonas. Itisalsoimportanttogiveeachpersonaarealisticnameandanatural-lookingpicture.For example,givingapersonathename“Moethe Modeler”andusingacartooncharacterasaphotowillresultinpeople nottakingthepersonasseriously.* Personascreatedtorepresentusersofagamedevelopmenttoolmight looksomethinglikeFigure4.21. ScenarioStoryboards Tocreateanevendeeperunderstandingofcontext,youcanalsochoose tocreatescenariostoryboards.Scenariostoryboardsresemblethestoryboardsweusewhenplanningagamecinematic(seeFigure4.22).The FIGURE4.22Examplescenariostoryboard. *Youcanauto-generaterealisticnamesandpicturesfromwebsiteslike http://www.randomuser. me,oryoucanuseamorecompletepersonacreationsolutionwithtoolssuchas http://www. usabilitytools.com/features-benefits/persona-creator. Analysis◾69 purposeofascenarioistoexplorehowthetoolisusedinavarietyofcontexts.Theyare veryusefulforensuringthateveryoneinvolvedinthedevelopmentofthetoolunderstands andagreesonhowthetoolissupposedtobeused. HowtoCreateScenarioStoryboards Tocreateascenariostoryboard,firstchooseoneormoreusergoalsor tasks.Ifyouhavealsocreatedpersonas,youcanchoosetofeaturetheminthescenario storyboard.Eachframeinthestoryboarddepictsanaction performedbythepersonaswhiletheyareusingthetool,anditendsinthesuccessful completionoftheirtaskorgoals.* Scenariostoryboardsdonotincludereferencestotheuserinterface. Instead,theyshowhowthepersonaswouldinteractwiththeuserobjects. influenceusintoassumingthattheinterfacemustfunctionorlookacertainway.This enablesustofocusonfindingthebestpossibledesignsolutiontoachievetheusers’goals. Thequalityofthedrawingsisnotimportant.However,ifyouneedsome assistanceproducingstoryboards,manyweb-basedtoolsareavailable.† WRAPPINGUP Inthischapter,welearnedabouttheAnalysisphaseoftheUser-CenteredDesignprocess. Wediscussedthevalueofwatchinguserswork,thelimitationsofmetricsandfocus groups,andtheimportanceofthinkingin termsoftheproblemsthatwearetryingtosolve(notthefeatureswewanttoimplement). Wealsolearnedabouthuman–computerinteraction,the actioncycle,itseffectsonefficiencyandlearnability,aswellastheconceptoftheuser’s mentalmodel.Finally,welearnedavarietyoftechniquestobeusedduringtheAnalysis phase,suchasinterviewingstakeholders,performingcontextualanalyses,creatingtask flows,andestablishingmeasurements. Inthenextchapter,wewilldiscussconceptsandtechniquestobeused duringtheDesignphaseoftheUser-CenteredDesignprocess. *Formoreoncreatingscenarios,youcanalsoreadChapter6ofCooper,Reinmann,and Cronin’sbookAboutFace3. †StoryboardThat(http:/www.storyboardthat.com/)andAmazonStoryteller(http:/ studios.amazon. com/storyteller)aretwopopularexamples. Chapter5 Design WHATWILLWELEARNINTHISCHAPTER? Concepts •Understandinghowtheeyesandthebrainworktogether •Howavisuallanguagecanhelphumansandcomputerscommunicate •Theimportanceofusinginteractionpatterns Techniques •Howhierarchycanguidetheuserthroughtheinterface •Makingtheinterfaceeasiertounderstandwithnaturalmapping •Howtouserepresentationtohelptheuserworkwithandunderstandcomplexdata •Usingfeed-forwardtohelptheuserlearnwhatanactionwilldo, beforetheycommittoit •Howtousegroupingtoassociateinformationinawaythatthe usersexpect •Howtousechunkingtomakeiteasierfortheusertoprocessmore informationatonce •Howtouseexcisetomaketheuserworkfaster(orslower,ifnecessary) •Usingprogressivedisclosuretodesignaninterfacethatissimpleforbeginnersand powerfulforexperts 71 72◾DesigningtheUserExperienceofGameDevelopmentToolsHOWTHEBRAIN ANDTHEEYESWORKTOGETHER PreviousgenerationsoftheSonyPlayStationhaveincludedunique microprocessors,suchastheEmotionEngineandtheCell.Gettingthe bestperformanceoutofthesechipsrequiredspecializedknowledgeand programmingskills.Eachchiphaditsownquirksandidiosyncrasies. Expectingaprogrammertogetthebestperformanceoutofthesechips withoutfirstunderstandingtheirarchitecturewouldbeunrealistic. Designingtoolsforpeopleisnodifferent.Thebrainisamicroprocessorinitsownright andhasstrengthsandweaknesses.Justasunderstandingthearchitectureofachipallows ustobebetterconsoledevelopers,understandinghowthebrainworkscanhelpusdesign toolswithabetteruserexperience. OurBrainsDecideWhatWeSee Astoolsdevelopers,wemayhavehadtheexperienceofaddinganewbuttontoaninterface,onlytorealizethatveryfewusersnoticeit.Alltheworkthatwasput intothefeatureislostsincenooneknowsthatitisthere. Youmayhaveaskedyourself,“Whydon’ttheusersseethatbutton?” Itmaycomeasasurprisetolearnthatwedonotalwaysseewhatwe thinkwedo.Ourbrainfillsintheblanks.Agreatexampleofthisisourblindspot.Onthe insideofoureyearerodsandcones,responsiblefordetectingcolorsandcontrast. However,atthepointwheretheopticnerveconnectstotheeyeball,therearenorodsand cones.Asaresult,wecannotseeinthatspot. Totestthis,holdthisbookawayfromyourfaceandcoveryourlefteye. Now,lookatthecrossinFigure5.1.Slowlymovethebookclosertoyourfaceuntilthe youreyedoesnothaveanyrodsorconeswherethecircleshouldbe,so yourbrainfillsinthemissinginformation. Afterexperiencingthis,youcanbegintounderstandhowitispossible thatusersdonotseethenewbuttonthatyouadded. FIGURE5.1Testingyourblindspot. Design◾73 FIGURE5.2Examplesofhowourbrainsareoptimizedtointerpretspecificpatterns. OurBrainsAreOptimizedforSpecificPatterns Figure5.2containsaseriesofshapes.Mostpeopleseeatriangleontheleft,eventhough thereisnotriangle,onlythreepies.Inthemiddle,werecognizetheshapeasacircle,even thoughthelineisbroken.Finally,ontheright,oureyeisimmediatelyattractedtothe crossthatlooksdifferent.* Ourbrainsarehardwiredtointerpretthesespecificvisualpatterns veryquickly,whichisprobablyaresultofnaturalselection.Considertheimageinthe middleofFigure5.2:ifthecircleisasaber-toothedtigerandthemissingpartsaretrees thatitishidingbehind,theabilitytorecognizetheshape—despitethemissingparts—may havekeptourancestorsalive. VISUALLANGUAGE Itturnsoutthatifwewanttounderstandvisuallanguage,videogames providesomeofthebestexamples.Thevisuallanguageforagameismadeofmultiple elements,andtwoofthemostimportantareshapeandcolor. AtGDC2008,Valve’sJasonMitchellpresentedatalk†aboutthedistinctvisuallanguageofTeamFortress2.Asthegameisamultiplayerfirst-personshooter, identifyingtheclassoftheenemyyouarefightingfromfarawayisveryimportant,andso eachclasshasauniqueshape,orsilhouette(seethetopofFigure5.3).Findingtheenemy baseisalsoextremelyimportant,andsoeachteam’sbasehasadistinctivearchitectural style:warmcolorsandangularshapesfortheREDteamversuscoolcolorsand orthogonalshapesfortheBLUteam(seethebottomofFigure5.3).Once youlearnthislanguage,youcanseewhichclassofenemiesyouarefacingandwhichbase youarein,ataglance. *TheseareallexamplesfromGestaltpsychology,whichyoucanreadmoreabouthere: http:// en.wikipedia.org/wiki/Gestalt_psychology. †Youcanseetheentirepresentationhere:http://www.valvesoftware.com/ publications/2008/ GDC2008_StylizationWithAPurpose_TF2.pdf. 74◾DesigningtheUserExperienceofGameDevelopmentToolsFIGURE5.3Thevisual languageofTeamFortress2.©ValveCorporation. LearningtheLanguage Asthegamerlearnshowtocommunicatewiththevisuallanguage,it becomesaconversation:thescreenshowsthestatusofthegame,andthegamerresponds withthecontroller.Thegamermayalsolearnthelanguagefasterifthesameelementsare seeninothergamesofthesamegenre.Forexample,inthevastmajorityoffirst-person shootergames,whenweseeanarrowshapethatiscoloredredontheedgeofthescreen, weknowthatsomeoneisattackingusfromthatangle,andweinstinctivelyrespondtothe threatwiththecontroller. Thesamecanbesaidforgamedevelopmenttools.Ifweusefamiliar andconsistentshapesandcolors,theuserspendslesstimelearningthetool,andtheywill knowwhattodoataglance. FamiliarIcons Somepeoplebelievethatthesaveiconisoutdatedandshouldbereplaced. Thetypicalsaveiconrepresentsa3.5″diskette,whichmostpeoplehavenotusedtosavea filesincethe1990s(seetheleftsideofFigure5.4).Recently,FIGURE5.4Familiaricons arerecognizedandinterpretedmorequicklythannewdesignsor“ideal”representations. Design◾75 someofthebestdesignersintheworldtriedtodesignareplacementbutwereunableto reachaconsensus.*Despitebeingoutofdate,thesaveiconprevailsforoneimportant reason:becauseourbrainsarebetteratrecognizingafamiliarshapethaninterpretinga newone,evenifitisamoreappropriaterepresentation. Considertheiconographyfor“call”onasmartphoneor“traincrossing” onastreetsign(seethemiddleandrightsideofFigure5.4,respectively). Wedonotseerotarytelephonereceiversorsteamenginesveryoftenthesedays,yettheir silhouettesareiconic—pardonthepun—andcontinuetobeusedbecausetheyarethe mostfamiliarshapesforthoseconcepts. familiarityoveranewdesign.Althoughtheshapeofaniconmayseem outofdate,itismoreimportantthattheusercanrecognizeitasopposedtohavingthe perfectrepresentation. ColorConsistency UsersofMicrosoftVisualStudio—oranyothermodernIDE—areaccustomedtotheconceptofcolorsyntax:specifickeywordsusethesamecolorconsistently, makingiteasytopickoutvariables,functions,andcomments.Thereisnodenyingthat usingcolortocommunicateinthisway isanextremelyusefultool:forexample,colormakesiteasiertofixanunterminated string.Whileweshouldtakeadvantageofusingcolorto communicatewiththeuser,weneedtoensurethatourtoolsusecolor consistently,andthatthecolorsmatchexistingstandards. Forexample,imagineifVisualStudiohadinconsistentcolorsyntax. Insomecases,variableswouldbeblue,andinothercases,theywouldbegreen.This wouldfrustrateanyprogrammer.However,manygamedevelopmenttoolsdonotuse colorconsistently.Inonewindow,anobjectmaybepurple,whileinanotherwindow,it maybeorange. InMicrosoftExcel,whenthevalueofacellisnegative,itiscolored redtoindicateaproblem.Thisisbecauseaccountantswanttoseewheremoneyisbeing lost.However,imagineifthatcolorwasgreen.Allaroundtheworld,thecolorsgreen, yellow,andredinsoftwareinterfacesare acceptedtorepresentOK,caution,anddanger,†soaproblemrepresentedbythecolor greenwouldseemunnatural.Unfortunately,somegame *Youcanseethatdiscussionhere:http://branch.com/b/redesigning-the-save-symbollet-s-do-this. †ThesestandardswereoriginallyrecommendedbytheViennaConventiononRoadSigns andSignals.Readmorehere:http://en.wikipedia.org/wiki/ Convention_on_Road_Signs_and_Signals. 76◾DesigningtheUserExperienceofGameDevelopmentToolsMorecontrast Lesscontrast FIGURE5.5Oureyesareabletoreadtextwithstrongercontrastmorequicklyand accurately. developmenttoolsusebrightredinsituationswherethereisnoproblem,leadingto confusionandconcernamongtheusers. Todesignaninterfacewithabetteruserexperience,pickcolorsthatareconsistentand matchexistingstandards.* Althoughourbrainworkshardtocompensateforthelimitationsofour eyes,therearesomethingsthatitsimplycannotdo.Toensurethattheuserisabletosee thevisuallanguagethatwehavedesigned,wemustalsoconsidertheabilityofoureyesto seecontrast. Whentheshadefortextandthebackgroundaretooclosetoeach other,oureyeshavedifficultymakingouttheshapes(seetherightsideofFigure5.5). Fortunately,therearestandardsforcontrastthatwecanfollowandtoolswecanuseto ensuremaximumlegibility.† ANoteonDarkInterfaces Thepopularityofdarkinterfaceshasincreasedinthelastfewyears,especiallyinthecase ofcontentcreationtools.OneofthefirsttoolstoadoptadarkinterfacewasAutodesk Combustion.Othercontentcreationtools startedincludinga“darkmode,”suchasAdobePhotoshopandAutodesk 3dsmax.WhenAppleannouncedadarkmodeforOSXYosemiteat WWDC2014,itpromptedcheersfromthecrowd.Now,darkinterfaces canevenbefoundintoolsthatarenotusedexclusivelybyartists,suchasUnityand MicrosoftVisualStudio. Thefactisthatoureyeshavemoredifficultyseeingcontrastwhenlighttextisusedona darkbackground.Toexperiencethiseffect,tryusingatoolwithaninterfacethatcanbe switchedbetweendarkandlightonalaptopoutsideonasunnyday,suchasoneofthe manytoolsintheAdobesuite,ortheUnitygameengine.Whenyouswitchbetweenthe darkandlightinterfaces,youwillnoticethatyoucanseemoredetailsonthelight interface. *Microsoft’srecommendationsforcolorcanbefoundhere:http://msdn.microsoft.com/ en-us/ library/windows/desktop/dn742482.asp. †HereisalistiftoolsfromtheW3Cwebsitetoverifythatcontraststandardsarebeing respected:http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audiocontrast-contrast. html#visual-audio-contrast-contrast-resources-head. Design◾77 However,thisshouldnotleadustoconcludethatlightinterfacesarebetter.Todothis wouldbetoforgettheimportanceofwatchinguserswork. Weneedtounderstandcontextinwhichthedarkinterfacewasdeveloped inthefirstplace:Combustionisatoolforfilmcompositing,typicallyusedinadark editingroomwithnowindows.Theusersfoundthatalighter context:workingindarkeditingroomwithnowindows. Thepointisthatlightanddarkinterfaceseachhavetheirplace,andthebestchoice dependsonthecontextoftheenvironmentoftheusers.Whenindoubt,givetheusersa choiceofoneortheother. INTERACTIONPATTERNS Oneofthefirstprofessionstounderstandthesignificanceofhumans interactingwithpatternswasarchitecture.*Throughourlifeexperience,wehavelearned thataseriesofstackedcubesisaflightofstairsthatcanbeclimbed,andarectanglewith ahandleisadoorthatcanbeopened.Justlikeavisuallanguage,whenweseethese shapes,ourbrainrecognizesthepatternandweknowwhattodo. Thesamegoesforuserinterfaces.Forexample,throughexperience,we havelearnedthedifferencebetweenradiobuttonsandcheckboxes:one letstheuserchooseonlyoneoptionatatime,whiletheotherletstheuserchoosemore thanoneoptionatonce(seeFigure5.6).Whenweseethem, weknowhowtheyaresupposedtoworkinstantly. Itmaybetemptingtocreatenewanduniqueuserinterfaceelementsor behaviorsforexistingcontrols.Thismightbebecausewefeelthatweknowabetterway fortheusertomanipulatethedata,oritlookslikeaninterestingchalenge.Wemustdo ourbesttoresistthistemptation.Notonlycoulditresultindecreasedlearnabilityand efficiency,butitwillalsotakemoretimetocreateandmaintainthecodeforacontrolthat doesnotalreadyexist. FIGURE5.6Theimportanceoffollowinginteractionguidelinesandpatterns:themajority ofusershavelearnedhowaradiobuttonworks(left),andhowitisdifferentfroma checkbox(right). *ThebookAPatternLanguagebyAlexander,Ishikawa,Silverstein,etal.isgenerally regardedasoneofthebestbooksonthepatternsofarchitectureandurbandesign. 78◾DesigningtheUserExperienceofGameDevelopmentToolsGeneral Modeling Animation FIGURE5.7Changingthecurrentview:anon-standardpattern(left)comparedtoa standardpattern(right). Forexample,ifyourtoolrequiresacontroltoswitchbetweendifferentviews,itmightbe appealingtodevelopadialthattheusercanturntosetthecurrentview.Whileitistrue thatusingadialtoswitchbetweenviewsismorecommonforphysicaldevices,amore standardizedpatternforadesktopsoftware-basedcontentcreationtoolwouldbetabs(see Figure5.7).Theyarecommoninsoftwareuserinterfaces,andmostusersarefamiliarwith them.* Whileitistruethatthereareraretimeswheretheadvantagesofanewpatternoutweigh thedisadvantages,weshouldstriveforfamiliarityasmuchaspossible.Thismeans followingexistinginteractionpatternsguidelines,suchasthosecreatedandmaintainedby MicrosoftandApple. Imaginethatweintroduceanewinteractionpatterntoourtool.Thispatternisunfamiliar toalloftheusersandmustbelearned.Whentheuserseesthepattern,theyspendmore timeinthethinkandlookphasesoftheactioncycle.Ifthenewpatterndoesnotimprove theefficiencyofthetool,thismeansthatthenewpatternhasactualymadetheusabilityof ourtoolworse! Establishedinteractionpatternsdonothavetobelearned.Weknow howtheyworkfromexperience.Theyhavebeenstreamlinedovertime. Ifusedcorrectly,userswilllearnthetoolfaster(becausetheyarefamiliarwiththe interface)andbemoreefficient(becausetheycanjumpbackandforthbetweendifferent toolswithouthavingtoadjustthewaytheywork). WhoEstablishesInteractionPatterns? Aninteractionpatternbecomesastandardbecauseitworkswell.Justasourbrain’sability toseevisualpatternsevolvedtokeepusfrombeing *Thisisalsodependentontheplatform.Forexample,totoggleavalueonandoff,a switchcontrolismorecommonintabletsandsmartphones,whileacheckboxismore commonindesktopsoftwareapplications. Design◾79 eatenbyasaber-toothedtiger,interactionpatternssurvivebecausetheyhaveproventobe someofthemosteffectiveandwell-establishedsolutionstoagivenproblemwithina specificcontext. Itisunusualfornewinteractionpatternstobeestablishedbyanyone otherthanbigcompaniessuchasApple,Microsoft,andAdobe.*Because theyhavesuchalargemarketshare,manypeopleareexposedtotheir productsandbecomefamiliarwiththeirinteractionpatterns.† TherearetimeswhenApple,Adobe,andMicrosoftdeviateslightlyfrom theirownguidelines.However,thevastmajorityoftheirapplicationsfollowthe guidelinesandusethesamepatternsconsistently.Weshoulddo thesame.Iftheinteractionpatternsarestandardized,userscanfocusoncreatingcontent, insteadoflearninghowtousetheinterface. HowtoChoosetheRightInteractionPattern IfyouhavereadthebooksDesignPatterns:ElementsofReusableObject-Oriented SoftwarebyGamma,Helm,Johnson,andVlissidesorCodeCompletebySteve McConnell,youknowthatdesignpatternsareasolutiontoaproblemwithinagiven oneisbesttouse. Forexample,whentheproblemischoosingoneuniqueoptionfroma list,andthecontextisthattherearebetweentwoandsevenoptions,theMicrosoft guidelinessuggestusingradiobuttons.However,inthecontextthattherearemorethan sevenoptionsandnotalotofspacetodisplaythem,adrop-downissuggested.‡(See Figure5.8.) Manyguidelinesderivefromthisformattohelpyouchoosetheright interactionpattern.Whenindoubt,implementitandwatchtheusers workwithit. *TheguidelinesforMicrosoftWindowsandAppleOSXcanbefoundbelow.Tothebest ofmyknowledge,thedesignguidelinesforAdobeproductsarenotpubliclyavailable. http://msdn.microsoft.com/library/windows/desktop/dn688964.aspx https://developer.apple.com/library/mac/documentation/UserExperience/Conceptual/ AppleHIGuidelines/Intro/Intro.html †Insomeways,Apple’skeynotepresentations—watchedbymillionsofpeopleallover theworld— areatrainingsessiononhowtousetheirproducts.Thiscanhaveahugeimpactonthe perceptionofhoweasytolearntheirproductsare! ‡Seetheguidelinesonradiobuttonshere:http://msdn.microsoft.com/en-us/library/ windows/ desktop/dn742436%28v=vs.85%29.aspx. 80◾DesigningtheUserExperienceofGameDevelopmentTools1 1 3 2 2 1 3 3 2 4 4 3 5 4 6 6 56 7 7 7 8 8 FIGURE5.8Anexampleofhowguidelineshelptodeterminewhentouseradiobuttons versusadrop-downmenu. WhattoDoifaPatternDoesNotExistintheGuidelines Theremaybetimeswhentheuserinterfacecontrolthatyouneeddoes notexistintheMicrosoftorAppleguidelines.Inthiscase,thenextbestthingtodoisto findasmanyexamplesofothersimilarcontrolsinothersoftware,andlookforsimilarities inthelookandfunctionality. Forexample,MicrosoftandApplemaynothaveguidelinesforacontrol thatresizesatwo-dimensionalobject.However,ifyoucomparealmost anyimagemanipulationsoftware(especiallythosemadebyAdobe),you willseethatarectanglearoundoneormoreselectedobjects,withhandlesatthefour cornersthatyoucandragtoresize,isacommonpatternthatwillbefamiliartomostusers. HIERARCHY Intheworldofgraphicdesign,hierarchycanbeusedtodrawtheuser’sattentiontoa specificpartoftheinterface.Thiscanbeusefulifyoumustshowalotofinformationin yourinterface,butyouwanttheusertofocusonaspecificpartthatwillhelpthemto accomplishtheirgoals. HowCanHierarchyImproveUsability? Efficiency Byusinghierarchy,wecaninfluencetheuser’sgaze.Thiscanreducetheamountoftime spentinthelookphaseoftheactioncyclewhiletheuserisscanningtheinterfacetofind whattheyarelookingfor. Learnability Wecanusehierarchytoattracttheuser’seyetospecificpartsoftheinterface,makingit easierforbeginnerstofindthebasicfunctionstheyarelookingforwhenseeingthetool forthefirsttime. FIGURE5.9Exampleofhierarchy,fromlefttoright:position,thickness,size,and contrast. UnderstandingHierarchy Likeavisuallanguage,hierarchyusesshapeandcolortoinfluencewheretheuserlooks. Hierarchyisdefinedbyfourproperties:position,thickness,size,andcontrast(seeFigure 5.9,fromlefttoright). Position Objectsthatareplacedclosetoeachotherareconsideredgrouped.Thisalsomeansthat objectswithalotofwhitespacearoundthemwillstandout,attractingtheuser’sattention firstrelativetotheotherobjects. Thickness Thickerobjectsareoftenseenashavingmoreimportanceandwilltypicallybenoticedbeforethinnerobjects.Agoodexampleofthisisboldtextversusregular text. Size Asingleobjectthatisadifferentsizecomparedtotheotherobjectsarounditislikelyto benoticedfirst.Thefineprintinanadvertisementisagoodexampleofthis.The advertiserswantyoutonoticethetextintheadfirst,notthefineprint! Contrast Wetendtonoticeobjectsthathavemorecontrastfirstandthenother objectswithlesscontrastafter.Infact,newbornbabiesseeextremecontrastbeforethey canseesubtlecontrast,whichiswhymanybabytoyshavehighlycontrastedshapesand colors. WhatAreExamplesofPatternsThatUseHierarchy? TheGoogleweathercardisanexcellentexampleofhierarchy(see Figure5.10).Iftheuser’sgoalistoseethecurrenttemperature,thedesignisveryefficient atusingallfourelementsofhierarchytodrawtheuser’s 82◾DesigningtheUserExperienceofGameDevelopmentToolsFIGURE5.10The GoogleWeathercarduseshierarchytohelptheuserfocusonthemostimportant informationfirst.GoogleandtheGooglelogoareregisteredtrademarksofGoogleInc., usedwithpermission. attentiontothatinformation.Thecurrenttemperatureisbyitself,sur-roundedbywhite space(position),itisbiggerandbolderthantheothertext(sizeandthickness),anditis 100percentblackon100percentwhite(contrast).Allofthesepropertiesincombination influenceoureyestolookatthecurrenttemperaturefirstandthenscantherestofthe interfaceafter. AsyoucanseeinFigure5.11,newe-mailsinGmailfeaturetwopropertiesofhierarchy:theyarebold(thickness)andarewritteninblacktextonFIGURE5.11 TheGmailinboxuseshierarchytomakeunreadmessagesstandout.Googleandthe GooglelogoareregisteredtrademarksofGoogleInc.,usedwithpermission. Design◾83 awhitebackground(contrast).Bycomparison,reade-mailsarenotboldandarewritten inblacktextonagraybackground.Allofthisdrawsyoureyetothenewe-mails. CONSTRAINTS Constraintsimposelimitsonwhattheusercando.Theirpurposeisto protecttheuserfrommakingmistakes,allowingthemtofocusontheir workwithouthavingtoworryaboutthelimitations. Efficiency Withoutconstraints,theusermaytrytodosomethingthatwillresultinanerror.Because ofthis,theywillspendalotoftimeinthethinkphasetryingtounderstandwhysomething isnotworking.Furthermore,limitingtheuser’schoicesmeanstheyspendlesstimeinthe lookphaseconsideringoptionsthatarenotallowedanyway. Learnability Limitingtheuser’soptionsalsomeansthattheyhavelesstolearn.Theconstraintsmakeit clearwhatcanandcannotbedone. UnderstandingConstraints Whenwearedeeplyinvolvedinthecreationofatool,wesometimesforgetthatnotall usersareawareofthesystem’stechnicallimitations.Userswilltrythingsthatwenever thoughtpossible. Whenusersmakemistakes,notonlydoesitaffecttheirefficiency,but itcanalsomakethemfeelfrustratedandhesitanttoexploretherestofthetool. Furthermore,constraintscanprotectbadassetsfrombeingshared withtherestoftheproductionteam—whichaffectseveryone’sproductivity.Goodconstraintsmaketheusersmoreconfidentaboutusingthetool,sotheycan focusoncreatingcontent. WhatAreGoodConstraints? Someconstraintshavethebestintentionstoprotecttheuserbutstill allowthemtomakemistakes.Forexample,USBcablesuseasmallpiece ofplastictopreventtheuserfrompluggingitinthewrongway(seetheleftsideofFigure 5.12).However,thismerelyactsasaguide,anditisnotguaranteedtowork.Asyoumay haveexperienced,sometimesittakes multipleattemptsofpluggingandflippingtoinsertaUSBcableproperly. 84◾DesigningtheUserExperienceofGameDevelopmentToolsFIGURE5.12The USBcableandLightningcabledemonstratedifferenttypesofconstraints. Thereareotherexampleslikethis,suchasjumpercablesorcomponent Oneofthebestexamplesofacablethattrulyprotectstheuserfrom makingamistakeistheAppleLightningcable(seetherightsideof Figure5.12).UnliketheUSBcabledesign,thereisnowrongwaytoplugitin.Youplugit inwhicheverwayyouwant.Evenbetter,theedgesarerounded,helpingtoguidetheplug intothechargingport.Constraintsthatprotecttheuserwithouthavingtothinkmakefora betteruserexperience. WhatAreExamplesofPatternsThatUseConstraints? Averybasicconstraintcouldbetheuseofasliderinsteadofanumericinputboxwhen thevaluehasaminimumandmaximumvalue(seeFigure5.13). Byaddingaslider,itisimpossiblefortheusertoenteranincorrectvalue. Furthermore,thesliderisafamiliarinteractionpattern,andusersexpectittolimitthe rangeofvaluesthatcanbeentered,*asopposedtoanumericinputboxthatsometimes rejectsorreadjuststhevalue. 0 –7+ + – 0 – 10 12+ + – 10– 5 5 + + – 5 – FIGURE5.13Slidershaveclearconstraints(left),asopposedtonumericinputboxeswith minimumandmaximumvalues(right). us/library/ windows/desktop/bb226811%28v=vs.85%29.aspx. Design◾85 FIGURE5.14TheInspectorintheUnityEngineusesconstraintstoensurethatascript canonlybeaddedwhereitisallowed. Anotherexampleofconstraints:limitingwhereanobjectcanbe draggedanddropped.Forexample,intheUnitygameengine,youcan onlydraganddropascriptontheScriptinputofaGameObject(seethetopofFigure 5.14).Thismakesitimpossibleforausertoinsertascriptfileinthewrongplace,suchas atexturemapinput(seethebottomof Figure5.14).* Aninterfacewithgoodnaturalmappingmeansthattheplacementofthe controlsmatchestheactionsthattheyperform.Forexample,buttonsto moveobjectsleftandrightareplacedtotheleftandrightofeachother,insteadoftopand bottom. *YoucanfindguidelinesfordraganddropinOSXhere:https://developer.apple.com/ library/ mac/documentation/userexperience/conceptual/applehiguidelines/ TechnologyGuidelines/ TechnologyGuidelines.html#//apple_ref/doc/uid/TP30000355-SW9. 86◾DesigningtheUserExperienceofGameDevelopmentToolsHowCanNatural MappingImproveUsability? Efficiency Badnaturalmappingcanaffectallthreephasesoftheactioncycle.Theusermustspend moretimeinthelookphasetoreadthespecifictextonbuttonlabels,insteadofquickly glancingattheiroverallposition.Theusermustalsospendmoretimeinthethinkphase, consideringwhatthelabelofeachbuttonmeans.Finally,itisalsopossiblethattheact phasecouldbedelayedastheusertriesdifferentcontrolsuntiltheygettherightone,due tothepositionofthecontrolsfeelingunnatural. Learnability Naturalmappingcanalsoimprovelearnability.Ifcontrolsarelaidoutinawaythat matchestheactionthattheyperform,aswellastheuser’smentalmodel,theuserwill understandhowthecontrolsworkmuchfaster.* UnderstandingNaturalMapping Acommonkeyboardconfigurationforfirst-personshootergamesis WASD:pressingthe“w”keymovesyouforward,“s”movesyouback,and the“a”and“d”keysstrafeleftandright(seetheleftsideofFigure5.15). Becausethemovementisrelativetothepositionofthekeys,thisisanexampleofgood naturalmapping. Instead,imagineifthe“w”and“s”keysstrafeleftandright,andthe“a” and“d”keysmoveforwardandbackward(seetherightsideofFigure5.15). Whenyouropponentfiresarocketatyou,andyoupressthe“a”keyexpectingtogoleft, insteadyouwalkrightintoitandexplodeintoaludicrousamountofgiblets.Youcan imaginehowfrustratingthatwouldbe! W W A S D A S D FIGURE5.15ThestandardWASDkeyconfigurationforfirst-personshooters. *Furthermore,whenitcomestomemorability—theabilitytorememberhowtousethe toolafternothavinguseditforawhile—userstendtorememberthegenerallocationofa controlfirst(leftside,rightside,ormiddleofthetoolbar),andthenthelabel/icon associatedwiththatcontrol. Design◾87 Movingforwardwiththe“a”keydoesnotfeelnatural,becauseitisto theleftoftheotherkeys.Thiswouldbeanexampleofbadnaturalmapping. WhatAreExamplesofPatternsThatUseNaturalMapping? TheColorSetEditorwindowinAutodeskMayashowsanexampleofgood naturalmapping.The“MoveUp”and“MoveDown”buttonsarepositioned relativetotheactionsthattheyperform(seetheleftsideofFigure5.16). AnothergoodexampleistheConnectionEditorwindow.Allofthe buttonsthatarerelatedtotheleftarepositionedontheleft,andallofthebuttonsthatare relatedtotherightarepositionedontheright(seethemiddleofFigure5.16). However,therearetimeswhenlimitedspacecanleadtocompromises tonaturalmapping,ascanbeseenintheLayersEditor.Thebuttonsformovinglayersup anddownareplacedsidebyside(seetherightsideofFigure5.16).Thisisnotideal naturalmapping. REPRESENTATION Representationisatechniquethatcanbeusedtohelpusersmakequickerdecisions withoutincreasingtimespentinthethinkphaseoftheactioncycle(suchasdoing calculationsintheirheads).Itisoftenmostusefulwhentheuserinterfacedoesnotmatch theuser’smentalmodel. HowCanRepresentationImproveUsability? Efficiency Iftheuserhastodocalculationsintheirhead,theywillspendalotoftimeinthethink phase.Bypresentingcomplexconceptsinasimpleway,theycanspendmoretimeinthe actphase,increasingtheirefficiency. Learnability touseit.Byusingrepresentationtomatchtheuser’smentalmodel,theinterfacemore closelyresembleshowtheusersthink,making iteasiertolearn. UnderstandingRepresentation TheNumbersGame Tounderstandhowwecanuserepresentation,wewillplayagame.You canalsoplaythiswithafriendtoexplaintheconceptofrepresentation. 88◾DesigningtheUserExperienceofGameDevelopmentToolseprinted hotsr creens utodesks face.A nter ayai utodeskM heAft ditorso ariouse crossv appinganc. aturalmfnutodesk,I plesofA E5.16Rhep U itht FIG w Design◾89 123456789 ABAAB AB 8+2+5=15 FIGURE5.17Anexampleofthenumbersgame. First,oneplayerwritesdownthenumbers1through9onapieceof paper.Eachplayertakesaturnchoosinganumber.Theyannounceitto theotherplayerandthencrossitoffthelist.Onceanumberischosen,itisnolonger available. Thegoalofthegameistokeeppickingnumbersuntiloneplayercan addupthreeoftheirnumberstomakeatotalof15.Forexample,thegamecouldgolike this(seeFigure5.17): 1.PlayerApicks8 2.PlayerBpicks6 3.PlayerApicks4 4.PlayerBpicks3 5.PlayerApicks2 6.PlayerBpicks9 7.PlayerApicks5 8.Thegameisover:PlayerBpicked8,4,2,and5.Theycanmake15byaddingupthe numbers8,2,and5. Doesthatsoundsalittlebitcomplicated?Now,imagineplayingthe gamewithoutwritinganythingdown,andcalculatingthenumbersin yourhead!Addtothatthefactthatyoualsohavetorememberifyour opponentalreadypickedaspecificnumber. Tic-Tac-Toe Bycomparison,thisgameisverysimple:youandyouropponenttaketurnsplacingX’s andO’sonathree-by-threegrid,andthefirstplayertogetthreeX’sorO’sina horizontal,vertical,ordiagonallinewins(seeFigure5.18).Thisisagamethatanyonecan learninsecondsanddoesnotrequiredoinganycalculationsinyourhead. 90◾DesigningtheUserExperienceofGameDevelopmentToolsFIGURE5.18An exampleoftic-tac-toe. MagicSquare Hereiswhereitgetsinteresting:whatifItoldyouthatthetwogameswejustsaw—the numbersgameandtic-tac-toe—areactuallythesamegame? Amagicsquareisathree-by-threegrid,witheachspacecontaininga differentnumberfromonetonine.Ifyouaddupthenumbersdiagonally,vertically,and horizontally,youalwaysendupwith15(seeFigure5.19). Now,thinkbacktothenumbersgame,andhowcomplicateditis: rememberingyourownnumbers,doingmathinyourhead,andevenhavingtorememberwhatnumbersyouropponentpicked.Now,ifyousimply playtic-tac-toewithamagicsquare,youcanpickthreenumbersthatadduptoexactly 15inamatterofseconds,withlittleeffort. Thatisthepowerofrepresentation:presentingtheuserinterfacein suchawaythatitsimplifiesacomplexconcept,allowingtheusertomakedecisionsmore quicklyandeasily. WhatAreExamplesofPatternsThatUseRepresentation? InpreviousversionsofMicrosoftOffice,youhadtouseaninterfacesimilartotheone youseeontheleftinFigure5.20ifyouwantedtoinsertanewtable. Thisinterfacerequiresyoutovisualizethetableinyourhead,think abouthowmanyrowsandcolumnsyouwantittohave,andthentranslate thatintothenumbersthatyouenterintothe“Numberofcolumns”and “Numberofrows”fields. 8 1 6 3 5 7 15 15 4 9 2 FIGURE5.19Anexampleofamagicsquare. Design◾91 FIGURE5.20AnexampleofusingrepresentationtoinsertatableinMicrosoftOffice. UsedwithpermissionfromMicrosoft. NewerversionsofMicrosoftOfficeprovideaninterestingexampleof representationtobuildyourtable.Thisdesignallowstheusertomove theirmouseinsideagridtosetthenumberofrowsandcolumnsfortheirtablevisually, whichmatchesmostusers’mentalmodelofwhatatableismuchmoreclosely(seethe rightsideofFigure5.20). Usingthistechniquedoeshaveasmalldownside:itlimitsthetotal numberofrowsandcolumnstheusercanchoose.Thislimitislikely basedonthemaximumnumberofcolumnsandrowsthattheaverage userneeds.Fortheedgecaseofanexpertuserwhoneedstogobeyond themaximum,the“InsertTable…”menuitemisstillavailablejustbelowthegrid(seethe rightsideofFigure5.20,nearthebottom).* FEEDBACK offeedbackincludewhatthetoolisdoingnow,whatjusthappened,and howmuchtimeisleftinaparticularprocess. *Iftheuserneedshundredsofcellsinatable,maybeMicrosoftWordisnottherighttool, andtheyshouldbeusingatoolthatdoesonething(spreadsheets)reallywell:Microsoft Excel. 92◾DesigningtheUserExperienceofGameDevelopmentToolsHowCanFeedback ImproveUsability? Efficiency Feedbackhelpsindirectlywithefficiencybecauseitletstheuserknowiftheycando somethingelsewhiletheyarewaiting.Furthermore,theuserislesslikelytoforceclosean application,requiringthemtoredoanyworkthattheymayhavelost. Learnability In-contextfeedbackthroughcarefullywordedmessagescanhelptheuserlearnhowthe toolworksmorequicklyandmakethemmoreconfidentin theirunderstandingofthetool. UnderstandingFeedback Whentwohumansengageinconversation,thereisanexchangeofinformation.Onepersonspeaks,andtheotherlistens.Whenonepersonis donespeaking,theotherpersonreplies.Weareaccustomedtothisfrom yearsofsocialinteraction. Forexample,aback-and-forthconversationmightgosomethinglike this: Mario:Hello,Luigi.It’s-ame,Mario!Howareyoutoday? Luigi:Iamdoingwell.Howareyou? Mario:Iamdoingverywell,thankyouforasking! Now,imagineaconversationlikethis: Mario:Hello,Luigi.It’s-ame,Mario!Howareyoutoday? Luigi:Iamdoingwell.Howareyou? Mario:…(staresatLuigi) Luigi:Mario? Mario:…(continuesstaringatLuigi) Luigi:Mario,hello? Mario:…(blinksonce) Thatwouldmakeforaveryawkwardconversation.Ashumans,wearenot accustomedtointeractionslikethis.Weexpectanalmostinstantaneous confirmationofourpresenceinoursocialinteractions.WecannotfaultLuigiforwalking away. Design◾93 Likewise,asyouwillrecallfromChapter4,aninteractionbetweena humanandcomputerisaback-and-forthprocess.Thehumanperforms anaction,andthecomputerresponds.Thehumanseeswhatthecomputer did,andtheyperformthenextaction. However,toooften,theinteractionbetweenhumansandcomputers resemblestheawkwardsocialinteraction:thehumanperformsanaction, butthecomputerdoesnotrespond.Worsestill,theusermaythinkthat theprogramhascrashedandcloseit,losingallunsavedwork. Now,imagineathirdconversationlikethis: Mario:Hello,Luigi.Howareyoutoday? Luigi:Iamdoingwell.Howareyou? Mario:Justamoment,letmethink… Luigi:Sure,Icanwait. Mario:… Luigi:Areyoustillthinking? Mario:Yep,justgivemeaminute. Luigi:OK!Noproblem.Thanksforlettingmeknow. Mario:Sorryaboutthat.Iamdoingverywell,thankyouforasking! Thisinteractionislessawkward.LuigiknowsthatMarioisstillparticipat-inginthe conversationbutthatheisnotreadytorespondquiteyet.Luigiisunlikelytowalkaway. AcceptableResponseTime JakobNielsen,whomwespokeaboutinChapter4,publishedabookin 1993titledUsabilityEngineeringwherehedescribesthreeimportantlimitswhenitcomes toacceptableresponsetimes,withrecommendationson whenfeedbackisrecommended:* •At0.1second,theusers“feelthatthesystemisreactinginstantaneously”andnofeedbackisnecessary. uninterrupted.”Theuserwillnoticethedelayandwill“losethefeelingofoperatingdirectlyonthedata,”whichcanmakethetoolfeel sluggish.Inthiscase,awaitcursorisrecommended. *Hereisanarticlewithasummaryoftheinformation:http://www.nngroup.com/articles/ response-times-3-important-limits/. 94◾DesigningtheUserExperienceofGameDevelopmentTools •10secondsis“thelimitforkeepingtheuser’sattention.”Foranythinglonger,theuser willforgetwhattheyweredoing,whichcouldaffect theirefficiency.Inthiscase,usersshouldreceivefeedbacktoconfirmthatthecomputeris working,andanestimateofhowmuchlonger theyneedtowait.Usingaprogressbarisidealinthissituation. PerceivedWaitTime In1985,whilehewasstudyingattheUniversityofTorontounderBill Buxton,BradAllanMyerspublishedapapertitled“TheImportanceof Percent-DoneProgressIndicatorsforComputer–HumanInterfaces.”* ThepaperdescribesMyers’sresearchonhowprogressbarsaffectourperceptionoftime. Inhisexperiment,heaskedpeopletoperformdatabase searches,someofwhichhadprogressbarsandsomeofwhichdidnothavethem.The resultsofthestudyindicatethattheparticipantsfeltmoreconfidentinthedatabase searcheswithprogressbars. TheBenefitsofGivingtheUserFeedback Aswecanseeinthepreviousexamples,givingtheuserfeedbackwitha progressbarcanhelpinmultipleways.Itconfirmstotheuserthatthetoolisstillworking —whichstopsthemfromforcingittocloseandpotentiallylosingunsavedwork—and givesthemtheconfidencetodosomethingelse whiletheyarewaiting,whichincreasestheiroverallefficiency. Furthermore,inChapter1welearnedhowoneofthequalitiesofagood userexperienceiswhentheinteractionis“morehuman.”Ifwecompare ourawkwardconversationexamplefrombeforetoalongwaitwithouta progressbar,wecanseehowwaitingwithoutfeedbackcanresultina“lesshuman”user experience. FeedbackOverload Oneofthedangersoffeedbackisthatitcanquicklyturnintomorenoisethansignal.If yougivetheusertoomuchfeedback,theyarelikelytostartignoringallofitandmiss thatknowledgetofilterthefeedbackyouprovide.Ifyouarenot,thefeedbackislikelyto beoverloadedwithinformationthatmaybeimportantfortheconceptualmodel,butnotto theuser. *Notetheterm“percent-doneprogressindicators”—atthetime,progressbarsdidnot existasweknowthemnow.Youcanfindthepaperhere:http://dl.acm.org/citation.cfm? id=317459. Design◾95 FIGURE5.21TheprogressbarinWindowsgivesfeedbackontheprogressofalargefile beingpasted.UsedwithpermissionfromMicrosoft. WhatAreSomeExamplesofPatternsThatUseFeedback? ProgressBar Progressbarsindicatetheprogressofataskandgiveusasenseofhowmuchofthetaskis left.*PerhapsoneofthemostrecognizedisthecopyprogressbarinMicrosoftWindows (seeFigure5.21).† Someprogressbarslockthetoolwhiletheyarerunning.However,some canshowaprogressbarwhilestillallowingtheusertocontinueworking. AgoodexampleofthisisAdobeAudition:whenrunningamultitrack mixdown,theeditorislockedandapie-chartprogressindicatorappears,withthe estimatedremainingtime(seeFigure5.22).However,theuser canstillworkonotheraspectsoftheuserinterfacewhiletheyarewaiting. WaitCursor Showingawaitcursornexttothemousehastheadvantageofbeingeasierfortheusertonotice,astheireyesarelikelyalreadyonthemouse. However,sincemostwaitcursorsdonotshowprogress,itisbesttousethisoptionwhen thewaittimeisrelativelyshort. FEED-FORWARD theiractionsafterthefact,theuserseeswhatwillhappenbeforetheycommittoanaction. Thisgivesthemtheoptionofchanging theirmind,whichisespeciallyusefuliftheactionisdestructiveorcomplicatedtoreverse. *Someresearchevensuggeststhatanimatedpatternsoverlaidontopoftheprogressbar canmakeitfeelasthoughitismovingfaster!http://chrisharrison.net/projects/ progressbars2/ ProgressBarsHarrison.pdf. †Microsoft’sguidelinesforprogressbarscanbeseenhere:http://msdn.microsoft.com/ en-us/ library/windows/desktop/dn742475%28v=vs.85%29.aspx. 96◾DesigningtheUserExperienceofGameDevelopmentToolsFIGURE5.22An integratedprogresspie-chartgivesfeedbackontheexportprogressinAdobeAudition. Adobeproductscreenshot(s)reprintedwithpermissionfromAdobeSystemsIncorporated. HowCanFeed-ForwardImproveUsability? Efficiency Feed-forwardisespeciallyhelpfulinreducingtheamountoftimespentinthethink phase.Thereisnoneedtowonderwhatisgoingtohappen,asyousimplyseeitbefore youchoosetocommit. Learnability Feed-forwardisanextremelyeffectivelearningtechnique.Previewingwhatwillhappen alowstheusertolearnwhatafeaturedoesinstantlyandwithlessrisk,whichalsoinvites themtoexploretheotherfeaturesofthetool. UnderstandingFeed-Forward Whiletheconceptoffeedbackinuserinterfacesiswellknown,feedforwardislessso.*Researchsuggeststhatwhenpeoplemakeadecision,theirbrain “previews”theoutcomeoftheirchoicestoassistinchoosingthecorrectaction.†Ina sense,feed-forwardhelpsuspreviewdecisionsinthesamewaythatourbraindoes. comesfromTomDjajadiningrat,inhispaper“ButHow,Donald,TellUsHow.”Ifyou haveaccesstotheACM DigitalLibrary,youcanreadthearticlehere:http://dl.acm.org/citation.cfm?id=778752. †Youcanreadmorehere:http://en.wikipedia.org/wiki/ Feedforward,_Behavioral_and_Cognitive_ Science. Design◾97 WhatAreExamplesofPatternsThatUseFeed-Forward? Agoodexampleofapatternthatusesfeed-forwardistheStylessectionoftheribbonin MicrosoftWord.Byhoveringtheirmouseovereachstyle,theusercangetapreviewof whattheirtextwilllooklikewiththestyleapplieddirectlyintheirdocument(seethetop ofFigure5.23).However,theydonothavetocommittothedecision.Iftheyarenot satisfied,theysimplymovethemousetoanotherstyle(seethemiddleofFigure5.23) oroutoftheStylessectioncompletely(seethebottomofFigure5.23). However,oncetheyfindthestyletheylike,theycanclicktocommittoit.Thisismuch moreefficientthanapplyingastyle,undoing,applyingastyle,undoing,andsoon. WhenattemptingtodraganddropamaterialontoobjectsintheUnity gameengineviewport,theobjectsunderthemouseareshownwiththe materialinstantly,asopposedtoonlyafteryoureleasethemousebutton(seeFigure5.24). Thenumbersthatindicatehowmanyitemsareinsideafolderisanother exampleoffeed-forward.Forexample,thefolderlistinGmailshowshowmanyunread mailitemsthereareineachcategory(seeFigure5.25),allowingtheusertoskipover foldersthatdonotcontainunreaditemsinsteadoftakingthetimetocheckeachone. GROUPING Groupingisthetechniqueofassociatingsimilarterms,concepts,orcommandstogetherin awaythatmatchestheuser’smentalmodel. HowCanGroupingImproveUsability? Efficiency Bygroupingrelateditemstogether,theusercanscanthroughalistofitemsandfindwhat theyarelookingformorequickly,reducingtheamount oftimespentinthelookphase.Thiscouldalsoreducethethinkphase,becausefewer itemstolookatmeanfeweritemstothinkabout. Learnability Groupingcanmakeatooleasiertolearnbecausetheinterfaceisorganizedinalogicalwaythatmatcheshowtheuserthinks,allowingthemtoadapttoitfaster. 98◾DesigningtheUserExperienceofGameDevelopmentToolsFIGURE5.23Using feed-forwardtopreviewchangestoformattinginMicrosoftWord.Usedwithpermission fromMicrosoft. Design◾99 FIGURE5.24Feed-forwardallowstheusertopreviewhowamaterialwillchangethe lookofanobjectintheUnityEnginebeforecommittingtothechange. 100◾DesigningtheUserExperienceofGameDevelopmentToolsFIGURE5.25FeedforwardgivestheuserinformationaboutthecontentsofafolderinGmailwithout requiringthemtoclickonit.GoogleandtheGooglelogoareregisteredtrademarksof GoogleInc.,usedwithpermission. UnderstandingGrouping Groupingisoneofthemanytechniquesthatmakeupthedisciplineof informationarchitecture.Themostimportantfactorindetermininghow terms,concepts,andcommandscanbegroupedisbyunderstandingthe user’smentalmodel. Forexample,byusingseparators,menuitemscanbeorganizedto reflecthowtheuserassociatesthem.Thisallowstheusertoskipthemenuitemsthatare notapplicabletotheirimmediategoalsandfindwhattheyarelookingforfaster. Somepeoplemaylookattheconceptofgroupingmenuitemsandsay, “Well,that’sjustassociatingsimilarcommandstogether!”Thatmaybe true,buthowtheyareassociatedisnotalwaysobvious.Wemayhavean opiniononhowthemenusshouldbeorganized,butwecouldbeinfluencedbythewaythedataisorganizedinthecode,andnothowtheuserthinksaboutit. Tohelpusdeterminehowtogroupinformationfromthe user’sperspective,wecandoacardsort. UsingaCardSorttoDetermineGroups InChapter4,welearnedabouthowcardsortingcanhelpusunderstand theuser’smentalmodel.Thewayinwhichauserassociatesmenuitemsisalsopartof ontoasetofcards,andaskingtheusertoorganizethem,wecangeta muchbetterideaastohowtheyassociateeachofthecommands. Whenyouaredone,studytheresultsandlookforcommontrends.For example,didthemajorityofusersputallofthecommandsthatcreate polygonandNURBSprimitivestogether,ordidtheycombinethecreatepolygonprimitivesandpolygoneditingtoolstogetherintoonegroup? Design◾101 Afterward,youcantransformthegroupsintotop-levelmenusandthe Thisprocesscanbeappliedtowindowmenus,contextualmenus,toolbars,andsoon. WhatAreExamplesofPatternsThatUseGrouping? ThemenuitemsinAutodeskMayaaregroupedinsuchawaythatmatches theuser’smentalmodel(seeFigure5.26).Forexample,eventhoughthe FIGURE5.26TheMeshmenuinAutodeskMayademonstratesthetechniqueofgrouping. AutodeskscreenshotsreprintedwiththepermissionofAutodesk,Inc. 102◾DesigningtheUserExperienceofGameDevelopmentToolsFIGURE5.27 GroupingisusedtoorganizecommandsintheMicrosoftOfficeribbon.Usedwith permissionfromMicrosoft. “Smooth”commandaddsnewverticestotheselectedmesh,andthe “AverageVertices”commandmovesvertices,theyaregroupedtogether becausetheyarebothrelatedtogivingthemeshasmootherappearance. Inaddition,allofthecommandsrelatedtotransferringinformation fromonemeshtoanotheraregroupedtogether.Iftheuserisscanningthelistof commandsandisnotplanningtotransferinformation,theycan skipoverthatwholesectiontothenextgroup. TheMicrosoftribbonshowsyetanotherexampleofgrouping.Atthe toplevel,thecommandsintheribbonareorganizedintotabs.Forexample,allcommandsrelatedtoinsertingchartsorexternalresourcestoaMicrosoftWord documentcanbefoundunderthe“INSERT”tab.Ifthe userwantstoinsertacharttotheirdocument,theycanquicklyskipoverthe“VIEW”or “REFERENCES”tabs,astheydonotcontainthecommandstheyarelookingfor(seethe topoftheribboninFigure5.27). Onelevelbelowarethesections.Ifwereturntotheexampleofthe “INSERT”tab,wehaveaseriesofsectionsfordifferentelementsthatcanbeinserted: Pages,Tables,Illustrations,andsoon(seethebottomoftheribboninFigure5.27).These aregroupedtogetherinawaythattheaverageusermayexpect.Thisway,iftheuseris lookingtoinsertanillustration,theycanskipoverallofthecommandswithinthe“Pages” and“Tables” CHUNKING Youmayhaveheardthestatisticthatpeopleareabletorememberseven itemsatonce,plusorminustwo.Thisnumbercomesfromresearchby GeorgeA.Millerin1956andisoftenreferredtoas“Miller’sLaw.”* *YoucanreadmoreaboutMiller’sLawhere:http://en.wikipedia.org/wiki/ Miller%27s_law. Design◾103 However,newresearchsuggeststhatthisnumberisclosertofour,plus orminustwo.ThereasonthatMiller’snumberswerehigheristhathis researchsubjectswereabletoclumpsimilaritemstogether,makingthemeasierto remember.Thisbehaviorisknownas“chunking.” HowCanChunkingImproveUsability? Efficiency Iftheinformationisorganizedinaconsistentway,theusercanrememberandinterpretit moreeasily,resultinginlesstimespentinthethinkphase. Learnability Iftheinformationisorganizedinsuchawaythatmatchestheuser’smentalmodel, learnabilitycanbeimproved. UnderstandingChunking Tofeelthedifferencethatchunkingcanmake,wewillplayamemory game.StudytheimageoflettersandnumbersinFigure5.28fortenseconds,andtrytorememberasmanyasyoucan. Afterthetensecondsareup,closethebookandgetapieceofpaperandapen.First,write downhowmanylettersandnumbersyouthinkthat therewere.Next,trytowritedownasmanyofthelettersandnumbers youcanremember.Whenyouareaready,turntothenextpage. InFigure5.28,youcanseetheexactsamelettersandnumbersasin Figure5.29.Imaginethatyouwereaskedtostudythosesamelettersandnumbersforten seconds,butinthisconfiguration.Howmanydoyou thinkyouwouldbeabletorecall?Wouldyougetthemallright? Thefactthatitiseasierforyoutorememberthosesamelettersand numbersthiswayisanexampleofchunking:Youhaveapredefinedstructureinyourbrainfortheshortenednamesofthesevideogameconsoles.Itiseasierto groupthemtogetherinalogicalwaythatmakessensetoyou. FIGURE5.28Memorygame. 104◾DesigningtheUserExperienceofGameDevelopmentToolsFIGURE5.29 Memorygame,withchunking. WhatAreExamplesofPatternsThatUseChunking? ContentcreationtoolsallowuserstoworkwithRGBAcolorvaluesindifferentways:0to 255,0.0to1.0,andhexadecimal.Despitethefactthathexadecimaldoesnotmatchthe mentalmodelofcolorfortheaverage person,ithasbecomeastandardforworkingwithcertaintypesofcontent. Whenusersareaccustomedtoworkingwithhexadecimal,theyareable topickoutthered,green,blue,andalphavaluesquicklybychunkingthecharactersin groupsoftwo.Forexample,auserfamiliarwithRGBAin hexadecimalcanlookatthevalue#FF7F00FFanddetermineveryquickly thatthecolorhas100percentred(thefirstandsecondcharacters)and50percentblue(the thirdandfourthcharacters). However,sometoolsdonotworkwithhexadecimalcolorsinRGBA— suchasMicrosoftExpressionBlend,whichusesARGB.*ThiscanbeconfusingtouserswhoareaccustomedtochunkingRGBAcolors.Thepreviouscolorwould appeartobe100percentred,100percentblue,50percent green,andfullytransparenttosomeonewhoisusedtoworkingwith RGBA! Whendesigninghowinformationwillappeartotheuser,considerhow theywillchunkit.Also,trytofollowexistingstandards.Iftechnicallimitationsmakethis impossible,maketheinformationfamiliarandeasiertochunkfortheuserintheinterface, andthenconvertittothenecessaryformatinthebackgroundsotheuserdoesnothaveto thinkaboutit. EXCISE Excisereferstonavigatingaroundtheinterface,fromswitchingtabstochanging windows.Anythingthatinvolvesmovingthecursoracrossthe screentoreachanelementoftheuserinterfaceisexcise. HowCanThisTechniqueImproveUsability? Efficiency Reducingexcisewillhavethebiggestimpactontheactphaseoftheactioncycle. Althoughitisthelightestload,reducingarepetitivetaskevenby *ThisislikelybecauseitwasdesignedtoworkwiththeXAMLfileformat,whichuses Design◾105 onesecondcanadduptoahugeboostinefficiencyovertimeifithelpsalargenumberof users. Learnability Excisedoesnothaveasignificantimpactonlearnability. UnderstandingExcise Oneofthemostconsistentlyconfirmedstudiesinhuman–computer interactionwascompletedin1954byPaulFitts,whoproposedthatthe timeittakesausertotouchatargetwithacursorisdirectlyrelatedtothedistancefrom thetargetandthesizeofthetarget.ThisisknownasFitts’sLaw.* Therefore,toreduceexcise,thetargetmustbemadelargerand/orclosertothecurrent positionofthecursor. WhatAreExamplesofPatternsThatUseExcise? WindowMenusVersusContextualMenus Accessingitemsinamenuortoolbarfrequentlyisanexampleofexcise thatismainlyrelatedtotargetdistance.Theusermustmovetheircursortothemenuortoolbarandclickontheitemandthenmovethecursorbacktowhereit wasbefore(seetopofFigure5.30).† FileEditViewHelp FileEditViewHelp FileEditViewHelp FileEditViewHelp Undo Redo Rename Delete FileEditViewHelp FileEditViewHelp FileEditViewHelp FileEditViewHelp Rename Rename Delete FIGURE5.30Comparingtheexciseofawindowmenu(top)versusacontextualmenu (bottom). *YoucanreadmoreaboutFitts’sLawhere:http://en.wikipedia.org/wiki/Fitts%27s_law. †SpecificationsformenusandcontextualmenusfromMicrosoftcanbefoundhere: http://msdn. microsoft.com/en-us/library/windows/desktop/dn742392%28v=vs.85%29.aspx. 106◾DesigningtheUserExperienceofGameDevelopmentToolsBycomparison, contextualmenuscanhelptoreduceexcisebecause theyappearrightnexttotheuser’scursor,resultinginshorterdistance(seethebottomof Figure5.30).Inaddition,asthename“contextual menu”implies,onlyitemsthatarecontextuallyrelatedtotheitemthatwasclickedshould beenabledinthemenu,whichmeansashorterlist, andthereforeashorterdistancetotheoptionthattheuserislookingfor. WindowMenuItemOrder Whileitmightseemthatorganizingmenuitemsalphabeticallywillmake iteasytofindaspecificmenuitem,thisapproachpresentstwoproblems. Thefirstisthatthemenurarelymatcheshowtheuserchunksinformation.Thesecondisthattheitemsthatareaccessedmorefrequentlymaybefurtherfrom thecursor,becausethefirstletterofthecommandisneartheendofthealphabet. Forexample,theleveleditorGTKRadianthasacontextualmenuwith itemsthatareorderedalphabetically.Ifthemajorityofusersarefrequentlyrequiredto createentitiesoftype“worldspawn,”theymustmovetheir mousetothebottomofthecontextualmenueverysingletime,which resultsinalotofexcise(seetheleftofFigure5.31). Anotherverycommonsituationishavingmenuitemslistedintheorder thattheywerecreated.Inotherwords,whenadeveloperaddsanewcommand,itisplacedatthebottomofthemenu(seetherightofFigure5.31). Abettersolutionistoplacethemostfrequentlyusedcommandsat thetopofthemenu,reducingthetraveltimefromthepointatwhichthemenuwasraised (seeFigure5.32).Whennewitemsareadded,learnthe frequencyatwhichtheywillbeused—eitherbylookingatmetricsorby doingataskanalysis—andplacethemintheappropriatepositioninthe menu.Thiscanapplytowindowmenus,contextualmenus,comboboxes, BottomoftheScreen Thereisoneproblemwithorderingitemsinacontextualmenufrom toptobottom:themouseisnotalwaysatthetop!Sometimes,auserwillinvokea contextualmenufromthebottomofthescreen,andthecontex- Design◾107 Edit Preferences… Addedearlier Find… Replace… Copy Paste Undo Redo Addedlater FIGURE5.31Twowaysinwhichtheorganizationofacontextualmenucanincrease excise:Alphabetical,asinGTKRadiant(left)ortheorderinwhichthecommandswere added(right). Edit Undo Morefrequently Redo Copy Paste Find… Replace… Preferences… Lessfrequently FIGURE5.32Organizingamenubaseduponhowoftenthecommandsareusedcan reduceexcise. tualmenuwillappearabovethemouse,insteadofbelowit.Whatcanbe doneaboutthis? MicrosoftOfficepresentsaninterestingsolutiontothisproblem:frequentlyusedformattingcommandsappearinafloatingbarthatchanges positiondependingonwherethecontextualmenuwasinvoked.When 108◾DesigningtheUserExperienceofGameDevelopmentToolsFIGURE5.33The contextualmenuinMicrosoftOfficechangesbasedupon whereitwasinvokedinanefforttominimizeexcise.Usedwithpermissionfrom Microsoft. thecursorisatthetopofthewindow,thefloatingbarappearsatthetop,nearertothe cursor(seetheleftsideofFigure5.33).However,whenthecursorisatthebottom,the floatingbarappearsatthebottom(seetherightsideofFigure5.33). ThemarkingmenuinAutodeskMayaisyetanotherapproachtoreducingexcise(seeFigure5.34).Markingmenustypicallyhaveuptoeight regions,*whichareallthesamedistancefromthecursor. ContextualMenusandLearningCurve Whenconsideringtheuseofcontextualmenus,donotforgetaboutthe learningcurveconceptsthatwerepresentedinChapter4.Becausecontextualmenusarenotalwaysvisible,theyaredifficulttodiscoverforbeginners.Forthis reason,itisbesttoensurethatthemostfrequentlyusedcommandsarealwaysvisiblein toolbarsormenussonewuserscan findthem. *Whilethenumberofoptionsonthemenuislimitedtoeight,commandscanbechained together. However,thattechniqueisgearedmoretowardexpertusers. Design◾109 FIGURE5.34ThemarkingmenuinAutodeskMayaisexcellentatreducingexcise,thoughitcanbedifficultforbeginnerusers.Autodeskscreenshotsreprinted withthepermissionofAutodesk,Inc. ExamplesofTargetSize Foranexampleoftargetsize,wecanlookatAdobePremierePro(see Figure5.35).Oneofthemostfrequentactionsispressingtheplaybutton,whileoneofthe leastcommonactionsisclosingthesequencethatyouarecurrentlyworkingon. Becausetheplaybuttonisalargetarget,itiseasytoacquirewiththemouse.By comparison,theclosebuttonforasequenceisonlyafewpixelsacross,makingitdifficult toclickbyaccident. 110◾DesigningtheUserExperienceofGameDevelopmentToolsFIGURE5.35The sizedifferenceofthe“play”and“closesequence”buttonsinAdobePremiere demonstratestheconceptoftargetsizeexcise.Adobeproductscreenshot(s)reprintedwith permissionfromAdobeSystemsIncorporated. HotkeysandExcise Whileitmaybetruethatusinghotkeystoactivateacommandcanreduceexciseas comparedtomovingthemousetoclickonabutton,reaching keysonthekeyboardcanbeexcisetoo! AcomplicatedhotkeycombinationsuchasCtrl/Cmd+Alt+Pcannotbe doneone-handedbymostusers.Itmayrequiretheusertolookdownat thekeyboardandtaketheirotherhandoffthemouse.Thismaynotseem likemuch,butifthehotkeyisforacommandthatisusedoften,itcanadduptolost efficiencylikeanyotherkindofexcise. RestingPlace Anyprogamercantellyouthatoptimalhotkeyplacementiscrucialto efficiency.AllofthedefaulthotkeysforthecompetitivemultiplayerRTS Starcraftareplacedalongtheleftsideofthekeyboard,neartherestingDesign◾111 W E R T Y U I O P A S D F G H J K L Z X C V B N M FIGURE5.36Consideringtherestingplaceofthelefthandwhenchoosinghotkeys. placeofthelefthand.*Inthecasewhereefficiencyisnotimportant,choosingahotkey basedonthefirstletterofthecommandwouldmakesense, suchasusing“M”tobuildamarine.However,tomaketheplayermore efficient,thesecondletterinthewordmarineisused:“A,”becauseitisontheleftsideof thekeyboard,neartherestingplaceofthelefthand(seeFigure5.36). Youcanseethesamerulesappliedtocontentcreationtools.Forexam- select,move,rotate,andscale,respectively,whicharesomeofthecommandsthatare usedmostfrequently.Anotherclassicexampleis undo,copy,cut,andpaste:Ctrl/Cmd+Z,X,C,andV.† Whenchoosinghotkeysforthecommandsthatareusedmostfrequently,trytochoosehotkeysthatareneartheleftsideofthekeyboard.Ifthekeyforthe firstletterofthecommandisontherightside,orisalreadyused,thenusethenextletter inthenameofthecommand.Also,toavoidconfusion,don’treplacestandardhotkeyslike theonesforundo,copy, cut,andpastethatarelistedabove,aswellasCtrl/Cmd+S,O,W,andAforsave,open, close,andselectall,respectively. DeliberatelyIncreasingExcisetoProtecttheUser Theremaybetimeswhenyouwanttoincreaseexciseonpurpose.This maybetoslowdowntheusersothattheyhavemoretimetothinkabouta *Asleft-handedpeoplealreadyknow,mostdefaulthotkeysaremadewithright-handed peopleinmind.Ifthereareasignificantnumberofleft-handedusers,youcangivethe optiontocustomizethekeyboardsotherestingplaceisontherightsideinstead. †Ofcourse,allofthisisassumingaNorthAmericanQWERTYlayout.Otherlayoutslike AZERTY wouldaltertheserulesalittlebit. 112◾DesigningtheUserExperienceofGameDevelopmentToolspotentiallydangerous decisionortoprotectthemfromaccidentalactions. Hereareafewoptions. DialogBoxes Thereisacommonlyheldbeliefthatdialogboxesshouldneverbeused, andthatthefewerdialogboxesyouhave,thebetter.However,dialogboxescanbeuseful forprotectingtheuserfromerrors.Onesuchexampleis adialogboxconfirmingthatyouwanttodeleteafile.Accidentalclicksresultingindata losscanbereducedbyforcingtheusertochangetheirfocustothedialogbox,movetheir mouse,andclick. Itisextremelyimportanttonotethatadialogboxshouldbeavoidedinthecaseof commandsthatareusedfrequently.Theslowdowninefficiencymaybeworsethanthe lackoferrorprotection.Inthesecases,allowingtheusertorecoverorundotheirchoiceis highlyrecommended. PotentialyDangerousMenuItems Menuitemsthathavethepotentialtocauseirreversibledamage—suchas deletinganobject—canbeplacedatthebottomofamenu,addingexcise InconvenientHotkeys Deliberatelyincreasingtheexciseforahotkeycanalsoprotecttheuser. Forexample,usingthespacebarasahotkeyforadangerouscommand thatcannotbereversedwouldbeaverybadidea.Bycomparison,acomplexhotkeysuchasCtrl/Cmd+Alt+Pusuallyrequirestwohandsand thereforehasasignificantlylowerchanceofbeingpressedaccidentally. However,thereareafewexceptions:standardssuchasthe“delete”key todeleteshouldnotbechangedtoprotecttheuser,astheyaresocommonthatchanging themwouldjustleadtoconfusion.Again,thebestwayto protectagainstthisistoimplementarobustundosystem. PROGRESSIVEDISCLOSURE Progressivedisclosuremeansshowingonlythepartsoftheinterface thattheuserneedstosee.Theinterfacestartssimple,andweallowtheusertoreveal (disclose)more,onepieceatatime(progressively),tosuittheirneeds. Design◾113 HowCanProgressiveDisclosureImproveUsability? Efficiency Progressivedisclosurecanreducetheamountoftimespentinthelook phasebyreducingvisualclutterintheinterface.Furthermore,thelesswesee,thelesswe havetofigureout,resultinginlesstimespentinthethinkphase.However,sinceshowing andhidingcanincreasetheamountof excise—inotherwords,timespentintheactphase—itisimportanttofindtheright balancebetweentheamountofprogressivedisclosureandexcise. Learnability Progressivedisclosureisoneofthemostpowerfultechniquesforimprovinglearnability. Bysimplifyingtheinterface,first-timeuserscangetagraspofhowatoolworkswithout beingoverwhelmedbyallofthefeaturesatonce,andexpertuserscancustomizethe interfacetosuittheirneeds. UnderstandingProgressiveDisclosure InChapter3,wespokeabouthownewfeaturesaddcomplexityexponentially,notlinearly.Thesamegoesforthenumberofinterfaceelementsthatarevisibleat onetime.Bystartingwithasimpleandcleaninterface,andallowingtheusertoseemore astheygainmoreexperience,weareallowingtheusertocontroltheamountof complexity. ProgressiveDisclosureandtheLearningCurve manyinterfaceelementsthereareandhowoftentheywillbeused. Forexample,foratoolthathasmanyinterfaceelementsandwillbeusedalldayby beginnersaswellasexperts,usingprogressivedisclosuremakessense.Beginners appreciateaninterfacethatstartssimpleandaccessible,andexpertsbenefitfroman interfacethatispowerfulandcustomizable. However,ifthetoolhasasmallernumberofinterfaceelements,andis goingtobeusedforfiveminutes,onceperweek—forexample,atoolto updatetothelatestversionofthegameengine—progressivedisclosure maynotprovidesignificantbenefits. 114◾DesigningtheUserExperienceofGameDevelopmentToolsFIGURE5.37 Progressivedisclosurecanbeusedtohideinformationthatmostusersmaynotbe interestedin,suchastechnicaldetailsaboutthe“paste”process. Design◾115 res-dobe rogfpromApleo xamissionf temer xcellenithp nesa izedieprintedw ustomecshot(s)r anbcreen roductscroducts dobepdobep ostAfmplexity.A faceoomfc nter heievelo hichtheirl nwort aysifw ppropriatef. arietyosa evndirated Th Incorpo E5.Risclosure,a U FIG sivedSystems 116◾DesigningtheUserExperienceofGameDevelopmentToolsWhatAreSome ExamplesofPatternsThatUse ProgressiveDisclosure? ProgressivedisclosureissuchanestablishedpatternthatMicrosofthasanentiresectionin theiruserexperienceguidelinesdedicatedtoit.*Asaresult,youcanfindexamplesofthis techniquebeingusedtoshowandhideelementsalloverWindows.Forexample,when pastingalargefile, mostusersonlywanttoknowiftheoperationisdone(seethetopof Figure5.37).However,foruserswhowanttoknowmore—suchaspreciselyhowmuchtimeisremaining,andthefiletransferspeed—theycan clickonthe“Moredetails”expander(seethebottomofFigure5.37).Inaddition,when thepastedialogappears,theexpanderisclosedbydefault,sincethisinformationdoesnot interestmostusers. ItshouldnotcomeasasurprisetoseeextensiveuseofprogressivedisclosureinAdobe productssuchasPhotoshopandIllustrator,astheyareextremelycomplexandhavemany differentinterfaceelements.Toaddressthis,eachpanelcanbeindividuallyexpandedand collapsedtoshow exactlywhattheuserneedstoaccomplishtheirtask(seeFigure5.38). WRAPPINGUP Inthischapter,weconcentratedontheDesignphaseoftheUser-CenteredDesign process.Welearnedabouthowthebrainandtheeyesworktogetherandhowhumans haveevolvedtoseespecificpatternsmoreefficiently. Welearnedabouttheimportanceofusingaconsistent,clearvisuallanguage,andwealsodiscoveredthevalueoffollowingdesignguidelines. Finally,welearnedawidevarietyofdesigntechniques,suchasHierarchy,Constraints, NaturalMapping,Representation,Feedback,Feed-forward, Grouping,Chunking,Excise,andProgressiveDisclosure. Inthenextchapter,wewilldiscussconceptsandtechniquestobeused duringtheEvaluationphaseoftheUser-CenteredDesignprocess. *Youcanfindithere:http://msdn.microsoft.com/en-us/library/windows/desktop/ %28v=vs.85%29.aspx. Chapter6 Evaluation WHATWILLWELEARNINTHISCHAPTER? Concepts •Choosingtherightevaluationstrategy •Decidingbetweencodeandpre-visualization Techniques •Pre-visualizetheinterface •Howtodoaheuristicevaluation •Performingusertests HOWDOWEEVALUATETHEDESIGN? Nowthatwehaveanalyzedhowtheusersusethetoolanddesignedone ormoreimprovements,itistimefortheEvaluationphase.Oneofthefirstquestionstoask ourselvesisifitwillbemorecost-effectivetogostraighttocodeortopre-visualizethe changestothetool.Thenextquestiontoaskisiftherearecurrentusersoruserswitha similarprofileavailabletovalidatetheinterface.Ifusersareavailable,wecandouser tests.Ifnot,wecanperformaheuristicevaluationwhilewewaitforuserstobecome available. CHOOSINGBETWEENCODEORPRE-VISUALIZATION InChapter2,welearnedaboutJeffHawkinsandthepowerofprevisualizing.Youmightbeaskingyourself,“Ifpre-visualizingissopowerful,whynotuse itallthetime?” 117 118◾DesigningtheUserExperienceofGameDevelopmentToolsIfyouarenota programmerandtherearenoprogrammersonyour team,orifthereareprogrammersbuttheydonothavetimeduringthe currentsprint,youronlyoptionistopre-visualize.Thiswillallowyoutostartgetting feedbackfromtheuserswhileyouwaitforprogramming resourcestobecomeavailable. However,ifyoucanprogramorifprogrammersareavailable,your decisiontocodeorpre-visualizewilldependonyoursituation.Hereareafewaspectsto consider. WhentoPre-Visualize tothetoolishigherthanthetimeitwouldtaketopre-visualize.Forexample,ittakesalot lesstimetosketchoutanewtypeofuserinterfacecontrolthathasneverbeencreated beforecomparedtofullyimplementingitincode. Ifyourgoalistomeasuretheimprovementtolearnability,previsualizationcanbeagoodchoice.Forexample,thedesigntechniquesofrepresentation andhierarchycanbesimulatedbyusingpre-visualizationwithgoodaccuracy. However,pre-visualizationisnotidealformeasuringimprovements toefficiencycomparedtomakingchangesdirectlytothecode.Thisis becausepre-visualizationtechniquescannotsimulatetheresponsetime ofarealcomputer,and,inthecaseofasketch,usingyourfingertopressabuttonisnot thesameasclickingonthebuttonwiththemouse. Furthermore,itisdifficulttosimulatealargedatabasewithprevisualization.Forexample,ifyourusertestrequiresthattheuserisabletosearchthrough adatabasecontainingthousandsoftextures,itcouldtakesignificantlylongertoprevisualizeeverypossibleoption.Inthesecases,youmaychoosetogostraighttocode. WhentoCode Aswelearnedearlier,ifyourmaingoalistoimproveefficiency,thebestwaytomeasure thisaccuratelyisbymakingchangestothecode,dueto thelimitedabilityofpre-visualizationtosimulatethecompleteexperienceofusingatool. Ifthechangesarerelativelysmall,suchasmovingaroundafewcontrolsintheinterface, thismayalsobeareasontomakethechangesdirectlyincode.Thisisbecausethetimeit wouldtaketosimulatesuchasmallchangetotheinterfacethroughpre-visualizationmay behigher. Evaluation◾119 However,ifthechangesthatyouwanttomakerequirealargeprogrammingeffortandyourmaininterestisseeingiftheusersunderstandandappreciatethenew interface,goingstraighttocodecouldbemoreexpensiveinthelongterm,especiallyifthe usersdonotlikethedesignintheend.Inthiscase,pre-visualizationmaybethebest choice. Ifyouhavedecidedtopre-visualizeinsteadofgoingstraighttocode,hereareafew techniquesthatyoucanuse. Sketch Sketchesareoneofthequickestwaystopre-visualize(seeFigure6.1).Theycouldbeon awhiteboard,inanotebook,orevenonanapkin.Because theyaresofasttocreate,theyareidealfortryingoutavarietyofdifferentoptions.Itdoes notmatterhowyousketch,aslongasyouareturningwordsintovisualsinaneffortto haveasharedvisionofthedesign. Youdonothavetobeagoodartisttosketch.Infact,ifthesketchlookslikeitdidnottake alotoftimetocreateanditiseasytochange,peoplearemorelikelytobehonestwith theirfeedback,whichisexactlywhat youwant. However,oneofthereasonsthatsketchesarefasttocreateisbecause theyarenotinteractive,andtheycontaintheleastamountofdetailcomparedtootherprevisualizationoptions.Thiscouldleadtoproblemsduringtheevaluation,ifthelackof interactivityanddetailsimpairstheuser’sabilitytounderstandtheinterface.Thechoiceto usesketchesdependsonthecomplexityofthedesignthatyouareevaluating. FIGURE6.1Sketchesareaquickandeasywaytopre-visualizetheinterface. 120◾DesigningtheUserExperienceofGameDevelopmentToolsFIGURE6.2Paper prototype,usingthe“WizardofOz”technique. PaperPrototype Paperprototypesareessentiallyinteractivesketches.Wecanusepen, paper,cardboard,scissors,tape,stickynotes,andothermaterialstocreateandsimulate interactiveelements(seeFigure6.2). Tomakeapaperprototypeinteractive,wecanusewhatiscalledthe “WizardofOz”technique.Thenamecomesfromthemovieofthesame tain.”Thistechniqueworksbestwithtwopeople:onepersonasksthe usertoaccomplishaspecifictask,andtheothersimulatestheinteractivitybymovingpiecesofthepaperprototypearoundinreactiontotheuser’sactions.* Simulatinginteractionwithapaperprototypehasafewadvantages overcode:Paperprototypesnevergetcompilerorlinkingerrors.Theonlythingyouneed todeploythemareyourowntwolegs.Theyareeasilyportableandcanbearchived indefinitelyinafilefolder.Finally,anyonecancreateapaperprototypewithouthavingto learnaprogramminglanguage oragraphicdesigntool.† *Toseeanexampleofthisinaction,watchthisvideo:http://www.youtube.com/watch? v= GrV2SZuRPv0. †Infact,thereisanoldjokeamonguserexperiencedesigners:ifyouhaveeverdonearts andcraftsinkindergarten,youcancreateapaperprototype. Evaluation◾121 InteractivePrototype Theseprototypesarecreatedandevaluatedonacomputerorotherdevice,using interactiveprototypecreationtools.*Thesetoolscomeprepackagedwithstandard controlssuchasbuttons,drop-downs,andcheckboxes. Mostallowyoutoaddsimpleinteractions,suchasopeningadialogbox whenclickingabutton(seeFigure6.3). Althoughtheycannotsimulateeverysingletypeofinteraction,most interactiveprototypecreationtoolshaveverypowerfulandversatilesystemsforbuilding interactions,aswellasvibrantcommunitieswherepeoplesharerecipestosimulate differenttypesofbehaviors. Inaddition,ifyourusersarenotinthesamebuilding—oreventhe samecountry—interactiveprototypesareclearlyabetterchoicecomparedtosketchesand paperprototypes,astheycanbesharedelectronically.Byusingscreensharing,youcan evenwatchpeopletesttheprototypeinrealtimeandgetfeedbackasifyouweresitting nexttothem. Interactiveprototypescanbringyouclosertosimulatingtherealtool ascomparedtosketchesandpaperprototypes.Ifyouaresimulatinga toolthatwillbeusedonadesktopcomputer,interactiveprototypesareaboutascloseas youcangettorealitywithoutactuallywritingcode. However,thereareafewdrawbackstointeractiveprototypes.Formost requireslearninganewtool.Inaddition,makingchangescansometimes bemorecomplicatedcomparedtoasketchorpaperprototype.Thereis alsothechancethatdeployingaprototypeonsomebodyelse’scomputer willnotworkatfirst.Forthisreason,itisrecommendedtotestoutinteractiveprototypes onanothermachinebeforedoingalargenumberof usertests. PERFORMAHEURISTICEVALUATION InChapter1,welearned—throughtheuserexperiencepyramid—that oneofthefoundationsofagooduserexperienceisusability.Heuristicevaluationcanbea usefultechniquewhentherearenousersavailable toevaluatetheinterface.Itallowsustocatchusabilityproblemsbeforetheusersdo. *TwoofthemostpopularprofessionaltoolsareAxureandBalsamiq,whichyoucanfind athttp:// www.axure.comandhttp://www.balsamiq.com,respectively.Anotheralternativeisto importaseriesofstaticscreenshotsintoMicrosoftPowerPoint,AppleKeynote,orAdobe Acrobatandmaketheminteractivebycreatingclickablehotspots. 122◾DesigningtheUserExperienceofGameDevelopmentToolsiq alsamoB sedt icen uilizzoni,l oG acom fGi arko edt egister sariqi alsam ission.m rototype.Ber ithp activepsedw nter,u nifaLC pleotudios,L xamneiqSA 3 alsam E6.RndB U FIG SRLa Evaluation◾123 Althoughtherearemanyvarietiesofusabilityheuristics,*forthepurposesofthisbook,wewilllearntheheuristicsestablishedbyJakobNielsenin1994, whichareperhapsthemostpopularandwidelyused.Theyorigi-natefromhisbook UsabilityEngineering.† Theheuristicsarelistedinthefollowingsections.Foreachone,you willfindaquoteofwhatsomeonemightsaywhenconfrontingthisheuristic,oneormoreexamplestohelpyouidentifytheheuristic,aswellasdesign techniquesfromthepreviouschapterthatcouldbeusedtoimprovetheproblem. WhatAretheHeuristics? VisibilityofSystemStatus “Whatisthetooldoingrightnow?Diditcrash?”Therearenoprogress barsorwaitcursors.Thetoolfreezeswhileitisperforminganactionwithouttellingthe usertowait.Therearenodialogstoinformtheuserofwhatisgoingon.Forthisheuristic, thetechniqueoffeedbackisrecommendedtokeeptheuserinformedofwhatthetoolis MatchbetweenSystemandRealWorld “Idon’tunderstandwhatthismeans.”Thewordsandconceptsusedinthetoolare confusing,becausetheydonotmatchtheuser’smentalmodel.Inaddition,thepositionof thecontrolsdoesnotmakesenserelativetotheirfunctionality(forexample,upanddown buttonsareplacedsidebyside). Inthecaseofthisheuristic,naturalmappingandrepresentationcanhelpmakethetool easiertounderstandbymatchingtheusers’mentalmodel moreclosely. UserControlandFreedom “HowdoIgobacktowhereIwasbefore?”Whenamistakeismade,there isnoclearwaytogobacktowhereyouwerebefore.Anothercommon sign:thetooldoesnotsupportundo/redo.Inthiscase,thetechniqueoffeed-forwardcan help.Thisisbecauseitallowstheusertoseewhattheiractionwilldo,whichgivesthem theoptiontochangetheirmindbefore itistoolate. *Hereareafew:http://en.wikipedia.org/wiki/Heuristic_evaluation,aswellasthoseby Bastien&Scapin:http://www.webmaestro.gouv.qc.ca/publications/archives/ webeducation1998-2004/2000-11/ criteres.pdf. †YoucanreadmoreaboutNielsen’sheuristicshere:http://www.nngroup.com/ articles/ ten-usability-heuristics/. 124◾DesigningtheUserExperienceofGameDevelopmentToolsConsistencyand Standards “Isthisthesameasthat?”Twosimilarcontrolsthateditthesametypeofdatadonotwork thesameway.Forexample,onelistboxmayonlydeleteselecteditemswiththedelete keyonthekeyboard,whereastheotherlistboxwithinthesametoolonlydeletesselected itemswithadeletebuttonintheinterface.Asopposedtoaspecificdesigntechnique,the bestwaytoaddressthisheuristicistoensurethatthetoolfollowsguidelinesanduses interactionpatternsconsistently. ErrorPrevention “HowcanIpreventthatmistakefromhappeningagain?”Theinterface makesitfartooeasyformistakestooccur,suchasallowinganitemtobedraggedand droppedwhereitisnotsupposedto,orsettingthedefault buttonfora“Exitwithoutsavechanges?”dialogboxto“Yes.”Thedesigntechniquesof constraintsandfeed-forwardcanbeusefulforfixingissuesassociatedwiththisheuristic. theiroptionsandpreventthemfrommakingmistakes. RecognitionRatherThanRecal “Ican’trememberwhatitwascalled.IfIhadalistofoptionstochoosefrom…”Thetool doesnotprovideavisualpreviewforalistof3Dmeshes,sotheonlywaytoknowwhat theyareistoopenthemoneatatime. Anothercommonexampleisforcingtheusertoremembersyntaxor objectnamesinsteadofprovidingsuggestions.Thisnotonlyhurtsefficiencybutalsocanleadtoerrors.Thedesigntechniqueofrepresentationcanbeuseful here,sinceitcanbeusedtohelptheuserrememberwhat theywerelookingforbyshowingthemalistofoptions. FlexibilityandEfficiencyofUse “Iwishtherewasafasterwaytodothis.”Actionsthatneedtobeperformedveryfrequentlydonothaveshortcuts,suchasahotkeyoraprominentbuttonin theinterface.Improvingexciseisoneofthemostcommonwaystohelpaddressproblems associatedwiththisheuristic. AestheticandMinimalistDesign “Whoa,thisinterfaceiscomplicated.Idon’tknowwheretostart!”Everypossiblefeature isexposedatonce,andtheuserdoesnotknowwheretoEvaluation◾125 lookfirst.Furthermore,thereisnowaytohideorsimplifytheuserinterfaceforthefirsttimeuser.Inthecaseofthisheuristic,thedesigntechniquesofhierarchyandprogressive disclosurecouldbeused,astheycanhelpguidetheeyeoftheuser,aswellaslettingthem determinehowmuchvisualcomplexitytheyneedintheinterface. HelpUsersRecognize,Diagnose,andRecoverfromErrors “Anerroroccurred.WhatdoIdonow?”Errormessagesdonotclearly indicatewhattheproblemisorhelptheusertofindasolution.Inthiscase,the recommendeddesigntechniqueswouldbeacombinationoffeedback (tolettheuserknowhowtofixtheerror)andconstraints(tohelptheuseravoidmaking themistakeinthefirstplace). HelpandDocumentation “I’mstuck,andthere’snoonearoundthatIcanask.WhatdoIdo?”No documentation,suchasawikipage,trainingvideo,orhelpfile,isavailable.Thereisno clearlymarkedplacetoaskforassistanceorlogabug. Thedesigntechniqueoffeedbackcanbeusedintheformofcontextual helpwithintheapplication,oftenseenaslittlequestionmarksnearauserinterface elementtolearnmoreabouthowitworks. HowtoPerformaHeuristicEvaluation Inanidealsituation,aheuristicevaluationisdonebyalargenumberofqualifieduser experiencedesigners,whothencombinetheireffortstofindasmanyusabilityproblemsas possible.However,doingaheuristicevaluationbyyourself,orwithafewmembersofthe toolsdevelopmentteam, maybebetterthannotdoingitatall. Toperformaheuristicevaluation,lookatthepre-visualizationortheworkingtoolthat youwanttoevaluate,andsearchforissuessimilartothosefromthelistofheuristics.It canbehelpfultodothisbysteppingthroughthetaskflowsthatyoucreatedduringthe Analysisphase. Whenyounoticeanissuethatmatchesoneoftheheuristics,indicate thenameoftheheuristicandwriteashortdescription.Optionally,youcantakea screenshotofthespecificpartoftheinterfacethatexhibitstheproblem.Youcanalso assignalevelofseverity,toindicatehowmuchthiscouldaffecttheusabilityofthetool. Thiscanhelptoprioritizewhattoimprovefirst. 126◾DesigningtheUserExperienceofGameDevelopmentToolsFIGURE6.4Heuristic evaluationoftheNVIDIANormalMapfilter. Forexample,ifweweretodoaheuristicevaluationontheNVIDIA NormalMaptool(seeFigure6.4),wemightidentifythefollowingissues: •Aestheticandminimalistdesign:Alloftheoptionsaredisplayedat once.Beginnersdonotknowwheretolookfirst,whichcanbevery intimidating.Severity:High. •Consistencyandstandards:The“AlternateConversions”sectionhas morethansevenradiobuttons.Microsoft’sdesignguidelinessuggestusingadrop-downwhentherearemorethansevenoptions. Severity:Low. evenwhenthereisnotextureselected.Thiscouldleadtotheuser wonderingwhytheycannotseetheirdecaltexture.Severity:Medium. Thesearejustafewexamples,andyoumaybeabletoidentifyotherissueswiththis particularinterface. Finally,rememberthatpeopleusetoolsinunexpectedways.Doing aheuristicevaluationisagoodfirstpasswhennousersareavailable. However,youshouldmakeeveryefforttofollowitupbytestingwith users.Someonewillworkwiththetooleventually,andthesooneryoucanwatchthem work,thebetter! DOUSERTESTS Oneofthebestwaystoevaluatetheuserexperienceisbydoingauser test.ThefirststeptodoingthisistobuildatestplanandselecttheusersEvaluation◾127 totest.Then,youneedtopreparetheinterfacethattheuserswillevaluate,eitherby makingchangesdirectlyinthecodeorbypre-visualizing.Finally,youcanrunthetests andexaminetheresultsinthenextAnalysisphase. BuildingaTestPlan Thesimplestkindoftestplanissimplyalistoftasksthatyouassigntotheuser.Ifyouare buildingatestplanforthefirsttime,youcangetanideaofwhichtaskstoincludeby lookingattheuserandstakeholdergoals,aswellasthetaskflowsandscenario storyboardsthatyoucreatedduringtheAnalysisphase.Allofthesecanbeusedtohelp youdeterminewhichtasksyouwillasktheuserstoperform. HowtoPhraseTasks Ataskshouldbephrasedintheformofaquestionsuchas“Howwould youdothis?”asopposedtoacommand:“Nowdothat.”Thisisacloser matchforthewaypeoplethinkwhentheyaretryingtoachievetheirgoals. Forexample,imaginethatoneoftheusergoalsidentifiedduringacontextualinquiryistocreateanewmeshwithashaderassignedandaddittothelevel. Threetasksarerequiredtoaccomplishthisgoal:createthemesh,addashader,andaddit tothelevel.Inthiscase,youcouldphrasethethreetasksasfolows:“Howwouldyou createamesh?”,“Howwouldyouadda shadertotheobject?”,and“Howwouldyouaddtheobjecttothelevel?” Don’tAssignLeadingTasks IntheAnalysisphase,wediscussedthedangerofaskingleadingquestions,andthesameappliestousertests.Ifthequestioninfluencestheuser,youcouldget inaccurateresults.Forexample,aleadingtaskwouldbe,“Usetheobjectlisttosearchfor howtoaddit.Abetteralternativewouldbe“Youneedtoaddatreetothelevel.How wouldyoudothat?” RealismandContext Itisalsoimportanttomakethequestionsrealisticandtogivethemcontext.Forexample, “Howwouldyouaddaskyscraperinthemiddleofthe forestinthislevel?”couldresultinunusualfeedbacksinceitisnotaveryrealistictask. Askingtheuser,“Howwouldyouaddalargetreetotheforestinthis level?”isgood,butanevenbetteralternativewouldbe,“Theartdirector128◾Designing theUserExperienceofGameDevelopmentToolshasrequestedthatalargetreebeadded totheforest.Howwouldyoudothat?”Thisquestionismorerealistic,andthefactthatthe requestcomesfromtheartdirectoraddscontextthatisappropriatetothattask. SpecificTasksAreEasiertoMeasure Itisimportantthatthetasksareasspecificaspossible.Thisallowstheresultsoftheuser testtobecomparednotonlybetweenusersbutalso acrossfutureiterationsoftheEvaluationphase.Forexample,theresultsofthetask“How wouldyoucreateanewshader?”couldvarywildlyiftheuseraddsadefaultshaderversus acomplexoceanshaderrequiringseveraltexturemapsandcustomizedpropertiesfor watermovement.Thetask “Howwouldyoucreatealambertshaderwithaprebuilttextureinthediffusechannel?”is muchmorespecificandthereforecanbemeasuredand comparedwithmoreaccuracy. SelecttheUsers Toselectwhichuserstotest,youcanusethesameapproachastheAnalysisphase.Pick userswhohaveaprofileappropriatetothetasks.Togetthemostaccurateresults,you wanttochooseuserswhoarealreadyusing thetool,inproduction. TestingwithSimilarUsers Inthegamesindustry,itisverycommonthattooldevelopmentbegins beforethecontentcreatorshavejoinedtheteam,andthatthedeadline todeliverthetoolsisrightbeforetheusersarriveandstartproducingassets.Thisoften meansthattoolsdevelopersarescheduledtoworkon othertasksshortlyaftertheusersarriveandstartusingthetoolsforthefirsttime.Ifthe usershavefeedbackabouthowthetoolscouldbe improved,therecouldbenooneavailabletomakechanges.Oftentimes, nothingbesidesthemosturgentproblemswiththebasefunctionalityof thetoolsarefixed.Thisoftenresultsintoolswithaninferioruserexperience,whichcosts Abetteralternativewouldbetohavetheequivalenttoolsdevelopment resourcesworkingwiththeusersbutspreadoutallthewaythroughproduction,insteadofabigburstofworkatthebeginning.Thiswillrequirethatthepeople whomanagetoolsdevelopersunderstandthevalueofthe User-CenteredDesignprocess,sothattheycanplantoolsdevelopment Evaluation◾129 tasksaccordingly,whichwillrequiretimeandaculturalshiftinthegamesindustry.We willtalkmoreaboutthatinthefinalchapter. Inthemeantime,ifyoufindyourselfinthissituation,selectingotheruserswhofita similarprofilemaybeyourbestoption.Ifyouaretestingchangesincode,anditisnot possibletodeploythetooltotheusers’computers,donotletthatstopyoufromgetting feedback.Bringthemtoyourdesk,ortoanycomputerthathasanearlyversionofthetool running. Alternatively,youcanconnecttoacomputerrunningthetoolviaremotedesktop(aslong asdoingthatdoesnotsignificantlyaffecttheuserexperienceormeasurements).The bottomlineisthatwaitingfortheperfectmomenttotestcouldresultinamissed opportunitytoimprovetheuser experience.Youshoulddoeverythingthatyoucantoensurethatthefirsttimethatthe userslayeyesonthetoolisnotrightbeforetheystartworkingwithitforthefirsttime. HowManyUsers? AccordingtoJakobNielsen,usertestingwithmorethanfiveusersresultsindiminishing returns.*Whilethereissomedebateoverthisnumber, onethingisclear:ifyoulimityourteststofiveusers,rememberthatthosefiveusers shouldhavethesameroleandshoulddothesametasks.In otherwords,ifyouassignfiveusersthetaskofusingaleveleditortoplaceobjects,but thoseusersareamixofanimators,3Dartists,andprogrammers,youareunlikelytoget accurateresults.Ontheotherhand,ifyoudothiswithfiveuserswhoarealllevel designersresponsibleforplacingobjectsinthelevel,youaremuchmorelikelytoget accurateresults. RuntheTest Nowitistimetogetfeedback.Meetwitheachuser,showthemthetool orpre-visualization,andgothroughyourtestplanonetaskatatime.Asinthecontextual analysis,resisttheurgetohelpiftheyhavedifficultyunderstandingoneofthetasks.Try tounderstandwhytheyarehaving difficulty,andthenmoveontothenexttask.However,unlikethecontextualanalysis,you maychoosetoaskthattheusersdonottalkoutloud,sinceitcouldaffectthetimeittakes themtocompleteatask.Inthiscase,useyourownjudgment. to-test-with-5-users/. 130◾DesigningtheUserExperienceofGameDevelopmentToolsIfyoucan,itisalso recommendedtoperformtheusertestswithtwo people:onepersonassigningthetasks,andtheothertakingnotes.Whenyouarealone,it canbedifficulttoassigntasks,observetheuser,andtakenotesallatonce.Havinga dedicatednote-takerensuresthatthepersonassigningthetaskscanfocusontheuserand noticethingsthattheymightmissiftheyweretakingnotes. Althoughusertestscantakelesstimethanacontextualanalysis,trytokeepthemunderan hour.Beingthesubjectofausertestcanbedrainingforsomepeople.Inanycase,ifthe usersareinproduction,theymaynothavemoretimethanthat.Ifyouencounterresistance whilerunningthe usertests(eitherfromtheuseryouaretestingorfromtheirsupervisor),ensurethat everyoneunderstandsthatthetimerequiredtorunauser testisasmallinvestmentcomparedtothepotentialsavingsoftimeandmoneyinthelong term. Itcanalsobehelpfultorecordavideooftheuser’sscreen,ortheir interactionwiththepre-visualization.Ifaninterestingorsignificanteventoccursduring theusertest,makeanoteofthetimethatitoccursinthevideo,sothatyoucangoback duringtheAnalysisphaseandgraba screenshotorshortvideoclip. WRAPPINGUP ThischapterfocusedontheEvaluationphaseoftheUser-CenteredDesignprocess.We learnedhowtoevaluateadesignandhowtodecidebetween pre-visualizationandgoingstraighttocode.Wealsolearnedaseriesoftechniquestobe usedduringtheEvaluationphase,suchassketching, paperprototyping,interactiveprototyping,performingaheuristicevaluation,andfinally, performingusertests. Inthenextchapter,wewillreturntotheAnalysisphase,goingback throughtheloopoftheUser-CenteredDesignprocess,anddiscussthe importanceofcomparingmeasurements. Chapter7 BacktoAnalysis DÉJÀVU Ifyouhavebeenreadingupuntilthispoint,youmightbewonderingwhywearetalkingabouttheAnalysisphaseagain.“Wealready didthatinChapter4!” User-CenteredDesignprocessisaniterativecycle.OnceyouhavecompletedtheEvaluationphase,examinethefeedbackgatheredduringthe Analysisphasetoplanyournextmove. DoWeHavetoDoEverythingOverAgain? OneofthemisconceptionsoftheUser-CenteredDesignprocessisthat itisaheavyprocessandthateachofthetechniquesmustbeusedeverytimethroughthe cycle.Thisisnottrue:whilethereisanup-frontcostindoingAnalysisforthefirsttime, insubsequentiterations,thetechniquesaretheretobeusedonanas-neededbasis. Asyougothroughtheloop,youmayfindthatyoumissedanimportanttaskthatthemajorityofusersdoonaregularbasis.Inthiscase,youcanproduce anothertaskflowtoaddtotheothers.Youmayalsodiscoverimportantusersofthetool thatyouwerenotawareofbefore.Thiscouldrequiredoingmorecontextualanalysesto discovertheirgoalsandmentalmodels. Ifnot,youcanspendtherestofthetimefocusingonanalyzingthe resultsoftheEvaluationphaseandpreparingforthenextroundofadjustmentsinthe Designphase. 131 132◾DesigningtheUserExperienceofGameDevelopmentToolsCOMPARING MEASUREMENTS Ingamedevelopment,weareaccustomedtogatheringallsortsofmeasurements:theburn-downrateofasprint,performancemetricsofthe CPUandGPU,howdifferenttypesofmemoryareallocated,budgetsfor varioustypesofexpenses,theamountofinformationoneachvertexofamesh,andsoon. Yet,whenwasthelasttimethattheefficiencyandlearnabilityofthegamedevelopment toolsweremeasuredonaregularbasis? Oneofthemainreasonsisduetotheperceptionthatittakestoomuch timetomeasure.However,considerthis:ifyougoonaroadtrip,doyoudrivearound aimlessly,hopingthatyouwillsoonarriveatyourdestina-tion,ordoyoustop occasionallytocheckamap?Developingatoolwithoutmeasuringislikedrivingaround withoutoccasionallycheckingamap(seeFigure7.1).Whileitistruethatverifying measurementstakesalittlebitoftimeateachiteration,thegoalisthattheoveralltime willbelower,asopposedtobarrelingforwardaimlesslyinthehopethatwearemaking thetoolbetter. ExpertOpinions Ifyouhavestudiedthehistoryofcomputerscience,youmayhavelearnedaboutAdmiral GraceHopper.Shedevelopedthefirstcompiler,andsheiscreditedwithpopularizingthe toanalyzetheresultsoftheevaluationphase. BacktoAnalysis◾133 quotesisthis:“Oneaccuratemeasurementisworthmorethanathousand expertopinions.” Inthegamesindustry,itiscommontohaveanexpertuserorstakeholderwhosejobitistorepresenttheneedsofalluserswiththesamejobdescription. Whenchangesaremadetoatool,wemayaskthispersonto decideifthechangesaregoodenough.Insomecases,theymaysaythat recentchangestothetoolhavemadeeveryonemoreproductive,andoftenthe conversationendsthere.However,howdoweknowthatthisistrue?* TheAnalysisphaseisouropportunitytolearntheanswertothisquestion.Byverifyingandcomparingthemeasurements,youcanseeifthe changeshavereallyhelpedtoimproveefficiency,learnability,orboth. EachtimeyougothroughtheAnalysisphase,comparethemeasurements tothepreviouscycle,andkeeparecordforthenextcycle.Thisisoneofthemostreliable waystoknowifthechangesmadeintheDesignphase aremovingthetoolintherightdirection. Itisimportanttonotethatthisdoesnotmeanthatwedonotvaluetheopinionofthe expertusersandstakeholders.Onthecontrary,byincludingthemintheUser-Centered Designprocess,theycanusetheinformationtomakeevenbetterdecisions,withlessrisk.Thiswillhelptobuildastronger relationshipbetweenallofthepeopleinvolvedinthedevelopmentofthetool,andkeep everyonefocusedonimprovingtheuserexperience. *Iwasthispersonforseveralgames,tools,andpipelines,andthereisnodoubtinmy mindthatmyopinionwaswrongonmanyoccasions! Chapter8 Real-WorldUserCenteredDesign INTRODUCTION Thepurposeofthischapteristopresenta“dayinthelife”account ofatoolsdevelopmentteamusingtheUser-CenteredDesignprocess. Thiswillgiveyouasenseofwhattheprocessfeelslike,whichcanhelpyoutounderstand howtoimplementityourself. TheCast •Sophie,projectmanager •Ben,artdirector Developers •Daniel,toolsprogrammer •Francis,technicalartist TheCompany Thisstorytakesplaceatamedium-sizedgamedeveloperthathasbeen inbusinessforovertenyears.Theyhavedevelopedtheirownengineandtools,which theyhaveusedtocreategamesthathavesoldenoughcop-iestokeeptheminbusiness. However,verylittleefforthasbeenputintoimprovingthetools,duetoperceivedtime andbudgetconstraints.Noone135 136◾DesigningtheUserExperienceofGameDevelopmentToolsismeasuringthe performanceoftheusers,anditisgenerallyacceptedthatifthetoolcancreatethe content,itis“done.” Asaresult,someofthetoolsarenotveryeasytouseandarefrequentlythesourceof frustrationforthecontentcreators.Mostofthesenioruserswhohavebeenwiththe companyformanyyearshavegivenuponcomplainingandhavesimplyacceptedthatthe toolsarethewaytheyare. TheSituation Sophiehasrecentlybeenpromotedtoprojectmanager.Thelastgamethatsheshipped sufferedfromgruelingovertime,productivityproblems,lostdata,andtheslowramp-up ofnewstaffduetodifficultylearningthetools. Someseniorpeoplequitshortlyaftertheproject,andthecostofretrainingthenewhires wassignificantlyhigherthaniftheyhadbeenabletokeeptheirstaff. Sophieiscurrentlyintheproductionphaseofhernextproject,andsheisstartingtosee thesamesituationemergefromthelastproject,especiallyinthecut-scenepipeline. Concernedthathistorywillrepeatitself,andbecauseworkoncut-sceneswillbestarting soon,shedecidesthatshewantstoseeifsheshouldinvestinimprovingtheefficiencyof thecut-scenepipeline. Shelearnsthattwodevelopersfromanotherteam,DanielandFrancis, havebeenusinganewapproachintheirtoolsdevelopmentwork—the User-CenteredDesignprocess—andthattheyhavebeengettingpositive results.Althoughshewantstoimprovethetools,likeagoodprojectmanager,shealso wantstoensurethatthebenefitsoutweighthecosts. DanielandFrancishaverecentlybecomeavailable,sosheasksthemto joinherteamtofocusonmakingthecut-scenepipelinemoreefficient.Sherequeststhat THEPROCESSINACTION Sprint1 Analysis DanielandFrancisstartbyinterviewingthestakeholders.Theyknow thatSophie’sgoalistomakethecut-scenepipelinemoreefficient.Theyalsointerview anotherstakeholder:Ben,theartdirectorwhoisresponsibleforthecut-scenes.They learnthatoneofBen’sgoalsistobeabletorequestchangestothecamerasandseethe resultssohecanvalidateReal-WorldUser-CenteredDesign◾137 thecomposition.Healsomentionsthat,duringthelastprojectheworkedon,askingthe animatorstomakechangestothecameratookaverylong time,whichhefoundfrustrating. Withthesestakeholdergoalsinmind,DanielandFrancismoveonto thenextstep:contextualanalyseswiththeuserswhoworkoncut-scenes. Inlightoftheartdirector’scomments,theyfocusontheuserswhospendthemostamount oftimeworkingwithcameras,theanimators.There aretwelveanimatorsinthecut-sceneteam,andtheyarescheduledtobeworkingoncutscenesforatotalofsixmonths. Duringthecontextualanalyses,Danieltalkstotheanimators,while Francistakesnotes.Theybeginbyaskingthemwhattheirgoalsarewhenworkingwith thecamera.Manyofthegoalsthattheuserstalkaboutcanbelinkedtotheproducerand theartdirector:theywanttoadjustthe camera,andtheywanttodoitquickly.However,unliketheartdirector,theirgoalisnot settingthecompositionofthecamerabutsimplygettingthejobdonesotheycanmoveon totheirnexttask. Duringthetaskofadjustingthecamera,oneoftheactionsistoadjustthedepthoffield. Thedepthoffieldhasfivevaluesthattheuserscanset:thestartandendofthenearblur, thestartandendofthefarblur,andthefocuspointdistance.Theymentionthatthey sometimesgetconfused aboutwhateachvaluerepresents,thatitisdifficulttofindthevaluetheyarelookingforat aglance,andthattheyoftenhavetoreadjustthevaluesmultipletimesbecausetheygo beyondtheminimumormaximum. Thejunioruserssaythatitisextremelydifficulttousethedepthoffieldtool.Thesenior userssaythatwhileitisnotperfect,thejuniorusersjusthavetoadapttoit.Infact,the biggestcomplaintfromtheseniorusersisregardingsomethingthatisdoneonlyon occasion:copyingthesettings fromonecameratoanother,whichrequiresthattheycopyandpastethe valuesonefieldatatime. improved,mostlybecauseitusedtobeworse!Inthepast,tochangethedepthoffield,the usershadtocreateascriptfilethatcontainedcommandstosetthedepthoffieldand attachthatscriptfiletothecamera.Thiswasaproblembecausemanyuserswould generateerrorsbyforgettingtoputacommaorasemicolon,misspellingthenameofthe command,andsoon (seetheleftsideofFigure8.1). Toimprovethesituation,oneofthetoolsprogrammerscreatedatool tosetthedepthoffield:awindowwitharowofnumericboxes(seetherightsideof Figure8.1).Eventhoughsomeusersfeelthatthistoolisgood 138◾DesigningtheUserExperienceofGameDevelopmentToolsFIGURE8.1The previous(left)andcurrent(right)methodsforsettingthedepthoffieldofcameras. 100%ofusers,often Manually Selectcamera Move/Rotate AdjustDOF 30%ofusers,rarely Copy/PasteValues FIGURE8.2Taskflowanalysisfortheprocessofsettingupcamerasforcut-scenes. enoughandthatthereisnothinglefttodo,itiscleartoDanielandFrancisthatthistool simplyexposestheconceptualmodelofthedepthoffieldscriptcommand,andthat efficiencycouldbeimprovedfurther. Usingthenotesfromtheircontextualanalyses,DanielandFrancis starttobuildataskflowforadjustingthecamera(seeFigure8.2). Afteranalyzingtheresultsofthetaskflow,theyobservethatalloftheusersadjustthe depthoffieldmanually,andthattheydoitoften.Theydecidethattheywillworkon improvingtheefficiencyofthisactionfirst,andthattheywillworkonthecopy/pasting Design Toimprovetheefficiencyofmakingmanualadjustmentsusingthedepth offieldtool,DanielandFrancisstartbyproposingafewsmall,iterativechangestothe existingdesign. Tomakethelabelseasiertoscan,theyapplythedesigntechniqueof hierarchy.Next,toreducetheamountoftimewastedbyfixinginvalidvalues,theyreplace thenumericboxeswithsliders(followingtheMicrosoftguidelines).Thismakesitclear thatthevalueshaveaminimumandmaximum.Finally,theymodifythelabelssothatthey aremorefamiliarto Real-WorldUser-CenteredDesign◾139 theusers.Forexample,thenewtermfor“TARGET”is“FocusDistance,” whichmatchesthenameofasimilarvaluefoundinthedepthoffield camerasettingsoftheanimationtoolthattheanimatorsareaccustomed tousing. Evaluation DanielandFrancisstarttobuildtheirtestplan.Theymakealistoftasksthatcanbeused tomeasuretheefficiencyofmanuallyadjustingthedepthoffieldvalues.Afewexamples: “Theartdirectorwouldlikeyoutoincreasethefocuspointof‘camera_2’by10unitsfrom frame10toframe35inthecut-scene‘Chapter1_ChaseB.’Howwouldyoudothat?”and “Youreceiveabugreportthatthenearblurof‘camera_3’istoohighby20units throughoutthecut-scene‘Chapter3_BossFightIntro.’Howwouldyoufixthat?” decidetogodirectlytocodeasopposedtopre-visualizing(Figure8.3). Beforerunningthetests,DanielandFrancisalsodecidetoperforma heuristicevaluationonthenewversionofthedepthoffieldtool.Afewoftheheuristics jumpoutatthemrightaway: •Matchbetweensystemandrealworld:Theorderandlayoutofthe numericboxesmatchthe“setDOF”commandmorethanthecameraandthedepthoffieldeffect. •Flexibilityandefficiencyofuse:Theusersneedtoclickonthe“Apply” buttoneverytimetheymakeachange. FIGURE8.3Firstiterationoftheimproveddepthoffieldtool. 140◾DesigningtheUserExperienceofGameDevelopmentToolsTheydeploythe changesandruntheirusertests.Thistime,Francis assignstaskstotheuserswhileDanieltakesnotes.Theyalsorecordtheusers’screen whiletheyarewatchingthemwork. Sprint2 Analysis Aftertheusertestsaredone,DanielandFrancisanalyzethenotesandthevideos.They calculatethattheuserstakeanaverageof20secondstocompleteallofthetasksfromthe usertest.Thiswillbetheirbaselinemeasurement. Theyalsonotethatthemajorityoftheusersfeelthattheorderoftheslidersisconfusing. DanielandFrancisbelievethatthisisbecausetheydonotmatchtheusers’mentalmodel ofthecamera,whichisconsistentwiththeirfindingsduringtheheuristicevaluation. DanielandFrancisdecidetodoabriefcontextualanalysisfocusedonunderstandingthe users’mentalmodelofthecamera. Aftermeetingwiththeusers,theyrealizethatmanyofthemdescribe thecamerafromasideview,indicatingthepointsatwhichthenearandfarbluroccur. Oneoftheusersevendoesasketchrepresentingtheirmentalmodelofthecamera(see Figure8.4).ThisinspiresDanielandFrancistoimprovethedesign. Francishastheideatousethedesigntechniqueofrepresentationtolayouttheslidersso thattheymatchtheusers’mentalmodel.TheonlyissueisthatFranciscannotfinda multithumbsliderintheMicrosoftguidelines,sohelookstoothercontentcreation software.HefindsexamplesofmultithumbslidersintheInputLevelssectionofthe Levelswindow inAdobePhotoshop(seethetopofFigure8.5),aswellaswiththeRangeFIGURE8.4 Exploringthementalmodelfordepthoffield. Real-WorldUser-CenteredDesign◾141 FIGURE8.5Researchingcommoninteractionpatternsforamulti-thumb sliderinAdobePhotoshop(top)andAutodeskMaya(bottom).Adobeproduct AutodeskscreenshotsreprintedwiththepermissionofAutodesk,Inc. 142◾DesigningtheUserExperienceofGameDevelopmentToolsFIGURE8.6Second iterationoftheimproveddepthoffieldtool. sliderinAutodeskMaya(seethebottomofFigure8.5).Heusestheseastheinteraction pattern. Evaluation BecausethisdesigncontainscontrolsthatdonotexistintheirUItoolkit,andDanielhas anurgentbugtofix,Francisdecidestopre-visualize.Hecreatesasimplepaperprototype andthenperformsa“WizardofOz”test. Thefeedbackfromtheusersispositive.Theysaythattheinterfacefeelsmorenaturalthan theprevioustool,andtheystatethatitwillenablethemtoworkfaster.Whilethisisgood feedback,thepaperprototypecanonlyconfirmthatthenewdesignmatchesthemental model,butitcannot determineifitincreasesefficiency.Theonlywaytoanswerthatwillbetoimplementthe changes.OnceDanielisavailable,theymodifytheinterfaceanddeploytheupdated version(seeFigure8.6). Astheyaremodifyingtheinterface,DanielandFrancisareapproached byafewuserswhoremindthemthatcopyingandpastingvaluesisstillaproblem.Since theyhavemadesomeprogressonmakingmanualadjustments,DanielandFrancisdecide toseeiftheycanimprovecopyingand pastingvaluesaswel.Theystartbycreatingausertestforcopyingandpastingvalues fromonecameratoanother,withtaskssuchas“Anotheranimatorsetup‘cam_5’inthe cut-scene‘Chapter5_IntroC,’andyouwanttousethesamesettingsfromframe25.How wouldyoudothat?” Theyrunboththeusertestformanuallyadjustingvaluesaswellastheusertestfor copyingandpastingvaluesfromonecameratoanother. Sprint3 Analysis DanielandFrancisanalyzethepreviousEvaluationphaseandperform anothermeasurement.Theydiscoverthattheusersnowtakeanaverageof Real-WorldUser-CenteredDesign◾143 ninesecondstoadjustthedepthoffieldmanually,whichisan11-secondimprovement fromwheretheystarted.Theyalsoanalyzetheresultsfrom thecopyingandpastingcameravaluesusertestandarriveatabaselinemeasurementof sevenseconds. Design Toimprovetheefficiencyevenfurther,DanielandFrancisdesigntwo changesthatusethetechniqueofreducingexcise. First,theymodifythetoolsothatthecamerasettingsautomatically updateassoonastheslidersaremodified.ThisallowstheApplybuttontoberemoved,so theusersdonothavetomovetheirmousedowntothe bottomofthetoolandclickeverytimetheymakeachange. Second,theyaddtheabilitytocopyandpastefromonecamerato another.Theyexposethisfunctionalitytotheusersbyimplementing astandardEditmenuwithcopyandpastemenuitems.Theyassociate thecopyandpastecommandstohotkeysthatfollowexistingstandards: Ctrl/Cmd+CandCtrl/Cmd+V.Thisway,userscancopyandpastevalues fromonecameratoanotherquicklyandeasily. Evaluation Sincethechangesaresmall,theydecidetomakethemdirectlyincode (seeFigure8.7).Theyruntheirusertests,andtheresultsfromtheusersarepositive.All oftheusersappreciatethattheyarenolongerrequiredtoclickontheApplybuttonto updatethedepthoffieldintheviewport. Theuserswhocopyandpastevaluesareveryhappythattheycan nowdoitfaster.Theyalsosaythattheythinkthiswillhavethebiggestimpacton efficiencyoutofalltheimprovementsthatDanielandFrancishavemade. FIGURE8.7Thirditerationoftheimproveddepthoffieldtool. 144◾DesigningtheUserExperienceofGameDevelopmentToolsSprint4 DanielandFrancisexaminetheresultsandseethatcopyingandpastingvalueshasdroppedfromsevensecondstotwoseconds.Thatisan improvementoffiveseconds,whichappearstobesignificant. RemovingtheApplybuttonhasmadeabigdifferenceforallofthe usersofthetool,byloweringthetimetoadjustthedepthoffieldmanuallytojustthree seconds.Thatisanoverallimprovementof17seconds. CALCULATINGTHERETURNONINVESTMENT Benisverypleasedwiththeimprovementstothedepthoffieldtool,andhetellsSophie aboutit.AlthoughshetrustsBen’sopinion,shewantstoensurethatthetimeandmoney spentonimprovingthetoolsarepaying off.SherequestsastatusupdatefromDanielandFrancissothatshecancalculatethe returnoninvestment.*Sheusesthefollowinginformation forhercalculation: •Cut-sceneproductionwilllastsixmonths(130workingdays). •Twelveusersusethedepthoffieldtooltoadjustthecamera.Onaverage,theydothis90 timesper8-hourday. •Fouruserscopyandpastevaluesbetweencameras.Onaverage,they dothis10timesper8-hourday. •Eachuserworkingonthecut-scenescosts$10,000permonth. ThismeansthatbeforeDanielandFrancismadeanyimprovements,allof theuserstogetherwouldspendoverfiveman-monthsworkingwiththe depthoffieldoverthesix-monthperiod,atacostofalmost$50,000(seeFigure8.8). Aftertheimprovements,theusersarenowspendingalittleunderone man-monthworkingwiththedepthoffieldoverthesix-monthperiod,oraround$7,500 (seeFigure8.9). Althoughitmaylookliketheimprovementshaveresultedinasavings of$42,500,SophiehastosubtractthetimespentbyDanielandFrancis. Sincetheyworkedonthedepthoffieldtoolforthreetwo-weeksprints,andtheycost $10,000perman-month,theinvestmentwas$30,000.This *YoucanfindavarietyofROIcalculatorsontheHumanFactorswebsitehere: http://humanfactors. com/coolstuff/roi.asp. Real-WorldUser-CenteredDesign◾145 BeforeChangestoDepthofFieldTool 130 Cost/man-month$10,000 ManuallyChangeValues Copy/PasteValues Numberofusers 12 Numberofusers 4 Secondsperaction 20 Secondsperaction 7 Timesperday 90 Timesperday 10 Totalman-months 4.8 Totalman-months 0.06 Totalcost$48,750 Totalcost $630 FIGURE8.8Calculatingthecostofusingthedepthoffieldtool. AfterChangestoDepthofFieldTool Duration(indays) 130 Cost/man-month$10,000 ManuallyChangeValues Copy/PasteValues Numberofusers Numberofusers 4 Secondsperaction 3 Secondsperaction 2 Timesperday 90 Timesperday 10 Totalman-months 0.7 Totalman-months 0.01 Totalcost$7,312 Totalcost $180 FIGURE8.9Calculatingthecostofusingthedepthoffieldtoolaftertheimprovementsto theuserexperience,inanefforttocalculatethereturnoninvestment(ROI). meansthatthetotalreturnoninvestmentwas$12,500.Thatisoveraman-monthoftime thatdidnotexistbeforetheimprovements,andDanielandFrancisarenotdoneyet.In addition,itisimportanttonotethatanyotherproductionthatusestheupdateddepthof fieldtoolinthefuturewillbenefitfromtheseimprovements,immediately,atnocost. Unfortunately,thecopyandpastefunctionalitydidnotresultinas muchofareturnaswashoped,whichemphasizesthatthebiggestimpact comesfromtheimprovementsthataffectthehighestnumberofusers,andthosewhouse thetoolsthemostfrequently. Ultimately,theimprovementshavehadapositivereturnoninvestment. SophieissatisfiedwiththeresultsandasksDanielandFrancistocontinueimprovingthe userexperienceofthegamedevelopmenttoolsbyapplying theUser-CenteredDesignprocess. Conclusion SUMMARY thatcanbeusedtoimprovetheuserexperienceofgamedevelopmenttools. InChapter1,welearnedthedefinitionofauserexperience,whywe shouldimprovetheuserexperience,aswellasthevalueofimprovingtheuserexperience. Wealsolearnedtheimportanceofbalancingtheneedsofthevariousgroupsinvolvedin thedevelopmentofatool. Chapter2introducedyoutotheUser-CenteredDesignprocess.We learnedabouttheadvantagesoftheprocess,aswellashowtointegrateitintoAgile.We alsodiscussedhowtodealwithalackoftimeandresources. Chapter3focusedonwhatitmeanstobe“User-Centered.”Inthis chapter,welearnedabouttheimportanceoffocusingontherightusers andensuringthatthefeaturesareusefulforthoseusers.Wealsodiscoveredthepowerof pre-visualizationandthedifferencesbetweenfeaturesandgoals. Chapter4presentedtheAnalysisphase,wherewediscussedtheimportanceofwatchinguserswork,anintroductiontohuman–computerinteraction,aswellasthedifferencebetweenamentalmodelandaconceptualmodel.Wealso learnedaboutinterviews,contextualanalysis,andtask flows,inadditiontounderstandinghowtomeasureimprovementstothe userexperience. Chapter5wasallabouttheDesignphase:howthebrainandtheeyes worktogether,aswellasvisuallanguageandinteractionpatterns.Wealsolearnedawide varietyoftechniquesthatcanbeusedtoaddresscommon designproblems,aswellascommoninteractionpatternsforeach. InChapter6,wediscoveredhowtochoosetherightstrategyforevaluatingourdesigns.Wealsolearnedpre-visualizationtechniquesandheuristicevaluation. Finally,welearnedhowtobuildandrunusertests. 147 148◾Conclusion Chapter7broughtusbacktotheAnalysisphasetocompareourmeasurementsandtoprepareforanothercyclethroughtheUser-Centered Designprocess. Finally,Chapter8walkedusthroughadayinthelifeofatoolsdevelopmentteamtasked withimprovingtheuserexperienceofatool,togiveusabettersenseofhowitfeelsto applytheUser-CenteredDesignprocess. CLOSINGWORD Throughoutthisbook,wehaveusedexamplesfromApple.Thisisnot becauseeverysingleoneoftheirproductshasthebestuserexperience— theycertainlyhavemadesomemistakesovertheyears—buttheirproductsprovidegoodexamplesthatcanbeusedtosupporttheconceptsand techniquespresentedinthisbook.However,youmightbewondering, whatistheirsecret?Howdotheydoit? OneofthemisconceptionsaboutwhyAppleproductsaresosuccessful isthattheyhavethebestdesignersintheworld.Whiletheirdesignersarecertainlyvery good,thatisnottheonlyfactoratplay. AninterviewwithformerAppleseniordesignerMarkKawanosheds somelightonthetruth:everyoneatAppleworkstogethertoimprove theuserexperience.“It’sactuallytheengineeringculture,andthewaytheorganizationis structuredtoappreciateandsupportdesign.Everybody thereisthinkingaboutUXanddesign,notjustthedesigners.Andthat’swhatmakes everythingabouttheproductsomuchbetter…muchmore thananyindividualdesignerordesignteam.”* Thegamesindustryneedstomaketheuserexperienceoftoolsapriority.Todothat,weneedtheUser-CenteredDesignprocesstobecomeas commonasusingScrum,profilingGPUperformance,andcreatingcutscenestoryboards.Whenthathappens,wewillstarttoseetheculture shiftnecessarytomakebigimprovements. WheretoBegin? Nowthatyouhavereadthisbook,thefirststepistostartapplyingtheUser-Centered Designprocesstoyourowntoolsdevelopmentwork.Once youfeelconfidentwiththeprocessandyouhavehadsuccessthatyou canmeasure,thenextstepistospreadtheword.Helppeopleunderstand *Youcanreadthefullinterviewhere:http://www.fastcodesign.com/3030923/4-mythsabout-apple-design-from-an-ex-apple-designer. Conclusion◾149 howUser-CenteredDesigncanbeintegratedintothetoolsdevelopment pipelineatyourstudio,becauseeverystudioisdifferent.Tellyourcolleagueshowyou achievedyoursuccesses,andwhatyoulearnedfromyour failures.Everyoneinthegamesindustryshouldbeawareoftheincrediblepotentialthatis Thereisnorightorwrongtimetostart.Startsmall,andthenworkyourwayup.Doa heuristicevaluationofthattoolyouhavebeenworkingon. Setupafewinterviewswiththestakeholdersandcontextualanalyseswiththeusersso youcanestablishandtrackmeasurements.Applyoneofthe manytechniquesfoundintheDesignchapter. Improvingtheuserexperienceisaniterativeprocess,whichmeansyou canbeginatanytime…andthattimemightaswellbenow! Areyouready?Three…two…one…go! Thanks Thisbookwaswritten,illustrated,andeditedinairplanes,trains,hotelrooms,andcafes, infourcities,ontwocontinents,ononelaptop.Itwouldnothavebeenpossiblewithout thefollowingpeople. JimBrown,LiamGrieg,TomHoferek,CoreyJohnson,Thérèse Migan,JasonParks,andKarineThériaultfortheirinvaluablefeedback. DominiqueRoussy,forgivingmemyfirstjobinthegamesindustry.My firstcomputerscienceteacher,SusanVanGelder,forseeingmyinterestinthefusionof programmingandart,andprovidingmewiththetoolsI needed.MikeActon,forhiscontributionstogametoolsusability,andforprovidingthe foreword.GeoffEvans,JeffWard,DanGoodman,andall otherpast,present,andfuturemembersoftheToolsmithsIGDASIG,for workingtobringthechallengesofgametoolsdevelopmentintothespotlight.Ubisoft,forgivingmetheopportunitytoturnmypassionforuserexperienceand contentcreationtoolsintoacareer.Pierre-LucTremblay,forintroducingmetoThe InmatesAreRunningtheAsylum—andtoAlanCooperforwritingit.RickAdams,Maura Cregan,MarshaPronin,Amy Blalock,CharlotteByrnes,andeveryoneatCRCPresswhohelpedtomake thisbookpossible.LucySuchman,JasonMitchell,andSaraLottatthe ComputerHistoryMuseumforprovidingafewoftheimagesinthisbook. Sony,formakingatoughlittlelaptopthataccompaniedmethroughout thislongjourney.Mybigbrotherandbigsister,whopreparedmefortherealworldby sandwichingmeinthebackseatofourparents’car.Mywifeandchildrenforreminding methatthereismoretolifethanjustcontentcreationtools…whichIbelieve,mostofthe time.Thankyou,Andrea, Benjamin,andSophie…Iloveyou! 151 RecommendedReading Adlin,Tamara,andJohnPruitt.TheEssentialPersonaLifecycle:YourGuidetoBuilding andUsingPersonas.SanFrancisco,CA:MorganKaufmann,2010. Alexander,Christopher,SaraIshikawa,andMurraySilverstein.APatternLanguage: Towns,Buildings,Construction.NewYork:OxfordUniversityPress,1977. Anderson,Jonathan,JohnMcRee,RobbWilson,etal.EffectiveUI.Beijing:O’Reily, 2010. Buxton,William.SketchingUserExperiences:GettingtheDesignRightandtheRight Design.Amsterdam:Elsevier/MorganKaufmann,2007. Cooper,Alan.TheInmatesAreRunningtheAsylum.Indianapolis,IN:Sams,1999. Cooper,Alan,RobertReimann,andDaveCronin.AboutFace3:TheEssentialsof InteractionDesign.3rded.Indianapolis,IN:WileyPub.,2007. Gamma,Erich,RichardHelm,RalphJohnson,andJohnVlissides.DesignPatterns: ElementsofReusableObject-OrientedSoftware.UpperSaddleRiver,NJ:AddisonWesley,1995. Gladwel,Malcolm.DavidandGoliath:Underdogs,Misfits,andtheArtofBattling Giants.NewYork:LittleBrown&Company,2013. Gothelf,Jeff,andJoshSeiden.LeanUX:ApplyingLeanPrinciplestoImproveUser Experience.Sebastopol,CA:O’ReilyMedia,2013. Hawkins,Jeff,andSandraBlakeslee.OnInteligence.NewYork:TimesBooks,2004. Hiltzik,MichaelA.DealersofLightning:XeroxPARCandtheDawnoftheComputer Age.NewYork:HarperBusiness,1999. Johnson,Jeff.DesigningwiththeMindinMind:SimpleGuidetoUnderstandingUser InterfaceDesignRules.Amsterdam:MorganKaufmannPublishers/ Elsevier,2010. Krug,Steve.Don’tMakeMeThink!:ACommonSenseApproachtoWebUsability. 2nded.Berkeley,CA:NewRidersPub.,2006. McConnel,Steve.CodeComplete:APracticalHandbookofSoftwareConstruction. 2nded.Redmond,WA:MicrosoftPress,2004. Myers,BradA.“TheImportanceofPercent-DoneProgressIndicatorsfor Computer–HumanInterfaces.”ACMSIGCHIBuletin16,no.4(1985):11–17. 153 154◾WorksCited&RecommendedReading Nielsen,Jakob.“FirstRuleofUsability?Don’tListentoUsers.”NielsenNormanGroup. http://www.nngroup.com/articles/first-rule-of-usability-dont-listen-to-users/(accessed Nielsen,Jakob.“WhyYouOnlyNeedtoTestwith5Users.”NielsenNormanGroup. http://www.nngroup.com/articles/why-you-only-need-to-test-with-5-users(accessed July15,2014). Nielsen,Jakob.“ResponseTimeLimits.”NielsenNormanGroup.http://www. nngroup.com/articles/response-times-3-important-limits/(accessedJuly15,2014). Nielsen,Jakob.UsabilityEngineering.Boston:AcademicPress,1993. Norman,DonaldA.TheDesignofEverydayThings.NewYork:BasicBooks,1988. Portigal,Steve.InterviewingUsers:HowtoUncoverCompelingInsights.Brooklyn,NY: RosenfeldMedia,2013. Saffer,Dan.DesigningforInteraction:CreatingInnovativeApplicationsandDevices. 2nded.Berkeley,CA:NewRiders,2010. Sanders,ElizabethB.-N.“ConvergingPerspectives:ProductDevelopmentResearchfor the1990s.”DesignManagementJournal(FormerSeries)3,no.4(1992):49–54. Suchman,LucilleAlice.Human–MachineReconfigurations:PlansandSituatedActions. 2nded.Cambridge:CambridgeUniversityPress,2007. Sy,Desiree.“AdaptingUsabilityInvestigationsforAgileUser-CenteredDesign.” JournalofUsabilityStudies2,no.3(May2007),112–132.(Availableat http://uxpajournal.org/wp-content/uploads/pdf/agile-ucd.pdf.) Vlaskovits,Patrick.“HenryFord,Innovation,andThat‘FasterHorse’Quote.” HarvardBusinessReview.http://blogs.hbr.org/2011/08/henry-ford-never-said-the-fast/ (accessedJuly15,2014). Weinschenk,Susan.100ThingsEveryDesignerNeedstoKnowaboutPeople. Berkeley,CA:NewRiders,2011. Wilson,Mark.“4MythsaboutAppleDesign,fromanEx-AppleDesigner.”Co. Design.http://www.fastcodesign.com/3030923/4-myths-about-apple-design-from-anex-apple-designer(accessedJuly15,2014). TOOLS&GUIDELINES MicrosoftWindowsUserExperienceGuidelines:http://msdn.microsoft.com/ library/windows/desktop/dn688964.aspx AppleOSXUserExperienceGuidelines:https://developer.apple.com/library/mac/ documentation/UserExperience/Conceptual/AppleHIGuidelines/Intro/ Intro.html W3Cstandardsforcontrast:http://www.w3.org/TR/UNDERSTANDING-WCAG20/ visual-audio-contrast-contrast.html roi.asp MeasuringUsabilityarticleontheSUS(SystemUsabilityScale):http://www. measuringusability.com/sus.php JakobNielsen’s10UsabilityHeuristics:http://www.nngroup.com/articles/ten-usabilityheuristics/ Trademarks Adobe•,theAdobe•logo,Adobe•Audition•,Adobe•Photoshop•, Adobe•PremierePro•,andAdobe•Illustrator•areeitherregistered trademarksortrademarksofAdobeSystemsIncorporatedintheUnited Statesand/orothercountries. Autodesk•,theAutodesk•logo,Autodesk•Maya•,Autodesk• Combustion•,andAutodesk•3dsmax•areregisteredtrademarksor trademarksofAutodesk,Inc.,and/oritssubsidiariesand/oraffiliatesintheUnitedStates and/orothercountries. TheUnity•name,logo,brand,andothertrademarksorimagesfeatured orreferredtowithinthisbookarelicensedfromandarethesolepropertyofUnity Technologies.Neitherthisbook,itsauthor,northepublisherisaffiliatedwith,endorsed by,orsponsoredbyUnityTechnologiesoranyofitsaffiliates. Microsoft•,theMicrosoft•logo,Office•,Word•,Excel•,PowerPoint•, VisualStudio•,Halo•,ExpressionBlend•,andWindows•areeitherregisteredtrademarksortrademarksofMicrosoftCorporationintheUnited Statesand/orothercountries. Apple•,theApple•logo,GarageBand•,Mac•,Xcode•,iTunes•,iPhone•, iPod•,iOS•,andOSX•aretrademarksofApple,Inc.,registeredinthe UnitedStatesandothercountries. NVIDIA•,theNVIDIA•logo,NVIDIA•TextureTools,andthe NVIDIA•NormalMapfilteraretrademarksand/orregisteredtrademarksofNVIDIACorporationintheUnitedStatesandothercountries. Audacity•softwareiscopyright(c)1999-2014AudacityTeam.Thename Audacity•isaregisteredtrademarkofDominicMazzoni. 155 156◾Trademarks BalsamiqSRLandBalsamiqStudios,LLC,usedwithpermission. StarCraft•andBlizzardEntertainment•aretrademarksorregisteredtrademarksof BlizzardEntertainment,Inc.,intheUnitedStatesand/orothercountries. QtisaregisteredtrademarkofDigiaPlcand/oritssubsidiaries. Xerox•,theXerox•logo,andtheXerox•8200areregisteredtrademarks ofXeroxCorporationintheUnitedStatesand/orothercountries. iRiver,theiRiverlogo,andtheiRiverH300areregisteredtrademarksofiRiverLimitedin theRepublicofKoreaand/orothercountries. Epic,EpicGames,andtheEpicGameslogoaretrademarksorregistered trademarksofEpicGames,Inc.,intheUnitedStatesandelsewhere. Amazon,Kindle,Storyteller,andMechanicalTurkaretrademarksof Amazon.com,Inc.,oritsaffiliates. Sony,theSonylogo,PlayStation,Vaio,EmotionEngine,andCell BroadbandEnginearetrademarksorregisteredtrademarksofSony ComputerEntertainment,Inc.,intheUnitedStates,othercountries,or bothandisusedunderlicensetherefrom. PixarisaregisteredtrademarkofPixarAnimationStudios. LogitechisaregisteredtrademarkofLogitechInternationalintheUnitedStatesandother countries. Valve,theValvelogo,andTeamFortress2aretrademarksand/orregisteredtrademarksofValveCorporation. MadCatzandtheMadCatzlogoaretrademarksorregisteredtrademarks ofMadCatzInteractive,Inc.,itssubsidiariesandaffiliates. “MiniconsFreeVectorIconsPack”byWebalys(http:/www.webalys.com/ minicons)usedunderCCBY3.0license(http:/creativecommons.org/ licenses/by/3.0/). L COMPUTERGAMEDEVELOPMENT/DESIGN IGHTBOWN DesigningtheUserExperienceofGame DevelopmentTools “Davidisguidedbyhisbeliefthathecancontributetoraisingthebarforallofus:that wecanallspeakthesamelanguage,understandthesameconcepts,andusethesame techniques,sothatwecanallmakebettergames.Whatyouarereadingnowistheresult ofDavidLightbown’sfirstbigmissiononthatverylongquest.” DESI —MikeActon,EngineDirector,InsomniacGames “UserexperienceisthepreeminentdesignchallengeofourtimeandDavidhasGNIN capturedandrefinedtheseconceptstohelpusproducebeautifullydesignedworkflows thatareapleasuretouse.Hisacclaimedlectures,nowdemonstratedandelaboratedin thisbook,arebrilliantandveryappropriatetoourindustry.” GTHEU theUser —JasonParks,Owner,ContinuityAI;FormerTechnicalArtistforSCEA,THQ,and Volition SER “DavidLightbown’sbookshinesalightonadarkcornerofthegames,butit’sacorneron thepathwetakeeverydayingamedevelopment.AlldevelopersoweEX ittotheirfutureselvestolearntoapplytheprocesspresentedinthisbooktoPER IEN Experience theirtools.” —CoreyJohnson,UnityTechnologies C “Ifyoubuildgamestoolsandarenotfamiliarwithuser-centereddesign,thenEO youshouldreadthisbook.…providesacomprehensiveintroductiontoF user-centereddesignwitheasy-to-understandexplanationsandplentyofGAME ofGame real-worldexamplesthatdemonstratetheprinciplesandbestpracticesyouneedtoknow tostartbuildingbettertoolstoday.” D —TomHoferek,PrincipalUserExperienceDesigner,AutodeskEVEL DesigningtheUserExperienceofGameDevelopmentToolsexplains OPMEN Development howtoimprovetheuserexperienceofgamedevelopmenttools.Thefirstpartofthebook detailsthelogicbehindwhytheuserexperienceofgametoolsmustbeimproved.The secondpartintroducestheconceptofuser-centereddesign,T aprocessthatrevolvesaroundunderstandingpeople’sgoals,watchingthemTO OLS Tools theythink. Idealforanyonewhomakes,uses,orbenefitsfromgamedevelopmenttools,thebook presentscomplexconceptsinamannerthatisaccessibletothosenewtouserexperience design. K23310 ISBN:978-1-4822-4019-1 90000 DAVIDLIGHTBOWN 9781482240191 DocumentOutline FrontCover Contents PraiseforDesigningtheUserExperienceofGameDevelopmentTools Foreword Introduction AbouttheAuthor Chapter1:WelcometoDesigningtheUserExperienceofGameDevelopmentTools Chapter2:TheUser-CenteredDesignProcess Chapter3:WhatDoesItMeantoBe“User-Centered”? Chapter4:Analysis Chapter5:Design Chapter6:Evaluation Chapter7:BacktoAnalysis Chapter8:Real-WorldUser-CenteredDesign Conclusion Thanks WorksCited&RecommendedReading Trademarks BackCover
