Bästa praxis för kassasidor: Så designar du för konvertering, tydlighet och förtroende

Checkout
Checkout

Stripe Checkout är ett färdigt betalningsformulär optimerat för konvertering. Integrera Checkout på din webbplats för att på ett enkelt och säkert sätt ta emot engångsbetalningar eller abonnemang.

Läs mer 
  1. Introduktion
  2. Vad är en kassasida?
  3. Vilka är de viktigaste komponenterna i en kassasida med hög konverteringsgrad?
    1. Välstrukturerade inmatningsformulär
    2. Synliga och korrekta beställningssammanfattningar
    3. Flexibla betalningsavsnitt
    4. Visuellt distinkt uppmaning till handling
    5. Förloppsindikatorer för flöden med flera steg
    6. Alternativ för att handla som gäst
    7. Strategiska fält för kampanjkoder
    8. Faktiskt hjälpsam felhantering
    9. Subtila men betydelsefulla säkerhetssignaler
    10. Tillgång till support och policyer
  4. Hur påverkar visuell enkelhet och förtroendesignaler kassasidan?
    1. Visuell enkelhet
    2. Förtroendesignaler
  5. Hur bör du hantera valideringsfel och betalningsfel på kassasidan?
    1. Valideringsfel
    2. Misslyckade betalningar

Kassor kan misslyckas i sista stund – inte för att något var fel med produkten eller att priset var för högt, utan för att kassasidan var för förvirrande, för långsam eller inte kändes pålitlig. Kunder som väljer att inte slutföra sitt köp eftersom de är obekväma med att ge en webbplats sin kreditkortsinformation står för 19 % av övergivna kundvagnar. Detta påverkar alltså intäkterna direkt.

Nedan förklarar vi vad som gör en kassasida effektiv, vad som hindrar den och hur man hanterar vanliga problem.

Vad innehåller den här artikeln?

– Vad är en kassasida?
– Vilka är de viktigaste komponenterna i en kassasida med hög konverteringsgrad?
– Hur påverkar visuell enkelhet och förtroendesignaler kassasidan?
– Hur bör du hantera valideringsfel och misslyckade betalningar på kassasidan?

Vad är en kassasida?

Kassaskärmen är det sista steget i köpresan. Det är här kunderna anger sina betalningsuppgifter, granskar sin beställning och bekräftar betalningen.

Det här brukar finnas på en kassasida:

– En sammanfattning av vad kunden köper

– Formulärfält för kontakt-, frakt- och faktureringsuppgifter

– Ett avsnitt för att ange betalningsuppgifter

– En uppmaning-till-handlingsknapp för att slutföra beställningen

Det är på kassasidan som kunderna pausar och bestämmer om din webbplats känns tillräckligt trovärdig för att de ska lämna över personuppgifter och betalningsuppgifter. Allt på sidan – dess layout, språket och hur snygg den är – bekräftar eller undergräver det förtroendet.

Vilka är de viktigaste komponenterna i en kassasida med hög konverteringsgrad?

En kassasidas uppgift är att avsluta försäljningen. Varje designval bör stödja den uppgiften genom att göra det enklare, mer tryggt och mindre störande för kunderna att avsluta transaktionen.

Varje kassasida bör inkludera de här designelementen:

Välstrukturerade inmatningsformulär

Dåligt organiserade eller överdrivet krävande formulär kan driva bort kunder. Du bör inkludera:

– Tydliga rubriker för varje fält

– Logisk gruppering

– Standardinställningar som minskar ansträngningen (t.ex. automatisk ifyllning av faktureringsadress som leveransadress om inget annat anges)

  • Ett konsekvent inmatningsmönster (t.ex. rullgardinsmenyer för land, numeriska inmatningar för postnummer)

Varje fält som finns där bör vara där av en anledning. Be endast om den information du behöver för att fullfölja beställningen, och be om det på ett sätt som undviker förvirring eller upprepning.

Synliga och korrekta beställningssammanfattningar

Det är här som kunderna kontrollerar vad de köper och om totalsumman är korrekt. I en bra beställningssammanfattning ingår:

– Artikelnamn och antal

– Individuella pris och delsummepris

Skatt och fraktavgifter

– Tillämpade rabatter och kampanjkoder

– Den slutliga totalkostnaden

Allra helst visas sammanfattningen genom hela processen, särskilt under betalningen. Överraskande avgifter eller en ny summa i sista sekunden kan leda till förlorade försäljningar.

Flexibla betalningsavsnitt

Kredit- och bankkort är obligatoriska att ha med, men om du erbjuder alternativa betalningsmetoder, t.ex. e-plånböcker, banköverföringar och lokala betalningsmetoder, får kunderna mer flexibilitet. Låt användarna välja bland tillgängliga metoder, fyll sedan i de uppgifter du kan (t.ex. sparad kortinformation för återkommande användare) och använd formateringshjälpare, såsom automatiska mellanrum för kortnummer eller smarta inmatningar för datum då kortet löper ut.

Visuellt distinkt uppmaning till handling

Det är här som åtagande görs. Den primära åtgärden (t.ex. Gör beställning, Slutför köp) bör placeras på ett logiskt ställe i slutet av flödet och synas tydligt med kontrasterande färger eller en distinkt storlek. Knappen bör vara tydlig: ”Betala 64,99 USD och lägg beställning” är mer effektivt än ”Betala nu”.

Gör sekundära åtgärder (såsom ”Tillbaka till kundvagnen”) visuellt nedtonade för att undvika konkurrens med den främsta uppmaningen till åtgärd (CTA).

Förloppsindikatorer för flöden med flera steg

Om din kassa sträcker sig över flera sidor bör du visa användaren var hen befinner sig i den processen. Använd en enkel visuell tidslinje som listar varje steg, markerar det aktuella steget och visar vad som kommer härnäst. Detta ger användarna en känsla av att röra sig framåt.

Alternativ för att handla som gäst

Att tvinga kunder att skapa ett konto innan de köper kan leda till förlorade försäljningar.

En bättre strategi är att tillåta dem att handla som gäster som standard och erbjuda kontoskapande efter köp (t.ex. ”Vill du spara dina uppgifter till nästa gång?”). Om konton behövs kan du ha stöd för snabba alternativ som Google- eller Apple-inloggning.

Strategiska fält för kampanjkoder

Om ditt företag använder rabattkoder behöver du en plats på din kassasida där kunderna anger dem utan att detta område dominerar skärmen.

I ett bra format ingår följande:

– En liten länk (t.ex. ”Har du en kampanjkod?”) som expanderas med ett klick

– Omedelbar validering av angivna koder

– Omedelbar ändring av beställningssumman vid eventuella tillämpade rabatter

Faktiskt hjälpsam felhantering

När något går fel är tydlighet viktigare än design. Markera ogiltiga eller saknade fält precis bredvid eller i fältet och använd enkelt språk som förklarar vad som behöver åtgärdas. Bevara användarens inmatning när fel uppstår och fokusera användarens markör på det första fältet där det finns ett problem. Dina felmeddelanden bör hjälpa dina användare att lyckas, inte tvinga dem att börja om.

Subtila men betydelsefulla säkerhetssignaler

Kunder tvekar ibland innan de anger känslig information. Smarta kassasidor ger dem skäl att känna sig trygga. Bland förtroendesignaler kan det finnas:

– En låsikon med ”Säker kassa – TLS-krypterad” (Transport Layer Security)

– Logotyper för godkända betalningsmetoder

– Korta påminnelser om retur- eller återbetalningspolicyer

– Omnämnande av efterlevnad av betalkortbranschens standarder för datasäkerhet (PCI)

Om du använder en lösning som Stripe Checkout, kan en liten anteckning i stil med ”Drivs av Stripe” ge extra trygghet.

Tillgång till support och policyer

Förvänta dig de frågor och funderingar som kunderna kan ha och visa användarna att du finns där om något går fel. Inkludera en ”Behöver du hjälp?”-länk, ett telefonnummer eller en chattwidget, och lägg till länkar till din returpolicy, fraktuppgifter och sekretessvillkor. Placera dessa nära CTA eller i sidfoten.

Hur påverkar visuell enkelhet och förtroendesignaler kassasidan?

När kunden går till kassan bör ditt fokus vara på att ta bort alla kvarstående tvivel och fördröjningar. Två faktorer har stor påverkan här: visuell enkelhet och förtroende.

Så här kan de påverka kunden i detta kritiska ögonblick.

Visuell enkelhet

Enkelhet på kassaskärmen minskar mängden arbete en kund måste göra för att slutföra transaktionen.

Det här är det som är viktigast:

Ingen oreda: När det är trångt på skärmen är det svårare att fokusera, och det kan vara otydligt vad nästa steg är. Den osäkerheten kan sakta ner folk eller få dem att ge upp.

Ren layout: Om en användare omedelbart kan ögna igenom sidan och förstå vad de köper, vad det kostar, var hen ska ange sina uppgifter och hur hen ska slutföra processen, är det lättare att slutföra den.

Hastighet: Enklare webbsidor brukar läsas in snabbare. Några sekunders avlastad tid kan betyda färre övergivna kundvagnar, särskilt när användare är på långsammare nätverk eller går till kassan när de är på väg någonstans.

Kassasidan bör kännas som en tydlig, enkel väg från ”Granska” till ”Betala” utan distraktioner som konkurrerar om användarens uppmärksamhet.

Förtroendesignaler

Vid kassan överlämnar kunden känslig information och betalningsuppgifter. Oavsett hur starkt ditt projekt är kan det här sista steget skapa tvivel. Subtila signaler på kassasidan hjälper till att överbrygga det gapet.

Det här är det som fungerar:

Bekantskap: Att inkludera logotyper från Visa, Mastercard, PayPal, Apple Pay och andra vanliga betalningsmetoder kan hjälpa användarna att känna sig bekväma eftersom det visar att din webbplats fungerar med samma system som de använder på andra ställen.

Säkerhetsindikatorer: En låsikon med ”Säkert köp”, certifikat för Secure Sockets Layer (SSL)/TLS eller en anteckning om krypterade betalningar kan öka förtroendet, särskilt för nya kunder.

Transparens: Dolda avgifter eller överraskningar i priset är en omedelbar varningssignal. Visa användarna fraktkostnader, skatt och returpolicyer innan de betalar.

Professionell yta: Visuell kvalitet spelar roll. En kassasida med stavfel, dålig formatering eller felaktigt justerade element kan se misstänksam ut. Ren design och tydlig text signalerar att företaget är kompetent och legitimt.

Socialt bevis: En subtil rad, till exempel ”Betygsatt 4,8/5 av mer än 10 000 kunder” eller ett kort intygande kan öka känslan av säkerhet ännu mer – om det placeras på ett genomtänkt ställe och används sparsamt.

Försäkran efter misslyckande: Även när en betalning misslyckas, spelar det roll hur du hanterar det. Ett enkelt meddelande som förklarar vad som gick fel får användaren att känna sig trygg och ger hen en väg framåt. Förvirrande eller generiska felmeddelanden gör motsatsen.

Hur bör du hantera valideringsfel och betalningsfel på kassasidan?

Oavsett hur väl utformad din kassa är, kommer besökare att göra misstag och vissa betalningar kommer inte att gå igenom. Det är ditt jobb att hjälpa kunderna att komma tillbaka från sådana händelser utan att förlora försäljningen.

Så här hanterar du valideringsfel (problem med de data som användaren anger) och betalningsfel (när transaktionen inte går igenom).

Valideringsfel

Skrivfel, missade fält och felaktig formatering är alla vanliga valideringsfel. När dessa inträffar behöver du snabbt och tydligt flagga dem på ett sätt som låter användaren fortsätta framåt.

Här är några tips:

Flagga fel direkt: Om användaren skriver fel e-postadress eller lämnar ett obligatoriskt fält tomt ska det markeras omedelbart, inte efter att hen tryckt på Betala.

Var specifik: Berätta exakt vad som gått fel och hur man åtgärdar det. Till exempel: ”Vänligen ange en giltig postnummer” eller ”Kortnumret är för kort”.

Visa meddelanden i eller bredvid fältet: Använd inte en generell banner. Användare ska aldrig behöva rulla eller leta för att hitta vad som gick fel.

Bevara inmatningen: Om någon gör ett misstag i ett fält ska inte resten av formuläret raderas. Att ange allt igen gör kassaprocessen mödosam.

  • Planera för vanliga problem: Acceptera flera format för telefonnummer. Fyll i staden automatiskt baserat på postnumret. Låt användare klistra in sitt kortnummer, även om det innehåller mellanslag. Utforma sidan efter människors beteende.

Misslyckade betalningar

I den här delen av processen har kunden fyllt i sina uppgifter och bestämt sig för att köpa. Om något går fel nu blir kunden förmodligen frustrerad, orolig eller både och.

Det här kan du göra för att förhindra att det leder till en förlorad beställning:

Var direkt och transparent: Ange tydligt att betalningen inte gick igenom och bekräfta att kunden inte har debiterats. Undvik vaga fel och tekniska koder.

Förklara vad kunden ska göra härnäst: Berätta om kunden ska ange sina betalningsuppgifter igen, prova en annan betalningsmetod eller kontakta sin bank.

Behåll uppgifterna och kundvagnen: Om kundens betalning misslyckas bör de kunna försöka igen direkt utan att börja om från början.

Ge kunden alternativ: Om en betalning misslyckas kan du föreslå en alternativ metod. Om betalning med ett kort nekas, uppmana dem att kontrollera efter skrivfel eller prova ett annat kort.

Undvik oändliga återförsök: Om samma betalning misslyckas mer än en gång kan du ge kunden mer vägledning eller eskalera ärendet till supporten. Låt inte kunden trycka på Betala igen och igen utan feedback.

Ge en annan väg att gå: Visa en supportlänk eller kontaktmetod om kunden inte vet hur hen ska gå vidare. Lägg till meddelanden som: ”Har du fortfarande problem? Vårt team kan hjälpa till.”

Kommunicera om tiden: Om lagret är begränsat eller tidpunkten är känslig (t.ex. med evenemangsbiljetter eller rea), kan du låta användarna veta att beställningen reserveras under en begränsad tid. En rad i stil med ”Vi reserverar dina artiklar i tio minuter medan du slutför betalningen” ger utrymme att lösa problemet.

När en betalning misslyckas blir det momentet ett test för huruvida ditt system ger kunden stöd eller lämnar hen i sticket. Här kan små detaljer göra stor skillnad.

Innehållet i den här artikeln är endast avsett för allmän information och utbildningsändamål och ska inte tolkas som juridisk eller skatterelaterad rådgivning. Stripe garanterar inte att informationen i artikeln är korrekt, fullständig, adekvat eller aktuell. Du bör söka råd från en kompetent advokat eller revisor som är licensierad att praktisera i din jurisdiktion för råd om din specifika situation.

Är du redo att sätta i gång?

Skapa ett konto och börja ta emot betalningar – inga avtal eller bankuppgifter behövs – eller kontakta oss för att ta fram ett specialanpassat paket för ditt företag.
Checkout

Checkout

Integrera Checkout på din webbplats eller skicka kunder till en Stripe-baserad sida för att på ett enkelt och säkert sätt ta emot engångsbetalningar eller abonnemang.

Dokumentation om Checkout

Bygg ett kodsnålt betalningsformulär och integrera det på din webbplats eller basera den hos Stripe.