UX & Coding

Form Design: 8 consigli per aumentare le conversioni

"Creare un form efficace significa progettare un percorso di raccolta dei dati che riduce al minimo la possibilità di errore o di incomprensione"

I from sono ormai diffusi su praticamente ogni sito che abbia un obiettivo di conversione o raccolta lead. Una corretta progettazione è indispensabile per non creare punti di blocco e deve tenere conto di tutti gli accorgimenti necessari per facilitare la compilazione.

Progettare un form efficace

Ecco alcuni consigli che dovrebbero essere sempre tenuti in considerazione per un form che funziona.

Meno campi possibili

Può sembrare la regola più scontata ma spesso si sottovaluta la disposizione o la tipologia di campi utilizzati: qualsiasi strumento che può rendere la compilazione più facile contribuirà ad ottenere una percentuale di completamento più alta.

Esistono svariate soluzioni tecniche per ogni device che contribuiscono a limitare la quantità di campi garantendo la registrazione delle stesse informazioni.

Form numero campi

Privilegia opzioni di scelta rapida

Più volte chiedi ai tuoi utenti di interagire o di pensare a qualcosa e più sarà maggiore lo sforzo cognitivo necessario. Ad esempio, un menu a tendina semplice potrebbe richiedere fino a 3 interazioni:

  • fare clic per l’apertura delle opzioni
  • effettuare uno o più scroll per trovare l’opzione corretta
  • fare clic per confermare
Form opzioni

Sostituire i menu a tendina che dispongono di poche opzioni (da 1 a 5 risposte circa) con i pulsanti di scelta rapida (radio o checkbox) garantisce un tempo di risposta dell’utente notevolmente migliore perché consente di vedere le risposte senza click prima di interagire.

Questo è anche un grande vantaggio per il mobile dato che statisticamente gli utenti che trovano dropdown sono meno propensi alla compilazione.

Ordina con criterio i campi

I campi devono essere ordinati dai più semplici a quelli più difficili da compilare: quando qualcuno intraprende una piccola azione con successo si sente più motivato a proseguire.

Le informazioni più sensibili, complicate (es. l’inserimento di un codice fiscale) devono essere rimandate alla fine del form per evitare di creare attrito. Dove possibile è inoltre consigliato assistere l’utente precompilando logicamente i campi (se ho utenti quasi solo italiani posso suggerire come scelta du default per la nazionalità “Italia”).

Riduci al minimo il numero di colonne

I form non dovrebbero mai essere costituiti da più di una colonna. Le colonne multiple interrompono il flusso di lettura verticale (più efficiente) costringendo l’utente a cambiare orientamento per completare tutti i campi.

Possono fare eccezione i campi molto brevi o logicamente connessi (es. città, stato e codice postale potrebbero essere presentati sulla stessa riga).

Form numero colonne

Raggruppa le informazioni correlate

In presenza di un numero di campi elevato, le informazioni dello stesso gruppo dovrebbero essere raggruppate in blocchi logici distinti: questo consente all’utente di comprendere meglio la tipologia e la diversità delle informazioni che deve compilare.

Questo accorgimento aiuta inoltre l’utente a percepire il form come un insieme di più blocchi con meno campi rispetto ad un’unica lunga registrazione.

Form grouping
Il modulo di registrazione di destra è più facile da completare rispetto a quello originale (a sinistra) perché i campi sono raggruppati, facendolo percepire come tre moduli brevi

Errori di validazione

Il form o deve essere in grado di fornire informazioni chiare sugli errori e non deve mai inibire la possibilità di inviare i dati (disabilitare l’invio se si riscontrano errori non è una buona pratica).

I messaggi di errore devono essere sempre contestuali al campo e possibilmente devono apparire in tempo reale; anche un riepilogo in alto, che riassume gli errori dopo un tentato invio, è una buona idea perché aiuta l’utente a orientarsi nella risoluzione dei problemi.

Form validazione

Aiuta la compilazione con i feedback

La convalida in tempo reale è un bel modo per indicare, avvisare e prevenire gli errori. Invece di aspettare un inutile tentativo a vuoto di invio dei dati per conoscere l’esito è molto più efficace comunicare subito cosa sta andando storto.

Form feedback
Un ottimo esempio di convalida in tempo reale

In un test condotto da Luke Wroblewski è stata messa a confronto la convalida inline contro il metodo più classico ed i risultati hanno favorito notevolmente il primo approccio registrando:

  • un aumento del 22% delle conversioni
  • una diminuzione del 22% degli errori
  • un aumento del 31% del grado di soddisfazione
  • una riduzione del 42% dei tempi di compilazione

Un utente non dovrebbe dover indovinare cosa funzionerà e cosa non lo farà. Più è facile capirlo meno saranno commessi errori, e più conversioni potranno essere portate a termine.

Fornisci un aiuto per i campi più complicati

È importante dare assistenza sulla compilazione dei campi quando le etichette da sole non sono sufficienti. I campi che richiedono una spiegazione dovrebbero essere sempre in numero ridotto soprattutto su mobile.

I tooltip sono un’ottima soluzione per organizzare le informazioni di dettaglio senza caricare eccessivamente il form ed è sempre consigliabile non usare un’icona ma testi descrittivi (es. “Non sai dove trovare il codice amico?”).

Utilizzo di tooltip nei form

Raccogliere dati per migliorare

Questi sono solo alcuni consigli per la corretta implementazione di un form e tengono in considerazione i parametri di progettazione più importanti ma è necessario analizzare in modo approfondito ogni singolo caso.

Un form inserito una Landing Page avrà problemi differenti da un percorso di acquisto (funnel) su un e-commerce ed è fondamentale analizzare sempre i dati per testare soluzioni differenti e più performanti.

Aggiungi un commento

UX & Coding

Articoli recenti

Newsletter

Inserisci la tua email per restare aggiornato sulle ultime novità.