Ett kreditkortsformulär är ett moment med hög friktion i kassaflödet online. Formuläret ber kunderna att avbryta det de gör, plocka fram ett fysiskt objekt och överlämna känsliga ekonomiska uppgifter till ett företag – samtidigt som de försöker att inte göra fel när de anger en lång sträng av siffror på sin dator eller mobila enhet. Det gör att utformningen av användargränssnittet (UI) för kreditkortskassan är en av de viktigaste delarna av köpprocessen. Globala kreditkortstransaktioner förväntas öka från 16,06 biljoner USD 2023 till 20 biljoner år 2029, så det är viktigt att företagen får rätsida på det här.

Nedan förklarar vi hur man utformar ett kortformulär som känns snabbt, tydligt och pålitligt.

Vad innehåller den här artikeln?

– Vilka är de viktigaste elementen i UI för en kreditkortskassa?
– Hur gör man kreditkortsformulär enkla, snabba och funktionella?
– Hur ska du hantera felmeddelanden och inmatningsvalidering för kreditkort?

Vilka är de viktigaste elementen i ett UI för kreditkortskassans?

I ett väl utformat kortformulär ingår endast det som behövs för att slutföra en betalning. Här är vad som bör ingå i varje UI för en kreditkortskassa och varför varje del är viktig:

– Kortnummerfält: Acceptera alla stora korttyper och auto-detektera kortmärket medan användaren skriver, baserat på de första siffrorna. Visa den relevanta kortlogotypen eftersom små, bekanta visuella element som Visa- eller American Express-ikonen kan hjälpa till att betrygga användarna att du accepterar deras korttyp.

– Datum då kortet löper ut: Inmatningen bör vara i MM/ÅÅ-format. Infoga snedstrecket automatiskt efter de första två siffrorna. Hoppa över rullgardinsmenyer med månad och år eftersom de gör processen långsammare. Formateringsuppmaningar (t.ex. en platshållare där det står ”MM/ÅÅ”) kan leda till färre misstag.

– Säkerhetskod eller kortverifieringsvärde (CVV): Märk det i klartext (”Säkerhetskod”) istället för att förlita dig på förkortningar. Lägg till en subtil hjälpikon som visar var man hittar koden på kortet. Detta är särskilt hjälpsamt för användare vars kod inte är på den vanliga platsen på baksidan.

– Kortinnehavarens namn: Använd en rubrik som ”Namn på kortet” och ha inte alltför strikta formateringskrav. Vissa team gör detta fält till versaler automatiskt.

– Faktureringspostnummer: Begär inte den fullständiga faktureringsadressen om du inte behöver den. Inkludera ett postnummerfält endast om det behövs för kontroller av adressverifieringstjänst (AVS). Håll formateringen tillräckligt bred för att stödja olika typer av internationella postnummer.

– Betala-knapp: Gör det uppenbart. Använd en handlingsinriktad text i fetstil som ”Betala nu” eller ”Lägg beställning”. Lägg till en låsikon på knappen för att signalera att sidan är säker.

Hur gör man kreditkortsformulär enkla, snabba och funktionella?

Ett bra kortformulär bygger på förväntningar av vad användaren försöker göra och gör det lättare för hen när hen använder det. Principerna bakom en kassasida som fungerar är, bland annat, att formatera inmatningar och bevara kontext.

– Inkludera endast det som är nödvändigt: Hoppa över alla fält som inte är strikt nödvändiga. Om du inte behöver hela faktureringsadressen, be inte om den. Om du har samlat in leveransadressen, erbjud en kryssruta för att faktureringsadressen ska vara samma som leveransadressen (och kryssa i den som standard).

– Utnyttja automatisk ifyllnad och smarta funktioner: Webbläsare och enheter kan göra en del av det tunga lyftet. På mobilen: Stöd kamerabaserad kortskanning där det är möjligt. Utforma dina fält så att de fungerar med inbyggd automatisk ifyllnad för att göra formuläret snabbare utan att ändra ditt UI. Använd verktyg som Link by Stripe för att låta återkommande kunder välja sina sparade kortuppgifter. Kom ihåg deras preferenser om de har använt formuläret tidigare. Smarta standarder gör att kassaflödet flyter på.

• Låt formuläret vägleda användaren medan hen skriver: Inmatningsformatering handlar om användbarhet och att förebygga fel. Gruppera kortnumret automatiskt i läsbara bitar (t.ex. 1111 2222 3333 4444) så att användaren kan dubbelkolla med en enda blick. Stöd kortspecifik formatering: American Express-kort följer till exempel ett 4-6-5-mönster, och UI bör anpassa sig efter det. Kör en Luhn-kontroll medan användaren skriver för att fånga upp uppenbara fel innan hen trycker på Skicka.
  

– Minimera arbete mellan fälten: Övergångar mellan fält bör kännas osynliga. Flytta markören framåt automatiskt när ett fält är klart – till exempel, från MM till ÅÅ i datumet då kortet löper ut. Infoga avskiljare, som snedstrecket i MM/ÅÅ, automatiskt. Detta tar bort ytterligare ett tillfälle där användaren kan tveka eller göra fel.

– Lägg till subtila förtroendesignaler: Du vill att användarna ska känna sig trygga när de anger sina betalningsuppgifter. Lägg till subtila visuella ledtrådar som en låsikon eller en kort rad text som indikerar att betalningen är säker. Se till att UI ser ut som resten av din webbplats – avvikande stil kan skapa tvivel. Undvik att omdirigera användare utan kontext. Om en omdirigering är nödvändig för en bedrägerikontroll, ska du förklara det innan det händer.

–Designa med mobilen i åtanke från början: De flesta människor föredrar nu mobiltelefoner för att göra onlineköp. Ditt formulär måste vara utformat för tummar. Använd numeriska inmatningstyper för nummerfält så att rätt tangentbord visas på mobilen. Håll layouten enkel: en kolumn, inga popup-fönster, inga svåra rullgardinsmenyer. Undvik widgets som kalenderdatumplockare för datumfält som inte fungerar bra på mindre skärmar.

När det är som bäst smälter ett kreditkortformulär in i bakgrunden. Användarna bör inte undra vilket format du förväntar dig, vilket steg som kommer härnäst, eller om de gjorde ett misstag. Åtgärda det snabbt om något går fel. Sinka inte användaren om allt går rätt. Stripe Elements har formateringsuppmaningar, realtidsvalidering och responsdesign inbakat i varje fält, men samma principer gäller oavsett vilka verktyg du använder.

Hur bör man hantera felmeddelanden och inmatningsvalidering för kreditkort?

Även i de bäst utformade betalningsformulären kommer det att ske misstag, såsom skrivfel, kort som löpt ut eller siffror som saknas. Hur ditt UI hanterar dessa moment är en nyckelkomponent för konvertering. Så här gör du det bra:

Validera inmatningar i realtid

Att fånga upp uppenbara problem tidigt hjälper användare att åtgärda problemen innan de skickar in dem. Tillämpa regler, såsom att datumet då kortet löper ut måste vara ett giltigt framtida datum och att CVV-värdet måste vara tre eller fyra siffror.

Timing spelar roll. Kör grundläggande kontroller medan användaren skriver (såsom Luhn-algoritmen för kortnumret), men ge inte användaren ett felmeddelande medan hen skriver. Vänta tills ett fält är komplett och validera efter det.

Gör felmeddelanden specifika och hjälpsamma

Generiska meddelanden som ”Ogiltig inmatning” är inte hjälpsamma. Var precis. ”Kortnumret är ofullständigt” eller ”Datumet då kortet löper ut verkar vara i det förflutna” ger användaren något de kan agera på.

Anpassa meddelandet till problemet: Var det formatering, saknade data eller något som nekades av betalleverantören?

Berätta alltid för användaren hur hen kan åtgärda problemet eller vad hen bör försöka härnäst.

Visa fel på rätt plats

Placeringen gör skillnad i hur snabbt en användare kan återhämta sig. Markera fältet visuellt: Visa meddelanden i, bredvid eller under fältet som orsakade problemet.

Om ett kort nekas är det okej att visa det felmeddelandet ovanför knappen för att skicka in eller högst upp, men kombinera det med relevant feedback på fältnivå också.

Bevara användarens inmatning när det är möjligt

Få saker är mer frustrerande för en kund än att behöva ange alla sina kortuppgifter igen på grund av ett litet misstag. Om det inte är absolut nödvändigt bör du inte radera kortfälten efter ett misslyckat försök. Om du måste rensa känsliga data, säg varför (”Av säkerhetsskäl har kortnumret rensats”).

Ännu bättre – förhindra fel innan användaren skickar in så att du inte riskerar att förlora hens data från början.

Erbjud en väg framåt

Ett felmeddelande ska aldrig göra så att användaren fastnar. Föreslå nästa steg: ”Försök att ange ditt kortnummer igen” eller ”Använd ett annat kort om detta avvisas igen”.

Om problemet verkar ligga på bankens sida, säg det: ”Din bank avvisade denna avgift. Ingen betalning gjordes.”

Ge fokus automatiskt till det första fältet med ett fel så att användaren snabbt kan åtgärda det.

Balansera tydlighet med säkerhet

Det finns en avvägning mellan att vara hjälpsam och att ge för mycket information, särskilt om du hanterar korttestare eller miljöer med hög bedrägeririsk. Om det behövs kan du gruppera fel (t.ex. ”Kortinformation kunde inte verifieras”) för att undvika att berätta för mycket för oseriösa aktörer. Se till att du vet vad din riskprofil är och justera din felstrategi därefter.

Ge feedback efter att användaren skickat in

När användare klickar på ”Betala” ska du inte låt dem undra vad som händer. Inaktivera knappen, visa en snurrande ikon eller byt text till ”Bearbetar …” medan betalningen pågår.

– När det lyckas visar du en sida om att betalningen gått igenom, ett kvitto eller en framgångsbanner.

– När det misslyckas berättar du det snabbt och informerar användarna om vad som hände och vad de ska göra åt det.

Använd validering för att bygga förtroende. Du berättar för användaren: ”Vi tar hand om detta. Om något går fel, kommer du att veta exakt vad och varför.” Den tryggheten kan göra så att användare fortsätter att ta sig framåt, även när saker inte går som planerat.