Opdeling af kreditkortindgange i atomer - hvorfor er perfekt UX-design så vigtigt?

Som UI-designer hos Netguru var jeg involveret i forskellige fintech-projekter i de sidste par måneder. I betragtning af alle smertepunkterne for disse apps, indså jeg, at et mønster ikke er gennemtænkt nok - formularer, der giver dig mulighed for at indtaste betalingskortoplysninger. Der er forskellige sammenhænge ved denne procedure, men altid, uanset situationen, er det et afgørende og obligatorisk trin at enten afslutte købet eller begynde at bruge appen.

Data: Den Europæiske Centralbanks statistik

I øjeblikket har vi hundreder, hvis ikke tusinder, af betalingsmetoder - det varierer afhængigt af regionen og dens udvikling. I henhold til Den Europæiske Centralbank blev 51,6% af betalingerne dog i 2017 foretaget ved hjælp af betalingskort. Dette giver os 135 kortbetalinger pr. Indbygger. E-pengebetalinger havde kun en andel på 2,6%, men hvad der er vigtigere, voksede deres andel 20,3% fra året før. Konklusionen fra disse statistikker er temmelig klar - betalingskort er på det højeste - de er pålidelige, lette at bruge, tilgængelige over hele verden og vigtigst af alt, fast implanteret i vores daglige rutiner.

Hvad betyder det for mennesker, der er involveret i oprettelsen af ​​digitale grænseflader? Først og fremmest er vi forpligtet til at levere perfekte løsninger, der understøtter brugere i hele processen med at indtaste de data, der findes på et fysisk kort. For det andet bør vi ikke ignorere betalinger til e-penge, der støt vokser og bliver bedre undervejs. Vi ved bestemt ikke, hvad fremtiden har, men ud fra de nuværende tendenser kan vi prøve at forudsige det - betalingskort bruges sjældnere og e-penge vil langsomt, men uundgåeligt blive mere tilgængelige. Lad os dog nu fokusere på nutiden: hvad er de tilgængelige metoder til at indtaste data på vores enheder?

Kæmpe udvikling inden for teknologi

Moderne smartphones er fyldt med data, så de har forskellige inputmetoder. Vi har tastaturer, kameraer og mikrofoner på skærmen. Alle disse udvikler sig og forbedres, og takket være den konstante fremgang i hardwareindustrien kommer de hvert år tættere på at blive perfekt konstrueret.

Tastaturer bliver tættere og tættere på at være ideelle - primært takket være mere nøjagtige berøringssensorer og bedre designvalg, f.eks. kontekstuelle tip, specielt display (f.eks. numeriske tastaturer) osv. Fotos fra kameraer, der kan findes på alle moderne enheder, er nu utroligt skarpe. Hvordan kan vi bruge al den fantastiske teknologi i brug?

Scanning, multi-input form og single-input form

Scanning: Kameraer, der findes i moderne enheder, er ekstraordinært nøjagtige og nøjagtige. Ved at tilføje et moderne stykke selvforbedrende kode kan vi læse de data, der findes på kortet på få sekunder. På grund af privatlivets fred anbringes sikkerhedskoderne ofte manuelt.

Formularer med flere input: Et almindeligt mønster baseret på at opdele processen med at indtaste dataene i et par input-sektioner. Den ene sektion beder en bruger om at indtaste deres navn og efternavn, en anden beder om kortnummeret og så videre.

Formular med enkelt input: Idéen er at samle alle de nødvendige oplysninger i et enkelt input. Heldigvis er det et relativt usædvanligt mønster, da det kun overkomplicerer processen, der ikke er let i første omgang. Men hvorfor sker det? På grund af skeuomorfisme!

”Skeuomorphism er et udtryk, der oftest bruges i grafisk brugergrænsefladesign til at beskrive interfaceobjekter, der efterligner deres virkelige modstykker i hvordan de ser ud og / eller hvordan brugeren kan interagere med dem. Et velkendt eksempel er papirkurven ikonet, der bruges til at kassere filer. Skeuomorphism gør interfaceobjekter kendte for brugerne ved at bruge koncepter, de genkender. ”

Men er den ikke allerede død? Ja og nej. Når man overvejer det visuelle aspekt, blev det faktisk for det meste begravet med frigivelsen af ​​iOS 7 og OS X Yosemite, men ifølge definitionen ovenfor handler skeuomorfisme ikke kun om, hvordan tingene ser ud, det handler også om, hvordan de fungerer.

Inden du designer en inputformular, skal du sørge for at bruge et par øjeblikke på forskning. Tag et af disse plastikkort ud af din tegnebog, og undersøg dets design grundigt. Hvordan ved du, at dette er et betalingskort? Hvad er dens karakteristiske træk? Ud over at overveje specifikke elementer som en magnetbånd eller elektronisk chip, skal du være nøje opmærksom på dens layout - rækkefølgen af ​​information.

Scanning som den mest pålidelige, sikre og hurtigste metode

Efter min mening har brug af scanning som den primære metode til indtastning af data mange fordele. For det første er det meget hurtigere end at indtaste dataene manuelt. Hvis det er korrekt implementeret, bør det ikke medføre problemer, som forkert fortolkning af oplysninger på kortet. En anden enorm fordel er at yde et lille bidrag til forebyggelse af svig, for at scanne et kort skal du have det på dig.

Den ideelle form - 7 gyldne regler

Som med alt er det vanskeligt at give strenge regler for ethvert muligt scenario. Overvej imidlertid disse syv regler for at få din form til at føre din bruger til målet på en behagelig måde.

  1. Rigtig og logisk rækkefølge og form
    Som jeg har nævnt før, er det meget vigtigt at holde ordren ligner et fysisk kort. Dette hjælper brugere med at scanne formularen hurtigere. De læser oplysningerne i rækkefølge og udfylder dem i overensstemmelse hermed. Derudover skal du undgå at bruge dataplukkere - se bare på kortet. Det siger ikke januar 2020, men 01/20. Det samme gælder for kortnummeret, som normalt er opdelt i 4-cifrede bidder. Sørg for at præsentere det på samme måde.
  2. Spørg kun om nødvendige oplysninger
    At bede om kortholderens fulde navn og adresse kan være en ekstra sikkerhedsforanstaltning, men du behøver ikke altid at gøre det. Hvis din app f.eks. Gør KYC (identitetsverificeringsproces baseret på et dokument og foto) på forhånd, kender du allerede det fulde navn. Sørg for at genbruge oplysninger, der er givet før. Kortnummeret indeholder meget mere information, end du kunne forvente. For eksempel behøver du ikke at spørge om korttypen, da dette let kan afkodes fra nummeret.
  3. Bruger den rigtige tastaturtype
    Denne regel er enkel at implementere, men glemmes ofte. Vores smartphones har et par typer tastaturer afhængigt af konteksten. Vi har en speciel version til at indtaste vores e-mail-adresse, telefonnummer eller webside. Brug et numerisk tastatur til at gøre det nemt at indtaste CVV-nummeret for kunden.
  4. Visuel repræsentation er en dejlig tilføjelse
    Hvis du har de nødvendige ressourcer, skal du vise en visuel repræsentation af kortet, der opdateres, når brugeren indlæser detaljer. Det er meget hurtigere at kontrollere, om dataene er korrekte.
  5. Minimer fejl, informer klart, hvis de opstår
    Sørg for at følge de grundlæggende regler for tilgængelighed såsom korrekt kontrast, skriftstørrelse og så videre. Dette vil sandsynligvis minimere antallet af fejl, fordi din form er let at læse og scanne. Hvis der dog opstår nogle fejl, skal du sørge for at lægge et tip ved siden af ​​det sted, hvor brugeren skal rette nogle oplysninger.
  6. Aktivér tredjeparts tjenester, der allerede har detaljerne (f.eks. Apple Pay)
    Hvis det er muligt, skal du aktivere tredjeparts tjenester, som din bruger allerede bruger. Det kan være så simpelt som at aktivere Apple Pay eller implementere PayPal som en betalingsmetode. Ved at følge denne enkle regel kan dine konverteringsfrekvenser i høj grad forbedres!
  7. Sikkerhed - give en pålidelig løsning
    Sørg for, at brugernes private data er sikre på din side. Et andet trin ville være at informere dine brugere om forholdsreglerne. Det kan være alt - et subtilt ikon, et lille tip eller bare et rent design. At forsikre dine brugere om deres privatliv vil gøre dit produkt mere pålideligt. Komplicér ikke, tilføj ikke store detaljer om sikkerhed på dette sted - et lille tip vil være mere end nok.

For at opsummere det ...

I betragtning af de medfølgende data kan vi være sikre på, at betalingskort er den mest universelle og tilgængelige betalingsmetode for de fleste brugere. Faktisk er det den næst mest populære metode lige efter kontanter. Derfor er perfekt udformede designformer nyttige. E-betalinger forfølger dynamisk andre betalingsmetoder, men det vil vare lang tid, før de er lige så populære.

  • Følg det samme informationslayout som findes på det fysiske modstykke,
  • Scanning skal være en primær, men ikke den eneste metode,
  • Følg principper for tilgængelighedsdesign,
  • Informer brugeren om sikkerhed,
  • Husk altid om brugeren.

Hvad er din mening? Har du stødt på lignende problemer, mens du designer til fintech? Del din mening i kommentarfeltet, og hvis du fandt, at disse oplysninger var nyttige - lad et klap klappe.

Tjek Netguru-bloggen for mere interessante designartikler, og Swap Behance-casestudie, der lå til grund for denne artikel.

Tak for alle de mennesker, der er involveret i korrekturlæsning og feedback: Patrycja Paczkowska, Mateusz Przytuła, Luke Pachytel, Toto Castiglione, Natalia Chrzanowska