Så utformar du kassaformulär för webbshop som minskar övergivna varukorgar

Lär dig vad kassaformulär i webbshop behöver för att lyckas. Se varför 70 % av varukorgarna överges och vilka designgrepp som löser det.

Utkast

Sju av tio personer som lägger varor i varukorgen kommer aldrig tillbaka för att köpa. För de flesta butiker motsvarar det 260 miljarder dollar i förlorad försäljning som skulle kunna räddas med bättre design av kassan.

Vad är ett kassaformulär i en webbshop?

Ett kassaformulär i en webbshop är det sista steget mellan kundens beslut att köpa ("Jag vill ha det här") och en slutförd transaktion ("Beställningen är bekräftad"). Det samlar in leveransadress, faktureringsuppgifter och betaluppgifter, precis så mycket som behövs för att slutföra försäljningen utan att överväldiga köparen.

Till skillnad från formulär i andra skeden av kundresan har kassaformulär ett enda jobb: att förvandla köpvilja till betalning. Kunden har redan bestämt sig för att hen vill ha produkten. Formuläret ska rensa vägen till köpet, inte skapa ny friktion.

Ett kassaformulär sitter vid ett avgörande ögonblick: kunden har bestämt sig, men all friktion, som oväntade kostnader, förvirrande fält eller krav på att skapa konto, kan få hen att avbryta mitt i transaktionen. De bästa kassaformulären är osynliga: kunden märker knappt att hen fyllde i det, hen får bara sin beställning bekräftad.

Problemet: därför överges 70 % av varukorgarna före köp

Problemet är sällan kundens vilja. De flesta som överger sin varukorg var verkligen intresserade av produkten. De stötte bara på friktion i kassaformuläret och bestämde sig för att det inte var värt besväret. Oväntade fraktkostnader dyker upp i steg tre. Webbplatsen kräver att de skapar ett konto för att gå vidare. Formuläret har 24 fält när de flesta butiker bara behöver 12. Då stänger de fliken.

De butiker som får varukorgsbesökare att bli kunder minskar friktionen i kassan med 35 till 50 %. De förenklar formulär, visar kostnader i förväg, erbjuder gästkassa och gör vägen från "Jag vill ha det här" till "Tack för din beställning" kortare än 2 minuter.

Den här artikeln går igenom varför kassaformulär misslyckas, vad de butiker som konverterar bäst gör annorlunda och hur du åtgärdar de särskilda orsakerna till övergivna köp.

Därför ger kassaformulär 70 % övergivna varukorgar (och vad som faktiskt stoppar köparna)

Den genomsnittliga webbshopen har 70,22 % övergivna varukorgar. Det inkluderar inte besökare som aldrig la till något. Det är personer som valde varor, la dem i varukorgen och gick. De var köpare. Formuläret förlorade dem.

Forskning om varför det händer visar att problemet inte är en enda sak. Det är fem särskilda friktionspunkter som tillsammans ger tillräckligt motstånd för att döda köpet:

Friktion 1: Oväntade kostnader som dyker upp i slutet. 39 % av dem som överger varukorgen anger extra kostnader som skäl. De ser produktpriset (49 dollar), lägger den i varukorgen, går till kassan och upptäcker i steg tre att frakten är 15 dollar och skatten ytterligare 8. Nu är det 72 dollar, inte 49. Kunden hade inte budgeterat för det och stänger fliken. Det är den enskilt största orsaken till att kassaformulär misslyckas. Problemet är inte kostnaden. Det är överraskningen.

Friktion 2: Krav på att skapa ett konto. 19 % av kunderna överger köpet när de måste registrera sig. De har inte tid att komma ihåg ett lösenord, bekräfta sin e-post eller skapa ett konto bara för att köpa en enda sak. De vill ange ett kort och gå vidare. Att kräva registrering före betalning känns som onödig friktion.

Friktion 3: Formuläret frågar efter för mycket information. 18 % överger köpet på grund av en krånglig kassa. Den genomsnittliga butiken har 23,48 formulärelement i sin kassa. De butiker som konverterar bäst har 12 till 14. Det är nästan dubbelt så många fält. Varje extra fält är en anledning att hoppa av, och det mesta av den extra informationen används aldrig efter beställningen.

Friktion 4: Problem med säkerhet och förtroende. 19 % anger säkerhetsoro. De litar inte på webbplatsen med sina kortuppgifter. Det visar sig på två sätt: webbplatsen visar inte tydligt SSL-certifiering (hänglåsikonen), eller så saknas förtroendesignaler (inga säkerhetsmärken, inget meddelande om "säker kassa", inga betalleverantörer som kunden känner igen).

Friktion 5: Få betalningssätt. 10 % av kunderna kan inte betala eftersom butiken bara tar emot kreditkort. De vill betala med mobil plånbok, betalkort, en betaltjänst online eller ett annat sätt. Om butiken inte stöder det överger de köpet.

Tillsammans står de fem friktionerna för 85 % av de övergivna varukorgarna. Den goda nyheten: alla fem är designproblem, inte kundproblem. Bättre design av kassaformuläret löser dem alla.

Så bygger butiker med hög konvertering sina kassaformulär

Designprincip 1: Visa totalpriset innan kunden förbinder sig till kassan.

De butiker som konverterar bäst visar frakt och skatt innan kunden anger sina betaluppgifter. Metoder:

En förhandsvisning av varukorgens summa: Innan kunden klickar på "Gå till kassan", visa den beräknade summan inklusive frakt (om den är känd) och skatt. Exempel: "Delsumma: 49 dollar | Beräknad frakt: 15 dollar | Beräknad skatt: 8 dollar | Totalt: cirka 72 dollar"

En fraktkalkylator på varukorgssidan: Låt kunden ange sitt postnummer och se fraktalternativen innan hen går vidare. "Ange ditt postnummer för att se fraktalternativ: 8 dollar (3 till 5 dagar), 15 dollar (1 till 2 dagar) eller gratis (5 till 7 dagar)." Nu styr kunden kostnaden och väljer vad hen vill betala.

Tydlig kostnadsinformation i kassan: Om kunden går vidare utan att beräkna, visa summan överst i varje steg i kassan. Göm den inte. När kunden ändrar antal eller väljer frakt uppdateras summan i realtid.

En insikt från butiker med hög konvertering: öppenhet om kostnader ökar konverteringen mer än ett lägre pris. Kunder har inget emot att betala 72 dollar om de vet att det är 72 dollar från början. De överger köpet när överraskningen kommer i steg tre.

Designprincip 2: Erbjud gästkassa som standard.

De butiker som konverterar bäst gör gästkassa till huvudvägen. Registrering kommer efteråt, som ett val. Flödet ser ut så här:

Steg 1: E-postadress (för orderbekräftelse)
Steg 2: Leveransadress
Steg 3: Leveranssätt
Steg 4: Betaluppgifter
Steg 5 (valfritt): "Skapa ett konto för snabbare kassa nästa gång?"

Genom att lägga kontoskapandet sist löser butiker problemet med påtvingad registrering. Kunden köper först. Om hen vill ha ett konto till nästa gång kan hen skapa ett. Om inte är hen klar.

Designprincip 3: Begränsa formulärfälten till det absolut nödvändiga.

Det ideala kassaformuläret frågar efter 12 till 14 uppgifter totalt. De flesta butiker frågar efter 23 till 25. Det här är vad som faktiskt är nödvändigt:

Leveransadress (5 fält): Namn, gatuadress, ort, delstat/region, postnummer
Leveranssätt (1 alternativ): Låt kunden välja bland 2 till 3 alternativ
Faktureringsadress (5 fält): Namn, gata, ort, delstat, postnummer, MEN du kan dölja den om kunden använder kort (de flesta kortleverantörer kopplar fakturering till kortet)
Betalning (4 fält): Kortnummer, utgångsdatum, CVV, kortinnehavarens namn
E-post (1 fält): För orderbekräftelse

Det är 12 till 14 fält. Allt annat (telefonnummer, företagsnamn, leveransinstruktioner) ska vara valfritt eller samlas in efter köpet.

Designprincip 4: Använd en enda kolumn på mobilen.

Mobilen har högst andel övergivna köp (85,65 % jämfört med 59 % på dator). Orsaken: layouter med två kolumner som fungerar på dator fungerar inte på mobil. En enda kolumn är avgörande:

Ett fält per rad. Fält i full bredd (inte två bredvid varandra). Knappar som går att trycka på (minst 48 px höga). Tydlig förloppsindikator ("Steg 2 av 4"). Stor, läsbar textstorlek.

Designprincip 5: Visa säkerhetsmärken och förtroendesignaler tydligt.

Placera dem längst ned i kassan eller nära betalknappen:

SSL/TLS-säkerhetsmärke (hänglåsikonen)
Logotyper från betalleverantörer som kunden känner igen
Förtroendemärken för säkerhet (om det är tillämpligt)
Pengarna-tillbaka-garanti ("30 dagars nöjdhetsgaranti")
Länk till returpolicyn

De tar lite plats men visar att kundens betaluppgifter hanteras säkert och backas upp av ett företag som kunden känner igen.

Så bygger du kassaformuläret steg för steg

Steg 1: Bestäm kassans längd (en sida eller flera steg).

Kassa på en sida: Alla fält syns på en lång sida. Fördelar: känns snabbt, ingen "väntan på att nästa sida laddas". Nackdelar: känns överväldigande om det finns många fält, svårare att visa förlopp.

Kassa i flera steg (3 till 4 steg): Informationen delas in i logiska grupper (leverans, sedan fakturering, sedan betalning). Fördelar: känns ordnat, förloppsfältet motiverar till att bli klar, lättare att dölja fält som inte behövs. Nackdelar: varje steg känns som ett nytt hinder.

Bästa praxis: Använd flera steg om du har 15 fält eller fler, en sida om du har 12 till 14.

Steg 2: Visa totalpriset i varje steg.

Visa alltid en "Ordersammanfattning" som uppdateras i realtid, överst eller vid sidan av kassaformuläret:

Delsumma: 49 dollar
Frakt: 15 dollar (leverans på 1 till 2 dagar)
Skatt: 8,28 dollar
-
Totalt: 72,28 dollar

Om kunden ändrar antal, leveranssätt eller rabattkod, uppdatera det direkt. Låt aldrig kunden gissa vad hen betalar.

Steg 3: Använd autofyll och adressökning.

De flesta moderna webbläsare sparar adressuppgifter automatiskt. Aktivera autofyll så att återkommande kunder slipper skriva sin adress igen. För nya kunder, använd adressökning: i samma stund som de börjar skriva sin gatuadress, visa förslag från adressdata. Det minskar felstavningar och gör formuläret snabbare.

Steg 4: Erbjud flera betalningssätt.

Ta som minimum emot:

Kredit- och betalkort
Mobila plånböcker (till exempel Google Pay)
En betaltjänst online

Om du säljer digitala produkter eller prenumerationer, överväg också:
Köp nu, betala senare
Delbetalning

Steg 5: Gör skicka-knappen omöjlig att missa.

Knappen som slutför köpet ska vara:

Stor (minst 48 px hög)
Färg med hög kontrast (sticker ut från bakgrunden)
Tydlig, handlingsinriktad text ("Slutför köp", "Lägg beställning" eller "Betala [summa]"), INTE allmän text som "Skicka"
Placerad längst ned i formuläret med tydligt tomrum runt

Steg 6: Visa bekräftelse direkt och skicka mejlbekräftelse inom några minuter.

När kunden har klickat på "Slutför köp":

Visa en sida om att köpet lyckades med ordernummer, summa och beräknat leveransdatum
Låt kunden skriva ut eller spara kvittot
Skicka en omedelbar mejlbekräftelse (inom 5 minuter) med samma information
Ta med nästa steg ("Vi skickar spårningsinformation när din beställning skickas")

Misstag i kassaformulär som dödar konverteringen

Misstag 1: Att fråga efter telefonnummer i kassan. De flesta butiker frågar efter telefonnummer eftersom de tror att de behöver det för leveransen. I verkligheten kräver 95 % av leveranserna inte att man ringer kunden. Telefonnummer är ett fält som får folk att hoppa av, ta bort det. Om du behöver det, fråga efter det efter köpet.

Misstag 2: Att visa hela faktureringsadressformuläret när det inte behövs. Om du tar emot kreditkort är faktureringsadressen redan kopplad till kortet (verifierad av kortleverantören). Fråga inte efter den igen. Om kundens faktureringsadress skiljer sig från leveransadressen kan du fråga då, men gör det inte till standard.

Misstag 3: Att inte visa fraktkostnader förrän i sista steget. Det är det största hindret för konvertering. Kunder tar sig inte genom 4 steg bara för att se en fraktkostnad som de inte vill betala. Visa fraktkostnader senast i steg 2.

Misstag 4: Att kräva rabattkod för att gå vidare. Om du har ett fält för rabattkod, gör det valfritt (eller placera det efter köpet). Blockera aldrig kassan för att någon inte har en rabattkod.

Misstag 5: Ingen mobiloptimering. Över 50 % av trafiken i kassan är mobil. Om ditt formulär inte fungerar på mobil förlorar du hälften av dina konverteringar. Testa på riktiga telefoner före lansering.

Mått att följa för kassaformulärets resultat

Andel övergivna varukorgar. Hur stor andel av dem som lägger varor i varukorgen kommer aldrig tillbaka? (Mål: under 50 %. Branschsnitt: 70 %). Om din ligger över 70 % har du ett allvarligt friktionsproblem i kassan. Använd värmekartor och sessionsinspelning för att hitta var folk hoppar av.

Andel som slutför kassan. Av dem som startar kassan, hur stor andel slutför den? (Mål: 70 % eller mer. Branschsnitt: 60 %). Om den ligger under 50 % har formuläret för många fält, oklara kostnader eller brist på förtroendesignaler.

Steg till slutförande per enhet. Följ vid vilket steg folk hoppar av på mobil jämfört med dator. Om avhoppen på mobil är mycket högre i steg 2 eller 3 har du ett problem med mobillayouten.

Genomsnittligt ordervärde (AOV). Påverkar kassaformuläret hur mycket kunderna spenderar? Vissa butiker ser att tidig visning av frakt ökar ordervärdet (folk lägger till varor för att nå gränsen för "fri frakt"). Testa det.

Tid till slutförd kassa. Hur lång tid tar det för en genomsnittlig kund att slutföra kassan? (Mål: under 3 minuter). Om det är över 5 minuter är formuläret för komplext eller processen förvirrande.

Sammanfattning av modulen: vad som gör kassaformulär annorlunda

Kassaformulär handlar inte om att samla in data. De handlar om att ta bort friktion mellan en köpare och köpet. Varje fält är en chans att förlora försäljningen. Varje steg är en anledning att tveka. De kassaformulär som konverterar bäst tar kunden från "Jag vill ha det här" till "tack" på under 2 minuter utan överraskningar.

Den ökning av konverteringen med 35 % som de flesta butiker kan nå kommer inte från funktioner eller rabatter, utan från att ta bort den friktion som aldrig behövde finnas.

Vanliga frågor

Ska jag kräva ett konto för att slutföra kassan?
Nej. Gästkassa bör vara standardvägen. Kontoskapande (valfritt) bör komma efter köpet, om alls. Att kräva registrering före betalning är den näst största orsaken till att kunder överger varukorgar. Låt dem köpa först och erbjud ett konto efteråt. Med WEMASY:s webbplatsbyggare ställer du in det direkt på din webbplats.
Vilket är det ideala antalet fält i ett kassaformulär?
12 till 14 fält totalt. Det inkluderar leveransadress (5), leveranssätt (1), betaluppgifter (4), e-post (1) och en valfri faktureringsadress (5 om det behövs). Den genomsnittliga butiken har över 23 fält. Varje fält över 14 sänker andelen som slutför med 3 till 5 %. Fråga dig själv: behöver jag verkligen den här informationen för att fullfölja beställningen? Om svaret är nej, ta bort den.
När ska jag visa frakt och skatt?
Så tidigt som möjligt, helst innan kassan börjar. Använd en förhandsvisning av summan eller en fraktkalkylator på varukorgssidan. Om inte, visa kostnaderna senast i steg 2 i kassan. Göm aldrig frakt och skatt till sista steget. Oväntade kostnader är den vanligaste orsaken till att köp överges.
Hur många betalningssätt ska jag ta emot?
Som minimum: kredit- och betalkort, mobila plånböcker och en betaltjänst online. Varje betalningssätt du lägger till ökar andelen som slutför med 2 till 3 %. De flesta övergivna köp på grund av betalningssätt sker när någon bara tar emot kreditkort. Testa att lägga till köp nu, betala senare eller delbetalning om du säljer dyrare varor.
Hur optimerar jag kassan för mobil?
Layout med en enda kolumn (aldrig två kolumner bredvid varandra). Fält i full bredd. Ett fält per rad. Knappar som går att trycka på med minst 48 px höjd. Tydlig förloppsindikator överst i formuläret. Använd mobilens inbyggda fält (datumväljare, tangentbordstyp) för att minska skrivandet. Mobilen har över 85 % övergivna köp, och det är avgörande att åtgärda.
Hur hjälper WEMASY till med kassaformulär för webbshop?
Med WEMASY:s formulärbyggare kan du designa kassaformulär med inbyggd betalningsintegration, autofyll, adressökning, förloppsindikatorer och mobiloptimering. Koppla formulär direkt till lagret i din webbshop, ställ in villkorslogik för att visa eller dölja fält utifrån leveranssätt eller plats och A/B-testa varianter av kassan för att se vad som konverterar bäst. Se hur formulär passar in i WEMASY:s webbshopssystem på /pricing.

Använd det direkt
på din egen webbplats.

Börja gratis med WEMASY och bygg din sajt på några minuter.