Progettazione dei moduli: le migliori pratiche per la conversione

Aggiornato il 19 ottobre 2026

Il tuo modulo è breve. Le domande sono pertinenti. Il traffico è elevato. Eppure, su dispositivi mobili, una parte significativa dei visitatori si ferma al secondo campo. Il problema spesso non risiede nell'offerta né nel numero di domande: è il design del modulo. Una tastiera alfabetica che si apre su un campo per il codice postale, un'etichetta che scompare non appena si digita, un pulsante grigio chiaro appena visibile. Questa guida raccoglie le migliori pratiche per la progettazione di moduli che hanno un impatto misurabile sulla conversione, insieme al codice o alle impostazioni precise da applicare.

Insomma: un modulo progettato per convertire i moduli segue cinque best practice: una singola colonna con etichette ben visibili sopra i campi, una tastiera mobile adattata a ciascun tipo di dato, passaggi brevi con avanzamento visibile, un contrasto adeguato (4,5:1 per il testo, 3:1 per i bordi dei campi) e un pulsante che indica chiaramente il risultato per l'utente. Queste impostazioni sono economiche da implementare ed eliminano gli ostacoli che portano all'abbandono sui dispositivi mobili.

Prima di entrare nei dettagli, una precisazione: questo articolo non tratta della lunghezza dei moduli, bensì del loro formato. Alla fine, troverete una checklist di 12 punti per verificare il vostro modulo in soli dieci minuti.

Impaginazione: una colonna, etichette sopra i campi

Il layout più efficace per un modulo di generazione lead è a colonna singola, con ogni etichetta posizionata sopra il campo corrispondente. L'occhio segue una linea retta, senza dover zigzagare tra le colonne o cercare quale etichetta corrisponda a quale campo.

Le cifre lo confermano. In un studio controllato condotto dall'Istituto CXL (ora Speero) con 702 partecipanti, la versione a colonna singola è stata completata in media in 102,3 secondi, rispetto ai 117,8 secondi della versione a più colonne. Ciò rappresenta un risparmio di tempo di circa il 13%, a parità di domande.

Una distinzione importante: questo studio ha misurato solo il tempo impiegato da coloro che hanno compilato il modulo. Non dice nulla su coloro che hanno abbandonato. Ma un modulo più veloce da compilare raramente scoraggia le persone.

Segnaposto, etichetta mobile o etichetta fissa?

Un'etichetta fissa, sempre visibile sopra il campo, rimane la scelta più sicura. Il testo di esempio inserito all'interno del campo (il segnaposto) scompare non appena viene premuto il primo tasto: l'utente che rivede il proprio input non sa più cosa gli è stato chiesto.

Le etichette flottanti, rese popolari dal Material Design, risolvono solo in parte il problema. L'etichetta si ridimensiona per adattarsi al campo, un titolo lungo viene troncato e il contrasto del testo ridotto è spesso troppo basso. Riservate il segnaposto a un esempio di formattazione ("06 12 34 56 78"), mai come unica etichetta.

Sono ammesse due eccezioni

La regola della colonna singola prevede delle eccezioni quando due campi rappresentano un unico concetto: codice postale e città, oppure data di scadenza e codice di sicurezza. Posizionandoli uno accanto all'altro su un computer, la leggibilità rimane garantita, a condizione che vengano visualizzati uno sotto l'altro su un dispositivo mobile.

Mobile: visualizza la tastiera corretta per ogni campo

Ogni campo dovrebbe attivare la tastiera corrispondente al dato previsto: un tastierino numerico per il codice postale, un tastierino telefonico per il numero di telefono e una tastiera con il simbolo "@" per l'indirizzo email. Questo dettaglio del codice HTML evita all'utente di dover passare manualmente da una tastiera all'altra per ogni campo.

Questo dettaglio è spesso implementato male, anche nei siti di grandi dimensioni. L'audit del Baymard Institute sulle tastiere touch ha dimostrato che Il 54% dei principali siti di e-commerce statunitensi non visualizzava la tastiera ottimizzata per i campi relativi al numero di telefono, al codice postale o alla carta di credito, il 79% degli utenti lascia attiva la correzione automatica, che corrompe i dati inseriti. Un indirizzo email "corretto" dal numero di telefono si traduce in un potenziale cliente perso.

Ecco le impostazioni da applicare ai campi più utilizzati in un modulo di contatto in francese:

Evitare type='number' per un codice postale o un numero SIRET: aggiunge frecce di incremento non necessarie su un computer e può rimuovere lo zero iniziale da un codice postale come 01000.

La trappola dello zoom dell'iPhone

Su iOS, Safari ingrandisce automaticamente i campi con testo di dimensioni inferiori a 16 pixel. La pagina si sposta, il pulsante scompare dallo schermo e l'utente deve ridurre manualmente lo zoom. Impostando la dimensione del carattere dei campi a un minimo di 16 pixel, il problema scompare.

Considera anche le aree cliccabili. Un pulsante radio di 16 pixel è difficile da toccare con il pollice; punta a aree cliccabili di almeno 44 × 44 pixel, rendendo cliccabile l'intera riga dell'opzione, non solo il punto.

Messa a fuoco automatica e completamento automatico: un aiuto senza forzature

Il completamento automatico del browser fa risparmiare secondi preziosi; l'autofocus, d'altro canto, è più spesso un ostacolo che un aiuto. Si tratta di due impostazioni simili con effetti opposti.

La grazia autocomplete consente al browser di compilare nome, e-mail, telefono e indirizzo con un tocco. Su un modulo di preventivo da sei campi, può ridurre l’inserimento a due o tre tocchi. Al contrario, disattivare il completamento automatico «per sicurezza» in un modulo di contatto penalizza l’utente senza proteggere nulla.

La funzione di messa a fuoco automatica, che posiziona automaticamente il cursore nel primo campo al caricamento della pagina, presenta diversi problemi. Il designer britannico Adam Silver ne individua cinque: interruzioni di pagina inaspettate, blocco dello scorrimento tramite tastiera, scorciatoie del browser inaccessibili, un lettore di schermo che annuncia l'etichetta del campo anziché il titolo della pagina e, su Android, un campo attivato senza l'apertura della tastiera.

Il nostro consiglio è semplice: non impostare il focus automatico su una pagina che contenga elementi diversi dal modulo (testo introduttivo, argomentazioni, recensioni dei clienti). In un modulo a più passaggi, tuttavia, è utile spostare il focus sul titolo del passaggio successivo: chi naviga tramite tastiera o con un lettore di schermo sa immediatamente a che punto si trova.

Suddividi il processo in passaggi senza perdere il lettore

Un modulo a più fasi converte meglio quando ogni schermata pone solo una o due domande, i progressi sono visibili e la prima domanda richiede uno sforzo minimo. Suddividere il modulo in più parti non è una soluzione miracolosa: se mal progettato, aggiunge clic senza ridurre il carico di lavoro.

Tre regole di progettazione fanno la differenza:

• Inizia con una domanda semplice e coinvolgente : la tipologia di progetto o esigenza viene presentata tramite grandi schede cliccabili. I dettagli di contatto vengono aggiunti in un secondo momento, dopo che l'utente ha già investito del tempo nella ricerca.
• Mostra progressi onesti : “Fase 2 di 4” è meglio di una barra che si muove velocemente all'inizio e poi ristagna.
• Passa automaticamente alla schermata successiva dopo una singola scelta (pulsante di opzione), ma mai dopo l'inserimento di testo, dove l'utente deve mantenere il controllo.

Per approfondire questo formato, il nostro esempi commentati di moduli di preventivo a più fasi mostra l'ordine delle domande che funziona in base ai settori. E per visualizzare solo le domande pertinenti a ciascun profilo, logica condizionale evita di mostrare il campo "Numero di dipendenti" a un singolo utente.

Questa partizione può essere eseguita senza uno sviluppatore nel delle funzionalità di Blastform : i passaggi, le mappe visive, la barra di avanzamento e le condizioni di visualizzazione vengono configurati dall'editor.

Colori, contrasto e accessibilità

Un formato accessibile è anche un formato che converte meglio: il testo deve offrire un contrasto di almeno 4,5:1 con lo sfondo e i margini dei campi di almeno 3:1, secondo i criteri WCAG 1.4.3 e 1.4.11. Quest'ultimo criterio è spesso trascurato.

Le recenti tendenze del design grafico prediligono campi grigi molto chiari su sfondo bianco, senza bordi visibili. Di conseguenza, sullo schermo di un telefono in piena luce solare, l'utente non riesce più a distinguere dove cliccare. Un bordo grigio come #767676 su sfondo bianco supera la prova; il comunissimo #E0E0E0 non la supera affatto.

Altri tre riflessi da adottare:

• Non segnalare mai un errore solo con il colore. Un bordo rosso non è sufficiente per circa l'8% degli uomini affetti da daltonismo: aggiungete un'icona e un messaggio di testo.
• Collega ciascuna etichetta al relativo campo (etichetta label con l'attributo for): Facendo clic sull'etichetta si attiva il campo e il lettore di schermo legge la domanda corretta.
• Mantieni visibile l'indicatore di messa a fuoco. Rimuovendo il contorno blu predefinito senza sostituirlo, il modulo diventa inutilizzabile con la tastiera.

La questione non è più solo una questione di comodità. Dal 28 giugno 2025, la Legge europea sull'accessibilità ha imposto requisiti di accessibilità a molti servizi online pubblici nell'Unione europea, compresi i servizi di e-commerce e bancari. Un modulo conforme vi evita di doverlo rifare in seguito.

Dal punto di vista dell'identità visiva, allineare i colori e la tipografia del modulo con quelli del tuo sito web crea fiducia: un modulo che sembra un widget generico di terze parti fa esitare gli utenti. Approfondiamo questo aspetto nel nostro articolo su personalizzare un modulo senza programmazione.

Microcopia e messaggi di errore

Il microcopy si riferisce al piccolo testo che circonda i campi: etichette, testo di aiuto, messaggi di errore. Se ben scritto, affronta l'obiezione prima che blocchi l'utente. Se scritto male, trasforma un semplice errore di battitura in un abbandono del modulo.

Seleziona i campi facoltativi, non quelli obbligatori

L'asterisco rosso è un riflesso innato, ma molti utenti non lo notano o non ne comprendono il significato. La pratica raccomandata da diversi specialisti di UX è l'opposto: presumere che tutto sia obbligatorio e aggiungere "(facoltativo)" solo ai campi che non lo sono. Se sono presenti molti campi facoltativi, valutatene l'utilità.

Convalidare al momento giusto

Secondo il Baymard Institute, Il 31% dei siti testati non ha la convalida online dei campi, alcuni utenti, inoltre, lo attivano troppo presto. Visualizzare "indirizzo email non valido" quando l'utente ha digitato solo tre lettere crea frustrazione. Il momento giusto è quando l'utente lascia il campo. E non appena lo corregge, il messaggio di errore dovrebbe scomparire mentre digita, senza dover aspettare che si sposti su un altro campo.

Annotare gli errori che aiutano

Confronta "Formato non valido" e "Il numero deve contenere 10 cifre, ad esempio 06 12 34 56 78". Il secondo ti dice cosa fare. Posiziona il messaggio direttamente sotto il campo interessato, mai solo nella parte superiore del modulo, e mantieni tutti i dati già inseriti dopo l'errore.

Rassicurare laddove c'è un problema

Il campo del numero di telefono è un classico punto critico nei moduli di acquisizione contatti. Una frase esplicativa posizionata direttamente sotto ("Solo per ricontattarti in merito al tuo preventivo") risolve il problema non appena compare. Questo è molto più efficace di un piè di pagina generico che nessuno legge.

Il pulsante invia: l'ultimo metro

Il pulsante dovrebbe indicare chiaramente cosa riceverà l'utente, non l'azione tecnica che compie. "Ricevi il mio preventivo" genera più conversioni rispetto a "Invia", perché rafforza la promessa nel momento dell'azione finale.

Unbounce segnala diversi casi in cui una sola parola ha cambiato il risultato. Su un portale B2B per l'affitto di uffici, sostituire "Ordina" con "Ottieni" sul pulsante ha aumentato le conversioni del 38% : il verbo alla fine si riferiva a ciò che si riceve piuttosto che a ciò che si deve fare.

In termini di progettazione, quattro impostazioni sono importanti:

• Larghezza intera su dispositivi mobili, in modo che il pollice possa raggiungerlo senza doverlo mirare.
• Un colore che contrasta con il resto della pagina. Il "colore migliore" non esiste: ciò che conta è il contrasto con l'ambiente circostante, non il rosso o il verde in sé.
• Mai disabilitato o disattivato finché il modulo è incompleto, l'utente non capisce cosa manca. Lasciategli cliccare e indicare i campi da compilare.
• Stato di caricamento dopo il clic ("Invio in corso...") per evitare doppi invii e lead duplicati nel tuo CRM.

Queste ottimizzazioni di progettazione si aggiungono a quelle incentrate sul costo di acquisizione. Se la tua preoccupazione principale è il budget, il nostro articolo su la riduzione del costo per lead grazie alla conversione dei moduli collega queste impostazioni alle tue campagne.

Le migliori pratiche per la progettazione dei moduli: la griglia di audit in 10 minuti

Ecco la griglia promessa all'inizio dell'articolo. Prendi il tuo telefono, apri il modulo in modalità di navigazione privata e seleziona ogni casella. Ogni "no" rappresenta un punto critico che puoi eliminare questa settimana.

1. Il modulo si adatta a una sola colonna sui dispositivi mobili.
2. Sopra ogni campo è presente un'etichetta visibile che rimane visualizzata durante l'inserimento dei dati.
3. Il campo e-mail apre una tastiera con il simbolo "@" e non utilizza lettere maiuscole.
4. I campi relativi al numero di telefono e al codice postale aprono una tastiera numerica.
5. La pagina non si ingrandisce quando si tocca un campo (dimensione minima del carattere 16px).
6. Il browser offre la possibilità di compilare automaticamente nome, indirizzo email e numero di telefono.
7. Nessun campo riceve automaticamente il focus al caricamento della pagina.
8. In un modulo a più fasi, viene visualizzato l'avanzamento ("Fase X di Y").
9. All'aperto, in condizioni di massima luminosità, i margini dei campi rimangono visibili.
10. Un errore intenzionale (indirizzo email senza @) visualizza un messaggio chiaro sotto il campo, non solo un bordo rosso.
11. Il pulsante descrive il vantaggio ("Ricevi…", "Ottieni…") e occupa l'intera larghezza.
12. Dopo aver cliccato, vengono visualizzati lo stato di caricamento e poi una chiara conferma.

Un punteggio di 10 su 12 o superiore significa che probabilmente il design non è il problema principale. Se il punteggio è inferiore a 8, iniziate dai punti 3, 4 e 5: sono i più facili da risolvere e riguardano tutti i visitatori da dispositivi mobili.

Per partire da una base che soddisfi già la maggior parte di questi requisiti, sfoglia il nostro modelli di moduli B2B pronti all'uso, oppure guarda come l'hanno fatto altre squadre in il nostro caso di studio sull'aumento del tasso di conversione.

Domande frequenti

Possiamo sostituire le etichette con il testo di esempio nei campi?

No. Il testo di esempio (segnaposto) scompare non appena viene premuto il primo tasto, impedendo all'utente di verificare ciò che ha inserito, e il suo colore grigio chiaro spesso non offre un contrasto sufficiente. Mantieni un'etichetta visibile sopra il campo e riserva il segnaposto a un esempio di formattazione.

Un modulo a due colonne è davvero meno efficiente?

Nella maggior parte dei casi, sì. Uno studio CXL condotto su 702 partecipanti ha rilevato un tasso di completamento più rapido del 13% per i campi a colonna singola. Le uniche eccezioni plausibili sono le coppie di campi correlati, come codice postale e città, e solo sui computer.

L'autofocus deve essere attivato sul primo campo?

Non su una pagina che contiene altro che il modulo. La messa a fuoco automatica fa sì che la pagina si sposti in modo anomalo, blocca lo scorrimento da tastiera e confonde i lettori di schermo. È utile solo per mettere a fuoco il titolo del nuovo passaggio in un modulo a più fasi.

Qual è il colore migliore per un pulsante di un modulo?

Non esiste una regola universale. Ciò che conta è il contrasto del pulsante con il resto della pagina e la leggibilità del suo testo (almeno 4,5:1). Un pulsante arancione su un sito web arancione è meno visibile di un pulsante blu sullo stesso sito web.

Un modulo a più passaggi converte sempre meglio?

No, solo se è ben progettato: una o due domande per schermata, una prima domanda semplice, progressi visibili e i dati di contatto per ultimi. Un modulo a tre campi non ha motivo di essere suddiviso.

Desideri applicare queste best practice senza modificare il codice? Provate Blastform gratuitamente o prenota una demo per rivedere il tuo modulo attuale con il nostro team.