I form sono da considerare come conversazioni tra persone.
Aiutano ad automatizzare le richieste di contatto e a ridurre la burocrazia, se fatti bene.

Creando un form, si costruisce sostanzialmente un’interfaccia in cui avviene il dialogo.
Quindi, l’obiettivo è assicurarsi che il modulo faccia le domande giuste al momento giusto.

 

Una colonna o più?

Ci sono molti dibattiti su come debba essere strutturato un form: c’è chi dice che deve sempre adattarsi allo schermo, chi afferma vada progettato a più colonne, ecc ecc.

Come sempre la risposta è: «dipende».
Da cosa? Dalle circostanze.
A volte, infatti, può essere utile utilizzare tutto lo spazio sullo schermo, altre volte non funziona.

Ad esempio, se le persone devono eseguire una lettura a “Z” dei moduli l’efficacia sarà minore rispetto alla singola colonna, nel quale il percorso per il completamento risulta più diretto.
Con un’impostazione a 2 colonne è più probabile sbagliare e/o saltare campi obbligatori o utili per l’utente.

Ordina il modulo logicamente

Lo so, sembrerà banale, ma è bene precisarlo.
Sarebbe insolito chiedere l’indirizzo di qualcuno prima del proprio nome.

 

Ridurre al minimo il numero di campi

Una buona pratica potrebbe essere quella di nascondere i campi facoltativi in una casella espandibile
o spostarli in un “pannello” aggiuntivo a lato.

Rimuovi i campi che non sono necessari o che possono essere combinati con altri.

Per semplificare i form, combinare più campi in uno solo è la chiave per aumentare il numero di conversioni.
Un perfetto esempio è la data, spesso divisa in tre campi: uniscila in un solo campo.

I form più complessi possono essere suddivisi su più pagine

Un conteggio dei passaggi aiuta la navigazione e mostra all’utente dove si trova all’interno del processo di compilazione.
I forme molto strutturati portano a un sovraccarico cognitivo e alla demotivazione del completamento. Semplificarlo è facile: sarà sufficiente dividerlo in parti più piccole, utilizzando tabulazioni o blocchi/passaggi espandibili.

Raggruppamento moduli

Raggruppare i campi può essere utile per semplificare il processo di completamento.
Ad esempio, si può creare un gruppo per le informazioni personali, un gruppo per dettagli di pagamento e un altro per i dettagli di spedizione.

 

Etichette

Generalmente si posiziona l’etichetta a sinistra dei campi d’inserimento nel caso di form molto lunghi e in alto per quelli più brevi.

Rendi i testi delle etichette brevi.
Elimina eventuali frasi esplicative sotto o vicino a un campo.
Lascia solo gli elementi essenziali.

Cerca sempre di ridurre il numero di parole e arriva subito al punto.
Le persone non le leggeranno, scorrono rapidamente.

Una cosa è certa: NON USARE MAI IL CAPS LOCK. La forma sembrerebbe poco professionale e sarebbe difficile da scorrere velocemente con gli occhi.

Altro elemento fondamentale è la coerenza linguistica: rimanere sempre coerenti e utilizzare parole comuni relative al prodotto è importante.

 

Segnaposto

È un’ottima soluzione per i piccoli form, come quelli di login o registrazione.
Tuttavia, funzionano male nel caso in cui ci fossero molti campi: in questo caso, infatti, il testo inserito dall’utente andrebbe a sovrascrivere quello del segnaposto, impedendo una successiva revisione in mancanza di descrizione. Se hai una memoria di ferro non è un problema, altrimenti l’unico modo per visualizzare i segnaposti è cancellare temporaneamente gli inserimenti. Non una grande esperienza 😉

Una soluzione efficace per questo problema sono i “floating labels“.
Sembrano a tutti gli effetti segnaposti, ma al momento del clic sul campi, il testo descrittivo si sposta in alto e diventa un’etichetta.

Possiamo usare nello stesso form sia le etichette che il segnaposto. Tuttavia, ognuno ha il suo scopo.
Le etichette richiedono dati, il segnaposto mostra l’esempio di risposte che generalmente si conosce già.

Pulsanti

Fondamentali per distinguere le azioni primarie da quelle secondarie.
Rendere questi pulsanti visivamente diversi è importante. Inoltre, se uno dei pulsanti prevede di tornare indietro o annullare, assicurati che si trovi sulla sinistra dell’azione principale, ad esempio “Conferma” o “Invio”.

Il pulsante di conferma dovrebbe essere proprio sotto l’ultimo campo.
Quindi, è sempre bene farlo comparire quasi come una continuazione del form e fine di esso allo stesso tempo.

Cerca di essere specifico con i nomi. Non utilizzare nomi generici come “Invia” o “Fatto“.
Far sapere all’utente che azione stanno per compiere cliccando su questo pulsante è fondamentale. Ciò aiuta a creare fiducia e rendere il modulo più professionale.

Automazioni

Evita il più possibile la necessità di compilare tutti i campi del form.
Consenti l’auto-compilazione di campi uguali che potrebbero ripresentarsi in un secondo momento, così da evitare la scocciatura di inserire due volte lo stesso dato.

Ciò è rilevante per la crescente tendenza dell’apprendimento automatico.
Un’interfaccia moderna può aiutare a compilare moduli tenendo conto delle esperienze precedenti.

Ad esempio, un modulo relativo alle tesse può essere calcolato automaticamente attingendo dati da diverse fonti come conto finanziario, transazioni, invii precedenti, ecc.

 

Feedback

Lascia uno spazio per il feedback sotto alle voci del form.
Questo potrebbe aiutare a fornire agli utenti una rapida verifica dei dati inseriti.
La convalida immediata del campo aggiunge punti preziosi alla fiducia e alla professionalità.

Anche fornire un indicatore visivo del campo che si sta compilando è una pratica molto apprezzata: permette di avere più concentrazione sul campo selezionato e aiutare a riprendere il completamento nel caso l’utente si dovesse distrarre momentaneamente dal form.

Altri elementi utili

Nell’esperienza mobile, è bene abbinare il tipo di tastiera con il tipo di dati che si intende far inserire: se richiesto il numero di telefono infatti, è apprezzato che compaia direttamente il tastierino numerico anziché con le lettere.

E ricorda: form performanti = maggiori conversioni.
Continua a seguirci se vuoi restare aggiornato sui temi di UI-UX Design.