Post on 05-Aug-2020
HumanComputerInterac/onandDesign(aprimer)
GillianR.HayesKleistProfessorofInforma/cs
DonaldBrenSchoolofInforma/onandComputerSciencesSchoolofEduca/onSchoolofMedicine
UniversityofCalifornia,IrvineEmail:gillianrh@ics.uci.edu
TwiKer:@gillianrhayesWeb:gillianhayes.com
AccessibleSlidesath.p://2nyurl.com/mHealthHCI
2
WE’RE IN A TIME OF INNOVATION AND OPPORTUNITY
AccessibleSlidesath.p://2nyurl.com/mHealthHCI
WhatisDesign?
§ Processofcrea/ngorshapingtoolsorar/factsfordirecthumanuse
Processes, methods
Creative endeavor
Outputs are things
people-centered concerns
Characteris/csofDesign
Design…§ isconscious§ keepshumanconcernsinthecenter§ isaconversa/onwithmaterials§ iscrea/ve§ iscommunica/on§ hassocialimplica/ons§ isasocialac/vity
WhatisDesigned?
“Lookaroundyou.TheonlythingnotdesignedisNature.”
§ DavidKelley
Anythingconsciouslyintendedforhumanuseisdesigned
§ OVenpoorly,though:(
BadDesignisEverywhere
Baddesigncanhavebigconsequences
Vo/ng
Baddesigncanhavebigconsequences
HumanLives:Therac-25Radia/onTherapymachine
/radia/o
n-accide
nt-the
rac25
rado
nc.wikidot.com
Imagefrom
hKp://
Butwecantrytohelp
NYNEXwasgoingtobuynewworksta/onfortheirtelephoneoperators
§ Eachsecondsavedpercallsaves$3M/yr.§ Usermodelingdiscovereditwouldbe3%slowerthanoriginal
§ NYNEXdidnotbuyworksta/on§ Preventedmistake,saved$2M/yr.
Bytheendofthistalk…
Youshouldbeableto:#1:Careforandfeedthetechnicalgeeksinyourlives
#2:Iden/fyanumberoflow-cost,quickmethodstoensureyourtechnologiesareusableanduseful
#3:Createtechnologyprototypes(yes,really)
INTERDISCIPLINARYCOLLABORATIONS
Bestprac/cesonthecareandfeedingofgeeks
Informa/onandComputerScien/stsandDesignersareDifferent.
Thingsarereallydifferenthere• Publishingprac/cesintechnicaldisciplinesaredifferent.
• Andsoareourwaysofworkingwithgraduatestudents.
• Andsoisourrela/onshipwiththeory.• Youprobablywon’tfindourworkinpubmed.
We’recomplementary.
• Thingscompu2ngresearchersdowell– Findingcompetent(andsome/mescheap)technicallabor– Iden/fyingandovercomingtechnical,usability,andotherconstraints
– Understandingsocialandculturalcontextsurroundingtechnologies
– Measuringsuccessesandfailureswithrespecttodesignprocess,adop3on,andusage
• Thingswegeeksdon’tdowell– Measuringoutcomes– Youaregreatatresearchdesign.WeoVenaren’t.HelpusJ
SomeHomework• Ka/eSiekandKayConnelly(2010)AchievingSuccessin
ResearchCollabora/onsinHealthInforma/csInterdisciplinaryCollabora/onsHealthInforma3cs:APa3ent-CenteredApproachtoDiabetes
• Stokols,D.,Hall,K.L.,Taylor,B.K.,&Moser,R.P.(2008).Thescienceofteamscience:overviewofthefieldandintroduc/ontothesupplement.Americanjournalofpreven3vemedicine,35(2),S77-S89.
• Lee,E.S.,McDonald,D.W.,Anderson,N.,&Tarczy-Hornoch,P.(2009).Incorpora/ngcollaboratoryconceptsintoinforma/csinsupportoftransla/onalinterdisciplinarybiomedicalresearch.Interna3onaljournalofmedicalinforma3cs,78(1),10-21.
WHATISDESIGNANDHOWCANYOULEARNTODOIT(WELL)?
Howaregreatideasmade?Toolsfordis/llingrequirementsintodesigns
16
Designisnotjust“lips/ckonapig”
§ Notjustchanginghowthingslook§ OrmakingthingspreKy§ Ordesigninggraphics
Interac/ondesignmantras
“Theuserisnotlikeme.”–DonNorman“Thebestwaytohavegoodideasistohavelotsofideas.”–LinusPauling“Enlightenedtrial-and-errorsucceedsoverthecarefulplanningofthelonegenius.”–IDEO
Whyadesignprocess?§ Ithelpsusgetstartedwithaproventack§ Itprevents“designer'sblock”§ Itkeepsusdirectedtowardafinalproduct§ Ithelpsusstayonscheduleandwithincost§ Ithelpsusmeasuredesignprogress§ Ithelpsuscommunicatewherewearetoothers§ Itpreventsusfromomirngimportantsteps§ Itismorereliablethanintui/on§ Itforcesustoiterate!§ Ithelpsuskeeptheuserfirst!
Whatisdesigned?
§ Ar2factview:Theobject,device,orsystemthatisdesigned
§ Holis2cview:Theinterac/on,theflow,theuser’sexperienceisdesigned
§ Thinkintermsofusers’goals§ Ar/factshavenogoals§ Peoplehavegoals!§ Keepusersinthecenterinthebeginning,middle,andend
DesignProcess?
NO! WRONG!
DesignRequiresItera/on
StageGoals •Generate lots of ideas •Grasp issues and potential solutions
•Learn about stakeholders •Discover goals and needs • How is it done now? • What is wanted? • What else has been tried?
• Produce something tangible • Identify challenges • Uncover subtleties
•Build final product •Ramp up marketing, support, and maintenance
•Discover problems •Assess progress •Determine next steps
Inves/gate
Whyinves/gate?
Youcannotdesignapartfromtheworldinwhichyourusersanddesignwilllive
Inves/ga/onQues/ons§ Iden/fyusers§ Iden/fystakeholders§ Whataretherequirements?§ Howdotheydoitnow?§ Howlongdoesittake?§ Whatdotheywant?§ Whatdotheyneed?§ Whatelsehavetheytried?§ Istherealreadyanothersolu/on?
Inves/ga/onMethods
§ Usersurveys§ Focusgroups§ Interviews§ Analysisofcompe//on§ Contextualinquiry§ DesignEthnography
Ideate
Idea/on
§ Idea/on=“ideagenera/on”§ VolumemaKersmost!
§ Toincreasethechancesforsuccessbyconsideringahugevolumeofideasinasystema)cway
§ Oneoftheworstthingsyoucandoisgowiththefirstideathatyouget§ Youcanalwayscomebacktoitlater
Idea/onMethods
§ Affinitydiagramming§ Personas§ Scenarios§ Role-playing,play-ac/ng,scripts,props§ Cardsor/ng§ StructuredBrainstorming§ Sketching
§ Youcanprac/cethisany/me.
Prototype
Whyprototype?
§ Itishardtoevaluatesomethingthatdoesnotexist
§ Itishardforuserstoreacttoabstractconcepts
§ Prototypingbringssubtle/esandnuancesintothelight
§ Begintowrestlewiththetechnicalconstraints
PROTOTYPING(I’LLSPENDALITTLEMORETIMEHERETHANTHEOTHERSECTIONSFORTHESAKEOFTODAY.)
Wanttoknowwhatyourtargetaudiencewants?Theartoffakingit,anddoingitcheaply,too…
33
Howdoyougetstarted?
Allyouneedisapieceofpaper
Integra/ngprototypesandproducts
• throw-away– prototypeonlyservestoelicituserreac/on– crea/ngprototypemustberapid,otherwisetooexpensive
• incremental– productbuiltasseparatecomponents(modules)– eachcomponentprototyped&tested,thenaddedtothefinalsystem
• evolu/onary– prototypealteredtoincorporatedesignchanges– eventuallybecomesthefinalproduct
LOW-FIDELITYPROTOTYPES
StoryboardsPaper&physicalprototypes
36
Storyboarding
• aseriesofkeyframesassketches• userscanevaluatequicklythedirec/ontheinterfaceisheading
&,
R..G,seHa
y,.
N.K,gnourT:eromroF
wd
oAb
2006,
(.DG.,
tsebfonoa/ni
mrteed
alciripme
an:gnidarobyr
toS.)enuJ
In.senilediugev/ceffedansec/
acrp
th6ethfosgnide
ceorPms
tesysevc3ar
teIngningiseDno
cenerefnco
M.
CA.)12-21.pp(
paperprototypes:designonthecheap
38MicrosoVWordPrototype.SnyderConsul/ng:hKp://www.snyderconsul/ng.net/ar/cle_paperprototyping.htm
gerngstarted:yourbagoftools• Posterboard:background• Blankpaper(largepieces)• Indexcards(dialogboxes,pop-ups,drop-downmenus)• MarkersandPens(drawinginterface)• Highlighter(forsimula/nghighlighteditems)• Scissors• TransparentTape(permanentpieces)• Res/ckableglue(fortemporaryitems)• Removeabletape,orcutuppost-its• Transparenciesandpens(“typing”forlargerboxes)• Wite-Out(Forwhenyoumakemistakes)
39
backgrounds:afewideas
Posterboard Manilafolders
40From“PaperPrototyping”byCarolynSnyder&hKp://www.alistapart.com/ar/cles/paperprototyping/
usingscreenshots?
Implemen/ngaPaKernLibraryintheRealWorld:AYahoo!CaseStudy.ErinMaloneandMaKLeacockandChanelWheelerboxesandarrows.com 41
Incorpora/ngPhysicalDevices
From“PaperPrototyping”byCarolynSnyder43
Scrolling
44From“PaperPrototyping”byCarolynSnyder
RadioBuKons
46From“PaperPrototyping”byCarolynSnyder
TabbedDialog
From“PaperPrototyping”byCarolynSnyder 47
Limita/onsofpaper
• Thefinerpointsofmouseuse– dragginganddropping,rightmousebuKon
• Graphics– Video,zooming
• Unexpectedissues– Scrollingproblems– Pagerefresh/me
48
MEDIUMFIDELITY
Simula/onsPowerpointmockupsWizardofOzTechniques
49
WizardofOzAmethodoftes/ngasystemthatdoesnotexist
– thelisteningtypewriter,IBM1984
Whattheusersees Thewizard
SpeechComputer
DearHenry
DearHenry
From Gould, Conti & Hovanvecz, Comm ACM 26(4) 1983.
Interfacebuilding/wireframesoVware
• Designtoolsforshowinglookandfeel• Click‘ndrag• Func/onalityaddedselec/vely
• Toolstotry– Powerpointorkeynote!– Omnigraffle(maconly)– Cacoo(free!)hKps://cacoo.com– Andtherearemanyothers….
Evaluate
Evalua/on,whydoweneedit?(notnecessarilythesamethingasyouroutcomestrials)
§ Automatedprocedurescanfindbugs,butnotusabilityproblems§ (ac/veresearcharea,buthard!)
§ Youcan’titeratewithoutknowingwhattofix,leave,orremove
§ Answersbothques/ons:§ Didwebuildtherightthing?§ Didwebuilditright?
Evalua/onMethods§ Heuris/cEvalua/on§ GuidelinesReview§ Cogni/veWalkthrough§ UsabilityTes/ng§ LaboratoryExperiments§ RealWorldDeployments
Checkoutdiscountmethodshere:hKps://www.nngroup.com/ar/cles/discount-usability-20-years/
Evalua/onDrivesItera/on
• Ifproblemsareinuserperformance– Probablyneedtoreturntoprototypingphase
• Ifproblemsareinconceptualmodelandhowusersunderstandit– Probablyneedtoreturntoidea/onphase
• Ifproblemsareinusefulnessorappropriateness– Probablyneedtoreturntoinves/ga/onphase
Produce
Produc/on“Produc/on”referstoallstepsrequiredtogofromafunc/onalprototypetoafinalproduct
§ SoVwarearchitecture§ Programming,building§ Manufacturing§ Packaging§ Helpsystems§ Manuals§ Training§ Customersupport§ Marke/ng§ Branding§ Distribu/on
DesignProcesses
ThereisnoagreementonanexactdesignprocessDowhatworksforyou,butdoitsystema/cally,though}ully,andconsistently.
Summary
§ Designisahighlyitera/veprocess§ Designprocessesmustkeeptheuser’sinterestscentral
§ Designstartswithunderstandingtheuser§ Designsarenevertrulyperfect-Theycanalwaysbeimproved.
§ Itisaskilltoknowwhentostopitera/ngandcalladesign“finished”
Wanttolearnmore?ListentoPedjaforthenext45minuteshKps://www.coursera.org/specializa/ons/interac/on-design
– HumanCenteredDesignIntroduc/on– NextsessionstartsAugust8
hKp://mhcid.ics.uci.edu• Applica/onsClosedfor2016,butwillbeavailablethroughMarchfor2017
Orgetintouch….gillianrh@ics.uci.eduor@gillianrhayesAccessibleSlidesath.p://2nyurl.com/mHealthHCI