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

Massimizza le conversioni aiutando gli utenti a completare indirizzi e moduli di 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!

Di seguito è riportato un esempio di una forma di pagamento semplice che illustra tutte le best practice:

Ecco un esempio di modulo per l'indirizzo semplice che illustra tutte le best practice:

Elenco di controllo

Utilizza codice HTML significativo

Utilizza gli elementi e gli attributi creati per il job:

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

Abilitano la funzionalità integrata del browser, 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 includere nel wrapping gli elementi <input> in <form> e di gestire l'invio dei dati esclusivamente con JavaScript.

Non farlo.

Un elemento <form> HTML dà accesso a un insieme potente di funzionalità integrate in tutti i browser moderni e può contribuire a rendere il tuo sito accessibile a screen reader e altri dispositivi per la disabilità. Un <form> semplifica inoltre la creazione di funzionalità di base per i browser meno recenti con supporto JavaScript limitato, nonché per abilitare l'invio dei moduli anche in caso di glitch nel codice e per il numero ridotto di utenti che disattivano JavaScript.

Se utilizzi più componenti di pagina per l'input dell'utente, assicurati di inserire ciascuno nel proprio elemento <form>. Ad esempio, se hai un'unica pagina per la ricerca e la registrazione, inseriscile in <form>.

Usa <label> per etichettare gli elementi

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

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

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

Utilizza un'unica etichetta per un singolo input: non provare ad etichettare più input con una sola etichetta. Questa opzione è la più indicata per i browser e per gli screen reader. Quando si tocca o si fa clic su un'etichetta, lo stato attivo viene impostato sull'input a cui è associato e gli screen reader annunciano il testo dell'etichetta quando l'elemento attivo nell'etichetta o nell'input dell'etichetta viene impostato.

Rendi utili i pulsanti

Usa <button> per i pulsanti. Puoi anche usare <input type="submit">, ma non usare div o altri elementi casuali che fungono da pulsante. Gli elementi pulsante offrono comportamenti accessibili, funzionalità integrate di invio dei moduli e possono essere facilmente definiti.

Assegna a ogni pulsante di invio del modulo un valore che indichi la funzione dei parametri. Per ogni passaggio della procedura di pagamento, usa un invito all'azione descrittivo che mostri i progressi e renda evidente il passaggio successivo. Ad esempio, etichetta il pulsante di invio sul modulo dell'indirizzo di consegna Procedi con il pagamento anziché Continua o Salva.

Considera la possibilità di disattivare un pulsante di invio dopo che l'utente lo ha toccato o fatto clic, in particolare quando l'utente effettua un pagamento o effettua un ordine. Molti utenti fanno clic ripetutamente sui pulsanti, anche se questi funzionano correttamente. Ciò può rovinare il pagamento e aumentare il carico del server.

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

Sfrutta al meglio gli attributi HTML

Semplifica l'inserimento dei dati per gli utenti

Utilizza l'attributo type di immissione appropriato per fornire la tastiera corretta sui dispositivi mobili e attivare la convalida di base integrata da parte del browser.

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

Due screenshot di telefoni Android che mostrano una tastiera appropriata per l&#39;inserimento di un indirizzo email (utilizzando type=email) e per l&#39;inserimento di un numero di telefono (con type=tel).
Tastiere appropriate per email e telefono.

Per le date, cerca di evitare di utilizzare elementi select personalizzati. Se non vengono implementati correttamente, interrompono la compilazione automatica 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é l'inserimento manuale delle cifre può essere più semplice e meno soggetto a errori rispetto a una selezione da un lungo elenco a discesa, soprattutto sui 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 segnaposto per assicurarti che l'utente inserisca i dati nel formato appropriato.

Usa 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 archiviando in modo sicuro i dati e compilando automaticamente i valori input, select e textarea. Questo è particolarmente importante sui dispositivi mobili e fondamentale per evitare tassi di abbandono elevati dei moduli. Il completamento automatico offre inoltre diversi vantaggi di accessibilità.

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

Valori stabili

Indirizzo di fatturazione

Per impostazione predefinita, imposta l'indirizzo di fatturazione in modo che corrisponda 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.

Esempio di pagina di pagamento con un link per modificare l&#39;indirizzo di fatturazione.
Aggiungi un link per esaminare 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 "raccontare" i clienti perché "hanno fatto qualcosa di sbagliato". Invece, aiuta gli utenti a completare i moduli in modo più rapido e semplice aiutandoli a risolvere i problemi non appena si verificano. Tramite la procedura di pagamento, i clienti cercano di donare alla tua azienda dei soldi per un prodotto o un servizio. Il tuo compito è assisterli, non punirli.

Puoi aggiungere attributi di vincolo per formare elementi in modo da specificare valori accettabili, inclusi min, max e pattern. Lo stato di validità dell'elemento viene impostato automaticamente a seconda della validità del valore dell'elemento, così come le pseudo-classi CSS :valid e :invalid che possono essere utilizzate per definire 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'uso di type="number" vincola i valori di input solo a numeri, entro l'intervallo specificato da min e max. Se tenti di inserire un numero al di fuori dell'intervallo, lo stato dell'input non è valido.

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

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

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

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

Convalida in linea e fornisci un feedback all'utente mentre 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 spieghi che cosa deve essere risolto. Verifica la presenza di errori comuni nei dati di analisi e nei log del server; potrebbe essere necessario riprogettare il modulo.

Devi utilizzare JavaScript anche per eseguire una convalida più solida durante l'inserimento dei dati e l'invio del modulo da parte degli utenti. Utilizza l'API Constraint Validation (ampiamente supportata) per aggiungere la convalida personalizzata mediante l'interfaccia utente del browser integrata, in modo da impostare lo stato attivo e visualizzare le richieste.

Scopri di più in Utilizzare JavaScript per una convalida in tempo reale più complessa.

Aiuta gli utenti a evitare di perdere dati obbligatori

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

Quando viene inviato un modulo, i browser moderni richiedono automaticamente e impostano lo stato attivo sui campi required con dati mancanti e puoi utilizzare la pseudo-classe :required per evidenziare i campi obbligatori. Non è necessario JavaScript.

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

Semplifica il pagamento

Fai attenzione alle lacune del commercio sui dispositivi mobili.

Immagina che i tuoi utenti abbiano un budget dovuto all'affaticamento. Se lo usi, i tuoi utenti se ne andranno.

Devi ridurre le difficoltà e mantenere la concentrazione, soprattutto sui dispositivi mobili. Molti siti ricevono più traffico sui dispositivi mobili ma più conversioni sui computer desktop, un fenomeno noto come divario del commercio mobile. I clienti potrebbero semplicemente preferire completare un acquisto da computer, ma anche tassi di conversione da dispositivo mobile inferiori sono dovuti a un'esperienza utente insoddisfacente. Il tuo compito è minimizzare le conversioni perse sui dispositivi mobili e massimizzare le conversioni sui computer. Le ricerche hanno dimostrato che esiste un'enorme opportunità per offrire una migliore esperienza con i moduli per dispositivi mobili.

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

Imposta il pagamento senza registrazione come predefinito

Per un negozio online, il modo più semplice per ridurre gli attriti nel modulo è impostare il pagamento senza registrazione come predefinito. Non obbligare gli utenti a creare un account prima di effettuare un acquisto. Il fatto di non consentire il pagamento senza registrazione è uno dei motivi principali dell'abbandono del carrello degli acquisti.

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

Puoi offrire la creazione di un account dopo il pagamento. A questo punto, disponi già della maggior parte dei dati necessari per configurare un account. La creazione dell'account dovrebbe essere un'operazione semplice e veloce per l'utente.

Mostra l'avanzamento del pagamento

Puoi rendere la procedura di pagamento meno complessa mostrando i progressi e chiarendo i passaggi successivi. Il video seguente mostra in che modo il retailer britannico johnlewis.com riesce a ottenere questo risultato.

Mostra l'avanzamento del pagamento.

Devi mantenere lo slancio! Per ogni passaggio della procedura di pagamento, utilizza intestazioni di pagina e valori dei pulsanti descrittivi che chiariscano le operazioni da eseguire subito e il passaggio successivo al pagamento.

Assegna ai pulsanti dei moduli nomi significativi che mostrino i passaggi successivi.

Utilizza l'attributo enterkeyhint negli input del modulo per impostare l'etichetta del tasto Invio della tastiera per dispositivi mobili. Ad esempio, utilizza enterkeyhint="previous" e enterkeyhint="next" in un modulo di più pagine, enterkeyhint="done" per l'input finale del 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 di input Enterkeyhint modifica l&#39;icona del pulsante del tasto Invio.
Tasto Invio su Android: "Avanti" e "Fine".

L'attributo enterkeyhint è supportato su Android e iOS. Potete trovare ulteriori informazioni nel spiegazione Enterkeyhint.

Consenti agli utenti di andare avanti e indietro durante la procedura di pagamento, per modificare facilmente l'ordine, anche quando sono nella fase di pagamento finale. Mostra i dettagli completi dell'ordine, non solo un riepilogo limitato. Consenti agli utenti di regolare facilmente le quantità degli articoli dalla pagina di pagamento. La tua priorità al momento del pagamento è evitare l'interruzione del processo verso la conversione.

Rimuovi gli elementi di disturbo

Limita i potenziali punti di uscita rimuovendo il disordine visivo e gli elementi di disturbo come le promozioni dei prodotti. Molti rivenditori di successo rimuovono persino la navigazione e la ricerca dal pagamento.

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

Mantieni il percorso mirato. Non è il momento di tentare gli utenti di fare qualcos'altro.

Screenshot della pagina di pagamento su un dispositivo mobile che mostra una promozione che distrae gli ADESIVI SENZA COSTI.
Non distrarre i clienti dal completamento dell'acquisto.

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

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

Semplifica l'inserimento di nome e indirizzo

Chiedi solo i dati che ti servono

Prima di iniziare a codificare i moduli con 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. Ciò è positivo anche per la privacy dei clienti e può ridurre il costo e la responsabilità dei dati di back-end.

Inserisci un singolo nome

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

In particolare, a meno che tu non abbia un buon motivo per non farlo, non preoccuparti di aggiungere un input separato per un prefisso o titolo (come Sig.ra, Dott. o Lord). Se vogliono, gli utenti possono digitarlo con il proprio nome. Inoltre, al momento il completamento automatico di honorific-prefix non funziona nella maggior parte dei browser, pertanto l'aggiunta di un campo per il prefisso del nome o per il titolo interromperà l'esperienza di compilazione automatica dei moduli degli indirizzi per la maggior parte degli utenti.

Attiva la compilazione automatica dei nomi

Utilizza name per un nome completo:

<input autocomplete="name" ...>

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

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

Consenti nomi internazionali

Ti consigliamo di convalidare gli input del nome o limitare i caratteri consentiti per i dati relativi al nome. Tuttavia, le lettere dell'alfabeto devono essere il più possibile non restrittive. È scortese sentirsi dire che il proprio nome non è valido.

Per la convalida, evita di utilizzare espressioni regolari che corrispondono solo a caratteri latini. Solo latino-americano esclude gli utenti con nomi o indirizzi che includono caratteri non scritti 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 vari formati per gli indirizzi

Quando progetti un modulo per l'indirizzo, ricorda la sconcertante varietà di formati degli indirizzi, anche all'interno di un singolo paese. Fai attenzione a non dare ipotesi su indirizzi "normali". (Se non ti senti convinto, dai un'occhiata a UK Address Oddities!).

Rendi flessibili i moduli per gli indirizzi

Non obbligare gli utenti a provare a inserire il loro indirizzo in campi non adatti al modulo.

Ad esempio, non insistere per inserire il numero civico e il nome della via in input separati, dato che molti indirizzi non utilizzano questo formato e i dati incompleti possono interrompere la compilazione automatica del browser.

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

L'utilizzo di due righe indirizzo flessibili può essere sufficiente per diversi formati di indirizzi.

<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 questa funzionalità remixando e modificando la demo incorporata di seguito.

Valuta di usare una singola area di testo per l'indirizzo

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

L'approccio textarea si adatta a qualsiasi formato di indirizzo ed è ottimo per il taglia e incolla, ma tieni presente che potrebbe non soddisfare i requisiti dei tuoi dati e gli utenti potrebbero perdere la possibilità di utilizzare la compilazione automatica se in precedenza utilizzavano solo i moduli con address-line1 e address-line2.

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

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

Internazionalizza e localizza i moduli per l'indirizzo

Per i moduli dell'indirizzo è particolarmente importante considerare internazionalizzazione e localizzazione, a seconda di dove si trovano gli utenti.

Ricorda che la denominazione delle parti dell'indirizzo varia e 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 trovare un modulo che non corrisponde al tuo indirizzo o che non utilizza le parole che ti aspetti.

La personalizzazione dei moduli per gli indirizzi per più impostazioni internazionali può essere necessaria per il tuo sito, ma l'utilizzo di tecniche per massimizzare la flessibilità dei moduli (come descritto sopra) potrebbe essere adeguato. Se non localizzi i moduli dell'indirizzo, assicurati di comprendere le priorità principali per gestire una serie di formati di indirizzi: * Evita di specificare troppo specifiche per le parti dell'indirizzo, ad esempio insistendo sul nome della via o sul numero civico. * Se possibile, evita di impostare i campi required. Ad esempio, gli indirizzi di molti paesi non hanno un codice postale e gli indirizzi rurali possono non avere il nome della via o della strada. * Usa la denominazione inclusiva: "Paese/regione" e non "Paese"; "Codice postale" e non "Codice postale".

Mantieni la flessibilità. Il modulo per l'indirizzo semplice riportato sopra può essere adattato per funzionare in modo ottimale in molte lingue.

Valuta di evitare la ricerca dell'indirizzo del codice postale

Alcuni siti web utilizzano un servizio per cercare gli indirizzi in base al codice postale. Potrebbe essere utile in alcuni casi d'uso, ma dovresti conoscere i potenziali svantaggi.

Il suggerimento di indirizzi postali non funziona per tutti i paesi e in alcune regioni i codici postali possono includere un numero elevato di indirizzi potenziali.

I codici postali possono includere molti indirizzi.

Per gli utenti è difficile scegliere da un lungo elenco di indirizzi, soprattutto sui dispositivi mobili, se di fretta o stressati. Consentire agli utenti di sfruttare la compilazione automatica e inserire l'indirizzo completo con un solo tocco o clic può risultare più semplice e meno soggetto a errori.

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

Semplifica le forme di pagamento

I moduli di pagamento costituiscono la parte più critica della procedura di pagamento. Una struttura di pagamento scadente è una causa comune dell'abbandono del carrello degli acquisti. Il diavolo è nei dettagli: i piccoli glitch possono indurre gli utenti ad abbandonare un acquisto, in particolare sui dispositivi mobili. Il tuo compito è progettare moduli che semplifichino il più possibile l'inserimento dei dati.

Aiuta gli utenti a evitare di reinserire i dati di pagamento

Assicurati di aggiungere i valori autocomplete appropriati nei moduli delle carte di pagamento, tra cui 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

Ciò consente ai browser di aiutare gli utenti archiviando in modo sicuro i dettagli delle carte di pagamento e inserendo correttamente i dati dei moduli. Senza il completamento automatico, è più probabile che gli utenti tengano un registro fisico dei dettagli delle carte di pagamento o memorizzino i dati delle carte di pagamento 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 perda una vendita. Prendi in considerazione l'utilizzo di elementi HTML standard e definisci lo stile corrispondente.

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

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

Per le carte di pagamento e i numeri di telefono, utilizza un unico input: non dividere il numero in parti. Ciò semplifica l'inserimento dei dati per gli utenti, la convalida e la compilazione automatica dei browser. Valuta la stessa cosa per altri dati numerici come i codici PIN e bancari.

Screenshot di un modulo di pagamento che mostra un campo 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 all'input di una 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. Non è necessario JavaScript.

Tuttavia, l'espressione regolare pattern deve essere abbastanza 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 strutturazione del numero di carte di pagamento in LDAPwiki.

Consenti agli utenti di includere spazi quando inseriscono un nuovo numero di carta di pagamento, perché è così che i numeri vengono visualizzati sulle carte fisiche. Questo approccio è più semplice per l'utente (non dovrai dirgli "ha fatto qualcosa di sbagliato"), meno probabilità di interrompere il flusso di conversione. Inoltre, è facile rimuovere gli spazi in numeri prima dell'elaborazione.

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

È particolarmente importante testare l'indirizzo e i moduli di pagamento sulle piattaforme più comuni per gli utenti, poiché la funzionalità e l'aspetto degli elementi dei moduli possono variare e le differenze nelle dimensioni dell'area visibile possono causare problemi di posizionamento. BrowserStack consente di testare senza costi i progetti open source su una vasta gamma di dispositivi e browser.

Screenshot di una forma di pagamento, payment-form.glitch.me, su iPhone 7 e 11. Il pulsante Completa pagamento viene mostrato su iPhone 11, ma non su 7
La stessa pagina su iPhone 7 e iPhone 11.
Riduci la spaziatura interna per le aree visibili sui dispositivi mobili più piccole per assicurarti che il pulsante Completa pagamento non sia nascosto.

Implementare l'analisi e il RUM

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

Per questo hai bisogno di dati e analisi e monitoraggio degli utenti reali, ad esempio dati relativi all'esperienza degli utenti effettivi, come 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 dell'interazione: le canalizzazioni all'obiettivo e gli eventi indicano il punto in cui gli utenti abbandonano il flusso di pagamento e quali azioni eseguono quando interagiscono con i moduli.
  • Prestazioni del sito web: le metriche incentrate sugli utenti possono indicare se le pagine di pagamento sono lente a caricarsi e, in tal caso, qual è la causa.

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

Questo, a sua volta, ti fornisce una solida base per dare priorità agli sforzi, apportare modifiche e premiare il successo.

Continua a imparare

Foto di @rupixen su Unsplash.