Împărțirea intrărilor de carduri de credit în atomi - de ce este atât de important designul UX perfect?

În calitate de designer UI la Netguru, am fost implicat în diferite proiecte fintech în ultimele câteva luni. Având în vedere toate punctele de durere ale acestor aplicații, am realizat că un model nu este suficient de gândit - formulare care vă permit să introduceți detaliile cardului de plată. Există diferite contexte ale acestei proceduri, dar întotdeauna, indiferent de situație, este un pas crucial și obligatoriu fie pentru a termina achiziția, fie pentru a începe utilizarea aplicației.

Datele: statistici ale Băncii Centrale Europene

În prezent avem sute, dacă nu mii, de metode de plată - variază în funcție de regiune și de dezvoltarea acesteia. Cu toate acestea, potrivit Băncii Centrale Europene, în 2017, 51,6% din plăți au fost efectuate folosind carduri de plată. Aceasta ne oferă 135 de plăți cu cap de locuitor. Plățile prin e-mail au avut doar o cotă de 2,6%, dar, ceea ce este mai important, cota lor a crescut cu 20,3% față de anul precedent. Concluziile din aceste statistici sunt destul de clare - cardurile de plată sunt la maximul lor - sunt fiabile, ușor de utilizat, disponibile în întreaga lume și, cel mai important, sunt ferm implantate în rutinele noastre zilnice.

Ce înseamnă pentru persoanele implicate în crearea de interfețe digitale? În primul rând, suntem obligați să oferim soluții perfecte care să sprijine utilizatorii pe întregul proces de introducere a datelor găsite pe un card fizic. În al doilea rând, nu ar trebui să ignorăm plățile prin bani electronici, care cresc constant și se îmbunătățesc pe parcurs. Cu siguranță nu știm ce ține viitorul, însă, pe baza tendințelor actuale, putem încerca să-l prezicem - cardurile de plată vor fi folosite mai rar și banii electronici vor deveni, mai lent, dar inevitabil, mai accesibili. Cu toate acestea, deocamdată, să ne concentrăm pe prezent: care sunt metodele disponibile pentru a introduce date în dispozitivele noastre?

Dezvoltare uriașă în tehnologie

Smartphone-urile moderne sunt ambalate cu date, astfel că au diverse metode de introducere. Avem tastaturi, camere și microfoane pe ecran. Toate acestea evoluează și se îmbunătățesc și datorită progresului constant al industriei hardware, în fiecare an sunt din ce în ce mai aproape de a fi perfect proiectate.

Tastaturile sunt din ce în ce mai aproape de a fi ideale - în principal datorită senzorilor tactili mai exacti și alegerilor mai bune de proiectare, de ex. indicii contextuale, afișare specifică cazurilor de utilizare (cum ar fi tastatele numerice), etc. Fotografiile de la camerele care pot fi găsite pe fiecare dispozitiv modern sunt acum incredibil de clare. Cum putem folosi toată această mare tehnologie?

Scanare, formular cu mai multe intrări și formular cu o singură intrare

Scanare: Camerele foto găsite în dispozitivele moderne sunt extraordinar de precise și de exacte. Adăugarea unei bucăți moderne de cod de auto-îmbunătățire ne permite să citim datele găsite pe card în câteva secunde. Din cauza problemelor de confidențialitate, codurile de securitate sunt adesea introduse manual.

Forme cu mai multe intrări: un model comun bazat pe divizarea procesului de introducere a datelor în câteva secțiuni de intrare. O secțiune solicită utilizatorului să-și introducă numele și prenumele, o altă solicită numărul cardului și așa mai departe.

Formular cu o singură intrare: Ideea este să agregăm toate informațiile necesare într-o singură intrare. Din fericire, este un model relativ neobișnuit, deoarece simplifică doar procesul care nu este ușor în primul rând. Dar de ce se întâmplă? Din cauza skeuomorfismului!

„Skeuomorfismul este un termen cel mai des utilizat în proiectarea grafică a interfeței cu utilizatorul pentru a descrie obiecte de interfață care imită omologii lor din lumea reală în felul în care apar și / sau în modul în care utilizatorul poate interacționa cu aceștia. Un exemplu binecunoscut este pictograma coșului de reciclare utilizat pentru aruncarea fișierelor. Skeuomorfismul face ca obiectele de interfață să fie familiare utilizatorilor prin utilizarea conceptelor pe care le recunosc. "

Dar nu este deja mort? Da și nu. Atunci când luăm în considerare aspectul vizual, acesta a fost într-adevăr îngropat în mare parte odată cu lansarea iOS 7 și OS X Yosemite, dar, conform definiției de mai sus, skeuomorfismul nu se referă doar la aspectul lucrurilor, ci și la modul în care funcționează.

Înainte de a proiecta un formular de introducere, asigurați-vă că veți petrece câteva momente pentru cercetare. Scoateți unul dintre acele cărți de plastic din portofel și investigați detaliat designul acestuia. De unde știți că acesta este un card de plată? Care sunt caracteristicile sale distinctive? Pe lângă faptul că ia în considerare elemente specifice, precum o bandă magnetică sau un cip electronic, acordă o atenție deosebită aspectului său - ordinea informațiilor.

Scanarea ca fiind cea mai fiabilă, mai sigură și cea mai rapidă metodă

În opinia mea, utilizarea scanării ca metodă principală de introducere a datelor are multe avantaje. În primul rând, este mult mai rapid decât introducerea manuală a datelor. Dacă este pusă în aplicare corect, nu ar trebui să creeze probleme, cum ar fi interpretarea greșită a informațiilor de pe card. Un alt beneficiu uriaș este aducerea unei mici contribuții la prevenirea fraudei, pentru că pentru a scana o carte trebuie să o ai pe tine.

Forma ideală - 7 reguli de aur

Ca în orice caz, este dificil să se prevadă reguli stricte pentru fiecare scenariu posibil. Cu toate acestea, luați în considerare aceste șapte reguli pentru a face ca formularul dvs. să conducă utilizatorul la obiectiv într-o manieră plăcută.

  1. Ordine și formă corectă și logică
    După cum am menționat anterior, este foarte important să păstrați comanda similară cu o carte fizică. Acest lucru ajută utilizatorii să scaneze rapid formularul. Citesc informațiile în ordine și le completează în consecință. În plus, evitați să utilizați culegători de date - uitați-vă doar la card. Nu se spune ianuarie 2020, dar 01/20. Același lucru este valabil și pentru numărul cardului, care este de obicei împărțit în bucăți de 4 cifre. Asigurați-vă că o prezentați în același mod.
  2. Solicitați informațiile necesare
    Solicitarea numelui complet și a adresei titularului de card poate fi o măsură de securitate suplimentară, dar nu trebuie să o faceți întotdeauna. De exemplu, dacă aplicația dvs. face KYC (procesul de verificare a identității bazat pe un document și o fotografie) înainte, știți deja numele complet. Asigurați-vă că reutilizați informațiile date anterior. Numărul cartelei include mult mai multe informații decât vă așteptați De exemplu, nu trebuie să întrebați despre tipul cardului, deoarece acesta poate fi ușor decodat din numărul.
  3. Utilizați tipul de tastatură corect
    Această regulă este simplu de pus în aplicare, dar foarte des uitată. Smartphone-urile noastre au câteva tipuri de tastaturi în funcție de context. Avem o versiune specială pentru a introduce adresa noastră de e-mail, numărul de telefon sau adresa paginii web. Utilizați o tastatură numerică pentru a facilita introducerea numărului CVV pentru client.
  4. Reprezentarea vizuală este un plus frumos
    Dacă aveți resursele necesare, arătați o reprezentare vizuală a cardului care se actualizează pe măsură ce datele utilizatorului introduc detalii. Verifică dacă datele sunt corecte va fi mult mai rapid în acest fel.
  5. Minimizați erorile, informați clar dacă apar
    Asigurați-vă că respectați regulile de bază privind accesibilitatea, cum ar fi contrastul corespunzător, dimensiunea fontului și așa mai departe. Acest lucru va reduce cel mai probabil numărul de erori, deoarece formularul dvs. va fi ușor de citit și de scanat. Cu toate acestea, dacă apar unele erori, asigurați-vă că puneți un indiciu lângă locul în care utilizatorul trebuie să corecteze unele informații.
  6. Activați servicii terțe care au deja detalii (ex. Apple Pay)
    Dacă este posibil, activați serviciile terților pe care le utilizați deja utilizatorul dvs. Ar putea fi la fel de simplu precum activarea Apple Pay sau implementarea PayPal ca metodă de plată. Respectând această regulă simplă, vă puteți îmbunătăți mult ratele de conversie
  7. Securitate - oferă o soluție de încredere
    Asigurați-vă că datele private ale utilizatorilor sunt în siguranță de partea dvs. Un alt pas ar fi să vă informați utilizatorii despre precauții. Ar putea fi orice - o pictogramă subtilă, un mic indiciu sau doar un design curat. Asigurarea utilizatorilor cu privire la confidențialitatea lor va face produsul dvs. mai de încredere. Nu complicați, nu adăugați produse detaliate despre securitatea în acest loc - un mic indiciu va fi mai mult decât suficient.

Pentru a rezuma ...

Având în vedere datele furnizate, putem fi siguri că cardurile de plată sunt cea mai universală și accesibilă metodă de plată pentru majoritatea utilizatorilor. De fapt, este a doua cea mai populară metodă, imediat după numerar. Acesta este motivul pentru care formularele perfect concepute sunt la îndemână. Plățile prin e-mail urmăresc în mod dinamic alte metode de plată, dar va trece mult timp până când acestea sunt la fel de populare.

  • Urmați același aspect de informații găsit pe omologul fizic,
  • Scanarea ar trebui să fie o metodă principală, dar nu singura,
  • Urmați principiile de proiectare a accesibilității,
  • Informarea utilizatorului despre securitate,
  • Amintiți-vă întotdeauna despre utilizator.

Care este opinia ta? Te-ai confruntat cu probleme similare în timp ce proiectați pentru fintech? Împărtășește-ți părerea în secțiunea de comentarii și dacă ai găsit aceste informații utile - lasă un aplaz.

Consultați blogul Netguru pentru mai multe articole de design interesante și Swap Behance Studiu de caz, care a stat la baza acestui articol.

Mulțumesc pentru toți cei implicați în citirea și feedback-ul dovezii: Patrycja Paczkowska, Mateusz Przytuła, Luke Pachytel, Toto Castiglione, Natalia Chrzanowska