7 Forbedringer af din Checkout Process

Christian Holst · christian@baymard.com · baymard.com

2 large scale usability research studier, 3 år

I dag kigger vi på et uddrag af disse research resultater

Omtale:

Kunder:

Checkout Processen

67.3% gns. abandonment rate

Selv små forberdringer er ‘big business’en reduktion fra 67% til 65% abandonment rate er 60.000 extra per år for hver 1.000.000 i årlig omsætning

Seamless and simple (yet intelligent) checkout process

Detaljerne (fokus i dag)Er ikke ødelæggende individuelt, men “mange bække små” ødelægger checkout oplevelsen. Jo flere du får forkert jo mere vil dine kunder opfatte din checkout som “langsom”, “kedelig” eller “idiotisk”.

BasisTilbyd ‘Gæste’ checkout, vis fragt omkostninger i kurven, forsendelses addresse = faktura address, tydelige og konsekvente primær knapper, et lineær checkout flow, etc.

7 checkout forbedringer

63 checkout forbedringer+ 147 for mobil

7 Forbedringer af din Checkout Process

1. Forstærk betalingsfelterne visuelt 89% gør det ikke

Brugere har lille teknisk viden om form felter, SSL, og PCI.

1. Forstærk betalingsfelterne visuelt

Forstærk det visuelle udtryk af betalingskort felterne via indramming, baggrunds farver, positionering af “sikkerheds” ikoner, etc.

1. Forstærk betalingsfelterne visuelt

2. Påkræv ikke (tilsyneladende) ligegyldig info61% gør det forkert

Kunderne føler du invaderer deres privatsfære når du tvinger dem til at indtaste “unødvendig” personlige data. F.eks. ‘* Required’ telefon nummer eller fødselsdato uden yderliger forklaring.

2. Påkræv ikke (tilsyneladende) ligegyldig info

Forklar hvordan den personlige information vil blive brugt, f.eks telefon og e-mail:

2. Påkræv ikke (tilsyneladende) ligegyldig info

Target.com: “for shipping-related questions”

Victoria’s Secret: tooltip

3. Beskriv form felter yderligere92% gør det forkert

Hvad skal jeg taste?‘Sikkerhedskode’, ‘Addresse linie 1’ og 2, forkortelser,

Hvordan skal det skrives?Telefon nummer, password, datoer, kort nummer

Hvor finder jeg det?Sikkerhedskode, kupon/certifikater, ID numre

1/4 muligheder: prøve sig frem, besøge din ‘Hjælp’ sektion, ringe til din support, eller forlade din side.

3. Beskriv form felter yderligere

Størstedelen af test deltagerene havde problemer med at forstå visse form felter og tilhørende label

Dynamisk: Twitter sign-up form

3. Beskriv form felter yderligere

Inline tekst: Coastal.com

Tooltip: Amazon

4. Brug ikke ‘Opdater’ knapper72% gør det forkert

Når en ‘Opdater/Tilføj’ knap blev anvendt til at opdatere kun en sektion af en checkout form, gjorde test deltagerne en af følgende:

- Klikkede ikke på den, (selv hvis de udfyldte de relevante felter)

- Misforstod den som den primære knap (“Næste”)

4. Brug ikke ‘Opdater’ knapper

Vær opmærksom på enhver ‘Opdater’ knap (typisk brugt til kuponer, gavekort, vare antal i kurven, fragt udregnere)

Anvened i stedet Auto/Live opdatering of værdier og sider fremfor opdaterings knapper.

4. Brug ikke ‘Opdater’ knapper

5. Flyt friktion til ‘Tak for Ordren’ siden49% gør det ikke

Ringe udnyttelse af “tak for ordren” siden.

5. Flyt friktion til ‘Tak for Ordren’ siden

Flyt registrering til efter ordren. Genbrug alle ordre data og spørg kun om password.

Anden “friktion” der kan flyttes til efter ordren er: nyhedsbrev, kundeundersøgelser, mersalg, del på social medier, m.v.

5. Flyt friktion til ‘Tak for Ordren’ siden

6. Ha’ intelligente standard valg15% gør det forkert

6. Ha’ intelligente standard valg

Fjern friktion ved at lave åbenlyse valg (din web statistik afslører hvad flertallet af dine kunder vælger).

6. Ha’ intelligente standard valg

Fjern friktion ved at lave åbenlyse valg (din web statistik afslører hvad flertallet af dine kunder vælger).

6. Ha’ intelligente standard valg

HP.com: Størstedelen af kunderne behøver ikke tage stillings til, eller overhovedet forstå, komplicerede valg.

7. Giv mulighed for at ‘redigere’ når du viser bruger inputs 40% gør det ikke

Ingen mulighed for at gå tilbage for at ændre valg og data

7. Giv mulighed for at ‘redigere’ når du viser bruger inputs

Process trin som links

7. Giv mulighed for at ‘redigere’ når du viser bruger inputs

På mobil sites vil inline tekst links ofte være bedre end process trin

7. Giv mulighed for at ‘redigere’ når du viser bruger inputs

1. Forstærk betalingsfelterne visuelt

2. Påkræv ikke (tilsyneladende) ligegyldig info

3. Beskriv form felter yderligere

4. Brug ikke ‘Opdater’ knapper

5. Flyt friktion til ‘Tak for Ordren’ siden

6. Ha’ intelligente standard valg

7. Giv mulighed for at ‘redigere’ når du viser bruger inputs

Ikke 2-3 ‘magic bullet solutions’ - men 10-30 mindre justeringer (gns. 21 justeringer for top 100 US sites)

Ikke blot mængden af checkout trin, men hvad kunden skal gøre i hvert trin(og hvordan du beder dem om det)

Seamless and simple (yet intelligent) checkout process

7 Forbedringer af din Checkout Process

Christian Holst · christian@baymard.com · baymard.com