4/8/2014

GoodUI

A Good User Interface

has high conversion rates and is easy to use. In other words, it's nice to both the business side as well as the people using it. Here is a running idea list, which we try on projects. You've read all tips. Sign up for updates.

http://www.goodui.org/

1/49

4/8/2014

Try A One Column Layout instead of multicolumns.

GoodUI

Aonecolumnlayoutwillgiveyoumorecontroloveryournarrative.Itshouldbeabletoguideyourreadersina morepredictablewayfromtoptobottom.Whereasamulticolumnapproachrunssomeadditionalriskofbeing distractingtothecorepurposeofapage.Guidepeoplewithastoryandaprominentcalltoactionattheend.

http://www.goodui.org/

Try Giving a Gift instead of closing a sale right away.

2/49

4/8/2014

Try Giving a Gift instead of closing a sale right away.

GoodUI

Afriendlygesturesuchasprovidingacustomerwithagiftcanbejustthat.Deeperunderneathhowever,giftingis alsoaneffectivepersuasiontacticthatisbasedontheruleofreciprocity.Asobviousasitsounds,beingniceto someonebyofferingasmalltokenofappreciationcancomebackinyourfavourdowntheroad.

http://www.goodui.org/

Try Merging Similar Functions instead of fragmenting the UI.

3/49

4/8/2014

fragmenting the UI.

GoodUI

Overthecourseoftime,it'seasytounintentionallycreatemultiplesections,elementsandfeatureswhichall performthesamefunction.It'sbasicentropythingsstartfallingapartovertime.Keepaneyeoutforduplicate functionalitylabelledinvariousways,asitputsastrainonyourcustomers.Often,themoreUIfragmentationthere is,thehigherthelearningcurvewhichyourcustomerswillhavetodealwith.ConsiderrefactoringyourUIoncein awhilebymergingsimilarfunctionstogether.

http://www.goodui.org/

4/49

4/8/2014

GoodUI

Subscribe to

and get the best conversion optimization stories out there.

Repeatable Insights High Quality Test Results /month Told By Us Only $37

Try Social Proof instead of talking about yourself.

testimonialorshowingdatawhichprovesthatothersarepresent.

Socialproofisanothergreatpersuasiontacticdirectlyapplicabletoincreasingconversionrates.Seeingthat othersareendorsingyouandtalkingaboutyouroffering,canbeagreatwaytoreinforceacalltoaction.Trya

http://www.goodui.org/

5/49

4/8/2014

GoodUI

Try Repeating Your Primary Action instead of showing it just once.

Repeatingyourcalltoactionisastrategythatismoreapplicabletolongerpages,orrepeatingacrossnumerous pages.Surelyyoudon'twanttohaveyourofferdisplayed10timesallonthesamescreenandfrustratepeople. However,longpagesarebecomingthenormandtheideaofsqueezingeverything"abovethefold"isfading.It doesn'thurttohaveonesoftactionableitematthetop,andanotherprominentoneatthebottom.Whenpeople reachthebottom,theypauseandthinkwhattodonextapotentialsolidplacetomakeanofferorcloseadeal.

http://www.goodui.org/

6/49

4/8/2014

GoodUI

Try Distinct Styles Between Clickable And Selected Items instead of blurring them.
Visualstylingsuchascolor,depth,andcontrastmaybeusedasareliablecuetohelppeopleunderstandthe fundamentallanguageofnavigatingyourinterface:whereamI,andwherecanIgo.Inordertocommunicatethis clearlytoyourusers,thestylesofyourclickableactions(links,buttons),selectedelements(chosenitems),and plaintextshouldbeclearlydistinctfromoneanotherandthenappliedconsistentlyacrossaninterface.Inthe visualexample,I'vechosenabluecolortosuggestanythingthatcanbeclickedon,andblackasanythingthat hasbeenselectedorindicateswheresomeoneis.Whenappliedproperly,peoplewillmoreeasilylearnanduse

http://www.goodui.org/

thesecuestonavigateyourinterface.Don'tmakeitharderforpeoplebyblurringthesethreefunctionalstyles.

7/49

4/8/2014

thesecuestonavigateyourinterface.Don'tmakeitharderforpeoplebyblurringthesethreefunctionalstyles.

GoodUI

Try Recommending instead of showing equal choices.

Whenshowingmultipleoffers,thenanemphasizedproductsuggestionmightbeagoodideaassomepeople needalittlenudge.Ibelievetherearesomepsychologystudiesouttherewhichsuggestthatthemorechoice thereis,thenthelowerthechancesofadecisionactuallybeingmadeandactedupon.Inordertocombatsuch analysisparalysis,tryemphasizingandhighlightingcertainoptionsaboveothers.

http://www.goodui.org/

8/49

4/8/2014

analysisparalysis,tryemphasizingandhighlightingcertainoptionsaboveothers.

GoodUI

Try Undos instead of prompting for confirmation.

Imaginethatyoujustpressedanactionbuttonorlink.Undosrespecttheinitialhumanintentbyallowingthe actiontohappensmoothlyfirstandforemost.Promptsontheotherhandsuggesttotheuserthatheorshedoes notknowwhattheyaredoingbyquestioningtheirintentatalltimes.Iwouldassumethatmostofthetimehuman actionsareintendedandonlyinsmallsituationsaretheyaccidental.Theinefficiencyanduglinessofpromptsis

http://www.goodui.org/ 9/49

4/8/2014

GoodUI

visiblewhenusershavetoperformactionsrepeatedlyandarepromptednumerouslyoverandovera dehumanizingexperience.Considermakingyourusersfeelmoreincontrolbyenablingtheabilitytoundo actionsandnotaskingforconfirmationwherepossible.

Try Telling Who It's For instead of targeting everyone.

Areyoutargetingeveryoneorareyouprecisewithyouraudience?Thisisaconversionideawhereyoucouldbe
http://www.goodui.org/ 10/49

4/8/2014

GoodUI

explicitaboutwhoexactlyyourproductorserviceisintendedfor.Bycommunicatingthequalifyingcriteriaofyour customers,youmightbeabletoactuallyconnectmorewiththemwhileatthesametimehintingatafeelingof exclusivity.Theriskwiththisstrategyofcourseisthatyoumightbecuttingyourselfshortandrestrictingpotential customers.Thenagain,transparencybuildstrust. (Sidenote:Enjoyingthelittlecharactersstyle?PleasebesuretocheckoutMicroPersonas.)

10

http://www.goodui.org/

Try Being Direct instead of indecisive.

11/49

10

4/8/2014

Try Being Direct instead of indecisive.

GoodUI

Youcansendyourmessagewithuncertaintytremblinginyourvoice,oryoucansayitwithconfidence.Ifyou're endingyourmessagingwithquestionmarks,usingtermssuchas"perhaps","maybe","interested?"and"want to?",thenmostlikelyyouhavesomeopportunitytobeabitmoreauthoritative.Whoknows,maybethereisabit moreroomfortellingpeoplewhattodonextintheworldofconversionoptimization.

11

Try More Contrast instead of similarity.

12/49

http://www.goodui.org/

11

4/8/2014

Try More Contrast instead of similarity.

GoodUI

Makingyourcallstoactionbeabitmoreprominentanddistinguishableinrelationtotheelementssurrounding them,willmakeyourUIstronger.Youcaneasilyincreasethecontrastofyourprimarycallstoactioninanumber ofways.Usingtone,youcanmakecertainelementsappeardarkervs.lighter.Withdepth,youcanmakeanitem appearcloserwhiletherestofthecontentlookslikeit'sfurther(talkingdropshadowsandgradientshere).Finally, youcanalsopickcomplementarycolorsfromthecolorwheel(ex:yellowandviolet)toraisecontrastevenfurther. Takentogether,ahighercontrastbetweenyourcalltoactionandtherestofthepageshouldbeconsidered.

http://www.goodui.org/

13/49

4/8/2014

GoodUI

12

Try Showing Where It's Made instead of being generic.

Indicatingwhereyou,yourproductorserviceisfromsaysquiteabitsubliminallywhileatthesametimemoves yourcommunicationtoamorepersonallevel.Mentioningthecountry,stateorcityoforiginissurelyaveryhuman likewaytointroduceoneself.Ifyoucandothesamevirtuallythenyoujustmightbeperceivedasabitmore friendly.Often,statingwhereyourproductisbeingmadeatalsohasaprettygoodchanceofmakingitfeelof slightlyhigherquality.It'sawinwin.

http://www.goodui.org/

14/49

4/8/2014

GoodUI

13

Try Fewer Form Fields instead of asking for too many.

Humanbeingsareinherentlyresistanttolaborintensivetasksandthissameideaalsoappliestofillingoutform fields.Eachfieldyouaskforrunstheriskofmakingyourvisitorsturnaroundandgiveup.Noteveryonetypesat thesamespeed,whiletypingonmobiledevicesisstillachoreingeneral.Questionifeachfieldisreally

necessaryandremoveasmanyfieldsaspossible.Ifyoureallyhavenumerousoptionalfields,thenalsoconsider movingthemafterformsubmissiononaseparatepageorstate.It'ssoeasytobloatupyourforms,yetfewerfields willconvertbetter.

http://www.goodui.org/

15/49

4/8/2014

GoodUI

14

Try Exposing Options instead of hiding them.

Eachpulldownmenuthatyouuse,hidesasetofactionswithinwhichrequireefforttobediscovered.Ifthose hiddenoptionsarecentralalongthepathtogettingthingsdonebyyourvisitors,thenyoumightwishtoconsider surfacingthemabitmoreupfront.Trytoreservepulldownmenusforoptionsthatarepredictableanddont requirenewlearningasinsetsofdateandtimereferences(ex:calendars)orgeographicsets.Occasionallypull downmenuitemscanalsoworkforthoseinterfacesthatarehighlyrecurringintermsofuseactionsthata personwilluserepeatedlyovertime(ex:actionmenus).Becarefulofusingdropdownsforprimaryitemsthatare onyourpathtoconversion.

http://www.goodui.org/

16/49

4/8/2014

GoodUI

15

Try Suggesting Continuity instead of false bottoms.

Afalsebottomisaconversionkiller.Yes,scrollinglongpagesaregreat,butbecarefulofgivingyourvisitorsa scroll,trytoestablishavisualpatternorrhythmthattheusercanlearnandrelyontoreadfurtherdown.

sensethatthepagehascometoanendsomewhereinbetweensectionswhereitreallyhasn't.Ifyourpageswill

Secondarily,becarefulofbiggapsinaroundtheareasofwherethefoldcanappear(ofcourseImreferringtoa arearangeherewithsomanydevicesizesoutthere).

http://www.goodui.org/

17/49

4/8/2014

GoodUI

Subscribe to

and get the best conversion optimization stories out there.

Repeatable Insights High Quality Test Results /month Told By Us Only $37

16

Try Keeping Focus instead of drowning with links.

Itseasytocreateapagewithlotsoflinksgoingleftandrightinthehopeofmeetingasmanycustomerneedsas possible.Ifhoweveryourecreatinganarrativepagewhichisbuildingontowardsaspecificcalltoactionatthe
http://www.goodui.org/

bottom,thenthinktwice.BeawarethatanylinkabovetheprimaryCTArunstheriskoftakingyourcustomers

18/49

4/8/2014

bottom,thenthinktwice.BeawarethatanylinkabovetheprimaryCTArunstheriskoftakingyourcustomers awayfromwhatyouvebeenhopingthemtodo.Keepaneyeoutonthenumberoflinksonyourpagesand possiblybalancediscoverystylepages(abitheavieronthelinks)withtunnelstylepages(withfewerlinksand higherconversions).Removingextraneouslinkscanbeasurewaytoincreasesomeoneschancesofreaching thatimportantbutton.

GoodUI

17

Try Showing State instead of being state agnostic.

19/49

http://www.goodui.org/

4/8/2014

GoodUI

Inanyuserinterfacewequiteoftenshowelementswhichcanhavedifferentstates.Emailscanbereadorunread, invoicescanbepaidornot,etc.Informingusersabouttheparticularstateinwhichanitemisin,isagoodwayof providingfeedback.Interfacestatescanhelppeopleunderstandwhetherornottheirpastactionshavebeen successfullycarriedout,aswellaswhetheranactionshouldbetaken.

18

Try Benefit Buttons instead of just task based ones.

20/49

http://www.goodui.org/


4/8/2014 GoodUI

Imaginetwosimplebuttonsdisplayedonapage.OnebuttontellsyouthatitwillSaveYouMoney,whilethe otheroneasksyoutoSignUp.Idplacemybetsthatthefirstonemighthaveahigherchanceofbeingactedon, asasignuponitsownhasnoinherentvalue.Instead,asignupprocesstakeseffortandisoftenassociatedwith lengthyformsofsomesort.Thehypothesissethereisthatbuttonswhichreinforceabenefitmightleadtohigher conversions.Alternatively,thebenefitcanalsobeplacedcloselytowheretheactionbuttonisinordertoremind peoplewhytheyareabouttotakethataction.Surely,thereisstillroomfortaskbasedactionsbuttons,butthose canbereservedforinterfaceareasthatrequirelessconvincingandaremorerecurringinuse.

http://www.goodui.org/

21/49

4/8/2014

GoodUI

19

Try Direct Manipulation instead of contextless menus.

OccasionallyitmakessensetoallowcertainUIelementstobeactedupondirectlyasopposedtolisting unassociatedgenericactions.Whendisplayinglistsofdataforexample,wetypicallywanttoallowtheusertodo somethingwiththeitemsinthelist.Clickingon,orhoveringoveraniteminthislistcanbeusedtoexpressthata particularitemistobemanipulated(deleted,renamed,etc.).Anotherexampleofcommondirectmanipulation wouldbeclickingonadataitem(sayatextbasedaddress)whichthenturnsintoaneditablefield.Enablingsuch interactionscutsthroughthenumberofrequiredsteps,comparedtoifthesametaskwasstartedmoregenerally withoutthecontextoftheitemsinceselectionisalreadytakencareof.Dokeepinmindofcoursethatforgeneric itemagnosticactions,thereisnothingwrongwithcontextlessmenus.

http://www.goodui.org/

22/49

4/8/2014

GoodUI

20

Try Exposing Fields instead of creating extra pages.

Whencreatinglandingpagesthatconveyvalue,itcanbebeneficialtoshowtheactualformfieldsonthe conversionpageitself.Mergingthesignupformwiththelandingpagecomeswithanumberofbenefitsin

comparisontocreatingseparatemultipagesignups.First,wearecuttingoutextrastepsfromtheflowingeneral andthetaskathandtakeslesstime.Secondly,byshowingthenumberofformfieldsrightthere,wearealso providingthecustomerwithasenseofhowlongthesignupactuallyis.Thisofcourseisalittleeasierwhenour formsareshorterinthefirstplace(whichofcoursetheyshouldbeifpossible).

http://www.goodui.org/

23/49

4/8/2014

GoodUI

21

Try Transitions instead of showing changes instantly.

Interfaceelementsoftenappear,hide,move,shift,andresizeasusersdotheirthing.Aselementsrespondtoour interactions,itsometimesisalittleeasiertocomprehendwhatjusthappenedwhenwesprinkleintheelementof time.Abuiltinintentionaldelayintheformofananimationortransition,respectscognitionandgivespeoplethe requiredtimetounderstandachangeinsizeorposition.Keepinmindofcoursethataswestartincreasingthe durationofsuchtransitionsbeyond0.5seconds,therewillbesituationswherepeoplemightstartfeelingthepain. Forthosewhojustwishtogetthingsdonequickly,toolongofadelayofcoursecanbeaburden.

http://www.goodui.org/

24/49

4/8/2014

GoodUI

22

Try Gradual Engagement instead of a hasty sign up.

Insteadofaskingvisitorstosignupimmediately,whynotaskthemtofirstperformataskthroughwhichsomething ofvalueisdemonstrated.Duringsuchinitialinteractionstheproductcanbothshowoffitsbenefits,aswellascan lenditselftopersonalization.Onceusersbegintoseeyourproductsvalueandseehowtheycanmakeittheir own,theywillthenbemoreopentosharingwithyouadditionalinformation.Gradualengagementisreallyaway topostponethesignupprocessasmuchaspossibleandstillallowuserstouseandcustomizeyourapplication orproduct.

http://www.goodui.org/

25/49

4/8/2014

GoodUI

23

Try Fewer Borders instead of wasting attention.

Borderscompeteforattentionwithrealcontent.Attentionofcourseisapreciousresourcesincewecanonly graspsomuchatanygiventime.Surelyborderscanbeusedtodefineaspaceveryclearlyandprecisely,but theyalsodocostuscognitiveenergyastheyareperceivedasexplicitlines.Inordertodefinerelationships betweenscreenelementswhichuselessattention,elementscanalsobejustgroupedtogetherthroughproximity, bealigned,havedistinctbackgrounds,orevenjustshareasimilartypographicstyle.WhenworkinginabstractUI tools,itseasytodropabunchofboxeseverywhere.Boxeshowevercomewithafalsesenseofbeingimmune fromtheorderandunitywhichgovernstherestofthescreen.Hencepageswithlotsofboxessometimesmay tendtolooknoisyormisaligned.Sometimesitishelpfultothrowinalinehereandthere,butdoconsider

http://www.goodui.org/

alternativewaysofdefiningvisualrelationshipsthatarelesstaxingtoattentionandyourcontentwillcome

26/49

4/8/2014

alternativewaysofdefiningvisualrelationshipsthatarelesstaxingtoattentionandyourcontentwillcome through.

GoodUI

24

Try Selling Benefits instead of features.

IthinkthisisMarketing101.Peopletendtocarelessaboutfeaturesthantheydoaboutbenefits.Benefitscarry withthemmoreclearlydefinedvalue.ChrisGuillebeauin"The$100Startup"writesthatpeoplereallycareabout havingmoreof:Love,Money,AcceptanceandFreeTime,whileatthesametimewishingforlessStress,Conflict,

http://www.goodui.org/ 27/49

4/8/2014

havingmoreof:Love,Money,AcceptanceandFreeTime,whileatthesametimewishingforlessStress,Conflict, HassleandUncertainty.Whenshowingfeatures,andIdobelievethatthereisstillroomforthemoccasionally,be suretotiethembacktobenefitswherepossible.

GoodUI

25

Try Designing For Zero Data instead of just data heavy cases.
28/49

http://www.goodui.org/

4/8/2014

GoodUI

Therearecaseswhenyouwillhave0,1,10,100,or10,000+dataresultswhichmightneedtobedisplayed somehowinvariousways.Themostcommonofthesescenariosisprobablythetransitionfromfirsttimeusewith zerodatatowardsfutureusewithalotmoredata.Weoftenforgettodesignforthisinitialcasewhenthereisstill nothingtodisplaywhatsoever,andbydoingsoweruntheriskofneglectingusers.Azerodataworldisacold place.Whenfirsttimeuserslookatyourappandallitdoesisshowablankslatewithoutanyguidancethen youreprobablymissingoutonanopportunity.Zerodatastatesareperfectcandidatesforgettingusersacrossthe initialhurdleoflearningbyshowingthemwhattodonext.Goodthingsscaleanduserinterfacesareno exception.

http://www.goodui.org/

29/49

4/8/2014

GoodUI

26

Try Opt-Out instead of opt-in.

Anoptoutstrategyimpliesthatusersorcustomersaredefaultedtotakepartinsomethingwithouthavingtotake anyaction.Alternatively,thereisalsothemoretraditionaloptinstrategythatrequirespeopletofirsttakean actioninordertotakepartinorreceivesomething.Therearetwogoodreasonswhyoptoutworksbetterthan optin.Firstitalleviatesresistanceonthepathofaction,astheuserdoesnothavetodoanything.Secondly,its alsoaformofrecommendationwhichimpliessomekindofanormsinceeveryoneelsetakesthisasitis,I mightalsodothesame.Ofcoursetheoptoutstrategyisoftenperceivedascontroversialastherearethose sleazymarketerswhichwillabuseit.Onesuchevilistodiminishthereadabilityoftheoptouttext,whileanother istouseconfusingtext,suchasdoublenegatives.Bothexampleswillresultinusersbeinglessawareofactually signingupforsomething.Hencetokeeptheethicsincheck,ifyoudodecidetogowithanoptoutapproach,do makeitveryclearandunderstandabletoyourcustomerswhattheyarebeingdefaultedinto.Afterall,thistactic hasalsobeenusedinEuropetosavelives.

http://www.goodui.org/

30/49

4/8/2014

GoodUI

27

Try Consistency instead of making people relearn.

StrivingforconsistencyinuserinterfacedesignisprobablyoneofthemostwellknownprinciplessinceDonald Normansawesomebooks.HavingamoreconsistentUIorinteractionissimplyagreatwaytodecreasethe amountoflearningsomeonehastogothroughastheyuseaninterfaceorproduct.Aswepressbuttonsandshift sliders,welearntoexpecttheseinteractionelementstolook,behaveandbefoundinthesamewayrepeatedly. Consistencysolidifiesthewaywelearntointeractandassoonasitistakenaway,wearethenforcedbackinto learningmodealloveragain.Consistentinterfacescanbeachievedthroughawidepossiblerangeofthingssuch as:colors,directions,behaviors,positioning,size,shape,labellingandlanguage.Beforewemakeeverything consistenthowever,pleaseletsbearinmindthatkeepingthingsinconsistentstillhasvalue.Inconsistent elementsorbehaviorscomeoutintoattentionfromthedepthsofourhabitualsubconsciouswhichcanbea goodthingwhenyouwanttohavethingsgetnoticed.Tryit,butknowwhentobreakit.

http://www.goodui.org/

31/49

4/8/2014

GoodUI

28

Try Smart Defaults instead of asking to do extra work.

Usingsmartdefaultsorprefillingformfieldswitheducatedguessesremovestheamountofworkusershaveto do.Thisisacommontechniqueforhelpingusersmovethroughformsfasterbybeingrespectfuloftheirlimited time.Oneoftheworstthingsfromanexperienceandconversionstandpointistoaskpeoplefordatathatthey havealreadyprovidedinthepast,repeatedlyoverandoveragain.Trytodisplayfieldsthatarepreloadedwith valuestobevalidatedasopposedtoaskingforvaluestoberetypedeachtime.Thelesswork,thebetter.

http://www.goodui.org/

32/49

4/8/2014

GoodUI

29

Try Conventions instead of reinventing the wheel.

Conventionisthebigbrotherofconsistency.Ifwekeepthingssimilaracrossaninterface,peoplewonthaveto obviouslystruggleashard.Ifontheotherhand,weallkeepthingsassimilaraspossibleacrossmultiple interfaces,thatdecreasesthelearningcurveevenfurther.WiththehelpofestablishedUIconventionswelearnto closescreenwindowsintheupperrighthandcorner(moreoftenthannot),orexpectacertainlookfromour settingsicons.Ofcoursetherewillbetimeswhenaconventionnolongerservespurposeandgiveswaytoa

http://www.goodui.org/

newerpattern.Whenbreakingaway,domakesureitspurposefullythoughtoutandwithgoodintention.

33/49

4/8/2014

newerpattern.Whenbreakingaway,domakesureitspurposefullythoughtoutandwithgoodintention.

GoodUI

30

Try Loss Aversion instead of emphasizing gains.

Weliketowin,butwehatetolose.Accordingtotherulesofpersuasivepsychology,wearemorelikelytoprefer avoidinglossesthantoacquiringgains.Thiscanbeappliedtohowproductofferingsareframedand communicated.Byunderlyingthataproductisprotectiveofacustomersexistingwellbeing,wealthorsocial

http://www.goodui.org/

status,suchstrategymightbemoreeffectivethantryingtoprovideacustomerwithsomethingadditionalwhich

34/49

4/8/2014

status,suchstrategymightbemoreeffectivethantryingtoprovideacustomerwithsomethingadditionalwhich theydontalreadyhave.Doinsurancecompaniessellthepayoutthatcanbegainedaftertheaccidentorthe protectionofthethingsweholddeartous?

GoodUI

31

Try Visual Hierarchy instead of dullness.

Agoodvisualhierarchycanbeusedtoseparateoutyourimportantelementsfromthelessimportantones.A visualhierarchyresultsfromvaryingsuchthingsasalignment,proximity,colour,tone,indentation,fontsize,
http://www.goodui.org/ 35/49

4/8/2014

visualhierarchyresultsfromvaryingsuchthingsasalignment,proximity,colour,tone,indentation,fontsize, elementsize,padding,spacing,etc.Whenthesevisuallanguageelementsareappliedcorrectly,theycanwork togethertodirectandpausepeoplesattentionwithinapageimprovinggeneralreadability.Avisualhierarchy canbesaidtogeneratefrictionandslowsusdownfromskimmingthroughthefullpagetoptobottomforthe betterthatis.Withagoodvisualhierarchy,althoughwemightspendabitmoretimeonthepage,theendresult shouldbethatweregistermoreitemsandcharacteristics.Thinkofitasasroadtrip.Youcantakethehighway andgettoyourdestinationquicker(bottomofpage),oryoucantakethescenicrouteandremembermore interestingthingsalongtheway.Givetheeyeaplacetostop.

GoodUI

http://www.goodui.org/

36/49

4/8/2014

GoodUI

32

Try Grouping Related Items instead of disordering.

Groupingrelateditemstogetherisabasicwayofincreasingfundamentalusability.Mostofustendtoknowthata knifeandafork,oropenandsavefunctionscantypicallybefoundmoreorlesstogether.Relateditemsarejust meanttobeplacedinproximityofeachotherinordertorespectadegreeoflogicandloweroverallcognitive friction.Wastingtimelookingforstuffusuallyisn'tfunforpeople.

http://www.goodui.org/

37/49

4/8/2014

GoodUI

33

Try Inline Validation instead of delaying errors.

Whendealingwithformsanderrors,itsusuallybettertotrytodetectifsomethingisntcorrectandshowitsooner ratherthanlater.Thefamousinteractionpatternhighlightedhereofcourseisinlinevalidation.Byshowingan errormessageasithappens(saytotherightoftheinputfield),itcanbecorrectedrightthenandthereasit appearsincontext.Ontheotherhand,whenerrormessagesaredisplayedlateron(sayafterasubmit),itforces peopletodosomeadditionalcognitiveworkofhavingtorecallwhattheyweredoingfromafewstepsback.

http://www.goodui.org/

38/49

4/8/2014

GoodUI

Subscribe to

and get the best conversion optimization stories out there.

Repeatable Insights High Quality Test Results /month Told By Us Only $37

34

Try Forgiving Inputs instead of being strict with data.

morefriendly.Aperfectexampleofthisiswhenweaskpeopleforaphonenumberwhichcanbeenteredinso

Beingmoreforgivingintermsofuserentereddata,computerscanmoveonestepclosertowardsbecomingabit morehumane.ForgivinginputsanticipatesandunderstandsavarietyofdataformatsandtherebymakesyourUI

manydifferentwayswithbrackets,extensions,dashes,areacodes,andon.Haveyourcodeworkabitharderso thatyouruserswonthaveto.

http://www.goodui.org/

39/49

4/8/2014

GoodUI

35

Try Urgency instead of timelessness.

Urgencyisapersuasiontacticwhichcanbeappliedinordertomakepeopleactnowratherthanlater(orpossibly never).Itworksbecauseitoftenimpliessomedegreeofscarcity,asthethingwhichisavailablenowmightnotbe availabletomorrow.Italsoworksbecauseittouchesuponlossaversioninthesamewayaswedontlikelosing outonopportunities.Urgencymightalsobeoneofthosestrategiesthatsomelookdownuponasapushyand dirtywayofgettingpeopletoact.Neverthelessitsavailableasastrategytouseandaslongasitshonestits valid.Becarefulofcreatingafalsesenseofurgency,sincewhenyouraudiencecallsyouonit,itwillbackfire.

http://www.goodui.org/

40/49

4/8/2014

GoodUI

36

Try Scarcity instead of abundance.

Whenthereislessofanything,wetendtovalueitmore.Scarcitysuggeststherewasoncemoreofsomething, todaythereislessofit,andtomorrowitmightshrinkyetevenfurther.Thinkofawholesalestorevs.aboutique oneandthenlookathowtheirpricingoftencompares.Thenthinkbacktothewholesalerandnoticeonescarcity strategythattheyapplynevertheless,inlightofhavingawiderproductoffering.Somewholesalersormega retailerswillactuallydolimitedproductsthatareonlyavailableuntiltheyareboughtout,withoutreplenishingthe supply.Insoftware,weoftenforgetaboutscarcitybecausemoreoftenthannot,bitsandbytescanbesoeasily duplicatedandthereissomuchabundancewiththehelpofcopypaste.Nevertheless,intheworldofUI,scarcity canstillbeusedtoshowlimitsorbottlenecksthatrelatetotherealworld.Thinkofthelimitsbehindthenumberof

http://www.goodui.org/ 41/49

4/8/2014

GoodUI

ticketsyoucanselltoawebinar,thenumberofclientsyoucanserviceinamonth,orthenumberphysical productsyoumighthavebeforethenextbatchisproduced.Allthesethingscanbeshowntotheusertoevoke actionwhilebeingmoreinformed.Thinksupplyanddemand.Thinklessismore.

37

Try Recognition instead of recall.

Thisisaclassicprincipleofdesigntiedstronglytopsychologywhichsuggeststhatitiseasiertorecognize
http://www.goodui.org/ 42/49

4/8/2014

GoodUI

somethingexisting,asopposedtohavingtorecallitpurelyfromonesownmemory.Recognitionreliesonsome kindofcuesorhintswhichhelpusbytouchingourpastexperience.Recallrequiresustoprobethedepthsofour memoryallonourown.Thismightbethereasonwhysometimesmultiplechoicequestionsonexamscanbe fastertocompletethanopenendedones.Considergivinguserstheabilitytorecognizeitemswhichtheyhave beenexposedtobefore,insteadofexpectingthemtoremembereverythingontheirown.

38

Try Bigger Click Areas instead of tiny ones.

43/49

http://www.goodui.org/

38

4/8/2014

Try Bigger Click Areas instead of tiny ones.

GoodUI

Links,formsandbuttonscanallbemadeeasiertoclickoniftheirsizeisincreased.AccordingtoFittsLaw,we needmoretimetoclickonsomethingwithapointingdevice,thefurtherawayitisand/orsmalleritis.Forthisvery reason,doconsiderincreasingyourformfields,callstoaction,andlinks.Alternatively,it'salsopossibletokeep thevisualelementlookingasis,butinsteadonlyincreasingitshotspotorclickablearea.Apopularexampleof thisaretextlinksonmobiledevicesorwithinnavigationmenus,thatarestretchedwithpadding.

39

http://www.goodui.org/

Try Faster Load Times instead of making people wait.

44/49

39

4/8/2014

Try Faster Load Times instead of making people wait.

GoodUI

Speedmatters.Beithowquicklyascreenloadsinitially,orhowfastitrespondstoauseractioncanbothaffect whetherpeoplewillwaitornot.Ithasbeensuggestedthateachsecondlongeraffectsdropoff,bounceand conversionrates.Henceonetacticistodecreasetheloadtimesofourscreenstechnicallybyoptimizingcode andimages.Anothertacticistodecreasetheperceptionofloadtimesbyapplyingsomepsychology.Twotricks canbeappliedinordertomakepeoplefeelliketheyaren'twaitingforsolong.Showingprogressbarswhichset expectationsisone.Keepingusersoccupiedwhilesomethingisloading,isanother(thinkwalkingtothe conveyorbeltabitlongerinsteadofstandingbesideitandtappingyourfoot).

http://www.goodui.org/

45/49

4/8/2014

GoodUI

40

Try Keyboard Shortcuts instead of buttons only.

Whenyouhaveahighuseproduct,itsalwaysgoodtoconsiderthoseadvanceduserswhokeepcomingback andspendmuchtimewithyourapplication.Peoplewilloftenseekwayswhichallowthemtoperformrepetitive taskquickerandkeyboardshortcutsareonesuchwayofprovidingthis.Hotkeys,onceremembered,canspeed uptaskperformanceoverpointandclickgraphicaluserinterfacesdramatically.Oneexampleofthisistheuseof theJandKhotkeysfornextandpreviouswhichhavebeenpopularizebyapplicationssuchasGmail,Google Reader(nowhistory),TwitterandTumblr.Buttonsarentbad,buttheycanbecomplementedwithshortcutsfor thosefastfingers.

http://www.goodui.org/

46/49

4/8/2014

GoodUI

41

Try Anchoring instead of starting with the price.

Humanscomeloadedwithcognitivebiases,andasKahnemanobserved,anchoringisonesuchbiasthatishard toresist.Itsuggeststhatourdecisionmakingisaffectedbythefirstquantitieswhichcometoourattention.When westartwithalargernumberandrolldowntowardsasmallerprice,allofasuddenthatpricedoesn'tfeelaslarge anylonger.IfIunderstandcorrectly,whatmanypeoplemisshowever,isthattheanchorednumberalsodoesn't havetobeaprice.Itcanbeanumberwhichdoesn'tneedadollarvalue.Acommonexampleofmarketers exploitingtheanchoringeffectisshowingtheManufacturer'sSuggestedRetailPricefollowedbyalowerprice.

http://www.goodui.org/

47/49

4/8/2014

GoodUI

Get real test data with a

subscription.

More on the way. Sign up below for the newsletter.

LastupdatedonApr3,2014

http://www.goodui.org/

48/49

4/8/2014

GoodUI

Receive an update twice a month.

Unsubscribe at any time. 39,000+ people have already subscribed.

FullName Email

I'll share ideas on how to improve customer conversion and ease of use.

Get Sketching

We use our very own sketching notation to convey ideas quickly. Purchase the sketching template which was used to create the GoodUI content.

Get a Better Site

We work with clients on deliver on measurable results.

optimization projects

where we apply these ideas. Work with us and we'll

GoodUI.orgisaprojectbyJakub(@jlinowski)atLinowskiInteractionDesign,basedinToronto.Writetome.

http://www.goodui.org/

49/49