The anatomy of an international payment pageNovember 2015

Ben Scammels

• Usabilitytestofourpaymentpages

• Internationalstaffreview

•Competitorbenchmarking(Expedia,Booking.com,Amoma,Hotels.com)

• Stakeholderandfraudteaminput

• ...andreadingatonofonlinearticlesoncheckoutbest-practice

Sources of research

Our page today

Form field: Title

Facts

• Amazon,JohnLewis,SwintonInsurancedon’taskforit

• 1/3ofUKusersdonotuseitifit’snotmandatory

• ItMUSTbeinternationalised…buthowdoweknowwhatthevariousformatsandconventionsare?

• Norwayconsideritoutdated

• NothavingMs.isconsideredsexistbysomepeople

• Masterisonlyrelevanttoboysunder13-canunder18’sbeleadguests?

• BAgetabsurdityawardforaskingforrandomtitles(corporal,rabbi,viscount)

Sourcehttp://www.siliconglen.scot/usability/courtesytitles.html

Form field: First & last name

Facts

• Manycountriesdonotadheretothisformat

• TheSpanishtypicallyhave4partstotheirnames

• Malaysiansrefertotheirfamilynamefirst

• Manynamescontain(apostrophes,numbers,hyphens,full-stops)(Smith-Johns,O’Reilly,WilliamJohn3rd,SammyDavisJr.)

• ...thereforeallowcapitalisationoflaterlettersandcharacters

• Bestpractice:‘Fullname’singleformfield

Sourcehttp://www.w3.org/International/questions/qa-personal-nameshttp://blog.jgc.org/2010/06/your-last-name-contains-invalid.html

Form field: Email address

Facts

• Peoplegetcageyaboutprovidingcontactdetailssoexplainwhyyouareaskingforit

• Emailaddresscancontain_%!$|{}^andspaces.Bewaryofvalidatingitagainstcharacters

• “...userswithatypical(butrealandentirelyvalid)e-mailaddressesareblockedbyoverlysensitivee-mailvalidatorsthateffectivelypreventtheuserfromfinishingtheircheckout

• Auto-capitalisationandcorrectioncanmessthingsup.Turnitoff!

Sourcehttp://haacked.com/archive/2007/08/21/i-knew-how-to-validate-an-email-address-until-i.aspx/http://baymard.com/blog/validations-vs-warningshttps://en.wikipedia.org/wiki/Email_address#Validation_and_verification

Form field: Phone number

Facts

• Peoplegetcageyaboutprovidingcontactdetails(especiallyifyoualreadyhaveanemail)soexplainwhyyouareaskingforit

• “Wedidnoticeoneexceptioninthebehaviorofthetestsubjects:themoreexpensivetheorderwas,themoretolerantthesubjectswere.”

• Somephonenumberscontainhyphens,spacesandbracketsandaredifferentlyformattedbetweencountriessobewareaboutpre-formattingandbarringcharacters.

• Whenyouaddaninternationalcodeyoudonotneedthe0fromthephonenumberbutpeopleareconfusedaboutthis

Sourcehttp://baymard.com/blog/checkout-experience-seemingly-unnecessary-information

Form field: Address (line1,line2,city/town,state)

REALLY?Dowereallyneedthisdata?Wedon’tsendpeopleaphysicalitem...

REALLY?

Facts• Ourfrauddepartmentusetheaddresstodosomemanualfraud‘detection’...it’saninexactprocess

• Ifyoudoaskforit,varyingaddressformatsneedconsideringastonotexcludeanyone

Facts• Ireland,Congo,Bahamas,Angoladon’tuseapostalcode

• ‘Zipcode’isanAmericanterm.‘Postalcode’isinternationallygeneric

• Mostcountriesusenumbers-onlypostalcodes,fewexceptionsareCanada,ArgentinaandtheUKthatusealphanumericalcodes.

• Brazilhasahypheninthere‘CEP’whichas8countries,Icelandhas3,TheUKhasaspacebetweentheircode

• Postcodecanbeusedtofindanaddress(orauto-populateastate/cityintheUS)

• Usabilityissues:“Customersenteringtheletter‘O’whenazerowasrequired.Errormessagesweregenericsouserscouldn’tseetheissue.Thesecausea2.5%abandonrate!”

Form field: Zip code/Postal code

Sourcehttps://medium.com/user-experience-design-1/the-anatomy-of-a-credit-card-payment-form-32ec0e5708bbhttp://yadayadablah.com/125/postal-code-vs-zip-code/https://econsultancy.com/blog/10959-are-online-retailers-being-tripped-up-by-postcode-entry/

Form field: Country

Facts:

• Differentsourcesconsidertheretobedifferentnumbersandtheycanchange(SudanandMontenegrobecamecountriesin2011and2008respectively)

• Countryselectmenusdohaveknownusabilityissues(200+optionsistoomuch,scrollingthroughthemisarduousetc)...butregardlessAmoma,Booking.com,Airbnballuseit.

• ThereisaprettygoodopensourceautocompletetoolmadefromBaymard(http://baymard.com/labs/country-selector)butitdoesntsupporttranslation.

• Astandardapproachistoautopopulatethecountry(fromtheIPaddressorsitecountryversion)butthismaynotbethecountryofBillingaddress...

Sourcehttp://www.worldatlas.com/nations.htmhttp://www.smashingmagazine.com/2011/11/redesigning-the-country-selector/

Form field: Payment/Card type

Facts:

• Countrieshavedifferentcardoptions(ie.Francehas‘CarteSi’)

• “Internationalcards(VisaandMasterCard)havealessthan40%onlinepaymentmarketshareincountriessuchasGermany,RussiaandChina”

• Iftheircardisn’taccepted,Paypal,GoogleWallet,AlipayandAmazon,providegoodalternatives.Theseoptionsallowallmannerofcardstobeacceptedsoyouinherittheirpaymentaccessibility

• InRussiaitisverycommontopaycouriersfortheonlinepurchaseofaphysicalproduct

• Youcanassesscardtype(andwhetherit’sCredit,Debit...)bythecardnumber...

Sourcehttps://medium.com/user-experience-design-1/the-anatomy-of-a-credit-card-payment-form-32ec0e5708bbhttp://baymard.com/blog/payment-method-selection

Form field: Card number

Facts:

• Cardbrandshavedifferentnumberformats(IIN).Firstnumbersinclude:4(Visa),34/37(Amex),51-55(Mastercard)-Thesenumbersareaninternationalstandardandcannotchange.

• CardsnumberscanbeinstantlyvalidatedusingIIN

• Cardscanhavevaryingamountsofnumbers(Visa=13,16,18,19)butnevermorethan20

• Cardnumbershavespacesbetweenthemandcancontainhyphens

• Enforcingspacescancauseuserstoattempttodeletethem

Sourcehttp://www.dirigodev.com/blog/ecommerce/anatomy-of-a-credit-card-number/http://www.stevemorse.org/ssn/cc.htmlhttp://designmodo.com/ux-credit-card-payment-form/

Form field: Name on card

Facts:

• Namescancontaincharacters

• Thenamemustmatchthecardsothelabelshouldbe:‘Nameoncard’

Sourcehttps://medium.com/user-experience-design-1/the-anatomy-of-a-credit-card-payment-form-32ec0e5708bbhttp://designmodo.com/ux-credit-card-payment-form/

Form field: Expiry date

Facts:

• “FormatFieldForExpirationDateExactlyAsItAppearsOnCreditCard“

• SelectmenuofMMYY(01,02,03...15,16,17...)

• Nonamesformonths(Jan,Feb...)no4numberyears(2015)...let’snotmakeourusershavetodocalculations

Sourcehttp://www.smashingmagazine.com/2011/04/fundamental-guidelines-of-e-commerce-checkout-design/http://baymard.com/blog/how-to-format-expiration-date-fields

Form field: Security code

Facts:

• Amexcardshave4numbers,Allothercardshave3

• Thecodecanonlybenumbers(nospacesorcharacters)

• Thecodehasnon-standardizednamingconvention:

• MasterCard — cardvalidationcode(“CVC2”)

• Visa — cardverificationvalue(“CVV2”)

• Discover — cardidentificationnumber(“CID”)

• AmericanExpress — “CID”or“uniquecardcode”

• DebitCard — “CSC”or“cardsecuritycode”

• Andthereareevenmorepermutations:

• Cardverificationdata

• Cardverificationnumber

• Cardverificationcode

• Cardcodeverification

Sourcehttps://medium.com/user-experience-design-1/the-anatomy-of-a-credit-card-payment-form-32ec0e5708bb

Summary

Beawareofallofthevaryinginternationalformatsandconventionsofinformationyouareaskingfor

Over-zealousvalidationandrestrictedselectoptionscaneasilyexcludeyourusersandblockcompletion

...especiallyifthefieldismandatory.

Reducethequestionsetasmuchaspossibleandconsidermandatoryvsoptional