Best practice per i moduli per il pagamento e l'indirizzo

Massimizza le conversioni aiutando gli utenti a compilare i moduli di indirizzo e pagamento nel modo più rapido e semplice possibile.

Sam Dutton

I moduli ben progettati aiutano gli utenti e aumentano i tassi di conversione. Una piccola correzione può fare una grande differenza.

Ecco un esempio di forma di pagamento semplice che mette in evidenza tutte le best practice:

Ecco un esempio di un semplice modulo di indirizzo che mostra tutte le best practice:

Elenco di controllo

Utilizza HTML significativo

Utilizza gli elementi e gli attributi creati per il job:

  • <form>, <input>, <label> e <button>
  • type, autocomplete e inputmode

Attivano le funzionalità del browser integrate, migliorano l'accessibilità e aggiungono significato al markup.

Utilizzare gli elementi HTML come previsto

Inserisci il modulo in un <form>

Potresti avere la tentazione di non aggregare i tuoi elementi <input> in un <form> e di gestire l'invio dei dati esclusivamente con JavaScript.

Non farlo.

Un file HTML <form> ti consente di accedere a un potente insieme di funzionalità integrate su tutti i browser moderni e può aiutarti a rendere il tuo sito accessibile a screen reader e altri dispositivi per la disabilità. Un <form> semplifica anche la creazione di funzionalità di base per i browser meno recenti con supporto JavaScript limitato, nonché l'invio dei moduli anche in caso di errori nel codice e per il piccolo numero di utenti che disattivano effettivamente JavaScript.

Se hai più di un componente della pagina per l'input dell'utente, assicurati di inserirli ciascuno nel proprio elemento <form>. Ad esempio, se hai la ricerca e la registrazione nella stessa pagina, inserisci ciascuna in un proprio <form>.

Utilizzare <label> per etichettare gli elementi

Per etichettare un <input>, <select> o <textarea>, utilizza un <label>.

Associa un'etichetta a un input assegnando all'attributo for dell'etichetta lo stesso valore di for dell'input.

<label for="address-line1">Address line 1</label>
<input id="address-line1" …>

Utilizza una singola etichetta per un singolo input: non provare a etichettare più input con una sola etichetta. Questo funziona al meglio per i browser e per gli screen reader. Un tocco o un clic su un'etichetta sposta lo stato attivo sull'input associato e gli screen reader annunciano il testo dell'etichetta quando lo stato attivo si sposta sull'etichetta o sull'input dell'etichetta.

Creare pulsanti utili

Utilizza <button> per i pulsanti. Puoi anche utilizzare <input type="submit">, ma non utilizzare div o un altro elemento casuale che funga da pulsante. Gli elementi di pulsante forniscono un comportamento accessibile, funzionalità di invio dei moduli integrate e possono essere facilmente personalizzati.

Assegna a ogni pulsante di invio del modulo un valore che descriva la sua funzione. Per ogni passaggio che porta al pagamento, utilizza un invito all'azione descrittivo che mostri l'avanzamento e renda evidente il passaggio successivo. Ad esempio, etichetta il pulsante di invio sul modulo dell'indirizzo di consegna come Vai al pagamento anziché Continua o Salva.

Valuta la possibilità di disattivare un pulsante di invio dopo che l'utente lo ha toccato o fatto clic, in particolare quando l'utente sta effettuando un pagamento o un ordine. Molti utenti fanno clic ripetutamente sui pulsanti, anche se funzionano correttamente. Questo può compromettere le procedure di pagamento e incrementare il carico del server.

D'altra parte, non disattivare un pulsante di invio in attesa di un input utente completo e valido. Ad esempio, non lasciare un pulsante Salva indirizzo disattivato perché manca qualcosa o perché non è valido. Questo non aiuta l'utente, che potrebbe continuare a toccare o fare clic sul pulsante e presumere che sia guasto. Se invece gli utenti tentano di inviare un modulo con dati non validi, spiega loro cosa è andato storto e cosa fare per risolvere il problema. Questo è particolarmente importante sui dispositivi mobili, dove l'inserimento dei dati è più difficile e i dati mancanti o non validi del modulo potrebbero non essere visibili sullo schermo dell'utente al momento del tentativo di invio del modulo.

Sfrutta al meglio gli attributi HTML

Semplifica l'inserimento dei dati da parte degli utenti

Utilizza l'attributo type di input appropriato per fornire la tastiera giusta sui dispositivi mobili e attivare la convalida di base integrata del browser.

Ad esempio, utilizza type="email" per gli indirizzi email e type="tel" per i numeri di telefono.

Due screenshot di smartphone Android che mostrano una tastiera appropriata per inserire un indirizzo email (utilizzando type=email) e un numero di telefono (con type=tel).
Scritture appropriate per email e telefono.

Per le date, cerca di evitare di utilizzare elementi select personalizzati. Interrompono l'esperienza di compilazione automatica se non sono implementati correttamente e non funzionano sui browser meno recenti. Per numeri come l'anno di nascita, valuta la possibilità di utilizzare un elemento input anziché select, poiché inserire le cifre manualmente può essere più facile e meno soggetto a errori rispetto alla selezione da un lungo elenco a discesa, soprattutto su dispositivi mobili. Utilizza inputmode="numeric" per assicurarti che la tastiera sia corretta sui dispositivi mobili e aggiungi suggerimenti di convalida e formattazione con testo o un visualizzatore per assicurarti che l'utente inserisca i dati nel formato appropriato.

Utilizza il completamento automatico per migliorare l'accessibilità e aiutare gli utenti a evitare di inserire di nuovo i dati

L'utilizzo di valori autocomplete appropriati consente ai browser di aiutare gli utenti archiviando i dati in modo sicuro e completando automaticamente i valori input, select e textarea. Questo aspetto è particolarmente importante sui dispositivi mobili e fondamentale per evitare tassi di abbandono elevati delle schede. Il completamento automatico offre anche diversi vantaggi in termini di accessibilità.

Se per un campo del modulo è disponibile un valore di completamento automatico appropriato, devi utilizzarlo. I documenti web MDN contengono un elenco completo di valori e spiegazioni su come utilizzarli correttamente.

Valori stabili

Indirizzo di fatturazione

Per impostazione predefinita, l'indirizzo di fatturazione corrisponde a quello di consegna. Riduci il disordine visivo fornendo un link per modificare l'indirizzo di fatturazione (o utilizza gli elementi summary e details) anziché visualizzare l'indirizzo di fatturazione in un modulo.

Pagina di pagamento di esempio che mostra il link per modificare l&#39;indirizzo di fatturazione.
Aggiungi un link per rivedere la fatturazione.

Utilizza i valori di completamento automatico appropriati per l'indirizzo di fatturazione, proprio come fai per l'indirizzo di spedizione, in modo che l'utente non debba inserire i dati più di una volta. Aggiungi una parola prefisso agli attributi di completamento automatico se hai valori diversi per gli input con lo stesso nome in sezioni diverse.

<input autocomplete="shipping address-line-1" ...>
...
<input autocomplete="billing address-line-1" ...>

Aiuta gli utenti a inserire i dati corretti

Cerca di evitare di "parlare" di clienti perché hanno "hanno fatto qualcosa di sbagliato". Aiutali invece a compilare i moduli più rapidamente e facilmente aiutandoli a risolvere i problemi man mano che si verificano. Durante la procedura di pagamento, i clienti stanno cercando di dare alla tua azienda del denaro per un prodotto o un servizio. Il tuo compito è aiutarli, non punirli.

Puoi aggiungere attributi di vincolo agli elementi del modulo per specificare valori accettabili, tra cui min, max e pattern. Lo stato di validità dell'elemento viene impostato automaticamente a seconda che il valore dell'elemento sia valido, così come le pseudoclassi CSS :valid e :invalid che possono essere utilizzate per applicare stili agli elementi con valori validi o non validi.

Ad esempio, il seguente codice HTML specifica l'inserimento di un anno di nascita compreso tra il 1900 e il 2020. L'utilizzo di type="number" limita i valori di input solo ai numeri, nell'intervallo specificato da min e max. Se provi a inserire un numero non compreso nell'intervallo, l'input verrà impostato su uno stato non valido.

L'esempio seguente utilizza pattern="[\d ]{10,30}" per garantire un numero di carta di pagamento valido, consentendo al contempo gli spazi:

I browser moderni eseguono anche la convalida di base per gli input di tipo email o url.

Al momento dell'invio del modulo, i browser impostano automaticamente lo stato attivo sui campi con valori obbligatori problematici o mancanti. Non è richiesto JavaScript.

Screenshot di un modulo di accesso in Chrome per computer che mostra la richiesta del browser e lo stato attivo per un valore email non valido.
Convalida di base integrata nel browser.

Esegui la convalida in linea e fornisci un feedback all'utente man mano che inserisce i dati, anziché fornire un elenco di errori quando fa clic sul pulsante Invia. Se devi convalidare i dati sul server dopo l'invio del modulo, elenca tutti i problemi rilevati ed evidenzia chiaramente tutti i campi del modulo con valori non validi, oltre a visualizzare un messaggio in linea accanto a ogni campo problematico che spiega cosa deve essere corretto. Controlla i log del server e i dati di analisi per rilevare errori comuni. Potresti dover ridisegnare il modulo.

Dovresti usare JavaScript anche per eseguire una convalida più efficace durante l'inserimento dei dati e l'invio del modulo da parte degli utenti. Utilizza l'API Constraint Validation (ampiamente supportata) per aggiungere convalide personalizzate utilizzando l'interfaccia utente del browser integrata per impostare lo stato attivo e visualizzare i prompt.

Per saperne di più, consulta Utilizzare JavaScript per una convalida in tempo reale più complessa.

Aiuta gli utenti a evitare di perdere i dati richiesti

Utilizza l'attributo required per gli input dei valori obbligatori.

Quando un modulo viene inviato, i browser moderni chiedono automaticamente di inserire dati nei campi required mancanti e impostano il focus su questi campi. Puoi utilizzare la pseudoclasse :required per evidenziare i campi obbligatori. Non è necessario JavaScript.

Aggiungi un asterisco all'etichetta di ogni campo obbligatorio e una nota all'inizio del modulo per spiegare il significato dell'asterisco.

Semplifica il pagamento

Tieni presenti le lacune del commercio sui dispositivi mobili.

Supponi che i tuoi utenti abbiano un budget di affaticamento. Se li esageri, i tuoi utenti se ne andranno.

Devi ridurre le difficoltà e mantenere l'attenzione, soprattutto sui dispositivi mobili. Molti siti ricevono più traffico su dispositivi mobili, ma più conversioni su computer, un fenomeno noto come gap nel commercio mobile. I clienti potrebbero preferire semplicemente completare un acquisto da computer, ma tassi di conversione da dispositivo mobile inferiori sono anche il risultato di un'esperienza utente scadente. Il tuo compito è minimizzare le conversioni perse sui dispositivi mobili e massimizzare quelle su computer. La ricerca ha dimostrato che esiste un'enorme opportunità per offrire un'esperienza migliore con i moduli mobile.

Soprattutto, è più probabile che gli utenti abbandonino i moduli lunghi, complessi e privi di un senso di orientamento. Questo è particolarmente vero quando gli utenti utilizzano schermi più piccoli, sono distratti o di fretta. Chiedi il minor numero di dati possibile.

Impostare il pagamento senza registrazione come impostazione predefinita

Per un negozio online, il modo più semplice per ridurre le difficoltà con i moduli è impostare il pagamento senza registrazione come impostazione predefinita. Non obbligare gli utenti a creare un account prima di effettuare un acquisto. Il mancato consenso del pagamento senza registrazione è uno dei motivi principali per l'abbandono del carrello degli acquisti.

Motivi dell&#39;abbandono del carrello degli acquisti durante il pagamento.
Da baymard.com/checkout-usability

Puoi offrire la registrazione all'account dopo il pagamento. A questo punto, hai già la maggior parte dei dati necessari per configurare un account, quindi la creazione dell'account dovrebbe essere rapida e semplice per l'utente.

Mostrare l'avanzamento del pagamento

Puoi semplificare la procedura di pagamento mostrando i progressi e indicando chiaramente cosa deve essere fatto dopo. Il video seguente mostra come il rivenditore britannico johnlewis.com riesce a farlo.

Mostra l'avanzamento del pagamento.

Devi mantenere lo slancio. Per ogni passaggio che precede il pagamento, utilizza intestazioni di pagina e valori dei pulsanti descrittivi che indichino chiaramente cosa deve essere fatto e qual è il passaggio di pagamento successivo.

Assegna ai pulsanti dei moduli nomi significativi per mostrare le fasi successive.

Utilizza l'attributo enterkeyhint negli input del modulo per impostare l'etichetta del tasto Invio della tastiera mobile. Ad esempio, utilizza enterkeyhint="previous" e enterkeyhint="next" in un modulo di più pagine, enterkeyhint="done" per l'input finale nel modulo e enterkeyhint="search" per un input di ricerca.

Due screenshot di un modulo per l&#39;indirizzo su Android che mostrano come l&#39;attributo input enterkeyhint modifica l&#39;icona del tasto Invio.
Inserisci i pulsanti principali su Android: "Avanti" e "Fine".

L'attributo enterkeyhint è supportato su Android e iOS. Scopri di più nella spiegazione di enterkeyhint.

Consenti agli utenti di tornare indietro e avanti nella procedura di pagamento, in modo che possano modificare facilmente il loro ordine, anche quando sono nella fase finale di pagamento. Mostrare i dettagli completi dell'ordine, non solo un riepilogo limitato. Consenti agli utenti di modificare facilmente le quantità di articoli dalla pagina di pagamento. La tua priorità al momento del pagamento è evitare di interrompere l'avanzamento verso la conversione.

Rimuovi gli elementi di disturbo

Limita i potenziali punti di uscita rimuovendo elementi visivi disordinati e distrazioni come le promozioni dei prodotti. Molti rivenditori di successo rimuovono persino la navigazione e la ricerca dal pagamento.

Due screenshot su dispositivo mobile che mostrano l&#39;avanzamento del pagamento su johnlewis.com. La ricerca, la navigazione e altre distrazioni vengono rimosse.
Ricerca, navigazione e altre distrazioni rimosse per il pagamento.

Mantieni il viaggio incentrato. Non è il momento di invogliare gli utenti a fare qualcos'altro.

Screenshot della pagina di pagamento su dispositivo mobile che mostra una promozione che distrae per ADESIVI GRATIS.
Non distogliere i clienti dal completare l'acquisto.

Gli utenti di ritorno possono semplificare ulteriormente il flusso di pagamento, nascondendo i dati che non hanno bisogno di visualizzare. Ad esempio, mostra l'indirizzo di consegna in testo normale (non in un modulo) e consenti agli utenti di modificarlo tramite un link.

Screenshot della sezione &quot;Rivedi ordine&quot; della pagina di pagamento, che mostra il testo in testo normale, con i link per modificare l&#39;indirizzo di consegna, il metodo di pagamento e l&#39;indirizzo di fatturazione, che non vengono visualizzati.
Nascondi i dati che i clienti non devono vedere.

Semplifica l'inserimento di nome e indirizzo

Richiedi solo i dati di cui hai bisogno

Prima di iniziare a codificare i moduli di nome e indirizzo, assicurati di comprendere quali dati sono richiesti. Non chiedere dati che non ti servono. Il modo più semplice per ridurre la complessità del modulo è rimuovere i campi non necessari. Questo è positivo anche per la privacy dei clienti e può ridurre i costi e la responsabilità relativi ai dati di backend.

Utilizza un singolo input del nome

Consenti agli utenti di inserire il proprio nome utilizzando un unico input, a meno che tu non abbia un valido motivo per archiviare separatamente nomi, cognomi, onorari o altre parti del nome. L'utilizzo di un singolo input per il nome semplifica i moduli, consente il taglia e incolla e semplifica la compilazione automatica.

In particolare, a meno che tu non abbia una buona ragione per non farlo, non preoccuparti di aggiungere un campo separato per un prefisso o un titolo (ad esempio Sig.ra, Dott. o Lord). Gli utenti possono digitarlo insieme al proprio nome, se lo desiderano. Inoltre, honorific-prefix il completamento automatico al momento non funziona nella maggior parte dei browser, pertanto l'aggiunta di un campo per il prefisso o il titolo del nome interromperà l'esperienza di compilazione automatica del modulo indirizzo per la maggior parte degli utenti.

Attivare la compilazione automatica del nome

Utilizza name per un nome completo:

<input autocomplete="name" ...>

Se hai davvero un buon motivo per suddividere le parti del nome, assicurati di utilizzare i valori di completamento automatico appropriati:

  • honorific-prefix
  • given-name
  • nickname
  • additional-name-initial
  • additional-name
  • family-name
  • honorific-suffix

Consentire nomi internazionali

Ti consigliamo di convalidare gli input dei nomi o di limitare i caratteri consentiti per i dati dei nomi. Tuttavia, devi evitare di applicare limitazioni agli alfabeti. È scortese sentirsi dire che il tuo nome è "non valido".

Per la convalida, evita di utilizzare espressioni regolari che corrispondono solo a caratteri latini. Solo latini esclude gli utenti con nomi o indirizzi che includono caratteri non presenti nell'alfabeto latino. Consenti invece la corrispondenza delle lettere Unicode e assicurati che il tuo backend supporti Unicode in modo sicuro sia come input che come output. Unicode nelle espressioni regolari è ben supportato dai browser moderni.

Cosa non fare
<!-- Names with non-Latin characters (such as Françoise or Jörg) are 'invalid'. -->
<input pattern="[\w \-]+" ...>
Cosa fare
<!-- Accepts Unicode letters. -->
<input pattern="[\p{L} \-]+" ...>
Corrispondenza delle lettere Unicode rispetto alla corrispondenza delle lettere solo latine.

Consenti indirizzi in vari formati

Quando progetti un modulo per gli indirizzi, tieni presente la grande varietà di formati degli indirizzi, anche all'interno di un singolo paese. Fai attenzione a non fare supposizioni sugli indirizzi "normali". Se non sei ancora convinto, dai un'occhiata a UK Address Oddities.

Rendi flessibili i moduli degli indirizzi

Non costringere gli utenti a inserire il proprio indirizzo in campi del modulo non adatti.

Ad esempio, non insistere per avere un numero civico e il nome della via in campi separati, poiché molti indirizzi non utilizzano questo formato e i dati incompleti possono interrompere la compilazione automatica del browser.

Fai particolarmente attenzione ai campi required. Ad esempio, gli indirizzi delle grandi città nel Regno Unito non hanno una contea, ma molti siti obbligano comunque gli utenti a inserirne una.

L'utilizzo di due righe indirizzo flessibili può funzionare abbastanza bene per diversi formati di indirizzo.

<input autocomplete="address-line-1" id="address-line1" ...>
<input autocomplete="address-line-2" id="address-line2" ...>

Aggiungi le etichette da associare:

<label for="address-line-1">
Address line 1 (or company name)
</label>
<input autocomplete="address-line-1" id="address-line1" ...>

<label for="address-line-2">
Address line 2 (optional)
</label>
<input autocomplete="address-line-2" id="address-line2" ...>

Puoi provare a remixare e modificare la demo incorporata di seguito.

Valuta la possibilità di utilizzare un'unica area di testo per l'indirizzo

L'opzione più flessibile per gli indirizzi è fornire un singolo textarea.

L'approccio textarea è adatto a qualsiasi formato di indirizzo ed è ideale per tagliare e incollare, ma tieni presente che potrebbe non soddisfare i tuoi requisiti relativi ai dati e gli utenti potrebbero perdere la compilazione automatica se in precedenza utilizzavano solo moduli con address-line1 e address-line2.

Per un'area di testo, utilizza street-address come valore di completamento automatico.

Ecco un esempio di modulo che mostra l'utilizzo di un singolo textarea per l'indirizzo:

Internazionalizza e localizza i moduli per gli indirizzi

Per i moduli degli indirizzi è particolarmente importante considerare l'internazionalizzazione e la localizzazione, a seconda del paese in cui si trovano gli utenti.

Tieni presente che la denominazione delle parti dell'indirizzo varia, così come i formati degli indirizzi, anche all'interno della stessa lingua.

    ZIP code: US
 Postal code: Canada
    Postcode: UK
     Eircode: Ireland
         PIN: India

Può essere irritante o sconcertante visualizzare un modulo che non corrisponde al tuo indirizzo o che non usi le parole che ti aspetti.

La personalizzazione dei moduli per gli indirizzi per più lingue potrebbe essere necessaria per il tuo sito, ma l'utilizzo di tecniche per massimizzare la flessibilità dei moduli (come descritto sopra) potrebbe essere sufficiente. Se non localizzi i moduli per gli indirizzi, assicurati di comprendere le priorità chiave per gestire una serie di formati di indirizzi: * Evita di essere troppo specifico sulle parti dell'indirizzo, ad esempio insistendo sul nome di una via o sul numero civico. * Se possibile, evita di creare campi required. Ad esempio, gli indirizzi di molti paesi non hanno un codice postale e quelli rurali potrebbero non avere il nome di una via o di una strada. * Utilizza nomi inclusivi: "Paese/regione" anziché "Paese"; "Codice postale" anziché "Codice postale".

Mantieni la flessibilità. L'esempio di modulo di indirizzo semplice riportato sopra può essere adattato per funzionare "abbastanza bene" per molti paesi.

Valuta la possibilità di evitare la ricerca dell'indirizzo tramite il codice postale

Alcuni siti web utilizzano un servizio per cercare gli indirizzi in base al codice postale. Questa operazione potrebbe essere sensata per alcuni casi d'uso, ma devi essere consapevole dei potenziali svantaggi.

Il suggerimento di indirizzo con il codice postale non funziona in tutti i paesi e, in alcune regioni, i codici postali possono includere un numero elevato di potenziali indirizzi.

I codici postali possono includere molti indirizzi.

È difficile per gli utenti scegliere da un lungo elenco di indirizzi, soprattutto sui dispositivi mobili se sono frequenti o stressati. Può essere più semplice e meno soggetto a errori consentire agli utenti di sfruttare la compilazione automatica e inserire l'indirizzo completo compilato con un solo tocco o clic.

Un singolo nome inserito consente di inserire l'indirizzo con un solo tocco (un solo clic).

Semplifica le forme di pagamento

Le forme di pagamento sono l'aspetto più importante della procedura di pagamento. Un design scadente del modulo di pagamento è una causa comune dell'abbandono del carrello degli acquisti. Il diavolo è nei dettagli: piccoli glitch possono indurre gli utenti ad abbandonare un acquisto, in particolare sui dispositivi mobili. Il tuo compito è progettare forme per consentire agli utenti di inserire i dati nel modo più semplice possibile.

Aiuta gli utenti a evitare di reinserire i dati di pagamento

Assicurati di aggiungere i valori autocomplete appropriati nei moduli della carta di pagamento, inclusi il numero della carta di pagamento, il nome sulla carta e il mese e l'anno di scadenza:

  • cc-number
  • cc-name
  • cc-exp-month
  • cc-exp-year

In questo modo, i browser possono aiutare gli utenti memorizzando in modo sicuro i dati della carta di pagamento e inserendo correttamente i dati del modulo. Senza il completamento automatico, gli utenti potrebbero essere più propensi a conservare una registrazione fisica dei dati della carta di pagamento o a memorizzare in modo non sicuro i dati della carta di pagamento sul proprio dispositivo.

Evita di utilizzare elementi personalizzati per le date delle carte di pagamento

Se non sono progettati correttamente, gli elementi personalizzati possono interrompere il flusso di pagamento interrompendo la compilazione automatica e non funzioneranno sui browser meno recenti. Se tutti gli altri dettagli della carta di pagamento sono disponibili tramite la compilazione automatica, ma un utente è costretto a trovare la sua carta di pagamento fisica per cercare una data di scadenza perché la compilazione automatica non ha funzionato per un elemento personalizzato, è probabile che tu perda una vendita. Valuta la possibilità di utilizzare elementi HTML standard e applica uno stile adeguato.

Screenshot del modulo di pagamento che mostra elementi personalizzati per la data di scadenza della carta che interrompono la compilazione automatica.
Il completamento automatico ha compilato tutti i campi, tranne la data di scadenza.

Utilizzare un unico input per la carta di pagamento e i numeri di telefono

Per i numeri di telefono e delle carte di pagamento, utilizza un unico input: non suddividere il numero in parti. Ciò semplifica l'inserimento dei dati da parte degli utenti, la convalida e la compilazione automatica dei browser. Prova a eseguire la stessa operazione per altri dati numerici, come i codici PIN e bancari.

Screenshot del modulo di pagamento che mostra un campo della carta di credito suddiviso in quattro elementi di input.
Non utilizzare più input per un numero di carta di credito.

Convalida con attenzione

Devi convalidare l'inserimento dei dati sia in tempo reale sia prima dell'invio del modulo. Un modo per farlo è aggiungere un attributo pattern a un input della carta di pagamento. Se l'utente tenta di inviare il modulo di pagamento con un valore non valido, il browser mostra un messaggio di avviso e imposta il focus sull'input. Non è richiesto JavaScript.

Tuttavia, l'espressione regolare pattern deve essere sufficientemente flessibile da gestire l'intervallo di lunghezze dei numeri delle carte di pagamento: da 14 cifre (o meno) a 20 (o più). Puoi trovare ulteriori informazioni sulla struttura dei numeri di carte di pagamento in LDAPwiki.

Consenti agli utenti di includere spazi quando inseriscono il numero di una nuova carta di pagamento, poiché è così che i numeri vengono visualizzati sulle carte fisiche. È più facile per l'utente (non dovrai dire "che ha fatto qualcosa di sbagliato"), ha meno probabilità di interrompere il flusso di conversione ed è facile rimuovere gli spazi nei numeri prima dell'elaborazione.

Esegui test su una serie di dispositivi, piattaforme, browser e versioni

È particolarmente importante testare le forme di indirizzo e pagamento sulle piattaforme più comuni per gli utenti, poiché la funzionalità e l'aspetto degli elementi modulo possono variare e le differenze di dimensioni dell'area visibile possono causare posizionamenti problematici. BrowserStack consente test gratuiti per progetti open source su una serie di dispositivi e browser.

Screenshot di un modulo di pagamento, payment-form.glitch.me, su iPhone 7 e 11. Il pulsante Completa il pagamento viene visualizzato su iPhone 11, ma non su iPhone 7
La stessa pagina su iPhone 7 e iPhone 11.
Riduci i margini per le visualizzazioni dei dispositivi mobili più piccole per assicurarti che il pulsante Completa pagamento non sia nascosto.

Implementare l'analisi e la RUM

Testare l'usabilità e le prestazioni localmente può essere utile, ma hai bisogno di dati reali per comprendere correttamente l'esperienza degli utenti con i tuoi moduli di pagamento e indirizzo.

Per farlo, hai bisogno di dati e monitoraggio dei real user, ovvero dati relativi all'esperienza degli utenti effettivi, ad esempio il tempo di caricamento delle pagine di pagamento o il tempo necessario per completare il pagamento:

  • Analisi della pagina: visualizzazioni di pagina, frequenze di rimbalzo e uscite per ogni pagina contenente un modulo.
  • Analisi delle interazioni: le canalizzazioni all'obiettivo e gli eventi indicano il punto in cui gli utenti abbandonano il flusso di pagamento e le azioni che intraprendono quando interagiscono con i moduli.
  • Prestazionalità del sito web: le metriche incentrate sull'utente possono dirti se il caricamento delle tue pagine di pagamento è lento e, in caso affermativo, qual è la causa.

L'analisi delle pagine, l'analisi delle interazioni e la misurazione del rendimento degli utenti reali diventano particolarmente importanti se combinate con i log del server, i dati sulle conversioni e i test A/B, in quanto ti consentono di rispondere a domande come se i codici sconto aumentino le entrate o se una modifica del layout del modulo migliori le conversioni.

Ciò, a sua volta, ti offre una base solida per dare la priorità allo sforzo, apportare modifiche e premiare il successo.

Continua a imparare

Foto di @rupixen su Unsplash.