human computer interac/on and design (a primer) · 2016-09-20 · human computer interac/on and...

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