Tra i vari elementi standard di un’interfaccia figurano i form di compilazione.
Quasi ogni layout utilizza almeno un form. I motivi possono essere i più disparati, come ad esempio la raccolta di contatti, prenotazioni, sondaggi, registrazioni e molto altro.
I form sono solitamente costituiti da un agglomerato di campi di input vuoti, label e pulsanti.
Sembrano estremamente semplici raccontati così, vero? Quindi perché dovremmo prestare così tanta attenzione alla loro progettazione?
L’obiettivo primario di un form, di solito, è quello di ottenere dati senza che l’utente si senta sopraffatto durante la compilazione, per convertire gli utenti in potenziali clienti.
Un form progettato male può portare a molti problemi a causa degli errori a cui può portare, aumentando inoltre il tempo necessario all’utente per compilarlo correttamente e completamente.
Per creare form migliori e, di conseguenza, una migliore esperienza utente, è necessario seguire determinate linee guida e regole.
Le best practice di cui parlerò ogg vi aiuteranno a progettare form intuitivi, semplici e completi.
Cappello introduttivo
Come già detto, molti layout presentano almeno un form, ma cosa stiamo chiedendo di compilare, esattamente?
Come dice la 1^ euristica di Nielsen, tenere informato l’utente è fondamentale.
Basta poco, un titoletto ed un breve paragrafo chiari e descrittivi sono sufficienti per far conoscere agli utenti qual è la tipologia di dato richiesta e il motivo per cui è necessario che procedano alla compilazione.
Possono trarre dei vantaggi? Il form permette di accedere ad un dato servizio? Specificatelo, in modo che nessuna persona si trovi a procedere alla cieca.
Impostazione a colonna singola
Impostare un form su più colonne affiancate frammenta la scansione dei contenuti.
Un pattern di lettura a zig zag, derivante dall’uso di più colonne, rende un form meno chiaro e più difficile da seguire. Questo comporta, di conseguenza, anche un aumento del tempo richiesto per la compilazione dei campi.
Test di eye tracking hanno dimostrato come, infatti, gli utenti ci mettano più tempo se devono saltare da una colonna all’altra.
Per ovviare a questo problema è sempre meglio optare per form ad una sola colonna.
Quando si imposta un modulo a colonna singola, gli occhi dell’utente si muovono naturalmente, spostandosi dall’alto verso il basso.
Il layout ad una sola colonna verticale è più immediato da scansionare e, quindi, più rapido da compilare.
Inoltre, la colonna singola riduce il rischio che gli utenti perdano di vista eventuali campi affiancati.
Ci sono chiaramente delle eccezioni, poche, ma ce ne possono essere. Un esempio possono essere le date: giorno, mese e anno sono tre dati che completano una stessa informazione, sarebbe strano dividerle in 3 righe diverse.
Gruppi di informazioni simili
I form troppo pieni di campi di input possono sfociare in un notevole carico cognitivo.
Per evitare che si verifichi ciò, è consigliato raggruppare visivamente i vari campi in sottosezioni, aggiungendo un titolo e una spaziatura appropriati per dare vita a dei gruppi di dati (es. dati personali, dati aziendali ecc).
Dividendo le richieste in gruppi più piccoli, sarà più facile per gli utenti ricordare in quale sezione del modulo si trovino e la compilazione risulterà meno stressante.
Se il form è parecchio lungo, è buona pratica suddividerlo in più step (wizard o stepper). Questo semplifica la consultazione, permettendo di concentrarsi su un piccolo gruppo di dati per volta.
Call to action
Keep it simple, come sempre, inserendo una singola CTA.
Se fosse necessario aggiungerne più di una, assicuratevi di differenziare i pulsanti primari e secondari, rendendo l’azione primaria più visibile.
L’utente deve essere in grado di percepire immediatamente quale pulsante sia quello principale per svolgere l’azione primaria richiesta.
La label della cta, ovviamente, deve essere chiara e descrittiva. Non ci devono essere dubbi sull’azione che l’utente sta per compiere.
Per progettare form migliori, è importante, inoltre, rispettare il flusso di lettura dall’alto verso il basso, per questo il pulsante deve sempre essere posizionato in chiusura del modulo di compilazione.
Spazi e posizioni
Non ripeterò mai abbastanza quanto lo spazio sia un elemento fondamentale in un’interfaccia.
Molti utenti possono rimanere scoraggiati da un form troppo “intasato”, optando per l’abbandono.
Lasciare abbastanza spazio tra i campi è fondamentale per dare aria alla composizione e alleggerire l’esperienza.
Inoltre, fare leva sulla Legge di Prossimità della Gestalt è importantissimo: gli elementi vicini tra loro risultano correlati agli occhi di chi osserva, quindi è consigliato posiziona la label più vicina al campo di input che descrive, rispetto a qualsiasi altro campo del form.
È importante non creare confusione inserendo una label a pari distanza da due campi diversi.
