Sei sulla pagina 1di 58

UXPlaybook

TableofContents

Introduction

Introduction
 

0

0

UXPlaybook

UXPlaybook
 

1

1
Principles   1.1

Principles

 

1.1

1.1
Psychology   1.2

Psychology

 

1.2

1.2
Usability   1.3

Usability

 

1.3

1.3

Research

Research
 

2

2
QualitativeResearchToolbox   2.1

QualitativeResearchToolbox

 

2.1

2.1
 
  Userinterview   2.1.1

Userinterview

 

2.1.1

2.1.1
Usertesting   2.1.2

Usertesting

 

2.1.2

2.1.2
 
  Ninjausertesting   2.1.2.1

Ninjausertesting

 

2.1.2.1

2.1.2.1
 
  Cardsorting   2.1.3

Cardsorting

 

2.1.3

2.1.3
Ethnographyresearch   2.1.4

Ethnographyresearch

 

2.1.4

2.1.4
QantitativeResearchToolbox   2.2

QantitativeResearchToolbox

 

2.2

2.2
 
  A/Btesting   2.2.1

A/Btesting

 

2.2.1

2.2.1
Survey   2.2.2

Survey

 

2.2.2

2.2.2
Analytics   2.2.3

Analytics

 

2.2.3

2.2.3
Eyetracking   2.2.4

Eyetracking

 

2.2.4

2.2.4
Persona   2.2.5

Persona

 

2.2.5

2.2.5
Expertreview   2.2.6

Expertreview

 

2.2.6

2.2.6
Journeymapping   2.2.7

Journeymapping

 

2.2.7

2.2.7

Design

Design
 

3

3
InformationArchitecture   3.1

InformationArchitecture

 

3.1

3.1
Wireframing   3.2

Wireframing

 

3.2

3.2
Prototyping   3.3

Prototyping

 

3.3

3.3
Content   3.4

Content

 

3.4

3.4
Interactiondesign   3.5

Interactiondesign

 

3.5

3.5
Visualdesign   3.6

Visualdesign

 

3.6

3.6
Typography   3.7

Typography

 

3.7

3.7

MeasureandIterate

MeasureandIterate
 

4

4
Leandesign   4.1

Leandesign

 

4.1

4.1

UXPlaybook

Iteration

4.2

UXPlaybook Iteration 4.2 3
UXPlaybook Iteration 4.2 3

UXPlaybook

Introduction

Pleasenote:thisbookisunderdevelopmentandmightcontainunfinishedsentences.

WelcometoHanno'sUserExperiencePlaybook.

TheaimofthisbookistoprovideapracticalguideforUXdesign.It'snotentirelyfor

beginners;it'salwayshandytohavesomedeeperunderstandingofoneoftherelatedfields.

Thiscanbedesign,programmingorproductmanagement.SinceUXisconnectedtothese

fields,it'susefultohaveageneralunderstandingofhowthesethingswork.

It'stheUXdesignersroleistobuildtheconnectionsbetweentheusers,businessandtech.

Youneedtosatisfyyourusers.

Youneedtoonboardthedeveloperswiththedesignandmakesureit'stechnically

feasable.

Youneedtomakesurethebusinessgoalsaremet.

Inordertoachivethis,youneedtoconstantlytalktoall3groups.Onceyoumanagetodo

thisinareasonablyshorttime-loop,youhavemanagedtodoaveryleandesignprocess

whichisdeeplydiscussedinLeanUXbookbyTODO:author.

TheUXplaybookwillshowyouthedifferent"parts"oftheUXdesignprocess.Theterms

youcanseeinthesidebararenotdistinctthingsyouneedtodo.Thesemethodsandroles

areblurryandthereisnodistinctborderbetweenthem.

AsecondarygoaloftheUXPlaybookistoeducateHannoshipmatesandincreasethe

generalknowledgeandunderstandingofUX.Thisallowsustobuildanduseacommon

languageweallshare—whichwillresultinsmootherandbetterdesignsprints,and

ultimatelybetterproducts.

UXPlaybook

UXPlaybook

Howtoconsumethisinformation

You'reprobablyfamiliaronsomelevelwithalotofstuffhere.Theaimofreadingand

learningtheseistoorganiseyourthoughtsanddevelopacommonunderstandingaround

topicswhichweuseeveryday.

Zsoltrecommendsthatyougraduallyworkyourwaythroughthewholeplaybooktogeta

feelfortheoverallapproach,beforereturningtolookatspecifictechniquesandskillswhen

youneedtousethoseonsprints.Themoreoftherecommendeddeeperreadingyoucan

handle,thebetterinformedyouwillbe!

Tokick-offthereading,let'sstartwithsomebasicUXprinciplesanddifferentUXprocesses.

Areyouabeginner?

We'veputtogetheracomprehensivelistofresourcesforgettingintoUX,andbecominga

betterUXdesigner,inourUX#levelupwiki.We'drecommendheadingovertherebeforeyou

getstartedhere,asit'llgiveyousomegoodguidance.

Contributing

AllshipmatesareencouragedtocontributetoareasofthisPlaybookwheretheyfeelthe

detailisweak.Justkeepinmindacoupleofguidelines:

We'renottryingtowritethemostcomprehensiveguidetoUXever.Whereothershave

explainedthingsbetter,linktotheirresourcesorreading,andofferasummary.

Trytobeasleanandpracticalaspossibleinyoursuggestions.Therearelotsofbig,

heavyUXguides--theUXPlaybookshouldbealotmorepracticalthanthese.

UXPlaybook

Principles

Thereare2keyprocessestoknowaboutwhenconsideringUX.Theseare:

User-centereddesignThereare2keyprocessestoknowaboutwhenconsideringUX.Theseare: Goaldirecteddesign

GoaldirecteddesignUser-centereddesign

Theyhavealotofoverlap,anddiffermainlyinhowtheysuggestapproachingtheproblemat

hand.It'sgoodtoknowaboutbothofthem,astheywillallowyoutochooseaUXdesign

approachwhichisbestforthetaskathand.

TODO:Explainabitmoreaboutwhenyoushouldchooseeachprocess.Evensome

basichintsorguidancewouldhelp,asrightnow,theyseemsosimilarthatit'salmost

pointlesscreatingadistinctionbetweenthetwo.

User-centereddesign(UCD)

Asyoumightexpect,UCDhastheuserasitscorefocus.

Asyoumightexpect,UCDhasthe user asitscorefocus.

TODO:Re-createimage,findonewhichwecanuse.Explainwhatthisimageis

communicating.

Principles

Understandyourusers,anddesignfortheirneeds

Avoidjargon:usenaturallanguagethattheusercanunderstand

UXPlaybook

ProvideconsistentdesignUXPlaybook Buildaconversationwithyourusers Advocateiterativedesign Conductregularusertesting Goal-directeddesign

Buildaconversationwithyourusers

AdvocateiterativedesignProvideconsistentdesign Buildaconversationwithyourusers Conductregularusertesting Goal-directeddesign

Conductregularusertesting

Goal-directeddesign

ThisisafairlysimilarprocesstoUCD,butthemainaimistogodeeperinbuildingout

understandingofyourusers.Whencarryingitout,you'llneedtouncovertheuser'sneeds,

andprovideadesignwhichhelpsthemtoreachtheirgoals.

Highlights

Basedonyouruserresearch,createapersonawhichhighlightstheuser'sgoals

Usethispersonaextensively

AdvocatepairdesignUsethispersonaextensively Takeresponsibilityoveryouruser'ssatisfaction Principles

Takeresponsibilityoveryouruser'ssatisfaction

UXPlaybook

Psychology

LotsofpeoplecomingfrompshychologybackgroundtoUXdesign.Thisisn'tasurprisetho:

thereareplentyofcommonintersections.Thereareplentyofpsychologyresearchrelatedto

UXdesignandUXdesignersliketorelatetothem.

Cognitivedissonence

Actualvs.ReportedBehaviour

Coglode

TODO:addotherbasic/interesting/relatedpsychologyarticles/researches

UXPlaybook

Research

UserExperiencedesignwithoutresearchdoesnotexists.

Todesignforuserneeds,we'llneedtounderstandtheirbehaviours,goals,motivationsand

needsclearly.Throughresearchmethodssuchasinterviewing,observationandevaluation,

wecanreducetheguess-workinvolvedintothedesignprocess.

Ofcourse,userresearchisnotjustasinglestageintheproductdevelopmentcirclethatyou

cantickoffandcomplete:youhavetobetalkingandobservingusersconstantly,andyou'll

needtorepeatedlyreturntothisstage.

InthissectionofthePlaybook,we'vegatheredtogetherlotsofdifferenttoolsandtechniques

thatyoucanusetoconductbetterresearch.Checkoutthesidebartoviewthemall!

WhichresearchtechniqueshouldIpick?

WhichresearchtechniqueshouldIpick?

WhichresearchtechniqueshouldIpick?

Differenttechniquesaredesignedfordifferentpurposes.Itcanbehelpfultogroupthem

togetheraccordingtodistinctwaysofthinking.Theaimistoensurethatourresearchis

adequatelybroad,andas'true'aspossible.Thinkingaboutthesegroupingswillhelpyouto

makesureyourresearchisstrongerandmorelikelytobeaccurate.

Qualitativevs.Quantitative

Qualitativemethods:here,wegatherdatadirectly.They'refocusedonqualityof

research,andonbuildingunderstandingthroughcloseobservationandtalkingtousers

directly.

Quantitativemethods:here,wegatherlargeamountsofdata.It'sfocusedonquantity,

althoughqualityisnotirrelevant.Here,welookfortrendsandbroaderunderstandings.

Itisnoteasytofindtherightresearchmethodforyourproblem.Itrequiresadeeper

knowledgetodecidewhatmethodsshouldweyouandwhen.

Attitudinal(saying)vs.Behavioural(doing)

Thedifferencebetween"whatuserssay"and"whatusersdo"canbesurprisinglydifferent:

Attitudinalmethodsask"whatdoestheusersay".

UXPlaybook

Theyinvolveactive2-waycommunicationwiththeuser(suchasinterviewing).

Theyhelpusbetterunderstandusers'goalsandmotivations

Wemainlyusetheseintheearlierstagesoftheproductdevelopmentcycle

Behaviouralmethodsask"whatdoestheuserdo".

Theyinvolveobservationandgatheringpuredata,withoutbeingdistractedbythe

user'spersonalopinion.

Theyareparticularlyusefulforvalidatingourdesignsandassumptionsandseeing

howpeoplereallyact.

Thesearegreatforongoingproductdevelopment,andlaterintheproduct

developmentcycle.

Furtherreading

developmentcycle. Furtherreading WhentoUseWhichUser-ExperienceResearchMethods

Group.Thisisagreatoverviewandcoversthistopicinmoredetail.

UserResearchMethodsfromusability.gov.Thisisagreatcollectionsofresourcesfor

runningbetterresearch.Wellworthworkingthrough,anditexplainsalotoftechniques

inmoredetail.

UXPlaybook

QualitativeResearchToolbox

UXPlaybook

Userinterview

Userinterviewsarefocusedonunderstandingauser'smotivationsandneeds.By

understandingtheirmindbetter,wecanimprovetheproduct'sUX.

Howtorunagoodinterview

Theinterviewingprocessneedstobecarefullyexecutedtogainunbiasedfeedback.

Structure

Gatheryourinterviewsubjectsinadvance.Checkoutthetipsbelowforfindingusers, andalsoourLeanValidationPlaybookforfastrecruitment.

Auserinterviewwillprobablybeabout30minuteslong.

It'sbesttohaveaninterviewerandanobserverforthesession.Theinterviewer

communicatestotheuserwhiletheobservertakenotes.

Tipsforgettingbetterlearning

Encouragestorytelling.Onceyousucceedinencouragingstorytelling,youcangetfar

betterinsightsintotheproblemsyourusersarefacing.Storytellingallowstheuserto

talkaboutherfeelings—whichisgreatforunderstandingherdeepermotivations.The

moredetailshecanprovide,themoreinformationyouwillhave—andthebetterthe

designdecisionsyouwillbeabletomake.

Avoidafixedsetofquestions.It’saconversation,notaninterrogation.Justasthe

besttypeofjobinterviewsshouldbe,anyway.You’renottryingtotesttheperson—

you’retryingtounderstandasmuchaspossibleaboutthem.Learninghowtodrivea

conversationandbuildempathywiththeuserisnoteasy.Therearealotofgood

examplesofthisinthebookbyDavidandTomKelleyofIDEO:CreativeConfidence,

whichtalksaboutdesignthinking.

Don’taskpeoplewhattheywant.Thereisahugeamountofliteraturethatexplains

whythisisabadidea.Avoidspeculativequestions:theyarenotgoingtotellyoumuch

abouttheuser’srealneedsandgoals.Peoplecan’ttellyouwhattheywantandthey

aremostlyunabletospottheirstrugglesanddifficultiestoo.Theycantellyouwhatthey

aretryingtoachieveandwhattheirgoalsare.Andthat’senoughforyoutodesign

solutionsfortheirproblems.

Don’tmaketheuseradesigner.Avoidaskingtheusertodrawscreensforyou.Ifhe

orshesuggestsmodificationtothedesign,gentlyaskwhatthereasonforthis

UXPlaybook

modificationis,andwhatproblemitwouldsolve.Thisallowsyoutounderstandyour

user’smotivationandthoughtprocessmoredeeplyandtofigureoutthebestdesignfor

theirneeds.

Avoidleadingquestions.Allofushavehypothesesandassumptions.Theseshould

beleftfarbehind.Youneedtomakesureyouarenotsuggestivewithyourquestions.

Thiswouldresultinfalseresults,whicharereallyharmful.Trytoaskopen-ended

questionssoyoucanavoidaccidentallysuggestingananswer.Insteadofasking“How

difficultdoyoufindittousefeatureX?”,ask“What’syourimpressionofusingfeature

X?”

Don’tgotoomuchintodetails.Userinterviewsshouldbeabouttheuserand

theirgoals.Goingintodetailsmightsoundlikeagoodideaatfirst,butitwilltypically

justleadtoendlessconversation.Itisalsotheperfectwaytoturntheuserintoa

designerandgetthemtoavoidstorytelling–whichisexactlytheoppositeofwhatyou

want!Justmakesureyoutakeonestepback,wheneveryoufindyourselfgettingtoo

deepintothedetails.

Payattentiontobodylanguage.Somepeoplemightfindithardtoexpress

themselves,sopayingattentiontotheirbodylanguageisagreatideatogetmore

insightintohowtheyfeel.Ifyoucanrecognisediscomfortortensiononyouruser’s

face,orintheirbodylanguage,youcanaskbetterquestions.Ifyouareunfamiliarwith

bodylanguage,I’drecommendreadingTheDefinitiveBookforBodyLanguage,which

isagreatstart.

Howtofinduserstointerview

Recruitingpeoplefromourownnetwork

Thisisthemostcasualwaytofindpeople:simplyreachoutfriends,contactsandfamilyon

FacebookoranyIMapplicationandaskiftheycouldjoinfora20-30minscall.Butnote:

Makesureyou'regettingunbiased,uninfluencedfeedback.Thereisariskwhenusing

personalconnections,thattheywon'tbetotallyreliablesubjects,becausetheyknow

youpersonally.

Trynottoaskthesamesubjectsrepeatedly,evenjustbecauseyou'llannoythemifyou

doso.

Remember:fellowUXprofessionalsarenotnecessarilythetypicaluseryouneedtobe

interviewing.Theythinkdifferently!

Recruitingthroughtestingtime.com

UXPlaybook

ThisistheonlycompanywecurrentlyknowofwhichprovidesusersforremoteSkypeuser

testing:

Youcanselectthedesireddaysandtimeslotsfortheinterview.Theywilllineupauser,plus

abackupoption,foraSkypeinterviewin48hours.Itcosts40EURperuser,withanoption

toscreenandfilterfurther.

Youcanscreenusersby:

Age,withanoption toscreenandfilterfurther. Youcanscreenusersby: Gender Language(en/de) Device(computer,smartphone,tablet)

Gendertoscreenandfilterfurther. Youcanscreenusersby: Age Language(en/de) Device(computer,smartphone,tablet) Custom

Language(en/de)toscreenandfilterfurther. Youcanscreenusersby: Age Gender Device(computer,smartphone,tablet) Custom FurtherReading

Device(computer,smartphone,tablet)

CustomGender Language(en/de) Device(computer,smartphone,tablet) FurtherReading StevePortigal's

FurtherReading

Device(computer,smartphone,tablet) Custom FurtherReading StevePortigal's

andhasalotofinformation.ContactaShipmateifyouneedacopy!

JakobNielsenhasagoodoverviewandsometipsinhisarticleonInterviewingUsers.

UXPlaybook

Usertesting

Ourgoalistogatheranyrelevantfeedbackandinformation.Wecancarryoutusertesting

throughouttheproductdevelopmentcycle.Paperprototypes,higherfidelityprototypes,

MVPsorawell-developedproductcanallbeusedforusertesting:

Inanexistingproduct,itcanallowustouncoverusabilityissues.

Wecanalsouseitearlierintheproductdevelopmentcycletogatherfeedbackabout

ourconceptorprototype.

Howtorunagoodusertest

Themostcommonwaytodousertestingistoassigncertaintaskstousersandobserve

howtheyattempttocompletethese.

Basicrules

Wearetestingtheapplication,nottheuser.Makesuretheuserismadeawareofthis. Communicatethestateofmindandthecontextrequired,inordertoadequatelyprepare theuserforthetest. Telltheuserto'thinkaloud'whileworkingthroughthetesttasks.Thiswillhelpyouto understandtheirthoughtprocessastheydothings.

It'sworthpre-testingyourtaskswithateammateorfriend(testsubject#0)tomakesure

yourinstructionsareclear.

Don'tbeafraidtouseyourmaincompetitor'swebsiteasthesubjectforthetest.This canoftengiveyouvaluablelearning.

It'sagoodideatohave3peopleonthecall:1moderator,1tester,and1observer.The

moderatortalkstotheuserandguideshimifneeded,whiletheobservertakesnotes.

Howtofinduserstotestwith

AstheHannoteamisremote,weoftenconductremoteusertesting.

ModeratedtestingwithSkype

UXPlaybook

Simplyscheduleacall,thenasktheusertosharetheirscreenwhileyourunthroughthe

test.Torecruitusers:

Eithermineourownnetwork.Trynottohasslethesameuserseverytime!

OruseTestingTime.Currentpricingis€200for5testers.See[[Userinterviews]]for

moreinfo.

'Automated'remotetestingviaa3rdparty

Thereareseveralserviceswhichallowsustoconductremote,asynchronoususertesting.

Yousetupthetest,uploadittotheirservice,andtheresultsgetdeliveredtoyou.Youcan

quicklyconductusertestswithamazinglyfastresponsetimesthisway:usuallyittakesafew

hourstogetbacktheresults.

UserTesting:ourusualpick.Viewpricing.Thetypicalcostof1testingsessionisaround

$49onUserTesting.Ifyou'regoingtorunlotsoftests,youmightwanttoconsiderusing

theirsubscriptionplan(uponapplicationonly).

Netizen:Malaysiancompany--usefulifyouaretestinginSouth-EastAsia

UXPlaybook

Ninjausertesting

Ninjausertesting(alsoknownasguerillausertesting)isacasualyetveryeffectivewayto

testyourproduct.Thekeytosuccessistobeopen-mindedandnicetothepeopleyouare

approaching,andkindlyaskthemtotestyourproduct.

Butdon'tforgetthatwhileninjatestingcanbeagreatwaytodoleanUX,it'snotasubstitute

forconductingdeepertests.Becarefulnottodependonninjatestingandendupwith

misleadingfeedback!

Ninjatestvariations

Hallwaytesting:Simplyapproachpeopleinyourofficehallway(withalaptoportablet,

ifpossible)andkindlyaskthemiftheyhave10minutestohelpyouout.

Coworkingspacetesting:Thereareplentyofpeoplehangingoutincoworkingspaces

andyoucaneasilyseewhoisapproachable.Commonareasaregreattoinitiatea

conversationandaskforafewminutesoftimeandtheirfeedback.

Drunkusertesting:Themostfavouredwayoftesting,butdon'tbefooled:it'snotyou

whoneedstobedrunk!AstheoldChineseUXsayinggoes:"儿唱歌不是因

了答案,而是因有歌要唱".Inotherwords"ifadrunkpersoncanuseit,thenit's

usable!".I'drecommenddoingthiswithfinalproducts:thehigherfidelitywillmostlikely

helpdrunkpeopletounderstandthingsbetter,andsaveyouplentyofexplanationtime.

Don'tunderestimateit!Thisisaverypowerfulwaytotestthepureusabilityofyour

product.

Smokebreaktesting:Thecommonsmokingareaisagreatplacetogetintoa

conversationaboutthatnewprototypeyouaredesigning.Peoplespendingtime

hangingoutsmokingcigarettestendtosharetheirthoughts:takeadvantageofthis!

Otherusefultips

Sincepeopletendtobebusyaroundmidday,youneedtofigureoutthebesttimingfor

yourapproach:thismightbeduringthemorning,lunchbreakorlaterontheafternoon.

Explainpurposeandgivesomecontextbeforehand,andpeoplewillbemorelikelyto

helpyou.

Ifyouarefeelinguncomfortableapproachingpeople,startsmall:askpeopleforvery

little.Buildupyourconfidence

It'ssurprisinghowmanypeoplearewillingtosharetheiropiniononthings.Justask,

UXPlaybook

andbesurprised! Itcanhelptoofferrewards(candy,chocolate,drinks,etc),itwilldelightpeopleand meanthey'llbehappytohelpyououtnexttime,too. Trysittinginapublicareaandputtingupasign:"Wantafreecoffee?Comegiveme

youropinionand10minutesofyourtime,andI'llgetyouone!”

Furtherreading

Furtherreading AgreatUXBootharticle onguerillatesting,withsomesolidtips

AgreatUXBootharticleonguerillatesting,withsomesolidtips

UXPlaybook

Cardsorting

Cardsortingisawaytoresearchyourusers'mentalmodel:howtheygroupdifferentitems

basedontheirperceptionofthem.It'sacommontechniquewhenwe'retryingtofigureout

informationarchitecture,navigationandtaxonomiesonamorecomplexproductorwebsite.

Howtorunacardsortingexercise

Whototestwith

Testingwith15usersshouldbeenoughtogetprettyaccurateperspective.Itwillgive

youacorrelationof0.9betweentheresults.30willgiveyou0.95.

Youmustselectusersfromyourtargetaudience,whomatchyourpersona.

Generalstructure

Abasictest:

1. Createindexcardswithtermsanddescriptions

2. Shufflethecards

3. Asktheusertogroup/pilethecardsbasedonwhichonestheyfeelbelongtogether

4. Asktheusertogivea'name'oraheadingtoeachofthedifferentgroupstheyhave stackedup

5. Repeatwithothertestersuntilyouhave15setsofresults.

6. Lookforpatternswhileanalysingthegroupingsmadebydifferentusers

7. TaketheresultsofyourcardsortingtestsintoconsiderationduringtheIAdesign

process

Goingdeeper:

Thisexercisecanalsobeperformedwithpre-definedcategorynames(buckets):wejust

asktheusertoputthecardsintotherightbucket.

Optionallyyoucanalsoaskuserstosetaprioritybetweendifferentcardsorcategories.

Atypicalexample

UXPlaybook

Forane-commercesite,writedowneachnavigationitemontoacard,andasktheuserto

groupthem.Cardsortingwillshowyouhowtheuserswanttoseethedifferentproduct

categoriesgrouped.

Howwillthiseffectthewebsiteperformance?You'llhopefullyendupwithamorelogicalIA,

whichwillhelppeopletofinditemseasierandresultinbetterconversionrates.

Toolstouse

Remotely:OptimalSortisourrecommendedremotecardsortingtool.

Fullymanual:Cardsortingcanbedonewithoutanytechnicaltools.Simplywritethe

termsonindexcardsandasktheusertoorganisethem.YoucanalsouseOptimalSort

toprintoutandorganiseamoderatedcardsortingsession,whichmaysaveyousome

time.

Furtherreading

time. Furtherreading CardsortingbyNNG Cardsorting 20
time. Furtherreading CardsortingbyNNG Cardsorting 20

UXPlaybook

Ethnographyresearch

Thisisaboutobservingpeopleintheirnaturalworkingorlivingenvironment.Somepeople

describeethnographyresearchas"discoveringtheunknown".

Ethnography:"Thescientificdiscoveryofpeoplesandcultureswiththeircustoms,

habits,andmutualdifferences."(OxfordDictionaryofEnglish)

Thekeyhereistospotandcapturethe"aha!"momentswhilediscoveringusermotivations.

These"aha!"momentsareusuallysurprisingandtheycanbethesourceofgreatinnovation.

Ethnographyresearchisvaluablebecauseitgiveslotsofinsightincontext,whichcanbe

hardtogetfromother,moreformaltestingtechniques.Learningmoreaboutthiscontext

helpsustounderstandhowitaffectstheUX,outsideoflabconditions.

Whatisitgoodfor

Testingmarketdemandforproductswhichdon'tevenexist

Unveilingcontextforyourproduct,tohelpyoutotailortheUX

Unveilinguniqueusecasesandcomeupwithnewproductideas

Unveilinganomaliesandunexpectedbehavioursandactivities

Deliveringdeepandstrategicinsights

Howtocarryoutethnographyresearch

Observationmodes

1. Youcaneitherpassivelyobserveyourusersfromadistance.

2. Oryoucanactivelyparticipate,toimmersedeeperintotheirenvironment.Here,you

canactivelyaskquestionstotheparticipants.

Tips

Pairupwithadesignerfortheresearchwhocantakenotesandspotissuesfroma

furtherperspective

Askyourparticipantto'thinkaloud'whileworkingthroughtheexercise

Askquestions,butdon'tinterrupt

Takeasmanyresearchnotesaspossible

UXPlaybook

Payattentiontoaskingtherightquestionsandintherighttime.Makesureyoudon't

interruptconversationsandactivities,andturnthesituationintoamoreformaluser

interviewprocess,whichmightaffecttheuser'sbehaviour.

Debrieftheuserrightafteryouhavefinishedandcaptureimportantobservations,

especiallythe"aha!"moments.

Anexampleofanethnographyresearch

HannoUberresearchincludedaquitedeepuserresearchfromMattandJon.

So,afterdownloadingtheappontoourphones,JonandMattsaid“solong”tothe

Londonpublictransportsystem,andstartedridingwithUber,toandfromtheirco-

workingspaceandmeetings.Uber'sofferingsinLondonatthattimeweredividedinto

twocamps—UberX(adirectcompetitorwithLondon'staxidrivers)andUberLUX(the

luxuryoption,rivallingprivatecarhireservices).

Sowesplitourtimeequallybetweenthetwo,askingquestionstohomeinonthe

benefitsoftheapp.Wedecidedtokeepalogofeachjourneyandrecordtheanswers

wegot.

Furtherreading

wegot. Furtherreading

UXPlaybook

QantitativeResearchToolbox

UXPlaybook

A/Btesting

Ifyouwanttoanswereitherofthefollowingquestions,you'llneedsomeA/Btesting:

1. "Whichversionofourdesignisgoingtoproducebetterresults?"

2. "IsthechangeI'mplanningtomaketotheproductgoingtobeeffective?Willitimprove

theconversionrate,andshouldIgoaheadandimplementit?"

It'sapopularquantitativeandbehaviouralresearchtoolwhichcanhelpusdecidebetween

twocompetingalternatives.ConductingA/Btestischeap,protectiveandquickwayto

decideifadesignisanimprovementornot.

What,andwhy?

WhatcanyouA/Btest

Anywebsitewithameasurablegoal:ane-commercewebsite,SaaSproductsignup,

mediawebsiteforadclicksorsubscriptions

Basicallyanywebsitewithagoaltoconvertvisitortosomethingelse

Text:headlines,sub-headlines,paragraphs

Calltoaction(CTA)buttons

Amountofcontent:short/longversions

DifferentlayoutsCalltoaction(CTA)buttons Amountofcontent:short/longversions Differentcheckout/signup/etcflows Differentstyles

Differentcheckout/signup/etcflows

DifferentstylesDifferentlayouts Differentcheckout/signup/etcflows Pricingstructures Promotions WhyshouldyouA/Btest

PricingstructuresDifferentcheckout/signup/etcflows Differentstyles Promotions WhyshouldyouA/Btest

PromotionsDifferentstyles Pricingstructures WhyshouldyouA/Btest

WhyshouldyouA/Btest

Togetfactualevidenceforthesuccessofyourchanges,ratherthanrelyingonintuition

ToincreaseconversionIt'sfairlyquickandcosteffective

It'sfairlyquickandcosteffective

It'srelativelyrisk-free:onlyaffectingaportionofyourtraffic

Tominimisetheriskofnewdesignchangeshavinganegativeimpactonconversion

TouncoverpotentialTominimisetheriskofnewdesignchangeshavinganegativeimpactonconversion HowtorunagoodA/Btest A/Btesting 24

HowtorunagoodA/Btest

UXPlaybook

Thestructure

1. Constructyourstartingpoint:aquestionthatyouwanttoanswer.Forexample,"Whyis

myconversionratesolow?"

2. Doyourresearch:useananalyticssoftwaretouncoveruserbehaviour,interviewusers,

sendoutsurveys

3. Makesureyouhaveenoughtrafficthatyourtestwillhavestatisticalsignificance(see

below)

4. Designdifferentvariants

5. StarttheexperimentusingGoogleAnalyticsorOptimizely

6. Evaluatetheresults

7. Implementthewinningversionandlookforimprovement

Statisticalsignificance

Togetaccurateandstatisticallysignificantresultsyouneedtotestyourdesignswith

hundredsoreventhousandsofparticipants.Youalsoneedtobecarefulaboutrunning

morethanonetestatonce:youneedtobesurethattheresultsyouarerecordingcanbe

attributedtothechangeyou'retesting.

SinceA/BtestingisusuallyautomatisedwithsomesoftwaresuchasGoogleAnalyticsor

Optimizely,youshouldfollowtheirsuggestionsandleavethetestrunningtillitsaysithas

enoughresults.Thiswillgiveyoutheconfidenceinthebetterperformingversion.

Ifyoudon'thavethetraffic,orthesituationwhichwouldallowyoutogaindefinitestatistical

significance,thenyoushouldtakeastepbackandlookatqualitativeuserresearch

techniquesinstead.

Youcanreadmoreaboutstatisticalsignificanceonthefollowingpages:

Tipsandbestpractices

Alwaystesttheoriginaldesignsothatyouhaveabaseline. Alwayswaituntiltheendoftheexperiment.Bewaryofdeclaringa'winner'afterpositive earlyresults. Don'tsurpriseyourusers:ifyou'retestingasignificantmodification,considersending

onlyaportionofthetraffic(5-25%)tothetest.

Intuitionandgutfeelingdoesn'tworkinA/Btesting.Themetricsareking.

Majormodificationstendtodeliverbetter,moredependableresultsthansmallfixes.

UXPlaybook

Testingisanever-endingjob:thereisalwaysroomforimprovement.

Toolsfortesting

fivesecondtest.comToolsfortesting Optimizely GoogleAnalyticsExperiments FiveSecondTest:

FiveSecondTest:AFiveSecondTestshowsyourdesigntothetesterforjustfive

seconds.Afterthefivesecondsareup,thetesterisaskedaseriesofquestions

thatyoucanspecify,suchas"Whatproductdoyouthinkthiscompanysells?",or

"Whatwasthecompanyname?".

ClickTest:AClickTestrecordswhereusersclickonyourdesign.Thetesteris

askedtofollowtheinstructionsyouspecify,suchas"Wherewouldyouclicktoview

yourshoppingcart?",or"Wherewouldyouclicktochooseatemplateforyour

blog?".

PreferenceTest:PreferenceTestsaskthetestertochoosebetweentwodesign

alternatives.Youcanasktesterstochoosebasedonaparticularattribute(eg.

"Whichdesignlooksmoretrustworthy?"),orsimplyaskthemwhichtheyprefer

overall.

InterestingA/Btestingcasestudies

UXPlaybook

Survey

Surveysareagoodtooltoquicklyreachoutandgetfeedbackfromyourtargetaudience.

Whentousesurveys

Youhaveotherresearchtoolsathandandyouwanttoextractmoreattitudinaldata fromyourusers

Youcangetatleast20peopletofillyoursurvey

Collectcustomerfeedbackbeforeredesigningawebsite

Collectcustomerfeedbackaboutyourproduct

Becareful!Surveyareoneofthemostcomfortable,yetdangerousresearchtools.

Sincethisisaquantitativeresearchtool,makesureyourquestionsreflectthat,asking

qualitativequestionsinsurveyscanresultinalotofmisinterpretation.

Forexampleaskingpeopletotellmoreaboutsomethinginasurveyisconsideredtobe

abadapproach:youshouldinterviewusersandhaveaconversation.Collecttheire-

mailaddressattheendofthesurveyinsteadandlineupaninterview.

Howtorunagoodsurvey

Structure

1. Identifyyourpurpose

2. Trytocreateassimplequestionsaspossible

3. Testyoursurveywithafewfriends

4. Payattentiontoquestionordering.Theymighthaveaninfluenceoneachother

5. Dopairingduringthesurveycreationprocesstoensurethequestionsareproper

Tipsforbettersurveys:classicmistakestoavoid

Becareful,it'seasytoslip.Probablythebiggestconcernwithsurveysisthatit'seasyto

mississues.Bythisyouwon'tevennoticeyou'vemadeamistake.Sobecarefulwith

surveysandespeciallywiththeseissues:

Surveydoesn'tmaptheinformationyouneed.TODO:Addexplanationforthisone.

Mandatoryquestions.Itmightbetemptingtomakethemostimportantquestions

UXPlaybook

required,butattheendpeoplemightjustleavethesurvey.Youshouldleaveallyour fieldoptional.Iftheywillskipansweringafewquestionsyouwillknowthattherewere someproblem. Two-in-onequestions.Youshouldavoidthistypeofquestionsbecausetheusermay

have2differentanswers.Toresolvethis,simplyturnitinto2separatequestions.

"Wasthemessageclearandcompelling?"

"Isyourmanagerhonestandtrustworthy?"

"DidyouknowthatMozillaisamission-drivenorganisationtomaketheInterneta

betterplace?".

Complexquestions.Complexquestionsmightscareusersoff,nottomentionit'seasy

tomisunderstood.

Leadingquestions."HowwouldyouratethecareeroflegendaryoutfielderJoe

Dimaggio?"Togetunbiasedinformation,don'tincludeyourpersonalopinionwithin

them.

Directquestions.Askingdirectlycanbeharmful.Thereisabigdifferencebetween

whatpeoplesayandwhatpeopledo.Forexampleaskingaboutiftheywouldbuyyour

product,morepeopletendtogivepositiveresponsethanpeoplewillingtoputdown

moneyforyourproduct.

Howtofinduserstosurvey

Basedonthesurveyandtypesofuserswewanttoreachtherecanbe3differentscenarios:

Existingusers:collectandreachoutactiveusers;sendthemafriendlymass-email directingthemtoaGoogleFormwhichtheycanfill.Youcanincreasetheengagement withgiftsorcoupon.

Targetdemographic:usinga3rdpartysurveytools,likeGoogleConsumerSurvey

allowsyoutosetdemographicsettingsbasedonyourneeds.

Generalpublic:usingaGoogleConsumerSurveyordistributingyoursurveythrough

Facebook/Twitter.Thismighthappenearlyphasesintheproductdevelopmentprocess.

Becareful,it'sveryrarethatyouwantfeedbackfromgeneralpublic,youshouldbeable

todefineyourtargetaudiencequiteearly.

Toolstouse

GoogleForm

GoogleDriveallowsyoutocreateGoogleFormdocumentswhichyoucanusetosendout

foryourfriends.Youcaneasilysetupthesurveyandsharethelinkwithyourusers.

UXPlaybook

UXPlaybook GoogleConsumerSurveys GoogleConsumerSurveys isatoolwhichallowsyoutosetupanddistributesurveys.The priceis

GoogleConsumerSurveys

GoogleConsumerSurveysisatoolwhichallowsyoutosetupanddistributesurveys.The

priceis10¢to$3.50percomplete(upto10questions,variouskinds)anditdependson

thelengthofthesurvey.

DifferentUsecasesgiveyouanideaabouthowtogetoutthemaximumofGoogle

ConsumerSurveys.

Countries:

UnitedStatesConsumerSurveys. Countries: Canada UnitedKingdom Germany Italy(Androidonly)

CanadaConsumerSurveys. Countries: UnitedStates UnitedKingdom Germany Italy(Androidonly) Japan(Androidonly)

UnitedKingdomConsumerSurveys. Countries: UnitedStates Canada Germany Italy(Androidonly) Japan(Androidonly)

GermanyCountries: UnitedStates Canada UnitedKingdom Italy(Androidonly) Japan(Androidonly)

Italy(Androidonly)Countries: UnitedStates Canada UnitedKingdom Germany Japan(Androidonly) Netherlands(Androidonly)

Japan(Androidonly)UnitedStates Canada UnitedKingdom Germany Italy(Androidonly) Netherlands(Androidonly)

Netherlands(Androidonly)UnitedKingdom Germany Italy(Androidonly) Japan(Androidonly)

Youcansetvariousscreeninganddemographyoptionswhichmakesthisagreatand

affordabletooltouse.

UXPlaybook

Analytics

Usingananalyticstoolisprobablythemostpopularquantitativemethodforgathering

informationaboutbehaviour.Wecancollect,measureandanalyseseveralmetricsinorder

tounderstanduserbehaviourandoptimisetheproductperformanceandusability.

Themostcommonmetricswemeasureittheconversionrate,whichallowsustoseehow

ourvisitorsconvertsinacommercialcontext.

Whyuseanalytics?

Todiscoverissuesworthinvestigating

Tomeasurehowvisitorsconvert

TomeasuredifferentmetricsandKPIs

Torunexperiments:[[A/Btesting]]

Howtouseanalyticresearchand

measurement

Togetgoodanalytics,weneedtosetclearKeyPerformanceIndicators(KPIs).KPIsallow

ustoobjectivelymeasuretheperformanceofthebusiness.

TosetKPIs,We'drecommendsettinggoalsfirst.Goalsarebroadertargetsthatyouwantto

hit.YouwillsetourKPIstoalignwiththesegoals.Here’sanexample:

Goal1:Increasesalesby10%.PossibleKPIs:

growsitetrafficGoal1:Increasesalesby10%. PossibleKPIs: reducecartabandonmentratebyX% reducebounceratebyX%

reducecartabandonmentratebyX%

reducebounceratebyX%PossibleKPIs: growsitetraffic reducecartabandonmentratebyX% improvereorderingratebyX% Goal2:Decreasechurnrateby10%.

improvereorderingratebyX%

Goal2:Decreasechurnrateby10%.PossibleKPIs:

boostnetpromoterscoreGoal2:Decreasechurnrateby10%. PossibleKPIs: increasecustomersatisfactionby5%

increasecustomersatisfactionby5%

quickensupportresponsetimeby10%

decreasesubscriptioncancellation

UXPlaybook

Makesureyouhavebothengagement(timeonsite,sessionduration)andcommercial

(conversionrate,returnrate)KPIs--bothhelpyoupushtowardsyourgoal.

KeepinmindthatthemostimportantthingwithKPIsistoeasilybenchmarktheperformance

ofyourproduct.Youshoulddesignandworkaroundthegoalstohitthem.

Tools

GoogleAnalytics

GoogleAnalyticsisthemostwide-spreadsolutionforwebanalytics.Itiseasytoimplement

anduseandyoucantrackthemostimportantmetricseasily:

Pages/visitanduseandyoucantrackthemostimportantmetricseasily: Bouncerate Averagetimeonpage Averagevisitduration

BounceratePages/visit Averagetimeonpage Averagevisitduration

AveragetimeonpagePages/visit Bouncerate Averagevisitduration Mixpanel&KISSmetrics

AveragevisitdurationPages/visit Bouncerate Averagetimeonpage Mixpanel&KISSmetrics

Mixpanel&KISSmetrics

MixpanelandKISSmetricsareslightlydifferentthanGoogleAnalytics.Theyallowyouto

trackonlywhatwewanttotrackandbuildcustommetrics.Italsohavesomemarketing

automationbuiltin.

UXPlaybook

Eyetracking

Eyetrackingisamoreexpensivequantitativemethodthanotherresearchmethod.You

cannotdoitwithremoteusers,asyouneedtohaveaphysicalspaceandenvironmentset

up.Youalsoneedspecialsoftwareandhardwaretobeabletorecordtheeyemovement

andmapittoyourproductorwebsite.

Here'sagreatoverviewvideo:

Here'sagreatoverviewvideo: Whyuseeyetracking?

Whyuseeyetracking?

it'sisaneffectivetooltofigureoutthefollowing:

Whatareyouruserslookingat?

Howlongtheyarelookingatitfor?

Howdoestheirfocuschangeastheymovethroughthewebsite?

Whichelementsaremostprominent?

Dotheyreadcontentinfull,orjustscanit?

Howtodifferenttypesofusergroupscanthewebsite?

Butthereareseveraldownsidestothetechnique

Evenifpeoplelookedatanelement,youcannotbesuretheyhavereallynoticedand

understoodit.

Sinceitisanunmoderated,taskdriventechnique,youdon'tknowwhytheuserlooked

atanelement.

Eyetrackingcannottrackperipheralvision,whichisoftenimportant.

Interestingeyetrackingfindings

Howusersreadontheweb

UXPlaybook

Peoplescanthewebsitecontentinsteadofreadingit.Therearefixationpointsonthe

websiteastheyaretryingtofindtherelevantinformation.Theyarelookingforkeywordsand

highlightedelementsonawebsiteandtryingtoprocesstheinformationtomakedecisions.

YoucanreadmoreinthisNormanNielsenGrouppost.

F-shapedpattern

EyetrackingstudiesrevealedthatuserstendtoparsethewebsiteinaFshapedpattern.

Themainlearningsarethat:

1. Userswon'treadalltheinformation

2. Youshouldaimtowriteclearandengagingtitles.

2. Youshouldaimtowriteclearandengagingtitles. Readmore Bannerblindness

Bannerblindness

Eyetrackingstudieshaveshowedthatpeopletendtoabandonbannersandfocusonthe

contentreadingorscanning.Readmore.

UXPlaybook

UXPlaybook Images Information-carryingimagesgetsusersattentionanditisconsideredgood,whilepurely

Images

Information-carryingimagesgetsusersattentionanditisconsideredgood,whilepurely

decorativeimagestendtogetignored.

UXPlaybook

Persona

Youneedtoconductuserresearchandinparticularuserinterviewstogatherinformation

aboutyourusers.Onceyouhaveenoughdatafromyourresearchyoucanproceedto

personacreationprocess.

Benefitsofapersona

Usingpersonasisapowerfultooltogetsettlementaroundyouruserarchetype.Itisabout

stayingfocusedandsatisfyingrealuserneeds.Personasareusedduringtheproduct

developmentprocesstomakesureyouunderstandtheirmotivationandyouaresatisfying

youruser'sneeds.Ithelpsyoutocommunicateyourdesignwithstakeholdersandjustify

yourdesigndecisions.Onceyourpersonaisdevelopedit'sacheapandpowerfultoolfor

designers.

Howdoesitcometogether?

Theremightbeseveralusertypesusingyourapplication.Theyhavedifferentneeds,

backgroundsandgoals.Duringtheuserresearchprocessyouhopefullyhaveinterviewed

enoughusersandyoucanspotoverlapsanddifferences.Thesedifferencesallowsyouto

groupthemandfindtheirmotivationsandgoals.

Questionstoaskduringthepersonadevelopment

Whatisthemotivationofthisperson?

Whatisyourdailygoal?Whatdoyouwanttoachieve?

Whatishelookingforinhisjob/life?

What'shisage/gender/educationalbackground?

What'shisexpertiselevelofsoftware/tech?

Whatkindofworkdoeshedo?

Whatkindofpersonishe?

Whatactivitiesdoeshelike?What'shisinterests?

Personabestpractises

Definethemotivationsandgoalsofyourpersona.Thisallowsyoutounderstandyour

usersmindwhenyouareusingthepersona.

Createastoryforyourpersonainsteadofbullet-pointing.Itincreasescredibilitysoyou

UXPlaybook

canusehimbetter. Makeitrealisticanddon'tusefunnynames.Personasaredesignedtobackupserious decisions,soitneedstoreflectthat. Brainstormandpairwithyourstakeholderstoensuretheaccuracyofyourpersona.At theendyouneedacommonunderstandingandagreementaboutyourpersona.

Itisokaytohavemorethan1persona:primary,secondary,etc.Youcanevengroup

them.Althoughbecarefulwithit,toomanypersonasmeansitwillbehardtosatisfy everyone'sneeds! Toomanypersonasmeanyouwanttoachievetoomuchwithyourproduct. Yourpersonamustbeareal-lifeexampleofyourusers:ithastobespecificenoughto beabletoanswerspecificquestions.

Itmightbeagoodideatogrouphisattributesinto3categories:Facts&

Demographics,Needs&GoalsandBehaviours.

Don'toverdoanddon'tbeafraidoffailing:youmightbewrongwithsomethingrelatedto

yourpersonaandyouneedtochangeattributeslater.That'scompletelyfineuntilthe

teamhasanagreement.

Keepyourpersonaathandanddon'tbeafraidtoaskwhat'sthebestforhim.

UserPersonaCreator

YoucanuseUPCwhichisagreattooltouseforpersonacreationprocess.Itgivesyou

blanktemplatewhichyoucanfillandyourpersonaisreadytogo.

Personaexample

UXPlaybook

UXPlaybook Persona 37

UXPlaybook

Expertreview

Expertreviewsevaluateproductsfromadistinctperspective,andofferaviewofanUX

expert.Thisapproachjudgestheproductintermsoftrustworthiness,credibility,

competency,reliability,designandstyle.

Thisisaheuristicandself-exploringapproachtounderstandingtheproductandprovide

ananalysisaboutitsstrengtsandweaknesses.Itisindeedopinionated.Sinceheuristic

reviewcannotbequantified,ithastobeappliedcarefully.

Howtoconductexpertreview

OnceyouhaveadeepunderstandingofUXdesignanditsprocessesplusyouhavea

deeperexperiencedesigningapplicationsyoumighthaveagoodoverviewofUXdesign

already.Thismeansyoushouldfeelcomfortableconductinganexpertreviewandprovidea

valuablefeedback.

YouneedtoevaluatetheproductfromAtoZ,includingonboarding,usabilityissues(by

spottingmissingcommondesignpatternwhichmostlikeproduceusabilityissues).

Inordertomakethereviewmoreaccurate,youshouldpairitwithotherresearch,

particularlyquantitativeresearch.

Furtherreading

particularlyquantitativeresearch. Furtherreading TODO:Readandimplementthefollowingresources

TODO:Readandimplementthefollowingresources

UXPlaybook

Journeymapping

Weusethistechniquetodiscoverdifferentstepsintheuser'sinteractionwithourproduct.

Thegoalofthejourneymappingistoputtogetheravisualoverviewofallthedifferent

decisionsourusersneedtotakeinordertousetheproduct.

Whyusejourneymaps?

Agoodjourneymapallowsustoimmerseourselvesintheuser'smind,andgainabirds-eye

viewoftheirinteractionwiththeapplication.Bymappingapotentiallycomplexseriesof

interactions,itcanhelpustoseeundevelopedsectionsandunveilnewpotentialfor

improvements.

Howtocreateajourneymap

Inordertoproperlymaptheuserjourneyweneedtohaveanunderstandinghowour

productwillwork.Thereforethisexerciseisthebesttobeexecutedaftertheuserresearch

andbasicwireframingtasks.

andbasicwireframingtasks. Journeymapping 40

UXPlaybook

Tools Murally
Tools
Murally

UXPlaybook

Design

UXPlaybook

InformationArchitecture

Informationarchitectureisabouttofigureoutthebestwaytoorganiseyourdesign.Itis

aboutorganisingtheelementintohierarchiesofinformation.

TodogreatIAworkyouhavetodoaresearch(seeUserResearchsectionofthiswiki).Most

ofthetimetheInformationArchitecture'srolewillbecomeajointrolewithotherdesign

and/orcontentrelatedroles.

Understandingthehierarchybetweendifferenttypesofcontentisessentialforcreatinggreat

wireframes(andlaterprototypesandproducts).

Howdoesagoodinformationarchitecturelookslikeinan

application?

application? And Usercanfindthepageheislookingfor

And

Usercanfindthepageheislookingfor

Usercanfindtheinformationwheretheythinkitshouldbe

Thewebsitelayoutstraightforward

Fillingformsareeasy

1. Whatinformationshouldwehaveonthesite(content)

2. Howtheseinformationshouldbeplacedacrosspages(sitemap)

3. Howtheinformationshouldbepresentedonapage(layout)

4. HowtheinformationshouldbepresentedonaUIelement(form)

Sitemap

Sitemapsaregoodforwebsitestooverviewhowthepagehierarchylookslike.Themore

complexyoursiteisthemorehardertoprovideastraightforwardsitemap.Sitemapismostly

goodfordesignerstoseehowtheylaidoutthecontentandtoseeifitmakessense.Inorder

toprovidealogicalandstraightforwardsitemapyouneedtounderstandandoverviewallthe

differentcontenttypesonyourwebsite.

Cardsorting

ThisisaresearchtechniquewhichisgreattosupportInformationArchitecturedecisions,

becauseitallowsustounderstandhowusersgroupinformation.Basedonthiswecan

presentelementswhichbelongstoeachother.

UXPlaybook

Dividinginformationtoconsumablepieces

Don'tprovidetoomanyoptionsforyourusersastheycanbedistracting.Thisappliesto

navigation,pricingoralmostanything.Yourgoalshouldbetoalwaysprovideconsumable

piecesofinformationforyourusers.

UXPlaybook

Wireframing

Thisistheprocessofquicklysketchingandplayingwithdifferentideasandlayouts.The

goalofwireframingistobrainstormoverthedifferent“designs”(eveniftheyarestilljust

blackandwhitesketches)andtrytoevaluatedifferentideas.Sincewehavegreattoolsfor

rapidprototyping,wireframingbecomelessimportant.Weareonlytryingtoexperimentwith

thelooseoutlineofthedesignanddefinitelydon’tgointodetailsorhigh-fidelitywireframes.

Sometimesonmorecomplexprojectsitmightbestillworthwhiletogointohighfidelity

wireframing.Thisreallydependsonthecomplexityoftheinterface.Youcanalsogobackto

wireframingatanystageoftheprojectsandyoushouldactuallydothat.

Weprefertokeeptheprototypelowfidelity:makeitugly,andpeoplewilloverlookthe

aestheticdesignandtheywillfocusontheconcept.That'sourpointatthisstageofthe

project.

Differencebetweenwireframeandprototype

Prototypeisthepreliminaryversionofourproductderivedfromourwireframes.Itisan

interactivewireframewhichyoucanexperimentusingandsee/understandhowtheproduct

willfunction.

Ifyouhaveasetofdifferentwireframesofseveralscreens,theprototypewillbethe

aggregationofthesewireframestiedtogetherwhichyoucanclickthroughwithyour

mouse/phone—andunderstandtheconnectionsbetweendifferentscreens(wireframes).

Toolsforwireframing

Inorderofincreasingeffortandfidelity

GoogleDocs

UXPlaybook

UXPlaybook Thisisasurprisinglypowerfulwaytowireframe.We'lladdaproperexplanationsoon.butin themeantime,youmightfind

Thisisasurprisinglypowerfulwaytowireframe.We'lladdaproperexplanationsoon.butin

themeantime,youmightfindthisguideonhowtodothesamewithGoogleSlides,tobe

useful.

BalsamiqMockups

themeantime,youmightfind thisguideonhowtodothesamewithGoogleSlides ,tobe useful. BalsamiqMockups Wireframing 46

UXPlaybook

Balsamiqisoneoftheoldestwireframingtool.Itsphilosophyistousealmostlikehand-

drawnelementstoallowyoutofocusonlyonthelayoutandelements,insteadofthevisual

appearance.

Mural.ly

appearance. Mural.ly

AlthoughMurallyisnotadedicatedprototypingtool,theselectionofitstoolsallowsyouto

collaborativelysketchwireframesandquicklyiterateoverit.Weliketouseit.

Sketch/Illustrator

collaborativelysketchwireframesandquicklyiterateoverit.Weliketouseit. Sketch/Illustrator Wireframing 47

UXPlaybook

Thesetoolsaremoresophisticatedandallowsyoutoproducefinal-likewireframes—wecan

evencallthemmockups.We'dratherusethemtoproducelow-fidelitywireframes.Thereare

veryfewprojectswhichjustifiescreatinghigh-fidelitywireframes,almostlikearealproduct.

Simplybecausethisisnottherightplacetoexperimentaboutvisuals.

Whichtooltouse?

Trytousethebesttoolforthesituation.

Ifyouareworkingwithothers,GoogleDocsorMurallycanbeextremelyeffective.

Ifyouareworkingalonefindtheoneyoucanmovethefastest.

Ifyouneedhighfidelitywireframes,useSketch,IllustratororevenPhotoshop.Needto

collaborate?Noproblem,useScreenheroandworkcollaboratively.

UXPlaybook

Prototyping

Prototypesareinteractivewireframes.Webuildprototypestoputitinfrontoftheusers,get

feedbackandimproveyourprototype.Thisisaniterativeprocesswhichallowsustobuild

greatproducts.

Prototypingisaboutbuilding,experimentingandlearningduringanditerativeprocess.Good

designprocessinvolvestheuserandit’sshorteningthefeedbackloop.Usuallythe

prototypingisstartedwithawireframingsowearemostlyawareofthepositionofthe

differentelements.

Basedonthedetailyouwanttoachievewecantalkaboutlow,mediumandhighfidelity

prototyping.Usuallythehigherthefidelityis,themoreworkisrequired.

Benefitsofprototyping

It’sanefficientuseofresources

Rapidprototypingenablesyoutolearnquicklywhatdoesanddoesn’tworkinweeks,

insteadofmonths.Insteadofwastingtime,moneyandteampowermakinghighlyfunctional

polishedproductstoeventuallytestonyourusers.

Youbuildsomethingthatusersactuallywant

Testingprototypeswiththeuserearlyonmeansthatyouaremuchmorelikelytobuild

somethingtheywilluse,ratherthansomethingyou‘think’thattheywant.Bygettingregular

feedbackfromyourusers,youalwaysknowwhetheryou’reontrackwithyourideaor

product,ornot.

It’salowriskandhighvalue

Thisapproachallowsyoutoexperimentwithoutputtingyourbusinessatrisk.Youcantake

chancesandlearnfromyourusersinasafeenvironment.Mouldingtheprototypeontheir

feedbackearlyontomakesomethingthatishighlyeffectiveinachievingyourbusiness

goals.

Youavoidover-thinkingandplanning

UXPlaybook

Lesstimeisspentmakinglongdrawnoutplansanddiscussingwhatitbestforyourusers.

Insteadmoretimeisspentvalidatingtheassumptionsthataremadeinmakingthe

prototype.Buildingonfactratherthanfiction.

Prototypinghelpswithideation

Wecanoftencomeupwithnewideasandsolutionsasweprototype.Buildingsomethingor

“thinkingwithourhands”opensupthedoorstomorecreativityasyougettophysically

interactwithyourideas.

LowFidelityPrototyping

Similarlytowireframeslowfidelityprototypesarealsobuiltwithpaper.Thedifference

betweenwireframeandprototypeistheinteractivitythatyoucanprovidefortheuser.You

canaddpopups,dropdownmenusandalsonewpagesiftheuserwantstonavigateto

anotherpage.

Paperprototypes

TODO:Credits/replace

anotherpage. Paperprototypes TODO:Credits/replace Prototyping 50

UXPlaybook

HighFidelityPrototyping

Usuallythevisualelementsdetailsandthelevelofinteractivitymakesaprototypemorerich.

Youcancreateamixofpaper-like,butfeelslikeanappprototypewithPop.appfor

example.Oryoucandesignentirescreensliketheyarefinalandputthemtogetherwith

MarvelApp.AnotherapproachistouseFramer.jswhichallowsyoutocodealmost—feels

—like—nativeapplicationsonmobile.

ForwebapplicationprototypingyoucanuseBootstraporFoundation.Toincreasethe

fidelityandinteractivityweusetoolslikeBootstrap,Middleman,Sassetc.

Framer.js

MarvelApp

Bootstrap/FoundationWebPrototype

UXPlaybook

Content

InUserExperiencedesign,contentplaysamajorrole.Ultimatelyitiswhattheuser

consumes,andwecandesignitinordertoimprovethewayit'sconsumed.

MicrocopyWriting

Thegoalistowritesmallpieceoftextwhicharestraight-forwardandeasytounderstand,

andhelpfurtheryouruserexperience.

GoodResources:

Voiceshouldbeconsistent.It'sagreatideatodefinevoiceandtoneguidelinessothat anyonewritingcontentcanstickwiththesamebrandtone.Mailchimpdothisverywell. Fivewaystopreventbadmicrocopy

classtohelpyouwritebettermicrocopy.

ofIntercomwillalsowalkyouthroughsomeofthebasics.

UXPlaybook

Interactiondesign

Interactiondesignisabouthowyouusersinteractwithyourproduct.Itsgoalistomakethis

interactionsmoothandintuitive.

Animations

Animationscanmakespecificinteractionseasiertounderstood.

Interactionbecameabigthingwhensmartphonescameintothepicture.Thereareahuge

varietyofinteractionsyoucanapplytoyourdesign:doubletap,pinch,swipe,3-fingerswipe,

3Dtouchandsoon.Thisopenedanewhorizonininteractiondesign.

Bynow,wehavewellestablishedinteractiondesignpatterns:whenyoupulldownyoure-

mailclientonyourphonetoupdate.This“pulldowntorefresh”becamequitewell-spread

andmostofthepeoplebecomefamiliarwiththem.

UXPlaybook

Visualdesign

TypicallyUXdesignersdon'tdovisualdesigns,althoughthevisualsideofyourproduct

takesahugepartintheuserexperience.Thissoundsabitcontraversialsoit'salwaysgood

tohaveagoodgeneralfeelofaesthetics.

Thereare4possiblecasesintheintersectionofvisualanduxdesign:

AproductcanhavereallybadUXwithamazingvisualdesign:non-intuitiveinterface

withplentyofusabilityissues.

AproductcanhavereallygoodUXwithpoorervisualdesign:reallyslickandintuitive

interface.

AreallybadproductconsistofpoorUXandvisualdesignaswell.

AnamazingproducthasreallygreatUXandvisualdesign.

Thisdoesn'tmeanthatUXdesignersmusthaveamazingvisualdesignskillsasmostofthe

teamdesignisateameffort:you'dneedagreatUI(visual)designerwhocanleadthevisual

design.

Gestaltprinciples

Tomakeyourdesignlookaestheticallyappealing.

UXPlaybook

Typography

TypographytakesahugepartingreatUXdesign.Thefontsyouareusinginyour

applicationhasthepowertomanipulatethemoodoftheuserandcommunicateimportant

things.

Sansserif,seriffontsHeaders,paragraphsOptimalparagraphlengthsOptimalfontsizes

Readability

UXPlaybook

MeasureandIterate

UXPlaybook

Leandesign

UXPlaybook

Iteration