Quando un utente apre un form è perché ha già deciso qualcosa: chiedere un preventivo, iscriversi a una lista o completare un acquisto.
Questo passaggio non dovrebbe fargli cambiare idea, ma basta un solo campo in più, un messaggio di errore poco chiaro o un pulsante che non spiega perché è bloccato per farlo abbandonare la sessione.
Un form che segue le buone pratiche di UX viene compilato correttamente al primo tentativo da quasi 8 persone su 10; uno che non le segue, da 4 su 10. La differenza non sta in che cosa si chiede, ma in come lo si chiede.
In questo articolo analizziamo quanto costa un form progettato male, che cosa cambia applicando le buone pratiche di UX e quali sono gli errori più comuni da evitare prima del lancio.
Quanto perde la Sua attività a causa di un form progettato male
Non tutti i form perdono la stessa cosa quando falliscono. Un form di contatto perde lead, uno di acquisto perde vendite, uno di iscrizione perde contatti per il database: l’impatto varia molto a seconda del tipo.
In media, un form di contatto viene completato da poco più di un terzo di chi lo inizia (37,9%), uno di acquisto da poco più della metà (58,2%) e uno di richiesta di preventivo o demo da quasi tre quarti (74,5%).
Lo applichi al Suo funnel: su 100 persone che arrivano al checkout, quante completano l’acquisto? La differenza tra quella cifra e il 100% non è un mistero: sono vendite quasi concluse che si sono perse per strada. Moltiplichi il dato per lo scontrino medio e vedrà che il problema ha un prezzo molto concreto nel Suo conto economico.
Nel B2B la situazione cambia, ma la domanda è la stessa: su 100 aziende che iniziano a compilare il Suo form di richiesta preventivo, quante arrivano a inviarlo? Qui non parliamo di uno scontrino da 50 €, ma di lead che possono valere migliaia di euro ciascuno: bastano poche perdite per avere un impatto diretto sulla pipeline commerciale.
Per questo vale la pena rivedere ogni decisione del form:
- Questo campo è indispensabile per elaborare l’ordine?
- Il messaggio di errore dice che cosa fare, non solo che qualcosa è andato storto? Il form della carta trasmette abbastanza fiducia per inserire un numero di 16 cifre?
- Chiede un preventivo preciso prima che l’utente si fidi di Lei?
- Lo obbliga a lasciare un numero di telefono quando preferirebbe iniziare con l’email?
- È chiaro che cosa succede dopo l’invio del form, o i dati spariscono nel vuoto senza alcuna conferma?
Perché si abbandona un form: sicurezza, lunghezza e domande superflue
Il motivo più citato per abbandonare non è il prezzo né il prodotto, ma la diffidenza verso i dati sensibili: quasi 3 persone su 10 abbandonano per dubbi sulla sicurezza. Segue la lunghezza del form, con poco più di 1 su 4, e infine le domande che non sembrano avere relazione con ciò che l’utente vuole fare, con 1 su 10.
Gli aspetti chiave di un buon form
Etichette visibili e raggruppamento logico dei campi
La label (etichetta) indica quali informazioni vanno in ciascun campo e deve sempre essere collocata sopra il campo, mai sostituita da un placeholder (testo di esempio), che sparisce non appena l’utente inizia a scrivere.
Raggruppare i campi correlati (indirizzo, pagamento, contatto) in blocchi visivi riduce la sensazione di form lungo anche a parità di campi, appoggiandosi ai principi di raggruppamento visivo della Gestalt.
Meno campi, meno attrito e più conversioni
Il checkout medio può arrivare a mostrare quasi il doppio dei campi realmente necessari per completare un ordine. In qualsiasi form attivo conviene prima chiedersi se l’assenza di un campo impedirebbe di elaborare le informazioni o di consegnare l’ordine.
Validare al momento giusto, non troppo presto
La validazione ideale avviene quando l’utente ha finito di compilare il campo, non mentre sta ancora scrivendo. Validare troppo presto è frustrante: se il campo email segnala un errore subito dopo le prime lettere, avvisa di un problema prima che l’utente abbia finito di scrivere. Fatta al momento giusto, questa validazione riduce gli errori fino al 22% e accelera sensibilmente i tempi di compilazione.
Rendere visibile l’avanzamento nei form lunghi o multi-step
Quando un form supera gli 8 o 10 campi, dividerlo in passaggi con un indicatore chiaro, come «Passaggio 2 di 4», aiuta l’utente a capire quanto manca e a non abbandonare a metà strada. Dividere in passaggi non migliora da solo la conversione: in un form breve può aggiungere attrito inutile, ma in uno lungo o con più decisioni lo rende più gestibile.
Form a una colonna
Un form a una sola colonna si compila in media 15 secondi più in fretta di uno a più colonne, perché l’utente non deve riorientarsi visivamente tra i campi. Su desktop si possono affiancare sulla stessa riga campi brevi e correlati, come città e CAP, senza compromettere l’ordine di lettura.
Consiglio: colleghi e misuri bene il Suo form
Anche se in questo articolo ci concentriamo sull’esperienza utente, un form ben progettato non serve a nulla se i dati non arrivano da nessuna parte o se non vengono misurati correttamente. Se il Suo negozio usa PrestaShop, il modulo Google Tag Manager + Google Analytics 4 (GA4) PRO può aiutarLa a rilevare gli eventi del negozio.
Ricordi: design e dati devono sempre andare di pari passo. Prima di pubblicare, conviene verificare questi quattro punti:
Tipi di form in base alla struttura
Form a schermata unica o multi-step
Un form a schermata unica funziona meglio quando l’acquisto o la registrazione è semplice e non ci sono troppi campi da compilare: l’utente vede tutto a colpo d’occhio e completa il processo senza interruzioni.
Un form multi-step, invece, ha senso quando ci sono più decisioni o blocchi di informazioni distinti (dati personali, spedizione, pagamento): dividerlo riduce la sensazione di form lungo, ma aggiunge un attrito visivo che si giustifica solo se il contenuto lo richiede.
Messaggi di errore specifici o generici
Un messaggio di errore specifico identifica esattamente che cosa manca o che cosa non va, invece di limitarsi a segnalare che qualcosa è fallito. Se il problema ha una soluzione alternativa, come un dato già presente nel sistema, la proponga direttamente (invece di rifiutare semplicemente il dato) per risolverlo con indicazioni concrete ed evitare l’abbandono del form.
Indicatore di avanzamento chiaro
Nei form lunghi o divisi in passaggi, mostrare a che punto si trova l’utente («Passaggio 2 di 4») aiuta a ridurre l’abbandono a metà strada. Il formato può variare (numero di passaggi, percentuale, barra visiva), ma la funzione è sempre la stessa: far sapere all’utente quanto manca prima che inizi a spazientirsi.
Attenzione: non conviene superare i quattro passaggi. Da lì in poi, ogni schermata in più riduce la probabilità che l’utente completi il form.
Errori che fanno impennare l’abbandono in qualsiasi form (e come ridurli sul Suo sito)
Chiedere informazioni superflue prima di completare l’azione
Ogni campo aggiuntivo aumenta lo sforzo necessario per finire. Prima di mantenerlo conviene chiedersi se la sua assenza impedirebbe di elaborare l’azione: un secondo telefono, una data di nascita senza relazione con l’acquisto o una domanda sulle preferenze commerciali di solito si possono rimandare a un’altra fase, rendere facoltative o eliminare direttamente.
Messaggi di errore poco chiari
Un messaggio come «dato non valido» avvisa che esiste un problema ma non aiuta a risolverlo. Il cliente deve indovinare quale campo ha dato errore e quale formato è atteso, mentre il messaggio dovrebbe identificare il problema e indicare come correggerlo, sempre accanto al campo corrispondente.
Pulsanti disattivati senza spiegazione
Un pulsante bloccato senza alcuna indicazione lascia l’utente senza sapere che cosa resta da completare. Mantenere il pulsante sempre attivo e, quando si prova a procedere, segnalare i campi mancanti è più chiaro che lasciare un pulsante grigio senza contesto.
Un pulsante che cancella tutto ciò che l’utente ha scritto
I pulsanti «reimposta» o «cancella form» non risolvono alcun problema reale dell’utente e introducono il rischio che qualcuno perda il proprio lavoro con un clic accidentale. Se il form raccoglie dati sensibili e l’utente vuole abbandonare di proposito, basta un pulsante «annulla», sempre con molto meno rilievo visivo di quello per l’invio.
Form non accessibile né navigabile da tastiera
Il form dovrebbe poter essere compilato senza usare il mouse, con un ordine di tabulazione logico e ogni campo con la propria label correttamente associata. Gli errori devono inoltre poter essere annunciati dagli screen reader ed essere collegati al campo corrispondente, non solo indicati con il colore.
Checklist per ridurre l’abbandono nei Suoi form
Si ponga queste domande chiave prima di pubblicare qualsiasi form sul Suo sito:
- Ogni campo è indispensabile per completare l’azione, oppure può essere eliminato, rimandato o reso facoltativo?
- Le label restano sempre visibili mentre l’utente compila e rivede i propri dati?
- Gli errori compaiono accanto al campo interessato e spiegano come correggerli?
- Il form è stato provato su uno smartphone reale, con compilazione automatica e la tastiera adatta a ogni tipo di dato?
- Si può completare interamente da tastiera, mantenendo un ordine di focus logico?
- L’avanzamento è chiaro quando il form è diviso in più passaggi?
- Si misura in quali campi si verificano più errori o abbandoni, per dare priorità ai miglioramenti?
Ricordi: nulla di tutto ciò richiede un rifacimento completo del sito. Nella maggior parte dei casi basta rivedere il form campo per campo: che cosa si chiede, quando compare un errore e quanto tempo impiega l’utente ad arrivare in fondo.
Se non sa da dove iniziare, in Línea Gráfica analizziamo il Suo sito nell’ambito del nostro servizio di ottimizzazione delle conversioni (CRO) e Le diciamo esattamente che cosa frena le Sue conversioni.
Fonti
FormStory — Form Abandonment Statistics: https://formstory.io/learn/form-abandonment-statistics/
FinancesOnline — 109 Online Form Abandonment Statistics: https://financesonline.com/form-abandonment-statistics/
Nielsen Norman Group — Website Forms Usability: Top 10 Recommendations: https://www.nngroup.com/articles/web-form-design/
Feathery — 150 Online Form Statistics: https://www.feathery.io/blog/online-form-statistics
Marketing4ecommerce — Los 5 mejores checkouts del eCommerce español (in spagnolo): https://marketing4ecommerce.net/formularios-de-checkout-y-registro-de-5-grandes-ecommerces/
uiFromMars — Diseño de formularios: por qué el 67% los abandona (y cómo evitarlo) (in spagnolo): https://uifrommars.com/diseno-formularios-reducir-abandono/
CXL — Form Design Principles: 13 Empirically Backed Best Practices: https://cxl.com/blog/form-design-best-practices/
WPForms — 101 Unbelievable Online Form Statistics & Facts: https://wpforms.com/online-form-statistics-facts/
Stripe — Proceso de compra de una página vs. de varios pasos (in spagnolo): https://stripe.com/mx/resources/more/one-page-checkout-vs-multistep-checkout
Shopify — Pago en una página (in spagnolo): https://www.shopify.com/es/blog/pago-en-una-pagina
