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 dimostra tutte le best practice:

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

Elenco di controllo

• Utilizza elementi HTML significativi: <form>, <input>, <label> e <button>.
• Etichetta ogni campo del modulo con un <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 le implementazioni del sito web.
• Disattiva i pulsanti di invio dopo che sono stati toccati o selezionati.
• Convalida i dati durante l'inserimento, non solo all'invio del modulo.
• Imposta il pagamento come ospite come opzione predefinita e semplifica la creazione dell'account una volta completato il pagamento.
• 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 chiedere dati che non ti servono.
• Chiedi i nomi con un unico input, a meno che tu non abbia un buon motivo per non farlo.
• Non applicare solo caratteri 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 del codice postale.
• Utilizza valori di completamento automatico della carta di pagamento appropriati.
• Utilizza un unico input per i numeri delle carte di pagamento.
• Evita di utilizzare elementi personalizzati se interrompono l'esperienza di compilazione automatica.
• Test sul campo e in laboratorio: analisi della pagina, analisi dell'interazione e misurazione delle prestazioni degli utenti reali.
• Esegui test su una gamma di browser, dispositivi e piattaforme.

Utilizzare codice HTML significativo

Utilizza gli elementi e gli attributi creati per il lavoro:

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

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

Utilizzare gli elementi HTML come previsto

Inserisci il modulo in un tag <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 <form> HTML ti consente di accedere a un potente insieme di funzionalità integrate in tutti i browser moderni e può contribuire a rendere il tuo sito accessibile a screen reader e altri dispositivi assistivi. Un <form> semplifica anche la creazione di funzionalità di base per i browser meno recenti con supporto JavaScript limitato e consente l'invio del modulo anche in caso di problemi con il codice, nonché per il numero ridotto di utenti che disattivano JavaScript.

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

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 dell'attributo id dell'input.

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

Utilizza una sola etichetta per un singolo input: non tentare di 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 acquisisce lo stato attivo.

Rendere utili i pulsanti

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

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 ovvio il passaggio successivo. Ad esempio, etichetta il pulsante di invio del modulo dell'indirizzo di consegna Procedi al pagamento anziché Continua o Salva.

Valuta la possibilità di disattivare un pulsante di invio dopo che l'utente lo ha toccato o selezionato, soprattutto quando sta effettuando un pagamento o un ordine. Molti utenti fanno clic ripetutamente sui pulsanti, anche se funzionano correttamente. Questo può compromettere il 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 semplicemente disattivato il 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 gli utenti tentano di inviare un modulo con dati non validi, spiega loro cosa è andato storto e cosa fare per risolvere il problema. Ciò è particolarmente importante sui dispositivi mobili, dove l'inserimento dei dati è più difficile e i dati del modulo mancanti o non validi potrebbero non essere visibili sullo schermo dell'utente nel momento in cui tenta di inviare un modulo.

Sfruttare al meglio gli attributi HTML

Semplificare l'inserimento dei dati per gli utenti

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

Ad esempio, usa 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. Interrompono l'esperienza di compilazione automatica se non implementati correttamente e non funzionano sui browser meno recenti. Per i numeri come l'anno di nascita, valuta la possibilità di utilizzare un elemento input anziché un elemento 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 di utilizzare la tastiera giusta sui dispositivi mobili e aggiungi suggerimenti per la convalida e la formattazione 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 in modo sicuro i dati e compilando automaticamente i valori input, select e textarea. Ciò è particolarmente importante sui dispositivi mobili e fondamentale per evitare tassi di abbandono dei moduli elevati. Il completamento automatico offre anche diversi vantaggi in termini di accessibilità.

Se è disponibile un valore di completamento automatico appropriato per un campo del modulo, 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 è uguale a quello di consegna. Ridurre il disordine visivo fornendo un link per modificare l'indirizzo di fatturazione (o utilizzando gli elementi summary e details) anziché visualizzare l'indirizzo di fatturazione in un modulo.