Un campo di un modulo non sembra una cosa da poco quando lo stai compilando. È il momento in cui decidi se andare avanti o andartene. E quel momento dipende interamente dal fatto che il campo sia chiaro, che le istruzioni siano facili da seguire e che i messaggi di errore abbiano senso quando qualcosa va storto.
Gli studi mostrano che il 67% delle persone abbandona i moduli perché sono difficili da usare. Gran parte di questa difficoltà non dipende dal chiedere troppe informazioni. Dipende da come quelle informazioni vengono presentate nel singolo campo. Una sola etichetta poco chiara, un segnaposto confuso o un errore di validazione vago possono impedire a qualcuno di completare un modulo che vuole davvero compilare.
Questo articolo riguarda le regole pratiche, senza teoria, che trasformano i campi dei moduli da punti di attrito a strumenti di conversione. Vedrai come devono funzionare le etichette, perché i segnaposto falliscono quando i designer si affidano a loro e come i messaggi di validazione decidono se gli utenti si fidano del modulo o lo abbandonano. Se padroneggi questi dettagli, capirai perché alcuni brand vedono l'80% dei moduli completati mentre altri faticano ad arrivare al 50%.
Cosa rende un campo facile o opprimente
Un campo di un modulo è più di una casella di input. È una conversazione tra il tuo brand e il visitatore. Il campo pone una domanda, l'etichetta spiega cosa vuoi, il segnaposto offre un suggerimento. Il messaggio di validazione risponde quando qualcosa non va del tutto bene. Ogni pezzo lavora insieme per creare una sensazione.
Quella sensazione può essere "So esattamente cosa fare e mi fido" oppure "Non so cosa va qui e questo modulo sembra rotto". La differenza non è fortuna. È struttura.
Quando i campi sono facili, sembrano senza sforzo. L'etichetta ti dice quali informazioni vanno nel campo prima ancora che tu clicchi. Il campo ha abbastanza spazio per scriverci. Se sbagli, il messaggio di errore ti dice esattamente cosa è andato storto e come correggerlo. Attraversi il modulo con sicurezza.
Quando i campi sono difficili, creano attrito. L'etichetta potrebbe mancare o essere poco chiara. Inizi a scrivere e un segnaposto sparisce, così dimentichi cosa dovevi inserire. Compare un errore senza dirti qual è il problema e devi tirare a indovinare. Ogni campo diventa un piccolo rompicapo da risolvere. Dopo tre o quattro rompicapi, le persone se ne vanno.
Etichette dei moduli: rendile chiare e sempre visibili
Un'etichetta non è una decorazione. È l'istruzione che dice a chi compila quali informazioni vanno in un campo. Le etichette migliori sono chiare, descrittive e sempre visibili. Non nascoste. Non sparite. Sempre lì.
Ecco cosa mostra la ricerca. Quando un'etichetta sta direttamente sopra il campo e resta visibile mentre l'utente scrive, i tassi di completamento salgono. Quando le etichette sono sostituite da segnaposto che svaniscono appena qualcuno inizia a scrivere, i tassi di completamento calano. Il motivo è semplice. Le persone hanno bisogno di ricordare cosa hanno inserito, controllare gli errori di battitura e verificare il proprio lavoro prima di inviare. Se l'etichetta sparisce, non possono fare nessuna di queste cose.
L'etichetta dovrebbe descrivere il campo in modo da rispondere a una sola domanda. Quali informazioni vanno qui? "Indirizzo email" fa più lavoro di "Email". "Numero di telefono" è più chiaro di "Telefono". "Nome dell'azienda" batte "Azienda". Queste piccole differenze di precisione fanno la differenza tra una chiarezza immediata e un attimo di esitazione.
Evita le etichette che nascondono informazioni. Non usare etichette vaghe come "Altro", "Informazioni aggiuntive" o "Dettagli". Costringono l'utente a cliccare o a passarci sopra per capire a cosa serve il campo. Un'etichetta specifica come "Come ci hai conosciuti?" o "Qual è la tua sfida più grande?" fa il lavoro in anticipo e tiene le persone in movimento.
I campi obbligatori e facoltativi hanno bisogno di una distinzione visiva, ma non di una spiegazione a parole. La maggior parte dei moduli dice "I campi obbligatori sono segnati con un asterisco" e poi si aspetta che le persone ricordino questa regola. Meglio segnare i campi obbligatori in modo visibile (un asterisco o un puntino) e rendere evidenti quelli facoltativi con una piccola etichetta "(facoltativo)". Le persone sapranno a colpo d'occhio cosa è richiesto e cosa no.
I moduli lunghi o complessi traggono vantaggio da un breve testo di aiuto sotto l'etichetta. Non sono istruzioni per la vita. È una frase sola che chiarisce quando serve. Se chiedi un numero di telefono e ti serve un formato preciso, aggiungi una riga sotto l'etichetta: "Includi il prefisso. Non lo useremo per chiamarti senza chiedertelo prima." Quella riga evita errori di formato e crea fiducia. Ma tienila corta. Paragrafi di testo di aiuto sotto ogni campo fanno sembrare il modulo opprimente.
Per un approfondimento su come le scelte di layout influenzano la percezione dei moduli, vedi la nostra guida ai principi di design dei moduli: layout, spaziatura e gerarchia visiva.
Perché i segnaposto falliscono e cosa usare al loro posto
Un segnaposto è un testo dentro un campo che sparisce appena qualcuno ci clicca. Sembra utile. Sembra un suggerimento. In pratica è l'errore più comune nel design dei moduli.
Ecco cosa succede quando ci si affida ai segnaposto al posto delle etichette. Un visitatore arriva sul modulo. Il segnaposto dice "john@example.com" per mostrare il formato atteso. Clicca sul campo email e inizia a scrivere. Il segnaposto svanisce. Ora non vede più quale formato era atteso, quindi si chiede se lo sta facendo bene. Finisce di scrivere. Passa al campo successivo. Ora non ricorda se ha scritto bene la sua email, ma non può tornare a controllare perché il campo non mostra più il segnaposto. Così cancella e riscrive. Questo si ripete per ogni campo con la sola istruzione nel segnaposto. I tassi di completamento crollano.
La ricerca è schiacciante. I segnaposto danneggiano il completamento dei moduli, penalizzano l'accessibilità (gli screen reader ne hanno difficoltà) e creano attrito per le persone con disabilità cognitive o per chi compila in fretta mentre è distratto. Togliere i segnaposto come istruzione principale e aggiungere etichette visibili aumenta i tassi di completamento in modo misurabile.
Ecco cosa funziona: usa le etichette per le istruzioni e i segnaposto solo per gli esempi. Un campo con l'etichetta "Indirizzo email" e il segnaposto "your.name@company.com" funziona benissimo. L'etichetta dice all'utente cosa va nel campo. Il segnaposto mostra il formato senza nascondere l'istruzione. Quando l'utente clicca e il segnaposto sparisce, sa già a cosa serve il campo perché ha un'etichetta visibile che glielo dice.
Non ogni campo ha bisogno di un segnaposto. I campi semplici come "Nome" o "Nome dell'azienda" hanno bisogno solo di un'etichetta. Il segnaposto è utile per i campi in cui il formato conta (numeri di telefono, date, URL) o in cui l'utente potrebbe non sapere quale dato di esempio inserire (il nome utente su un social, un codice di invito).
Se ti viene la tentazione di usare un segnaposto al posto di un'etichetta per risparmiare spazio, costruisci comunque il modulo con le etichette e lasciale impilare. Un modulo con etichette visibili e senza segnaposto andrà sempre meglio di uno con etichette flottanti e segnaposto nascosti. Gli utenti completano i moduli più in fretta, fanno meno errori e si fidano di più del modulo.
Messaggi di validazione: trasforma gli errori in guida
La validazione è ciò che succede quando qualcuno compila un campo in modo sbagliato. Compare un messaggio di errore. In quel momento l'utente prova qualcosa. O sente che il modulo è rotto e confuso, o sente che il modulo lo sta aiutando a farlo bene.
I messaggi di validazione fatti male sono vaghi. Dicono "Input non valido" o "Errore" e nient'altro. L'utente non sa cosa è andato storto. Il formato era sbagliato? La risposta era troppo corta? Ha usato un carattere non ammesso? Deve tirare a indovinare e riprovare.
I buoni messaggi di validazione sono specifici e pratici. Invece di "Non valido", dì "La password deve avere almeno 8 caratteri e includere una lettera maiuscola e un numero." Dice all'utente esattamente cosa è andato storto e cosa fare per correggerlo. Il modulo non sembra più rotto. Sembra che stia aiutando.
Conta anche il momento. La validazione può avvenire in due modi. La validazione in tempo reale controlla il campo quando l'utente ha finito di scrivere e mostra subito un errore. Sembra reattiva e aiuta a cogliere gli errori prima dell'invio. La validazione dell'intero modulo avviene quando qualcuno clicca su invia, e tutti gli errori compaiono insieme. Sembra meno reattiva ma va bene per i moduli semplici. Combina le due quando puoi. Validazione in tempo reale per i campi critici (email, password, numero di telefono) e validazione dell'intero modulo all'invio per tutto il resto.
La posizione dei messaggi di errore influisce sulla possibilità di correggerli. Il testo dell'errore deve comparire subito sotto il campo che ha causato il problema, non in cima al modulo in un elenco riassuntivo. Quando l'errore è sotto il campo, l'utente può leggere l'errore e il campo nello stesso momento. Può vedere cosa ha scritto, capire cosa è andato storto e correggerlo subito. Quando l'errore è in cima al modulo in un elenco, deve tornare su, trovare il campo e ricordare qual era l'errore.
Il colore da solo non basta a segnalare un errore. Non affidarti solo a un bordo rosso o a un testo rosso. Alcuni utenti non distinguono i colori. Aggiungi un'icona (una X, un simbolo di avviso) e un testo di supporto, così l'errore è chiaro per tutti. Anche gli screen reader hanno bisogno di un testo per annunciare l'errore, non solo di un cambio di colore.
Il tono dei messaggi di errore conta per come le persone si sentono con il tuo modulo. Un messaggio brusco come "Hai inserito un'email non valida" fa sentire le persone come se avessero sbagliato qualcosa. Un messaggio utile come "Non riconosciamo il formato di questa email. Controlla che non ci siano errori di battitura e riprova" le fa sentire aiutate. Il secondo messaggio fa lo stesso lavoro ma rende l'esperienza più simile a una collaborazione che a un giudizio.
Per una guida su come costruire moduli accessibili a tutti gli utenti, leggi il nostro articolo sul design di moduli accessibili.
Come la spaziatura dei campi cambia quanto un modulo sembra accessibile
Un modulo è un ambiente visivo. Lo spazio intorno a ogni campo, la distanza tra etichette e campi e gli spazi tra i gruppi di campi mandano tutti segnali su quanto il modulo sia gestibile o opprimente.
Una spaziatura stretta fa sembrare dieci campi trenta. Ogni campo compete per l'attenzione visiva. L'utente non sa quali campi stanno insieme. Le etichette stanno vicine ai campi sotto di loro e l'etichetta successiva sta a pochi pixel più in basso. L'intero modulo sembra stretto e opprimente. L'abbandono avviene prima che sia compilato il primo campo.
Una spaziatura generosa tra i campi collegati e spazi più larghi tra i gruppi di campi fanno sembrare gli stessi dieci campi un processo breve e ordinato. Prima compili i dati di fatturazione. Poi uno spazio chiaro. Poi i dati di spedizione. Poi un altro spazio. I dettagli del pagamento. Il modulo sembra strutturato, non caotico. Non è spazio bianco sprecato. È architettura dell'informazione che guida l'utente nel processo.
I moduli per il telefono richiedono un'attenzione particolare alla spaziatura. Sullo schermo di un telefono, un modulo stretto è inutilizzabile. Ogni campo ha bisogno di abbastanza spazio verticale perché un dito possa toccarlo senza colpire un campo vicino. Un modulo per il telefono con una spaziatura verticale generosa e sezioni ben separate converte molto meglio di uno pensato per il computer e rimpicciolito per il telefono. Lo spazio non è sprecato. È funzionale.
Anche la posizione delle etichette influisce sulla percezione della spaziatura. Le etichette devono stare sopra i campi, non accanto. Quando le etichette stanno a sinistra, la distanza tra etichetta e campo cresce, creando confusione su quale campo appartenga a quale etichetta. Vale soprattutto sul telefono, dove le etichette a sinistra costringono il testo ad andare a capo o a rimpicciolirsi fino a diventare illeggibile. Le etichette sopra restano legate al loro campo e sembrano più pulite.
Indicatori di campi obbligatori e facoltativi che funzionano davvero
Ogni campo è obbligatorio (va compilato) o facoltativo (si può saltare). L'utente deve sapere quale è quale a colpo d'occhio, senza leggere testi di aiuto o istruzioni.
L'approccio tradizionale segna i campi obbligatori con un asterisco e dice "I campi obbligatori sono segnati con un asterisco". Funziona solo se gli utenti ricordano la regola. Molti no. Scorrono il modulo e vedono asterischi senza capire cosa significano.
Un approccio migliore segna i campi obbligatori in modo visibile (asterisco o puntino colorato) e indica esplicitamente i campi facoltativi con "(facoltativo)" accanto all'etichetta. Così una rapida occhiata dice all'utente se ogni campo è necessario. I campi obbligatori hanno un aspetto normale con un segno. I campi facoltativi hanno un'etichetta chiara. Non serve più ricordare una regola.
Alcuni moduli usano il colore per distinguere i campi obbligatori da quelli facoltativi. Può funzionare, ma richiede un contrasto alto e va combinato con etichette di testo, non usato da solo. Un asterisco rosso accanto all'etichetta funziona meglio di uno sfondo rosso del campo, perché lo sfondo del campo può rendere il testo inserito meno visibile.
Campi condizionali: mostrare solo ciò che serve
Alcuni campi dovrebbero comparire solo dopo che l'utente ha fatto una scelta in un campo precedente. Una casella "Vivo negli Stati Uniti" potrebbe mostrare un menu a tendina degli stati. Selezionare "Azienda" in un campo sul tipo di account potrebbe mostrare un campo per il nome dell'azienda. Questi campi condizionali riducono il carico mentale mostrando solo i campi che l'utente deve davvero compilare.
Quando compaiono i campi condizionali, devono comparire in modo fluido ed evidente. Una comparsa improvvisa senza animazione può spiazzare. Un effetto di dissolvenza o di scorrimento verso il basso rende chiaro il cambiamento. Il campo comparso deve avere la sua etichetta e la sua validazione come un campo normale. Non dare per scontato che l'utente capisca cosa deve fare solo perché il campo è comparso.
I campi condizionali funzionano meglio quando compaiono sotto il campo che li attiva, non sopra o di lato. L'utente fa una scelta e subito sotto quella scelta compaiono nuovi campi collegati. Così il percorso mentale resta lineare e la confusione cala.
Come WEMASY ti aiuta con il design dei campi
Il creatore di moduli di WEMASY include opzioni di campo personalizzabili, regole di validazione e messaggi di errore in tempo reale. Puoi impostare campi obbligatori e facoltativi, definire regole di validazione specifiche per i diversi tipi di campo e controllare esattamente quali messaggi di errore compaiono e quando. Così puoi costruire moduli che seguono ogni buona pratica di questo articolo senza scrivere codice.
Puoi anche controllare layout, spaziatura e posizione delle etichette con gli strumenti di design dei moduli di WEMASY. Crea moduli chiari, professionali e facili da completare.
Scopri quali funzioni sono incluse in ogni piano WEMASY.