Hvordan man designer Checkout UX som en Pro

Checkout oplevelsen er uden tvivl det mest afgørende aspekt af din online butik. Eventuelle hiccups og kunden kan blive distraheret, skuffet eller forlade din virksomhed (som betaler din løn) af dyrebare indtægter. Det skal være perfekt. Som brugeroplevelsesdesigner er det dit job at sikre, at checkout-oplevelsen er sømløs og effektiv. Ingen fejl.

I denne artikel vil jeg gerne diskutere checkout design og flere principper, der giver den bedste shopping-til-betaling oplevelse. Jeg ved. Når du hører "checkout design", hopper du sikkert for glæde ...

... men det er hvor gummi møder vejen, når det kommer til at tjene penge online. Uden kassen får du ikke betalt. Så det er bedre at være godt.

For at besvare dette spørgsmål om, hvad der gør den bedste checkout oplevelse, søgte jeg tre veteran UX-designere hos store e-handelsmærker: ThinkGeek, Shopify og REI. Disse virksomheder ser millioner og millioner af dollars, og brugere passerer deres checkout "baner" dagligt. De tre folk var:

• Matt Chwat , Direktør for brugeroplevelse på ThinkGeek . Matt har været på ThinkGeek, internetens nr. 1 største (og nerdeste) online butik, i ni år. Han er lige så meget en front-end-udvikler, da han er en UX-designer.
• Kevin Clark , Design bly på Shopify . Kevin Clark er Design Lead på Shopify's Montreal-baserede købserfaringsdesignteam. Han overvåger det hold, der er ansvarlig for checkout oplevelsen på tværs af e-handelsplatformen. Så snart en bruger klikker på vognikonet, har du indtastet domænet for Kevins team. Alt fra e-mail-kvitteringer, købmands-kunde-interaktioner, til siden for live-orderstatus - hvis du køber noget på et Shopify-websted, er der lige så mange, Kevin og hans team havde en hånd i det.
• Catherine Ho , Senior UX Designer på REI . Tidligere hos Intuit har Catherine været med REI i to år i Seattle. Hun elsker UX, fordi det fokuserer på mennesker, og det er både teknisk og kreativt. Hendes rolle på REI er hybrid mellem forskning og design. Hendes projekter har medtaget i butiksindretninger, som f.eks. En iPod touch til POS-systemet, iOS-apps og medlemskab og konti, der specifikt redesigner login og ønskeliste.

I hele mine samtaler med dem bemærkede jeg 5 fælles principper at huske, når vi designer sømløse udbetalinger.

1. Shopifes tre guldstandarder i checkout-oplevelsen: let at forstå, enkel og hurtig

I 2016 var Kevin Clark og hans team ansvarlige for at omregne checkoutoplevelsen for alle Shopify-websteder. Det er næsten en halv million butikker. Som en toppart i e-handelsrummet var forventningerne høje.

I tæt samarbejde med temaet holdet fokuserede Kevin og hans team på standardiseringen af ​​en universel Shopify checkout oplevelse. Det er det samme i alle Shopify-temaer.

-Kevin Clark, Shopify

Udover den grundlæggende sikkerhedsmæssige opfattelse skal Shopify-købsoplevelsen være let at forstå, enkel og hurtig.

Den bedste måde at designe noget som transaktionelt og processtyret som checkout er at teste alt.

For eksempel, for at teste en antagelse om, hvor mange trin der skulle være i checkout-oplevelsen, gennemførte han og hans team en test, der sammenlignede erfaringer på en side, to sider og tre sider - hver med de samme oplysninger.

Eksempel på check på enkelt side:

Eksempel på check på to sider:

Resultaterne viste, at en side følte overvældende for brugeren, fordi den gav for meget information på en side, to sider opdelte trinene akavet og tre sider følte sig enkle og nemme.

De tre trin er kundeoplysninger, forsendelsesmetode og betaling:

-Kevin Clark, Shopify

Disse tre trin er sat i sten på tværs af alle websteder. Men bortset fra det er butiksejerne tilladt en håndfuld tilpasninger, der passer til deres mærke.

Men med tilpasninger anbefaler Kevin ikke at overdrive det:

Der skal snarere være kontroller indført for at beskytte en grundlæggende erfaring, der er konsekvent, velkendt og sikker. Et eksempel på dette er, at Shopify-systemet ved, hvilke farver der skal bruges og ikke bruges ud fra en kontrastalgoritme (dvs. lys tekst på mørk baggrund) og justerer for læsbarhed.

Checkoutsystemet Kevin og hans team skabte grundlaget for det fremtidige arbejde, der skulle bygges oven på det. Det er et komponentbaseret system, så nye komponenter kan tilføjes, f.eks. Felter og knapelementer, og funktionerne kan ændres eller tilføjes uden overhaling af hele systemet.

2. Det ultimative mål: "friktionsløshed"

Fader til Windows og Internet Explorer, tidligere Microsoft-legenden Steven Sinofsky rådgiver i øjeblikket virksomheder som Product Hunt, Box og sidder på bestyrelsen for Andreessen Horowitz. Han er designer på hjerte og en mester for produktudvikling. I hans indlæg Friktionsløs produktdesign , påpegede han forskellen mellem minimalisme og friktionsløst design.

Han skrev, at mens minimalistisk design reducerer overfladen af ​​en oplevelse, drejer det sig om at reducere den energi, der kræves af en oplevelse. Dette er især vigtigt i kassen design.

Han giver 6 principper for friktionsløst design:

1. Bestem en standard i stedet for muligheder
2. Opret en sti til en funktion eller opgave
3. Tilby personalisering frem for tilpasning
4. Stick med de ændringer, du laver
5. Byg funktioner, ikke futzers
6. Gæt korrekt hele tiden

På REI implementerede Catherine for nylig et eksempel på friktionsløst design på et projekt. Hendes hold fandt ud af, at når en kunde er klar til at føje en vare til deres vogn, sender signering kunden til en ny webside og dermed bryder shoppingoplevelsen. For at rette op på dette, testede hun A / B en indloggnings widget, der åbnede en drop down-login-modal, og holdt erfaringen på siden i stedet for at sende shopper til en ny login-side.

Dataanalyserne viste ingen forskel i trafik eller drop-offs, så de holdt det. Besøgende kunne logge ind og fortsætte med at shoppe fra samme side uden at miste deres følelse af sted. Dette er et eksempel på Sinofsky's # 2-princip: Opret en vej til en funktion eller opgave. I stedet for at skabe en gaffel i vejen for at logge ind eller fortsætte med at handle, er brugerens sti ensidig.

Det er værd at nævne Sinofskys # 5-princip her også: Byg funktioner, ikke futzers. Hvad dælen er en "futzer?"

En futzer er ordet "futzing" (som sandsynligvis lyder mere kendt for dig) klogt forklædt som et navneord. Det er en ting, der forårsager meningsløse fiddling rundt og spildt tid.

Det er her designere bliver truet op. Hvordan bestemmer du forskellen mellem en funktion og en futzer? Som Sinofsky antyder, kræver det en delikat balance mellem at give brugeren det, de ønsker, men ikke så meget, at det overvælder dem.

En god måde at illustrere dette på er at se på de øverste grunde, at kunderne forlade deres indkøbsvogne. Jeg vil gerne fremhæve to karrierestopstudier og trække indsigt fra begge.

I den første undersøgelse (2013), betalingsvirksomheden Worldpay undersøgte hvorfor folk forlod deres online indkøbsvogne uden at betale.

Seks af de givne grunde er relateret til denne balance mellem funktioner og futzere. Tjek det ud:

1. "Website navigation for kompliceret" ... For mange futzers.
2. "Processen tog for lang tid" ... For mange futzers.
3. "Overdreven betalingssikringskontrol" ... For mange futzers.
4. "Bekymringer om betalingssikkerhed" ... Ikke nok funktioner.
5. "Leveringsindstillingerne var uegnede" ... Ikke nok funktioner.
6. "Pris præsenteret i fremmed valuta" ... Ikke nok funktioner.

Med andre ord mister virksomheder indtægter, fordi forbrugerne forlade, når der er for mange futzere og ikke nok funktioner.

I en lignende undersøgelse udført i 2016 af Baymard Institute brugbarhed forskere fandt, at 27% af amerikanske online-kunder opgivet deres vogne udelukkende på grund af en "for lang / kompliceret checkout proces. ”

Baymards benchmark database afslørede, at den gennemsnitlige amerikanske checkout-strøm indeholder 23,48 formelementer, der vises som standard for brugerne. Resultaterne af undersøgelsen viste imidlertid, at det er muligt at reducere gennemsnittet af kassen med 20-60%.

Den kvalitative 1: 1 modererede usability test og eye tracking undersøgelse i checkout undersøgelsen viste, at en ideel checkout flow kan reduceres til så lidt som 12 formelementer (7 formularer, 2 afkrydsningsfelter, 2 drop-downs og 1 radioknap interface).

Hvor mange formelementer har din checkout? Noget mere end 12 kan indikere tilstedeværelsen af ​​futzers i din checkoutstrøm. Hvordan skærer du ned antallet af formelementer? Unik test er det ultimative svar, men for nu er de næste trin tilstrækkelige.

3. Vedligeholdelse af data

Her er et spørgsmål til at spørge dine kassen designere: hvordan har du brug for data under hele checkout processen?

Matt at ThinkGeek mener, at de bedste checkouts oplevelser kun samler de nødvendige data og derefter opretholder disse data hele vejen igennem slutningen af ​​transaktionen:

Hvis din database har oplysninger om en kunde, skal du bruge den til at reducere antallet af felter, han eller hun skal udfylde. Amazons One-Click-købsfunktion er et glimrende eksempel på dette.

Ved at kende kundens data kan den korrekt "gætte" brugerens foretrukne forsendelsesmåde, adresse og betalingsoplysninger med nul tilsat indsats fra brugeren. Med et one-click-one-sale checkout er der ingen muligheder for chokepoints.

Shopify opretholder data med "checkpoints." Betydning, hvis en bruger fortsætter via Shipping, men falder ud under Betaling, opretholdes de indsamlede data, og brugeren kan afhente deres rejse, hvor de slukkede.

4. Tilgivende Design

Den endelige fælles tråd mellem alle tre mærker var ideen om "tilgivende design" - hvor designerens mål er at forhindre eventuelle fejl i checkout processen. I stedet for at være strenge ved fejl, giver store kasser brugerne væk med at være, for manglende et bedre ord, doven.

Nedenfor er tre eksempler på "tilgivende design" i checkoutstrømmen: 1) tilføjelse af gavekort og rabatter, 2) deaktivering af "send" -knappen og 3) indtastning af telefonnumre.

I det første eksempel har alle tre mærker gavekort og rabatter - veletablerede værktøjer til at lukke salg online. Men det er typisk ikke altid, hvor man skal indtaste koderne eller indløse kortene.

Ifølge Kevin Clark:

På Shopify gjorde en betydelig tekniske indsats det muligt for brugerne at indsætte i et gavekort eller rabatkode i samme felt, og systemet sorterer det automatisk ud. Det er umuligt at lave en fejl.

For det andet, nogle gange vil butikkerne deaktivere eller "gråke ud" indsender / fortsæt-knappen, indtil en bruger gennemfører alle nødvendige felter.

Skal du gøre dette? Det er en opvarmet debat i UX-samfundet om, hvorvidt man skal forlade indstille / fortsæt-knappen, men ifølge den uofficielle forskning af en bruger på Stack Exchange, omkring 5% eller mindre af en lille prøveudtagning af hjemmesider, skal du holde indsender / fortsæt-knappen deaktiveret.

På Shopify, ThinkGeek og REI, er indsend / fortsæt-knappen altid aktiveret, selv med manglende information. Hvorfor? Af tre grunde:

1. Det forhindrer brugerforvirring. "Gråt ud" -knappen fortæller en shopper noget er forkert, men angiver ikke, hvor nøjagtigt og sender brugeren på en blind jagt for fejlen. En aktiv knap vil formidle klikbarhed, hvilket vil resultere i en simpel besked (ofte i rød) på feltet, der kræver en gyldig indgang.
2. Det er tilgængeligt. I nogle tilfælde (sjældne) kan en bruger have deaktiveret Javascript i deres browser, hvilket forhindrer den dynamiske tilstandsændring af knappen fra deaktiveret til aktiveret.
3. Det forhindrer udviklerfejl. En gyldig brugstilfælde eller indgang, der skulle have aktiveret send / fortsæt-knappen, kunne være blevet savnet (dvs. internationalitet), fanger shopper uden valgmuligheder, men for at opdatere eller afslutte.

Warby Parker gør et godt stykke arbejde med at dreje, hvad der normalt ville være en irritation i en chance for at udprøve en del personlighed personligt.

ThinkGeek-check-siden opretholder en aktiv "Gå til kassen" blå knap, selvom felterne er tomme.

"Fortsæt" blå knap er aktiv på den tomme REI checkout side.

Alle Shopify-butikker holder den blå "Fortsæt til forsendelsesmetode" -knap aktiv til enhver tid.

Endelig er det tredje eksempel på tilgivende design telefonnumre. En bruger postede følgende problem på Stack Exchange :

I øjeblikket på min hjemmeside skal brugerne indtaste deres telefonnummer i et meget specifikt format (555-555-5555). Hvis du glemmer bindestregerne, bryder den. Har nogen gode forslag til, hvordan man bliver mere fleksibel med at tillade brugerne at input på en hvilken som helst måde de vælger, men stadig giver systemet mulighed for at validere, hvis det er et rigtigt telefonnummer. Hvordan håndteres telefonudvidelser?

Uforgivende design kræver dette specifikke format (dvs. antal tegn, bindestreger vs. perioder, mellemrum). Tilgivende design giver brugerne mulighed for at indtaste det, hvordan de vil, og lade systemet finde ud af, hvad tallet er.

Ved at tillade maksimal fleksibilitet ved at skrive et telefonnummer, er brugeren mindre tilbøjelige til at "lave fejl".

En anden bruger svarede med hvordan man løser dette ved at bruge tilgivende design:

Den bedste tilgang til brugeroplevelse er at lade brugeren skrive i telefonnummeret ved hjælp af det format, de er mest komfortable med. Bryd det ikke i separate felter, tving ikke en maske, lad den skrives freeform. Derefter skal du formatere nummeret i et standardformat til dine formål, når brugeren er færdig med at indtaste feltet (ved at forlade feltet til indsendelse af data).

Da du taler om et websted, kan du gøre formatet på sløringsbegivenheden ved hjælp af Google-bibliotekets nummer http://code.google.com/p/libphonenumber/ projekt. Dette værktøj håndterer internationale telefonnumre og et bredt udvalg af formater.

Årsagen til, at denne tilgang er bedre for brugeroplevelsen er, at den giver brugerens mentale model mulighed for at forblive uændret og giver dem mulighed for at sige: "Lad mig ikke tænke." Maskering og separate felter tvinge en mental model af telefonnumre til brugere og kræver mere tænkning.

På samme måde som gavekorteksemplet skal telefonnumre accepteres i ethvert format, så kunderne kan fortsætte "uden at tænke" eller spørger sig selv, om de er korrekte.

Tilgivende design giver dig mulighed for at reducere antallet af felter i din checkoutstrøm og dermed bidrage til at eliminere klagen om, at 1 ud af 4 kunder udtalte sig i Baymard's check-usability studie (for lang / kompliceret checkout proces)

5. Fælles checkout design fejl at undgå

Endelig nævnte de tre e-handelseksperter hver og advarsel mod tre simple fejl, de har oplevet ved udformningen af ​​udbetalinger:

Fejl # 1: Inkluder ikke en ordreanmeldelse. Sæt dig selv i sko af en kunde, der kun kedeligt udfylder deres oplysninger for at finde sig i tvivl om, at de bestilte den rigtige vare eller mængde. Ikke at se en chance for at gennemgå deres ordre før køb vil føre dem til kaution og starte over eller værre opgive. REI holder shopper informeret i hele checkout processen med en flydende "Ordreoversigt" boks og en klar mulighed for at gennemgå, før ordren placeres.

Ud over at vise ordresummen til højre vedvarende i hele checkoutprocessen inkorporerer REI en endelig anmeldelse sammen med bestilling.

Fejl # 2: Uhensigtsmæssige fejlmeddelelser. Det er nemt for en kunde at indtaste oplysninger forkert i kassen. I stedet for blot at vise "Ugyldig" eller lignende uspecificeret kopi, skal du bruge adaptiv fejlmeddelelse. ThinkGeeks fejlmeddelelser opdateres live fra "Dette felt er påkrævet." Til "Indtast venligst en gyldig [blank]" for at vise kunden hvor og hvorfor fejlen opstår.

ThinkGeek tilpasser sine fejlmeddelelser for at angive mere specifikke instruktioner.

Fejl # 3: Ikke mobilvenlig. Hvis du sælger online, er dette en no-brainer. Vær venlig. Hvis du har en online-checkout, må du ikke sætte dine kunder igennem smerten ved at zoome ind og ud, panorere rundt og skræve ved en uafvendt checkout.

Takeaways og actionartikler

Checkouts er en del af hver e-handel oplevelse. Som det sidste skridt, før et produkt er købt, vil du ikke have noget at gå galt. Jeg var glad for at høre fra Matt, Kevin og Catherine om de fem principper, de følger for at designe deres kunders online shoppingvej:

1. For den bedste checkout oplevelse skal du sørge for, at dit kassen design er konsekvent, velkendt og sikkert. Giver din checkout brugeren en følelse af kendskab og sikkerhed?
2. Det ultimative mål er friktionsløshed. Gå over Sinofskys 6 principper og vurder din checkout oplevelse, og vær særlig opmærksom på # 2 og # 5. Er der nogen funktioner mangler, eller kan nogen futzers fjernes?
3. Når din bruger går gennem indkøbsprocessen, skal du opretholde deres data for at gøre det nemt og intuitivt. Men husk, hvis du ikke kan gætte korrekt hver gang, gæt ikke. Hvilke data har du allerede, som du kan bruge til at gemme brugernøgler og strømline købsprocessen?
4. Brug tilgivende design, så brugerne ikke føler, at de har lavet en fejltagelse. Det er værd at den ekstra indsats for at bygge i tilgivende funktionalitet, når du ser øgede konverteringer. Har du analytics plugget i din checkout? Hvor er det største overgivelsessted? Hvordan kan du fjerne denne forhindring?
5. Undgå simple fejl. Selv de bedste designere er ikke uovervindelige med udsigt detaljer, især når det kommer til noget som "kedeligt" som checkout design. Gennemgå jævnligt dit betalingsstedsproces i inkognitomodus på en desktop, tablet og mobilenhed og spørg dig selv, "Kunne det være lettere? Enklere? Mere intuitivt? "

• ← Sådan Master Microcopy
• 5 måder, den flydende handlingsknap forstærker UX →