Best practice per i moduli di pagamento e 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 un semplice modulo di pagamento che mostra tutte le best practice:

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

Elenco di controllo

• Utilizza elementi HTML significativi: <form>, <input>, <label> e <button>.
• Etichetta ogni campo del modulo con un elemento <label>.
• Utilizza gli attributi degli elementi HTML per accedere alle funzionalità integrate del browser, in particolare type e autocomplete con valori appropriati.
• Evita di utilizzare type="number" per i numeri che non devono essere incrementati, ad esempio i numeri delle carte di pagamento. Utilizza invece type="text" e inputmode="numeric".
• Se è disponibile un valore di completamento automatico appropriato per un input, select o textarea, devi utilizzarlo.
• Per aiutare i browser a compilare automaticamente i moduli, assegna agli attributi di input name e id valori stabili che non cambiano tra i caricamenti di pagina o i deployment del sito web.
• Disattiva i pulsanti di invio dopo che sono stati toccati o selezionati.
• Convalida i dati durante l'inserimento, non solo al momento dell'invio del modulo.
• Imposta il checkout come ospite come opzione predefinita e semplifica la creazione dell'account una volta completato il checkout.
• Mostra l'avanzamento della procedura di pagamento in passaggi chiari con inviti all'azione chiari.
• Limita i potenziali punti di uscita dal pagamento rimuovendo elementi superflui e distrazioni.
• Mostra i dettagli completi dell'ordine al momento del pagamento e semplifica le modifiche all'ordine.
• Non richiedere dati di cui non hai bisogno.
• Chiedi i nomi con un unico campo di immissione, a meno che tu non abbia un buon motivo per non farlo.
• Non imporre l'uso di caratteri solo latini per nomi e nomi utente.
• Consenti una varietà di formati di indirizzo.
• Valuta la possibilità di utilizzare un singolo textarea per l'indirizzo.
• Utilizza il completamento automatico per l'indirizzo di fatturazione.
• Internazionalizza e localizza dove necessario.
• Valuta la possibilità di evitare la ricerca dell'indirizzo tramite codice postale.
• Utilizza valori di completamento automatico appropriati per le carte di pagamento.
• Utilizza un singolo campo di immissione per i numeri delle carte di pagamento.
• Evita di utilizzare elementi personalizzati se interrompono l'esperienza di compilazione automatica.
• Esegui test sia sul campo che in laboratorio: analisi delle pagine, analisi delle interazioni e misurazione delle prestazioni degli utenti reali.
• Esegui test su una serie di browser, dispositivi e piattaforme.

Utilizza codice HTML significativo

Utilizza gli elementi e gli attributi creati per l'attività:

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

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

Utilizza gli elementi HTML come previsto

Inserisci il modulo in un tag <form>

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

Non farlo.

Un elemento HTML <form> ti dà accesso a un potente insieme di funzionalità integrate in tutti i browser moderni e può contribuire a rendere il tuo sito accessibile agli screen reader e ad altri dispositivi di assistenza. Un elemento <form> semplifica anche la creazione di funzionalità di base per i browser meno recenti con supporto JavaScript limitato e consente l'invio di moduli anche se si verifica un problema con il codice e per il numero ridotto di utenti che disattivano effettivamente JavaScript.

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

Utilizza <label> per etichettare gli elementi

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

Associa un'etichetta a un input assegnando all'attributo for dell'etichetta lo stesso valore dell'attributo id 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. Questa opzione è ideale per i browser e gli screen reader. Un tocco o un clic su un'etichetta sposta lo stato attivo sull'input a cui è associata e gli screen reader annunciano il testo dell'etichetta quando l'etichetta o l'input dell'etichetta riceve lo stato attivo.

Crea pulsanti utili

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

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

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

const form = document.querySelector('form');
const submitButton = form.querySelector('button[type="submit"]');

form.addEventListener('submit', () => {
  submitButton.disabled = true;
  submitButton.textContent = 'Placing order…';
});

D'altra parte, non disattivare un pulsante di invio in attesa di un input utente completo e valido. Ad esempio, non lasciare semplicemente disattivato un pulsante Salva indirizzo perché manca qualcosa o non è valido. Questo non aiuta l'utente, che potrebbe continuare a toccare o fare clic sul pulsante e presumere che non funzioni. 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 dei moduli mancanti o non validi potrebbero non essere visibili sullo schermo dell'utente quando tenta di inviare un modulo.

Sfrutta al massimo gli attributi HTML

Semplifica l'inserimento dei dati da parte degli utenti

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

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

Per le date, cerca di evitare di utilizzare elementi select personalizzati. Se non vengono implementati correttamente, interrompono l'esperienza di compilazione automatica e non funzionano sui browser meno recenti. Per i numeri come l'anno di nascita, valuta la possibilità di utilizzare un elemento input anziché select, poiché l'inserimento manuale delle cifre può essere più semplice e meno soggetto a errori rispetto alla selezione da un lungo elenco a discesa, soprattutto sui dispositivi mobili. Utilizza inputmode="numeric" per assicurarti che venga visualizzata la tastiera corretta sui dispositivi mobili e aggiungi suggerimenti di convalida e formato con testo o un segnaposto 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 reinserire i dati

L'utilizzo di valori autocomplete appropriati consente ai browser di aiutare gli utenti memorizzando i dati in modo sicuro e compilando automaticamente i valori input, select e textarea. Questo è particolarmente importante sui dispositivi mobili ed è fondamentale per evitare tassi di abbandono dei moduli elevati. 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. MDN Web Docs contiene un elenco completo di valori e spiegazioni su come utilizzarli correttamente.

Valori stabili

Indirizzo di fatturazione

Per impostazione predefinita, l'indirizzo di fatturazione corrisponde all'indirizzo 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.

Utilizza 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 di prefisso agli attributi di completamento automatico se hai valori diversi per gli input con lo stesso nome in sezioni diverse.

<input autocomplete="shipping address-line1" ...>
<!-- Other fields omitted. -->
<input autocomplete="billing address-line1" ...>

Aiuta gli utenti a inserire i dati corretti

Cerca di evitare di "rimproverare" i clienti perché "hanno fatto qualcosa di sbagliato". Aiuta invece gli utenti a compilare i moduli in modo più rapido e semplice, aiutandoli a risolvere i problemi man mano che si presentano. Durante la procedura di pagamento, i clienti cercano di pagare la tua azienda per un prodotto o un servizio. Il tuo compito è aiutarli, non punirli.

Puoi aggiungere attributi di vincolo agli elementi del modulo per specificare i 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 o meno, così come le pseudo-classi CSS :valid e :invalid che possono essere utilizzate per applicare uno stile agli elementi con valori validi o non validi.

Ad esempio, il seguente codice HTML specifica l'input per un anno di nascita compreso tra il 1900 e il 2020. L'utilizzo di type="number" limita i valori di input ai soli numeri, nell'intervallo specificato da min e max. Se provi a inserire un numero al di fuori dell'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 con 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 è necessario JavaScript.

Esegui la convalida in linea e fornisci un feedback all'utente mentre inserisce i dati, anziché fornire un elenco di errori quando fa clic sul pulsante di invio. 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 individuare gli errori comuni. Potresti dover riprogettare il modulo.

Dovresti anche utilizzare JavaScript per eseguire una convalida più efficace mentre gli utenti inseriscono i dati e all'invio del modulo. Utilizza l'API Constraint Validation (che è ampiamente supportata) per aggiungere la convalida personalizzata utilizzando la UI del browser integrata per impostare lo stato attivo e visualizzare i prompt.

Scopri di più nella sezione Convalida dei moduli lato client.

Aiuta gli utenti a non dimenticare i dati richiesti

Utilizza l'attributo required sugli input per i valori obbligatori.

Quando un modulo viene inviato, i browser moderni mostrano automaticamente un prompt e impostano lo stato attivo sui campi required con dati mancanti. Puoi utilizzare la pseudo-classe :required per evidenziare i campi obbligatori. No JavaScript required!

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

Attenzione al divario nel commercio mobile

Immagina che i tuoi utenti abbiano un budget di affaticamento. Se lo esaurisci, i tuoi utenti se ne andranno.

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

Soprattutto, gli utenti sono più propensi ad abbandonare i moduli che sembrano lunghi, complessi e senza un senso di direzione. Questo vale in particolare quando gli utenti utilizzano schermi più piccoli, sono distratti o hanno fretta. Richiedi il minor numero di dati possibile.

Imposta il checkout come ospite come predefinito

Per un negozio online, il modo più semplice per ridurre l'attrito dei moduli è impostare il checkout come ospite come predefinito. Non obbligare gli utenti a creare un account prima di effettuare un acquisto. La mancata autorizzazione del checkout come ospite è citata come uno dei motivi principali dell'abbandono del carrello degli acquisti.

Puoi offrire la registrazione dell'account dopo il pagamento. A quel 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.

Mostra l'avanzamento del pagamento

Puoi rendere la procedura di pagamento meno complessa mostrando lo stato di avanzamento e indicando chiaramente cosa bisogna fare dopo. Il video seguente mostra come il retailer britannico johnlewis.com raggiunge questo obiettivo.

Devi mantenere lo slancio! Per ogni passaggio verso il pagamento, utilizza intestazioni di pagina e valori dei pulsanti descrittivi che chiariscano cosa deve essere fatto ora e qual è il passaggio successivo del pagamento.

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

L'attributo enterkeyhint è supportato su Android e iOS. Per saperne di più, consulta la documentazione esplicativa di enterkeyhint.

Semplifica la navigazione degli utenti all'interno della procedura di pagamento, in modo che possano modificare facilmente l'ordine, anche quando si trovano nella fase finale del pagamento. Mostra i dettagli completi dell'ordine, non solo un riepilogo limitato. Consenti agli utenti di modificare facilmente le quantità degli articoli dalla pagina di pagamento. La tua priorità al momento del pagamento è evitare di interrompere il processo di conversione.

Rimuovi gli elementi di disturbo

Limita i potenziali punti di uscita rimuovendo il disordine visivo e le distrazioni, come le promozioni dei prodotti. Molti retailer di successo rimuovono persino la navigazione e la ricerca dal pagamento.

Mantieni il percorso focalizzato. Non è il momento di invogliare gli utenti a fare altro.

Per gli utenti di ritorno, puoi semplificare ulteriormente il flusso di checkout nascondendo i dati che non devono visualizzare. Ad esempio, mostra l'indirizzo di consegna in testo normale (non in un modulo) e consenti agli utenti di modificarlo seguendo un link.

Semplifica l'inserimento di nome e indirizzo

Richiedi solo i dati di cui hai bisogno

Prima di iniziare a programmare i moduli per il nome e l'indirizzo, assicurati di aver compreso quali dati sono richiesti. Non richiedere dati di cui non hai bisogno. Il modo più semplice per ridurre la complessità dei moduli è rimuovere i campi non necessari. Questo è anche un vantaggio per la privacy dei clienti e può ridurre i costi e la responsabilità dei dati di backend.

Utilizza un unico campo per il nome

Consenti agli utenti di inserire il proprio nome utilizzando un unico campo, a meno che tu non abbia un buon motivo per memorizzare separatamente nomi, cognomi, titoli o altre parti del nome. L'utilizzo di un unico campo di immissione per il nome rende i moduli meno complessi, consente il copia e incolla e semplifica la compilazione automatica.

In particolare, a meno che non ci sia un motivo valido per non farlo, non preoccuparti di aggiungere un input separato per un prefisso o un titolo (ad esempio Sig.ra, Dott. o Lord). Se vogliono, gli utenti possono digitarlo insieme al loro nome. Inoltre, la compilazione automatica di honorific-prefix 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 dell'indirizzo per la maggior parte degli utenti.

Attiva la compilazione automatica del nome

Utilizza name per un nome completo:

<input autocomplete="name" ...>

Se hai un motivo valido 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

Consenti nomi internazionali

Potresti voler convalidare i nomi inseriti o limitare i caratteri consentiti per i dati dei nomi. Tuttavia, devi essere il meno restrittivo possibile con gli alfabeti. È scortese sentirsi dire che il proprio nome "non è valido".

Per la convalida, evita di utilizzare espressioni regolari che corrispondono solo ai caratteri latini. Solo caratteri 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.

<!-- Names with non-Latin characters (such as Françoise or Jörg) are 'invalid'. -->
<input pattern="[\w \-]+" ...>

<!-- Accepts Unicode letters. -->
<input pattern="[\p{L} \-]+" ...>

Consenti una varietà di formati di indirizzo

Quando progetti un modulo per l'indirizzo, tieni presente la sconcertante varietà di formati di indirizzo, anche all'interno di un singolo paese. Fai attenzione a non fare supposizioni sugli indirizzi "normali". (Se non ne sei convinto, dai un'occhiata alle stranezze degli indirizzi nel Regno Unito.)

Rendi flessibili i moduli degli indirizzi

Non costringere gli utenti a cercare di inserire il loro indirizzo in campi del modulo non adatti.

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

Fai particolare attenzione ai campi degli indirizzi required. Ad esempio, gli indirizzi nelle grandi città del Regno Unito non hanno una contea, ma molti siti costringono comunque gli utenti a inserirne una.

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

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

Aggiungi etichette da abbinare:

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

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

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 si adatta a qualsiasi formato di indirizzo ed è ottimo per tagliare e incollare, ma tieni presente che potrebbe non soddisfare i tuoi requisiti relativi ai dati e gli utenti potrebbero non usufruire della compilazione automatica se in precedenza hanno utilizzato 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 degli indirizzi

Per i moduli degli indirizzi è particolarmente importante considerare l'internazionalizzazione e la localizzazione, a seconda della posizione degli 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 trovarsi di fronte a un modulo che non si adatta al tuo indirizzo o che non utilizza le parole che ti aspetti.

La personalizzazione dei moduli degli indirizzi per più paesi 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 degli indirizzi, assicurati di comprendere le priorità chiave per gestire una serie di formati di indirizzi:

• Evita di essere troppo specifico per quanto riguarda le parti dell'indirizzo, ad esempio insistendo sul nome della via o sul numero civico.
• Se possibile, evita di rendere i campi required. Ad esempio, gli indirizzi di molti paesi non hanno un codice postale e gli indirizzi rurali potrebbero non avere un nome di via o strada.
• Utilizza nomi inclusivi: "Paese/regione" anziché "Paese"; "Codice postale" anziché "ZIP".

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

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

Alcuni siti web utilizzano un servizio per cercare gli indirizzi in base al codice postale. Questo approccio può essere ragionevole per alcuni casi d'uso, ma devi essere consapevole dei potenziali svantaggi.

Il suggerimento dell'indirizzo in base al codice postale non funziona per tutti i paesi e, in alcune regioni, i codici postali possono includere un numero elevato di potenziali indirizzi.

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

Semplifica i moduli di pagamento

I moduli di pagamento sono la parte più critica della procedura di pagamento. Un design scadente del modulo di pagamento è una causa comune di abbandono del carrello degli acquisti. Il diavolo si nasconde nei dettagli: piccoli problemi possono spingere gli utenti ad abbandonare un acquisto, in particolare sui dispositivi mobili. Il tuo compito è progettare moduli per semplificare al massimo l'inserimento dei dati da parte degli utenti.

Aiuta gli utenti a evitare di reinserire i dati di pagamento

Assicurati di aggiungere i valori autocomplete appropriati nei moduli delle carte di pagamento, inclusi il numero della carta di pagamento, il nome sulla carta, la data di scadenza e il codice di sicurezza:

• cc-number
• cc-name
• cc-exp o cc-exp-month e cc-exp-year per campi separati
• cc-csc

In questo modo, i browser possono aiutare gli utenti memorizzando in modo sicuro i dati delle carte di pagamento e inserendo correttamente i dati dei moduli. Senza la compilazione automatica, gli utenti potrebbero essere più propensi a conservare una copia fisica dei dati delle carte di pagamento o ad archiviarli in modo non sicuro 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 dati della carta di pagamento sono disponibili tramite il completamento automatico, ma un utente è costretto a trovare la 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 di applicare lo stile di conseguenza.

Utilizza un unico input per i numeri di telefono e delle carte di pagamento

Per i numeri di telefono e delle carte di pagamento, utilizza un unico campo di immissione: non suddividere il numero in più parti. In questo modo, gli utenti possono inserire i dati più facilmente, la convalida è più semplice e i browser possono eseguire la compilazione automatica. Valuta la possibilità di fare lo stesso per altri dati numerici, come PIN e codici banca.

Convalida attentamente

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 visualizza un messaggio di avviso e imposta lo stato attivo sull'input. No JavaScript required!

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 eventualmente meno) a 20 (o più). Puoi scoprire di più sulla struttura dei numeri delle carte di pagamento su LDAPwiki.

Consenti agli utenti di includere spazi quando inseriscono un nuovo numero carta di pagamento, poiché è così che i numeri vengono visualizzati sulle carte fisiche. In questo modo, l'esperienza utente è più semplice (non dovrai dire all'utente "hai fatto qualcosa di sbagliato"), è meno probabile che il flusso di conversione venga interrotto ed è facile rimuovere gli spazi nei numeri prima dell'elaborazione.

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

È particolarmente importante testare i moduli di indirizzo e pagamento sulle piattaforme più comuni per i tuoi utenti, poiché la funzionalità e l'aspetto degli elementi dei moduli possono variare e le differenze nelle dimensioni dell'area visibile possono portare a un posizionamento problematico. BrowserStack consente di eseguire test senza costi per i progetti open source su una serie di dispositivi e browser.

Implementa l'analisi e il RUM

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

Per questo, hai bisogno di analisi e di Real User Monitoring, ovvero dati sull'esperienza degli utenti reali, come il tempo di caricamento delle pagine di checkout o il tempo necessario per completare il pagamento:

• Analisi delle pagine: visualizzazioni di pagina, frequenze di rimbalzo e uscite per ogni pagina con un modulo.
• Analisi delle interazioni: le canalizzazioni degli obiettivi e gli eventi indicano dove gli utenti abbandonano il flusso di checkout e quali azioni intraprendono quando interagiscono con i tuoi moduli.
• Prestazioni del sito web: le metriche incentrate sugli utenti possono indicarti se le pagine di checkout sono lente a caricarsi e, in caso affermativo, qual è la causa.

L'analisi delle pagine, l'analisi delle interazioni e la misurazione delle prestazioni degli utenti reali diventano particolarmente preziose se combinate con i log del server, i dati sulle conversioni e i test A/B, consentendoti di rispondere a domande come se i codici sconto aumentano le entrate o se una modifica al layout del modulo migliora le conversioni.

Questo, a sua volta, ti offre una base solida per dare priorità alle attività, apportare modifiche e premiare i risultati positivi.

Continua a imparare

• Best practice per i moduli di accesso
• Best practice per i moduli di registrazione
• Verifica i numeri di telefono sul web con l'API WebOTP
• Create Amazing Forms
• Best practice per la progettazione di moduli per dispositivi mobili
• Controlli dei moduli più efficaci
• Creazione di moduli accessibili
• Semplificazione del flusso di registrazione utilizzando l'API Credential Management
• Frank's Compulsive Guide to Postal Addresses fornisce link utili e indicazioni complete sui formati degli indirizzi in oltre 200 paesi.
• Countries Lists dispone di uno strumento per scaricare i codici e i nomi dei paesi in più lingue e in più formati.

Foto di @rupixen su Unsplash.