Human Computer Interac/on and Design (a primer) · 2016-09-20 · Human Computer Interac/on and...
Transcript of Human Computer Interac/on and Design (a primer) · 2016-09-20 · Human Computer Interac/on and...
![Page 1: Human Computer Interac/on and Design (a primer) · 2016-09-20 · Human Computer Interac/on and Design (a primer) Gillian R. Hayes Kleist Professor of Informacs Donald Bren School](https://reader033.fdocuments.us/reader033/viewer/2022050500/5f931e4b1edea7460971f97b/html5/thumbnails/1.jpg)
HumanComputerInterac/onandDesign(aprimer)
GillianR.HayesKleistProfessorofInforma/cs
DonaldBrenSchoolofInforma/onandComputerSciencesSchoolofEduca/onSchoolofMedicine
UniversityofCalifornia,IrvineEmail:[email protected]
TwiKer:@gillianrhayesWeb:gillianhayes.com
AccessibleSlidesath.p://2nyurl.com/mHealthHCI
![Page 2: Human Computer Interac/on and Design (a primer) · 2016-09-20 · Human Computer Interac/on and Design (a primer) Gillian R. Hayes Kleist Professor of Informacs Donald Bren School](https://reader033.fdocuments.us/reader033/viewer/2022050500/5f931e4b1edea7460971f97b/html5/thumbnails/2.jpg)
2
WE’RE IN A TIME OF INNOVATION AND OPPORTUNITY
AccessibleSlidesath.p://2nyurl.com/mHealthHCI
![Page 3: Human Computer Interac/on and Design (a primer) · 2016-09-20 · Human Computer Interac/on and Design (a primer) Gillian R. Hayes Kleist Professor of Informacs Donald Bren School](https://reader033.fdocuments.us/reader033/viewer/2022050500/5f931e4b1edea7460971f97b/html5/thumbnails/3.jpg)
WhatisDesign?
§ Processofcrea/ngorshapingtoolsorar/factsfordirecthumanuse
Processes, methods
Creative endeavor
Outputs are things
people-centered concerns
![Page 4: Human Computer Interac/on and Design (a primer) · 2016-09-20 · Human Computer Interac/on and Design (a primer) Gillian R. Hayes Kleist Professor of Informacs Donald Bren School](https://reader033.fdocuments.us/reader033/viewer/2022050500/5f931e4b1edea7460971f97b/html5/thumbnails/4.jpg)
Characteris/csofDesign
Design…§ isconscious§ keepshumanconcernsinthecenter§ isaconversa/onwithmaterials§ iscrea/ve§ iscommunica/on§ hassocialimplica/ons§ isasocialac/vity
![Page 5: Human Computer Interac/on and Design (a primer) · 2016-09-20 · Human Computer Interac/on and Design (a primer) Gillian R. Hayes Kleist Professor of Informacs Donald Bren School](https://reader033.fdocuments.us/reader033/viewer/2022050500/5f931e4b1edea7460971f97b/html5/thumbnails/5.jpg)
WhatisDesigned?
“Lookaroundyou.TheonlythingnotdesignedisNature.”
§ DavidKelley
Anythingconsciouslyintendedforhumanuseisdesigned
§ OVenpoorly,though:(
![Page 6: Human Computer Interac/on and Design (a primer) · 2016-09-20 · Human Computer Interac/on and Design (a primer) Gillian R. Hayes Kleist Professor of Informacs Donald Bren School](https://reader033.fdocuments.us/reader033/viewer/2022050500/5f931e4b1edea7460971f97b/html5/thumbnails/6.jpg)
BadDesignisEverywhere
![Page 7: Human Computer Interac/on and Design (a primer) · 2016-09-20 · Human Computer Interac/on and Design (a primer) Gillian R. Hayes Kleist Professor of Informacs Donald Bren School](https://reader033.fdocuments.us/reader033/viewer/2022050500/5f931e4b1edea7460971f97b/html5/thumbnails/7.jpg)
Baddesigncanhavebigconsequences
Vo/ng
![Page 8: Human Computer Interac/on and Design (a primer) · 2016-09-20 · Human Computer Interac/on and Design (a primer) Gillian R. Hayes Kleist Professor of Informacs Donald Bren School](https://reader033.fdocuments.us/reader033/viewer/2022050500/5f931e4b1edea7460971f97b/html5/thumbnails/8.jpg)
Baddesigncanhavebigconsequences
HumanLives:Therac-25Radia/onTherapymachine
/radia/o
n-accide
nt-the
rac25
rado
nc.wikidot.com
Imagefrom
hKp://
![Page 9: Human Computer Interac/on and Design (a primer) · 2016-09-20 · Human Computer Interac/on and Design (a primer) Gillian R. Hayes Kleist Professor of Informacs Donald Bren School](https://reader033.fdocuments.us/reader033/viewer/2022050500/5f931e4b1edea7460971f97b/html5/thumbnails/9.jpg)
Butwecantrytohelp
NYNEXwasgoingtobuynewworksta/onfortheirtelephoneoperators
§ Eachsecondsavedpercallsaves$3M/yr.§ Usermodelingdiscovereditwouldbe3%slowerthanoriginal
§ NYNEXdidnotbuyworksta/on§ Preventedmistake,saved$2M/yr.
![Page 10: Human Computer Interac/on and Design (a primer) · 2016-09-20 · Human Computer Interac/on and Design (a primer) Gillian R. Hayes Kleist Professor of Informacs Donald Bren School](https://reader033.fdocuments.us/reader033/viewer/2022050500/5f931e4b1edea7460971f97b/html5/thumbnails/10.jpg)
![Page 11: Human Computer Interac/on and Design (a primer) · 2016-09-20 · Human Computer Interac/on and Design (a primer) Gillian R. Hayes Kleist Professor of Informacs Donald Bren School](https://reader033.fdocuments.us/reader033/viewer/2022050500/5f931e4b1edea7460971f97b/html5/thumbnails/11.jpg)
Bytheendofthistalk…
Youshouldbeableto:#1:Careforandfeedthetechnicalgeeksinyourlives
#2:Iden/fyanumberoflow-cost,quickmethodstoensureyourtechnologiesareusableanduseful
#3:Createtechnologyprototypes(yes,really)
![Page 12: Human Computer Interac/on and Design (a primer) · 2016-09-20 · Human Computer Interac/on and Design (a primer) Gillian R. Hayes Kleist Professor of Informacs Donald Bren School](https://reader033.fdocuments.us/reader033/viewer/2022050500/5f931e4b1edea7460971f97b/html5/thumbnails/12.jpg)
INTERDISCIPLINARYCOLLABORATIONS
Bestprac/cesonthecareandfeedingofgeeks
![Page 13: Human Computer Interac/on and Design (a primer) · 2016-09-20 · Human Computer Interac/on and Design (a primer) Gillian R. Hayes Kleist Professor of Informacs Donald Bren School](https://reader033.fdocuments.us/reader033/viewer/2022050500/5f931e4b1edea7460971f97b/html5/thumbnails/13.jpg)
Informa/onandComputerScien/stsandDesignersareDifferent.
Thingsarereallydifferenthere• Publishingprac/cesintechnicaldisciplinesaredifferent.
• Andsoareourwaysofworkingwithgraduatestudents.
• Andsoisourrela/onshipwiththeory.• Youprobablywon’tfindourworkinpubmed.
![Page 14: Human Computer Interac/on and Design (a primer) · 2016-09-20 · Human Computer Interac/on and Design (a primer) Gillian R. Hayes Kleist Professor of Informacs Donald Bren School](https://reader033.fdocuments.us/reader033/viewer/2022050500/5f931e4b1edea7460971f97b/html5/thumbnails/14.jpg)
We’recomplementary.
• Thingscompu2ngresearchersdowell– Findingcompetent(andsome/mescheap)technicallabor– Iden/fyingandovercomingtechnical,usability,andotherconstraints
– Understandingsocialandculturalcontextsurroundingtechnologies
– Measuringsuccessesandfailureswithrespecttodesignprocess,adop3on,andusage
• Thingswegeeksdon’tdowell– Measuringoutcomes– Youaregreatatresearchdesign.WeoVenaren’t.HelpusJ
![Page 15: Human Computer Interac/on and Design (a primer) · 2016-09-20 · Human Computer Interac/on and Design (a primer) Gillian R. Hayes Kleist Professor of Informacs Donald Bren School](https://reader033.fdocuments.us/reader033/viewer/2022050500/5f931e4b1edea7460971f97b/html5/thumbnails/15.jpg)
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.
![Page 16: Human Computer Interac/on and Design (a primer) · 2016-09-20 · Human Computer Interac/on and Design (a primer) Gillian R. Hayes Kleist Professor of Informacs Donald Bren School](https://reader033.fdocuments.us/reader033/viewer/2022050500/5f931e4b1edea7460971f97b/html5/thumbnails/16.jpg)
WHATISDESIGNANDHOWCANYOULEARNTODOIT(WELL)?
Howaregreatideasmade?Toolsfordis/llingrequirementsintodesigns
16
![Page 17: Human Computer Interac/on and Design (a primer) · 2016-09-20 · Human Computer Interac/on and Design (a primer) Gillian R. Hayes Kleist Professor of Informacs Donald Bren School](https://reader033.fdocuments.us/reader033/viewer/2022050500/5f931e4b1edea7460971f97b/html5/thumbnails/17.jpg)
Designisnotjust“lips/ckonapig”
§ Notjustchanginghowthingslook§ OrmakingthingspreKy§ Ordesigninggraphics
![Page 18: Human Computer Interac/on and Design (a primer) · 2016-09-20 · Human Computer Interac/on and Design (a primer) Gillian R. Hayes Kleist Professor of Informacs Donald Bren School](https://reader033.fdocuments.us/reader033/viewer/2022050500/5f931e4b1edea7460971f97b/html5/thumbnails/18.jpg)
Interac/ondesignmantras
“Theuserisnotlikeme.”–DonNorman“Thebestwaytohavegoodideasistohavelotsofideas.”–LinusPauling“Enlightenedtrial-and-errorsucceedsoverthecarefulplanningofthelonegenius.”–IDEO
![Page 19: Human Computer Interac/on and Design (a primer) · 2016-09-20 · Human Computer Interac/on and Design (a primer) Gillian R. Hayes Kleist Professor of Informacs Donald Bren School](https://reader033.fdocuments.us/reader033/viewer/2022050500/5f931e4b1edea7460971f97b/html5/thumbnails/19.jpg)
Whyadesignprocess?§ Ithelpsusgetstartedwithaproventack§ Itprevents“designer'sblock”§ Itkeepsusdirectedtowardafinalproduct§ Ithelpsusstayonscheduleandwithincost§ Ithelpsusmeasuredesignprogress§ Ithelpsuscommunicatewherewearetoothers§ Itpreventsusfromomirngimportantsteps§ Itismorereliablethanintui/on§ Itforcesustoiterate!§ Ithelpsuskeeptheuserfirst!
![Page 20: Human Computer Interac/on and Design (a primer) · 2016-09-20 · Human Computer Interac/on and Design (a primer) Gillian R. Hayes Kleist Professor of Informacs Donald Bren School](https://reader033.fdocuments.us/reader033/viewer/2022050500/5f931e4b1edea7460971f97b/html5/thumbnails/20.jpg)
Whatisdesigned?
§ Ar2factview:Theobject,device,orsystemthatisdesigned
§ Holis2cview:Theinterac/on,theflow,theuser’sexperienceisdesigned
§ Thinkintermsofusers’goals§ Ar/factshavenogoals§ Peoplehavegoals!§ Keepusersinthecenterinthebeginning,middle,andend
![Page 21: Human Computer Interac/on and Design (a primer) · 2016-09-20 · Human Computer Interac/on and Design (a primer) Gillian R. Hayes Kleist Professor of Informacs Donald Bren School](https://reader033.fdocuments.us/reader033/viewer/2022050500/5f931e4b1edea7460971f97b/html5/thumbnails/21.jpg)
DesignProcess?
NO! WRONG!
![Page 22: Human Computer Interac/on and Design (a primer) · 2016-09-20 · Human Computer Interac/on and Design (a primer) Gillian R. Hayes Kleist Professor of Informacs Donald Bren School](https://reader033.fdocuments.us/reader033/viewer/2022050500/5f931e4b1edea7460971f97b/html5/thumbnails/22.jpg)
DesignRequiresItera/on
![Page 23: Human Computer Interac/on and Design (a primer) · 2016-09-20 · Human Computer Interac/on and Design (a primer) Gillian R. Hayes Kleist Professor of Informacs Donald Bren School](https://reader033.fdocuments.us/reader033/viewer/2022050500/5f931e4b1edea7460971f97b/html5/thumbnails/23.jpg)
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
![Page 24: Human Computer Interac/on and Design (a primer) · 2016-09-20 · Human Computer Interac/on and Design (a primer) Gillian R. Hayes Kleist Professor of Informacs Donald Bren School](https://reader033.fdocuments.us/reader033/viewer/2022050500/5f931e4b1edea7460971f97b/html5/thumbnails/24.jpg)
Inves/gate
![Page 25: Human Computer Interac/on and Design (a primer) · 2016-09-20 · Human Computer Interac/on and Design (a primer) Gillian R. Hayes Kleist Professor of Informacs Donald Bren School](https://reader033.fdocuments.us/reader033/viewer/2022050500/5f931e4b1edea7460971f97b/html5/thumbnails/25.jpg)
Whyinves/gate?
Youcannotdesignapartfromtheworldinwhichyourusersanddesignwilllive
![Page 26: Human Computer Interac/on and Design (a primer) · 2016-09-20 · Human Computer Interac/on and Design (a primer) Gillian R. Hayes Kleist Professor of Informacs Donald Bren School](https://reader033.fdocuments.us/reader033/viewer/2022050500/5f931e4b1edea7460971f97b/html5/thumbnails/26.jpg)
Inves/ga/onQues/ons§ Iden/fyusers§ Iden/fystakeholders§ Whataretherequirements?§ Howdotheydoitnow?§ Howlongdoesittake?§ Whatdotheywant?§ Whatdotheyneed?§ Whatelsehavetheytried?§ Istherealreadyanothersolu/on?
![Page 27: Human Computer Interac/on and Design (a primer) · 2016-09-20 · Human Computer Interac/on and Design (a primer) Gillian R. Hayes Kleist Professor of Informacs Donald Bren School](https://reader033.fdocuments.us/reader033/viewer/2022050500/5f931e4b1edea7460971f97b/html5/thumbnails/27.jpg)
Inves/ga/onMethods
§ Usersurveys§ Focusgroups§ Interviews§ Analysisofcompe//on§ Contextualinquiry§ DesignEthnography
![Page 28: Human Computer Interac/on and Design (a primer) · 2016-09-20 · Human Computer Interac/on and Design (a primer) Gillian R. Hayes Kleist Professor of Informacs Donald Bren School](https://reader033.fdocuments.us/reader033/viewer/2022050500/5f931e4b1edea7460971f97b/html5/thumbnails/28.jpg)
Ideate
![Page 29: Human Computer Interac/on and Design (a primer) · 2016-09-20 · Human Computer Interac/on and Design (a primer) Gillian R. Hayes Kleist Professor of Informacs Donald Bren School](https://reader033.fdocuments.us/reader033/viewer/2022050500/5f931e4b1edea7460971f97b/html5/thumbnails/29.jpg)
Idea/on
§ Idea/on=“ideagenera/on”§ VolumemaKersmost!
§ Toincreasethechancesforsuccessbyconsideringahugevolumeofideasinasystema)cway
§ Oneoftheworstthingsyoucandoisgowiththefirstideathatyouget§ Youcanalwayscomebacktoitlater
![Page 30: Human Computer Interac/on and Design (a primer) · 2016-09-20 · Human Computer Interac/on and Design (a primer) Gillian R. Hayes Kleist Professor of Informacs Donald Bren School](https://reader033.fdocuments.us/reader033/viewer/2022050500/5f931e4b1edea7460971f97b/html5/thumbnails/30.jpg)
Idea/onMethods
§ Affinitydiagramming§ Personas§ Scenarios§ Role-playing,play-ac/ng,scripts,props§ Cardsor/ng§ StructuredBrainstorming§ Sketching
§ Youcanprac/cethisany/me.
![Page 31: Human Computer Interac/on and Design (a primer) · 2016-09-20 · Human Computer Interac/on and Design (a primer) Gillian R. Hayes Kleist Professor of Informacs Donald Bren School](https://reader033.fdocuments.us/reader033/viewer/2022050500/5f931e4b1edea7460971f97b/html5/thumbnails/31.jpg)
Prototype
![Page 32: Human Computer Interac/on and Design (a primer) · 2016-09-20 · Human Computer Interac/on and Design (a primer) Gillian R. Hayes Kleist Professor of Informacs Donald Bren School](https://reader033.fdocuments.us/reader033/viewer/2022050500/5f931e4b1edea7460971f97b/html5/thumbnails/32.jpg)
Whyprototype?
§ Itishardtoevaluatesomethingthatdoesnotexist
§ Itishardforuserstoreacttoabstractconcepts
§ Prototypingbringssubtle/esandnuancesintothelight
§ Begintowrestlewiththetechnicalconstraints
![Page 33: Human Computer Interac/on and Design (a primer) · 2016-09-20 · Human Computer Interac/on and Design (a primer) Gillian R. Hayes Kleist Professor of Informacs Donald Bren School](https://reader033.fdocuments.us/reader033/viewer/2022050500/5f931e4b1edea7460971f97b/html5/thumbnails/33.jpg)
PROTOTYPING(I’LLSPENDALITTLEMORETIMEHERETHANTHEOTHERSECTIONSFORTHESAKEOFTODAY.)
Wanttoknowwhatyourtargetaudiencewants?Theartoffakingit,anddoingitcheaply,too…
33
![Page 34: Human Computer Interac/on and Design (a primer) · 2016-09-20 · Human Computer Interac/on and Design (a primer) Gillian R. Hayes Kleist Professor of Informacs Donald Bren School](https://reader033.fdocuments.us/reader033/viewer/2022050500/5f931e4b1edea7460971f97b/html5/thumbnails/34.jpg)
Howdoyougetstarted?
Allyouneedisapieceofpaper
![Page 35: Human Computer Interac/on and Design (a primer) · 2016-09-20 · Human Computer Interac/on and Design (a primer) Gillian R. Hayes Kleist Professor of Informacs Donald Bren School](https://reader033.fdocuments.us/reader033/viewer/2022050500/5f931e4b1edea7460971f97b/html5/thumbnails/35.jpg)
Integra/ngprototypesandproducts
• throw-away– prototypeonlyservestoelicituserreac/on– crea/ngprototypemustberapid,otherwisetooexpensive
• incremental– productbuiltasseparatecomponents(modules)– eachcomponentprototyped&tested,thenaddedtothefinalsystem
• evolu/onary– prototypealteredtoincorporatedesignchanges– eventuallybecomesthefinalproduct
![Page 36: Human Computer Interac/on and Design (a primer) · 2016-09-20 · Human Computer Interac/on and Design (a primer) Gillian R. Hayes Kleist Professor of Informacs Donald Bren School](https://reader033.fdocuments.us/reader033/viewer/2022050500/5f931e4b1edea7460971f97b/html5/thumbnails/36.jpg)
LOW-FIDELITYPROTOTYPES
StoryboardsPaper&physicalprototypes
36
![Page 37: Human Computer Interac/on and Design (a primer) · 2016-09-20 · Human Computer Interac/on and Design (a primer) Gillian R. Hayes Kleist Professor of Informacs Donald Bren School](https://reader033.fdocuments.us/reader033/viewer/2022050500/5f931e4b1edea7460971f97b/html5/thumbnails/37.jpg)
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(
![Page 38: Human Computer Interac/on and Design (a primer) · 2016-09-20 · Human Computer Interac/on and Design (a primer) Gillian R. Hayes Kleist Professor of Informacs Donald Bren School](https://reader033.fdocuments.us/reader033/viewer/2022050500/5f931e4b1edea7460971f97b/html5/thumbnails/38.jpg)
paperprototypes:designonthecheap
38MicrosoVWordPrototype.SnyderConsul/ng:hKp://www.snyderconsul/ng.net/ar/cle_paperprototyping.htm
![Page 39: Human Computer Interac/on and Design (a primer) · 2016-09-20 · Human Computer Interac/on and Design (a primer) Gillian R. Hayes Kleist Professor of Informacs Donald Bren School](https://reader033.fdocuments.us/reader033/viewer/2022050500/5f931e4b1edea7460971f97b/html5/thumbnails/39.jpg)
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
![Page 40: Human Computer Interac/on and Design (a primer) · 2016-09-20 · Human Computer Interac/on and Design (a primer) Gillian R. Hayes Kleist Professor of Informacs Donald Bren School](https://reader033.fdocuments.us/reader033/viewer/2022050500/5f931e4b1edea7460971f97b/html5/thumbnails/40.jpg)
backgrounds:afewideas
Posterboard Manilafolders
40From“PaperPrototyping”byCarolynSnyder&hKp://www.alistapart.com/ar/cles/paperprototyping/
![Page 41: Human Computer Interac/on and Design (a primer) · 2016-09-20 · Human Computer Interac/on and Design (a primer) Gillian R. Hayes Kleist Professor of Informacs Donald Bren School](https://reader033.fdocuments.us/reader033/viewer/2022050500/5f931e4b1edea7460971f97b/html5/thumbnails/41.jpg)
usingscreenshots?
Implemen/ngaPaKernLibraryintheRealWorld:AYahoo!CaseStudy.ErinMaloneandMaKLeacockandChanelWheelerboxesandarrows.com 41
![Page 42: Human Computer Interac/on and Design (a primer) · 2016-09-20 · Human Computer Interac/on and Design (a primer) Gillian R. Hayes Kleist Professor of Informacs Donald Bren School](https://reader033.fdocuments.us/reader033/viewer/2022050500/5f931e4b1edea7460971f97b/html5/thumbnails/42.jpg)
Incorpora/ngPhysicalDevices
From“PaperPrototyping”byCarolynSnyder43
![Page 43: Human Computer Interac/on and Design (a primer) · 2016-09-20 · Human Computer Interac/on and Design (a primer) Gillian R. Hayes Kleist Professor of Informacs Donald Bren School](https://reader033.fdocuments.us/reader033/viewer/2022050500/5f931e4b1edea7460971f97b/html5/thumbnails/43.jpg)
Scrolling
44From“PaperPrototyping”byCarolynSnyder
![Page 44: Human Computer Interac/on and Design (a primer) · 2016-09-20 · Human Computer Interac/on and Design (a primer) Gillian R. Hayes Kleist Professor of Informacs Donald Bren School](https://reader033.fdocuments.us/reader033/viewer/2022050500/5f931e4b1edea7460971f97b/html5/thumbnails/44.jpg)
RadioBuKons
46From“PaperPrototyping”byCarolynSnyder
![Page 45: Human Computer Interac/on and Design (a primer) · 2016-09-20 · Human Computer Interac/on and Design (a primer) Gillian R. Hayes Kleist Professor of Informacs Donald Bren School](https://reader033.fdocuments.us/reader033/viewer/2022050500/5f931e4b1edea7460971f97b/html5/thumbnails/45.jpg)
TabbedDialog
From“PaperPrototyping”byCarolynSnyder 47
![Page 46: Human Computer Interac/on and Design (a primer) · 2016-09-20 · Human Computer Interac/on and Design (a primer) Gillian R. Hayes Kleist Professor of Informacs Donald Bren School](https://reader033.fdocuments.us/reader033/viewer/2022050500/5f931e4b1edea7460971f97b/html5/thumbnails/46.jpg)
Limita/onsofpaper
• Thefinerpointsofmouseuse– dragginganddropping,rightmousebuKon
• Graphics– Video,zooming
• Unexpectedissues– Scrollingproblems– Pagerefresh/me
48
![Page 47: Human Computer Interac/on and Design (a primer) · 2016-09-20 · Human Computer Interac/on and Design (a primer) Gillian R. Hayes Kleist Professor of Informacs Donald Bren School](https://reader033.fdocuments.us/reader033/viewer/2022050500/5f931e4b1edea7460971f97b/html5/thumbnails/47.jpg)
MEDIUMFIDELITY
Simula/onsPowerpointmockupsWizardofOzTechniques
49
![Page 48: Human Computer Interac/on and Design (a primer) · 2016-09-20 · Human Computer Interac/on and Design (a primer) Gillian R. Hayes Kleist Professor of Informacs Donald Bren School](https://reader033.fdocuments.us/reader033/viewer/2022050500/5f931e4b1edea7460971f97b/html5/thumbnails/48.jpg)
WizardofOzAmethodoftes/ngasystemthatdoesnotexist
– thelisteningtypewriter,IBM1984
Whattheusersees Thewizard
SpeechComputer
DearHenry
DearHenry
From Gould, Conti & Hovanvecz, Comm ACM 26(4) 1983.
![Page 49: Human Computer Interac/on and Design (a primer) · 2016-09-20 · Human Computer Interac/on and Design (a primer) Gillian R. Hayes Kleist Professor of Informacs Donald Bren School](https://reader033.fdocuments.us/reader033/viewer/2022050500/5f931e4b1edea7460971f97b/html5/thumbnails/49.jpg)
Interfacebuilding/wireframesoVware
• Designtoolsforshowinglookandfeel• Click‘ndrag• Func/onalityaddedselec/vely
• Toolstotry– Powerpointorkeynote!– Omnigraffle(maconly)– Cacoo(free!)hKps://cacoo.com– Andtherearemanyothers….
![Page 50: Human Computer Interac/on and Design (a primer) · 2016-09-20 · Human Computer Interac/on and Design (a primer) Gillian R. Hayes Kleist Professor of Informacs Donald Bren School](https://reader033.fdocuments.us/reader033/viewer/2022050500/5f931e4b1edea7460971f97b/html5/thumbnails/50.jpg)
Evaluate
![Page 51: Human Computer Interac/on and Design (a primer) · 2016-09-20 · Human Computer Interac/on and Design (a primer) Gillian R. Hayes Kleist Professor of Informacs Donald Bren School](https://reader033.fdocuments.us/reader033/viewer/2022050500/5f931e4b1edea7460971f97b/html5/thumbnails/51.jpg)
Evalua/on,whydoweneedit?(notnecessarilythesamethingasyouroutcomestrials)
§ Automatedprocedurescanfindbugs,butnotusabilityproblems§ (ac/veresearcharea,buthard!)
§ Youcan’titeratewithoutknowingwhattofix,leave,orremove
§ Answersbothques/ons:§ Didwebuildtherightthing?§ Didwebuilditright?
![Page 52: Human Computer Interac/on and Design (a primer) · 2016-09-20 · Human Computer Interac/on and Design (a primer) Gillian R. Hayes Kleist Professor of Informacs Donald Bren School](https://reader033.fdocuments.us/reader033/viewer/2022050500/5f931e4b1edea7460971f97b/html5/thumbnails/52.jpg)
Evalua/onMethods§ Heuris/cEvalua/on§ GuidelinesReview§ Cogni/veWalkthrough§ UsabilityTes/ng§ LaboratoryExperiments§ RealWorldDeployments
Checkoutdiscountmethodshere:hKps://www.nngroup.com/ar/cles/discount-usability-20-years/
![Page 53: Human Computer Interac/on and Design (a primer) · 2016-09-20 · Human Computer Interac/on and Design (a primer) Gillian R. Hayes Kleist Professor of Informacs Donald Bren School](https://reader033.fdocuments.us/reader033/viewer/2022050500/5f931e4b1edea7460971f97b/html5/thumbnails/53.jpg)
Evalua/onDrivesItera/on
• Ifproblemsareinuserperformance– Probablyneedtoreturntoprototypingphase
• Ifproblemsareinconceptualmodelandhowusersunderstandit– Probablyneedtoreturntoidea/onphase
• Ifproblemsareinusefulnessorappropriateness– Probablyneedtoreturntoinves/ga/onphase
![Page 54: Human Computer Interac/on and Design (a primer) · 2016-09-20 · Human Computer Interac/on and Design (a primer) Gillian R. Hayes Kleist Professor of Informacs Donald Bren School](https://reader033.fdocuments.us/reader033/viewer/2022050500/5f931e4b1edea7460971f97b/html5/thumbnails/54.jpg)
Produce
![Page 55: Human Computer Interac/on and Design (a primer) · 2016-09-20 · Human Computer Interac/on and Design (a primer) Gillian R. Hayes Kleist Professor of Informacs Donald Bren School](https://reader033.fdocuments.us/reader033/viewer/2022050500/5f931e4b1edea7460971f97b/html5/thumbnails/55.jpg)
Produc/on“Produc/on”referstoallstepsrequiredtogofromafunc/onalprototypetoafinalproduct
§ SoVwarearchitecture§ Programming,building§ Manufacturing§ Packaging§ Helpsystems§ Manuals§ Training§ Customersupport§ Marke/ng§ Branding§ Distribu/on
![Page 56: Human Computer Interac/on and Design (a primer) · 2016-09-20 · Human Computer Interac/on and Design (a primer) Gillian R. Hayes Kleist Professor of Informacs Donald Bren School](https://reader033.fdocuments.us/reader033/viewer/2022050500/5f931e4b1edea7460971f97b/html5/thumbnails/56.jpg)
DesignProcesses
ThereisnoagreementonanexactdesignprocessDowhatworksforyou,butdoitsystema/cally,though}ully,andconsistently.
![Page 57: Human Computer Interac/on and Design (a primer) · 2016-09-20 · Human Computer Interac/on and Design (a primer) Gillian R. Hayes Kleist Professor of Informacs Donald Bren School](https://reader033.fdocuments.us/reader033/viewer/2022050500/5f931e4b1edea7460971f97b/html5/thumbnails/57.jpg)
Summary
§ Designisahighlyitera/veprocess§ Designprocessesmustkeeptheuser’sinterestscentral
§ Designstartswithunderstandingtheuser§ Designsarenevertrulyperfect-Theycanalwaysbeimproved.
§ Itisaskilltoknowwhentostopitera/ngandcalladesign“finished”
![Page 58: Human Computer Interac/on and Design (a primer) · 2016-09-20 · Human Computer Interac/on and Design (a primer) Gillian R. Hayes Kleist Professor of Informacs Donald Bren School](https://reader033.fdocuments.us/reader033/viewer/2022050500/5f931e4b1edea7460971f97b/html5/thumbnails/58.jpg)
Wanttolearnmore?ListentoPedjaforthenext45minuteshKps://www.coursera.org/specializa/ons/interac/on-design
– HumanCenteredDesignIntroduc/on– NextsessionstartsAugust8
hKp://mhcid.ics.uci.edu• Applica/onsClosedfor2016,butwillbeavailablethroughMarchfor2017
Orgetintouch…[email protected]@gillianrhayesAccessibleSlidesath.p://2nyurl.com/mHealthHCI