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ù semplice e veloce 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 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 essere tentato di non preoccuparti di racchiudere gli elementi <input> in un <form> e di gestire l'invio dei dati esclusivamente con JavaScript.

Non farlo.

Un sito 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.id

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

Utilizza una singola etichetta per un singolo input: non tentare di 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 div o un altro elemento casuale che agisce come 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 Procedi 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. Ciò può causare problemi di pagamento e aumentare 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 la digitazione 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 memorizzando 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. MDN web docs contiene un elenco completo dei 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 valori di completamento automatico appropriati per l'indirizzo di fatturazione, così come 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" ...>

Aiutare gli utenti a inserire i dati corretti

Cerca di evitare di "rimproverare" i clienti perché 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 per formare elementi che specificano 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 tuo 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.

Inoltre, ti consigliamo di utilizzare JavaScript per eseguire una convalida più rigorosa durante l'inserimento dei dati e l'invio del modulo. 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.

Scopri di più nella sezione Utilizzare JavaScript per convalide in tempo reale più complesse.

Aiuta gli utenti a evitare di perdere i dati obbligatori

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 relativo stato attivo. 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

Fai attenzione al divario nel commercio mobile.

Immagina che i tuoi utenti abbiano un budget di fatica. 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 semplicemente preferire effettuare un acquisto da computer, ma i tassi di conversione più bassi sui dispositivi mobili 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, gli utenti sono più propensi ad abbandonare i moduli che sembrano lunghi, complessi e senza 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 pagamento come ospite è indicato come uno dei motivi principali dell'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 chiariscono cosa deve essere fatto e qual è il passaggio di pagamento successivo.

Assegna ai pulsanti del modulo nomi significativi che indichino la procedura successiva.

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à degli 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 tentare gli utenti a fare qualcos\'altro.

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

Per gli utenti di ritorno, puoi semplificare ulteriormente il flusso di pagamento nascondendo i dati che non devono vedere. 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 una buona ragione per memorizzare separatamente nomi, cognomi, titoli onorifici o altre parti del nome. L'utilizzo di un singolo input per il nome rende i moduli meno complessi, 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 aggiungere un campo di immissione separato per un prefisso o un titolo (ad es. Sig.ra, Dott. o Lord). Gli utenti possono digitare il 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 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 back-end 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.

Consentire una varietà di formati di indirizzi

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 per l'indirizzo

Non costringere gli utenti a inserire il proprio indirizzo in campi del modulo che non sono 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 di indirizzo flessibili può funzionare abbastanza bene per una serie di 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 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 di indirizzo è particolarmente importante prendere in considerazione l'internazionalizzazione e la localizzazione, a seconda della località 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 corrisponde al tuo indirizzo o che non utilizza 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 su un nome di via o un 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é "C.P.".

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 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 tra un lungo elenco di indirizzi, in particolare su dispositivo mobile se sono frettolosi o stressati. Può essere più facile e meno soggetto a errori consentire agli utenti di utilizzare la compilazione automatica e inserire il proprio indirizzo completo con un solo tocco o clic.

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

Semplificare le forme di pagamento

I moduli di pagamento sono la parte 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.

Aiutare gli utenti a evitare di inserire di nuovo 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 i dati della carta 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 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. In questo modo, gli utenti possono inserire più facilmente i dati, 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 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 è necessario 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 scoprire di più sulla strutturazione del numero della carta di pagamento su 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 dirgli "ha fatto qualcosa di sbagliato"), è meno probabile che interrompa il flusso di conversione ed è semplice rimuovere gli spazi nei numeri prima dell'elaborazione.

Eseguire 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 del modulo possono variare e le differenze nelle dimensioni del viewport possono causare problemi di posizionamento. BrowserStack consente test senza costi 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 degli utenti reali, 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:

  • Analytics delle pagine: visualizzazioni di pagina, tassi di uscita 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 pagamento e quali azioni intraprendono quando interagiscono con i tuoi moduli.
  • Prestazionalità del sito web: le metriche incentrate sull'utente possono indicarti se il caricamento delle tue pagine di pagamento è lento e, in caso affermativo, 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.