Rompere gli input delle carte di credito in atomi: perché un design UX perfetto è così importante?

Come designer dell'interfaccia utente di Netguru, negli ultimi mesi sono stato coinvolto in vari progetti fintech. Considerando tutti i punti deboli di queste app, mi sono reso conto che un modello non è abbastanza ponderato: moduli che ti consentono di inserire i dettagli della carta di pagamento. Esistono vari contesti di questa procedura, ma sempre, indipendentemente dalla situazione, è un passaggio cruciale e obbligatorio o terminare l'acquisto o iniziare a utilizzare l'app.

I dati: statistiche della Banca centrale europea

Al momento disponiamo di centinaia, se non di migliaia, di metodi di pagamento: varia a seconda della regione e del suo sviluppo. Tuttavia, secondo la Banca centrale europea, nel 2017 il 51,6% dei pagamenti è stato effettuato utilizzando carte di pagamento. Questo ci dà 135 pagamenti con carta pro capite. I pagamenti in moneta elettronica avevano solo una quota del 2,6% ma, cosa ancora più importante, la loro quota è cresciuta del 20,3% rispetto all'anno precedente. La conclusione da queste statistiche è piuttosto chiara - le carte di pagamento sono al massimo - sono affidabili, facili da usare, disponibili in tutto il mondo e, soprattutto, impiantate saldamente nelle nostre routine quotidiane.

Che cosa significa per le persone coinvolte nella creazione di interfacce digitali? Prima di tutto, siamo obbligati a fornire soluzioni perfette che supportano gli utenti durante l'intero processo di immissione dei dati trovati su una carta fisica. In secondo luogo, non dovremmo ignorare i pagamenti in moneta elettronica, che sono in costante crescita e migliorano lungo la strada. Certamente non sappiamo cosa riserva il futuro ma, in base alle tendenze attuali, possiamo provare a prevederlo: le carte di pagamento saranno utilizzate meno spesso e la moneta elettronica, lentamente, ma inevitabilmente, diventerà più accessibile. Tuttavia, per ora, concentriamoci sul presente: quali sono i metodi disponibili per inserire dati nei nostri dispositivi?

Enorme sviluppo tecnologico

Gli smartphone moderni sono pieni di dati, quindi hanno vari metodi di input. Abbiamo tastiere, videocamere e microfoni su schermo. Tutti questi si stanno evolvendo e migliorando e, grazie ai costanti progressi del settore hardware, ogni anno si avvicinano alla progettazione perfetta.

Le tastiere si stanno avvicinando sempre di più all'ideale, principalmente grazie a sensori tattili più precisi e migliori scelte di progettazione, ad es. suggerimenti contestuali, display specifico per casi d'uso (come tastiere numeriche), ecc. Le foto delle fotocamere che si possono trovare su tutti i dispositivi moderni sono ora incredibilmente nitide. Come possiamo utilizzare tutta questa grande tecnologia?

Scansione, modulo a più input e modulo a input singolo

Scansione: le fotocamere trovate nei dispositivi moderni sono straordinariamente precise e accurate. L'aggiunta di un moderno codice di auto-miglioramento ci consente di leggere i dati trovati sulla scheda in pochi secondi. Per motivi di privacy, i codici di sicurezza vengono spesso inseriti manualmente.

Moduli multi-input: un modello comune basato sulla divisione del processo di immissione dei dati in alcune sezioni di input. Una sezione chiede a un utente di inserire il proprio nome e cognome, un'altra chiede il numero della carta e così via.

Modulo a input singolo: l'idea è di aggregare tutte le informazioni necessarie in un singolo input. Fortunatamente, è un modello relativamente insolito, in quanto semplifica solo il processo che non è facile in primo luogo. Ma perché succede? Per via dello scuomorfismo!

"Skeuomorphism è un termine più spesso utilizzato nella progettazione grafica dell'interfaccia utente per descrivere gli oggetti dell'interfaccia che imitano le loro controparti del mondo reale nel modo in cui appaiono e / o in che modo l'utente può interagire con essi. Un esempio ben noto è l'icona del cestino usata per scartare i file. Lo skeuomorfismo rende gli oggetti di interfaccia familiari agli utenti usando concetti che riconoscono. "

Ma non è già morto? Sì e no. Quando si considera l'aspetto visivo, in effetti è stato per lo più seppellito con il rilascio di iOS 7 e OS X Yosemite ma, secondo la definizione sopra, lo sckeuomorfismo non riguarda solo l'aspetto delle cose, ma anche il loro funzionamento.

Prima di progettare un modulo di input, assicurati di dedicare qualche momento alla ricerca. Tira fuori una di quelle carte di plastica dal tuo portafoglio e studia attentamente il suo design. Come fai a sapere che si tratta di una carta di pagamento? Quali sono le sue caratteristiche distintive? Oltre a considerare elementi specifici come una banda magnetica o un chip elettronico, presta molta attenzione al suo layout: l'ordine delle informazioni.

Scansione come il metodo più affidabile, sicuro e veloce

A mio avviso, l'utilizzo della scansione come metodo principale di immissione dei dati ha molti vantaggi. Innanzitutto, è molto più veloce rispetto alla digitazione manuale dei dati. Se correttamente implementato, non dovrebbe causare problemi, come interpretare erroneamente le informazioni sulla scheda. Un altro enorme vantaggio è quello di dare un piccolo contributo alla prevenzione delle frodi, come per scansionare una carta che devi avere su di te.

La forma ideale - 7 regole d'oro

Come per tutto, è difficile fornire regole rigide per ogni possibile scenario. Tuttavia, considera queste sette regole per fare in modo che il tuo modulo induca l'utente a raggiungere l'obiettivo in modo piacevole.

  1. Ordine e forma giusti e logici
    Come ho detto prima, è molto importante mantenere l'ordine simile a una carta fisica. Questo aiuta gli utenti a scansionare il modulo più velocemente. Leggono le informazioni in ordine e le compilano di conseguenza. Inoltre, evita di utilizzare i selettori di date: basta guardare la scheda. Non dice gennaio 2020, ma il 20/01. Lo stesso vale per il numero di carta, che di solito è diviso in blocchi di 4 cifre. Assicurati di presentarlo allo stesso modo.
  2. Chiedi solo le informazioni necessarie
    Chiedere il nome e l'indirizzo completo del titolare della carta può essere un'ulteriore misura di sicurezza, ma non è sempre necessario farlo. Ad esempio, se la tua app esegue in anticipo KYC (processo di verifica dell'identità basato su un documento e una foto), conosci già il nome completo. Assicurati di riutilizzare le informazioni fornite in precedenza. Il numero della carta include molte più informazioni di quanto ci si possa aspettare. Ad esempio, non è necessario chiedere informazioni sul tipo di carta, poiché può essere facilmente decodificato dal numero.
  3. Usa il tipo di tastiera giusto
    Questa regola è semplice da implementare, ma molto spesso dimenticata. I nostri smartphone hanno alcuni tipi di tastiere a seconda del contesto. Abbiamo una versione speciale per inserire il nostro indirizzo email, numero di telefono o indirizzo della pagina web. Utilizzare una tastiera numerica per facilitare l'immissione del numero CVV per il cliente.
  4. La rappresentazione visiva è una bella aggiunta
    Se disponi delle risorse necessarie, mostra una rappresentazione visiva della scheda che si aggiorna mentre l'utente inserisce i dettagli. Controllare se i dati sono corretti sarà molto più veloce in questo modo.
  5. Ridurre al minimo gli errori, informare chiaramente se si verificano
    Assicurati di seguire le regole di accessibilità di base come contrasto, dimensioni dei caratteri e così via. Molto probabilmente ciò ridurrà al minimo il numero di errori, poiché il modulo sarà di facile lettura e scansione. Tuttavia, se si verificano alcuni errori, assicurarsi di inserire un suggerimento vicino al luogo in cui l'utente deve correggere alcune informazioni.
  6. Abilita servizi di terze parti che dispongono già dei dettagli (ad es. Apple Pay)
    Se possibile, abilita i servizi di terze parti già utilizzati dal tuo utente. Potrebbe essere semplice come abilitare Apple Pay o implementare PayPal come metodo di pagamento. Seguire questa semplice regola potrebbe migliorare notevolmente i tassi di conversione!
  7. Sicurezza: fornisce una soluzione affidabile
    Assicurati che i dati privati ​​degli utenti siano al sicuro dalla tua parte. Un altro passo sarebbe quello di informare i tuoi utenti delle precauzioni. Potrebbe essere qualsiasi cosa: un'icona sottile, un piccolo suggerimento o solo un design pulito. Rassicurare i tuoi utenti sulla loro privacy renderà il tuo prodotto più affidabile. Non complicare, non aggiungere grandi dettagli sulla sicurezza in questo luogo: un piccolo suggerimento sarà più che sufficiente.

Riassumendo…

Considerando i dati forniti, possiamo essere certi che le carte di pagamento sono il metodo di pagamento più universale e accessibile per la maggior parte degli utenti. In realtà, è il secondo metodo più popolare, subito dopo i contanti. Ecco perché le forme progettate perfettamente realizzate sono utili. I pagamenti elettronici stanno inseguendo in modo dinamico altri metodi di pagamento, ma ci vorrà molto tempo prima che siano ugualmente popolari.

  • Seguire lo stesso layout di informazioni che si trovano sulla controparte fisica,
  • La scansione dovrebbe essere un metodo principale, ma non l'unico,
  • Seguire i principi di progettazione dell'accessibilità,
  • Informare l'utente sulla sicurezza,
  • Ricorda sempre l'utente.

Qual è la tua opinione? Hai riscontrato problemi simili durante la progettazione di Fintech? Condividi la tua opinione nella sezione commenti e se hai trovato queste informazioni utili - lascia un applauso.

Dai un'occhiata al blog di Netguru per articoli di design più interessanti e al case study di Swap Behance che è stato alla base di questo articolo.

Grazie per tutte le persone coinvolte nella lettura di prove e feedback: Patrycja Paczkowska, Mateusz Przytuła, Luke Pachytel, Toto Castiglione, Natalia Chrzanowska