Razbijanje ulaza kreditne kartice u atome - zašto je savršen UX dizajn toliko važan?

Kao dizajner UI u Netguru, posljednjih sam mjeseci sudjelovao u raznim fintech projektima. Uzimajući u obzir sve bolne točke ovih aplikacija, shvatio sam da jedan obrazac nije dovoljno promišljen - obrasci koji vam omogućuju unos detalja o platnoj kartici. Postoje različiti konteksti ovog postupka, ali uvijek je, bez obzira na situaciju, presudan i obavezan korak bilo da završite kupnju ili počnete koristiti aplikaciju.

Podaci: Statistika Europske središnje banke

Trenutno imamo stotine, ako ne i tisuće, načina plaćanja - ono varira ovisno o regiji i njenom razvoju. Međutim, prema Europskoj središnjoj banci, u 2017. godini 51,6% plaćanja izvršeno je pomoću platnih kartica. To nam daje 135 plaćanja karticom po glavi stanovnika. Plaćanja putem e-novca imala su samo 2,6% udjela, ali što je još važnije, njihov je udio u odnosu na prošlu godinu porastao 20,3%. Zaključak iz ove statistike prilično je jasan - platne kartice su na najvišem nivou - pouzdane su, jednostavne za upotrebu, dostupne su u cijelom svijetu i, što je najvažnije, čvrsto se ugrađuju u naše svakodnevne rutine.

Što to znači za ljude koji su uključeni u stvaranje digitalnih sučelja? Prije svega, dužni smo dostaviti savršena rješenja koja podržavaju korisnike u cjelokupnom procesu unosa podataka koji se nalaze na fizičkoj kartici. Drugo, ne bismo trebali zanemariti plaćanje e-novcem, koji kontinuirano rastu i poboljšavaju se. Mi sigurno ne znamo što budućnost nosi, ali na temelju trenutnih trendova, možemo to pokušati predvidjeti - platne kartice će se koristiti rjeđe, a e-novac će polako, ali neizbježno postati pristupačniji. Za sada se usredotočimo na sadašnjost: koje su dostupne metode za unos podataka u naše uređaje?

Ogroman razvoj tehnologije

Moderni pametni telefoni prepuni su podataka, tako da imaju različite načine unosa. Imamo zaslonske tipkovnice, fotoaparate i mikrofone. Sve se to razvija i poboljšava, a zahvaljujući stalnom napretku hardverske industrije, svake se godine sve više približavaju savršenom dizajnu.

Tipkovnice su sve bliže i idealnije - uglavnom zahvaljujući preciznijim senzorima dodira i boljem izboru dizajna, npr. kontekstualni savjeti, zaslon specifičan za slučaj (poput numeričkih tipkovnica) itd. Fotografije s kamera koje se mogu naći na svakom modernom uređaju sada su nevjerojatno oštre. Kako možemo staviti sve te sjajne tehnologije u upotrebu?

Skeniranje, obrazac s više ulaza i obrazac s jednim ulazom

Skeniranje: Kamere pronađene u modernim uređajima izuzetno su precizne i precizne. Dodavanje modernog dijela samopoboljšavajućeg koda omogućuje nam čitanje podataka pronađenih na kartici u sekundi. Zbog brige o privatnosti, sigurnosni se kodovi često stavljaju ručno.

Oblici s više podataka: Uobičajeni obrazac koji se temelji na dijeljenju procesa unosa podataka u nekoliko ulaznih odjeljaka. Jedan odjeljak traži od korisnika da unese svoje ime i prezime, drugi traži broj kartice i tako dalje.

Obrazac s jednim ulazom: Ideja je objediniti sve potrebne informacije na jednom ulazu. Srećom, riječ je o prilično neuobičajenom obrascu, jer samo prekomplicira postupak koji uopće nije lak. Ali zašto se to događa? Zbog skeuomorfizma!

„Skeuomorfizam je pojam koji se najčešće koristi u grafičkom dizajnu korisničkog sučelja za opisivanje objekata interfejsa koji oponašaju njihove kolege u stvarnom svijetu u načinu na koji se pojavljuju i / ili kako korisnik može komunicirati s njima. Dobro poznat primjer je ikona koš za smeće koja se koristi za odbacivanje datoteka. Skeuomorfizam čini objekte sučelja korisnima pomoću koncepata koje prepoznaju. "

Ali nije li već mrtva? Da i ne. Kada se razmotri vizualni aspekt, on je zaista bio zatrpan izdanjem iOS-a 7 i OS X Yosemite, ali prema gornjoj definiciji, skeuomorfizam nije samo u tome kako stvari izgledaju, već i u načinu na koji rade.

Prije dizajniranja obrasca za unos, svakako provedite nekoliko trenutaka na istraživanju. Izvadite jednu od onih plastičnih kartica iz novčanika i temeljito istražite njen dizajn. Kako znate da se radi o platnoj kartici? Koje su njegove odlike? Osim razmatranja specifičnih elemenata poput magnetske trake ili elektroničkog čipa, obratite pažnju na njegov izgled - redoslijed informacija.

Skeniranje kao najpouzdanija, sigurna i najbrža metoda

Po mom mišljenju, korištenje skeniranja kao primarne metode unosa podataka ima brojne prednosti. Prvo, mnogo je brže od ručnog unosa podataka. Ako se pravilno implementira, to ne bi trebalo uzrokovati probleme, poput pogrešnog tumačenja podataka na kartici. Još jedna velika prednost daje mali doprinos u prevenciji prijevara, a kako biste skenirali karticu, morate je imati na sebi.

Idealan oblik - 7 zlatnih pravila

Kao i u svemu, teško je osigurati stroga pravila za svaki mogući scenarij. Međutim, razmotrite ovih sedam pravila kako bi obrazac na ugodan način poveo korisnika do cilja.

  1. Pravi i logični poredak i oblik
    Kao što sam već spomenuo, vrlo je važno da redoslijed bude sličan fizičkoj kartici. To pomaže korisnicima da brže skeniraju obrazac. Informacije čitaju redom i u skladu s tim ispunjavaju. Pored toga, izbjegavajte korištenje odabirača datuma - samo pogledajte karticu. Ne piše siječanj 2020., već 01/20. Isto vrijedi i za broj kartice, koji je obično podijeljen na četiri broja. Obavezno ga predstavite na isti način.
  2. Zatražite samo potrebne informacije
    Zatražiti puno ime i adresu vlasnika kartice može biti dodatna mjera sigurnosti, ali to ne morate uvijek činiti. Na primjer, ako vaša aplikacija prethodno izvrši KYC (postupak provjere identiteta na osnovu dokumenta i fotografije), već znate puno ime. Obavezno upotrijebite prethodno navedene podatke. Broj kartice uključuje mnogo više podataka nego što očekujete. Na primjer, ne morate pitati o vrsti kartice jer se to lako može dekodirati s broja.
  3. Korisnik ispravne vrste tipkovnice
    Ovo je pravilo jednostavno provesti, ali vrlo često zaboravljeno. Naši pametni telefoni imaju nekoliko vrsta tipkovnica ovisno o kontekstu. Imamo posebnu verziju za unos naše adrese e-pošte, telefonskog broja ili adrese web stranice. Pomoću numeričke tipkovnice olakšajte unos CVV broja.
  4. Vizualna reprezentacija lijep je dodatak
    Ako imate potrebne resurse, pokažite vizualni prikaz kartice koja se ažurira kao korisnik unosi pojedinosti. Provjera jesu li podaci točni bit će mnogo brži na ovaj način.
  5. Umanjite pogreške, jasno obavijestite ako se pojave
    Obavezno se pridržavajte osnovnih pravila pristupačnosti, poput pravilnog kontrasta, veličine fonta i tako dalje. To će najvjerojatnije smanjiti broj pogrešaka, jer će se vaš obrazac lako čitati i skenirati. No, ako se pojave neke pogreške, obavezno stavite nagovještaj pored mjesta na kojem korisnik mora ispraviti neke podatke.
  6. Omogućite usluge treće strane o kojima su već navedeni detalji (npr. Apple Pay)
    Ako je moguće, omogućite usluge treće strane koje vaš korisnik već koristi. To može biti jednostavno poput omogućavanja Apple Paya ili provođenja PayPala kao načina plaćanja. Slijedeći ovo jednostavno pravilo može uvelike poboljšati stope konverzije!
  7. Sigurnost - pružite pouzdano rješenje
    Provjerite jesu li privatni podaci korisnika sigurni na vašoj strani. Drugi je korak informiranje korisnika o mjerama opreza. To bi moglo biti bilo što - suptilna ikona, mali nagovještaj ili samo čisti dizajn. Uvjeravanje korisnika u njihovu privatnost učinit će vaš proizvod pouzdanim. Nemojte komplicirati, nemojte dodavati velike detalje o sigurnosti na ovom mjestu - mali nagovještaj bit će više nego dovoljan.

Da sumiram ...

Uzimajući u obzir pružene podatke, možemo biti sigurni da su platne kartice najopćenitiji i pristupačniji način plaćanja za većinu korisnika. U stvari, to je druga najpopularnija metoda, odmah nakon gotovine. To je razlog zašto savršeno izrađeni dizajnirani oblici dobro dolaze. E-plaćanja dinamično jure druge načine plaćanja, ali proći će dosta vremena prije nego što budu podjednako popularna.

  • Slijedite isti izgled informacija koji su pronađeni na fizičkom kolegi,
  • Skeniranje bi trebalo biti primarna, ali ne i jedina metoda,
  • Slijedite načela dizajna pristupačnosti,
  • Obavijestiti korisnika o sigurnosti,
  • Uvijek zapamtite o korisniku.

Kakvo je vaše mišljenje? Jeste li se suočavali sa sličnim problemima dok ste dizajnirali za fintech? Podijelite svoje mišljenje u odjeljku s komentarima i ako su vam ove informacije bile korisne - ostavite pljesak.

Pogledajte Netguru blog za zanimljivije članke o dizajnu i Swap Behance Case case koji je bio osnova za ovaj članak.

Hvala svima koji su uključeni u čitanje i povratne informacije: Patrycja Paczkowska, Mateusz Przytuła, Luke Pachytel, Toto Castiglione, Natalia Chrzanowska