In un sito web o in una app funzionale, i moduli servono agli utenti per utilizzare i tuoi sistemi. Il ruolo dei form nel web design è di raccogliere dati dagli utenti per completare un’attività o inviare informazioni. È importante che i moduli soddisfino determinati standard per rendere la tua piattaforma online più amichevole possibile. Questi standard comprendono gli aspetti visivi e il design, che deve essere pulito e semplice. Oltre a questi aspetti grafici, la cosa più importante di un modulo è la progettazione dei campi in modo da ottenere informazioni utili, nient’altro.
COSA FA UN MODULO?
Ci sono numerosi aspetti da tenere presente nella creazione di un modulo ottimale. La maggior parte dei form sono realizzati con l’obiettivo di fornire agli utenti un’interfaccia attraente che consenta loro di immettere facilmente le informazioni necessarie. La struttura di un form è estremamente importante, insieme alla traduzione del contenuto e alla sua localizzazione.
TRADUZIONE E LOCALIZZAZIONE
Se la tua azienda o organizzazione opera su scala internazionale sarà più che probabile avere clienti che parlano una gran varietà di lingue. Per garantire una raccolta efficiente dei dati, è fondamentale avere i moduli tradotti. Alcuni browser web hanno un software integrato che sostiene di tradurre in modo efficace i contenuti con una traduzione automatica. È però consigliabile aggiungere un tocco più personale al modulo utilizzando traduzioni realizzate da persone, quindi con una migliore qualità data dalla localizzazione professionale dei contenuti. I moduli sono composti da diverse sezioni chiave. La struttura di un modulo comprende il suo aspetto e l’ordine di presentazione delle sezioni. I campi di input sono importanti perché vengono utilizzati per ricevere informazioni di base come il nome, la password, le e-mail, ecc. Di seguito sono riportati gli elementi chiave dei moduli più efficaci e tutto quello che un modulo dovrebbe avere. Questa descrizione è stata concepita dallo sviluppatore Nick Babich.
STRUTTURA
La struttura di un modulo può davvero influenzare il modo in cui viene compreso dagli utenti. Per rendere le cose più facili è opportuno prestare attenzione all’ordine in cui vengono poste le domande. Ad esempio, bisogna chiedere il titolo e il nome prima del codice postale e dell’indirizzo. I moduli dovrebbero chiedere solo ciò che è essenziale. Rendere un modulo più lungo del necessario otterrà solo il risultato di ridurre il tasso di completamento. La struttura dovrebbe contenere gruppi di informazioni correlate e pertinenti. Ad esempio, le informazioni personali come il nome e la data di nascita potrebbero costituire un unico gruppo. A seguire, le informazioni sull’account, ad esempio un indirizzo e-mail e una password, potrebbero costituire un altro gruppo. La sequenza degli input necessari influenzerà la struttura di un modulo. Un modulo efficiente richiede all’utente solo di scorrere verso il basso, mentre le colonne multiple possono interrompere l’ordine di inserimento dei dati e aggiungere una complessità inutile.
CAMPI DI INSERIMENTO DATI
I campi di input dei dati sono le aree dove gli utenti immettono le informazioni richieste. Questi campi possono comprendere spazi per gli indirizzi e-mail, le password, le date, le caselle da spuntare e altro ancora. Per mantenere i moduli efficienti e user-friendly, è meglio mantenere il numero di campi al minimo. Crea campi di input solo per informazioni assolutamente necessarie. Da 5 a 7 campi sono solitamente sufficienti per porre domande appropriate e ottenere tutte le informazioni desiderate. Un modulo lungo e complesso con molti campi di input può intimidire gli utenti e portarli a rifiutare di compilare completamente il modulo. È meglio evitare gli input facoltativi per ridurre il disordine. Se decidi di includere campi opzionali, assicurati di contrassegnarli come tali. Fai attenzione quando devi impostare le opzioni predefinite: in questo modo si può portare gli utenti a scorrerle rapidamente senza immettere le informazioni corrette. Un esempio di questo errore è l’impostazione di un paese predefinito, anche se questa informazione può essere ricavata dai dati di geolocalizzazione.
MASCHERE DI INSERIMENTO DATI
In un campo di input dati, la maschera rende più facile agli utenti l’inserimento delle informazioni ed evidenzia più facilmente gli eventuali errori. Le maschere di input possono essere applicate a campi come la carta di credito e i numeri di telefono. L’uso di parentesi, trattini e gli spazi può essere preimpostato per impedire agli utenti di aggiungere troppi caratteri. Assicurati di rendere i moduli amichevoli per ogni specifica interfaccia. Gli utenti dei sistemi desktop dovrebbero essere in grado di utilizzare facilmente la tastiera e il tasto di tabulazione. Gli utenti di smartphone devono essere dotati di una tastiera adeguata alle informazioni richieste. Le funzionalità di completamento automatico sono utili, ad esempio quando si digita in un indirizzo. Questo rende il processo molto più efficiente per gli utenti.
ETICHETTE
Le etichette sono essenziali per aiutare gli utenti a navigare nei moduli e comprendere ciò che richiede ogni campo di input. Le etichette dovrebbero essere brevi e dirette, utilizzando il minor numero possibile di parole. Utilizzare i caratteri del testo invece di quelli dei titoli rende le etichette più attraenti e pratiche. Il formato “titolo” rende maiuscola ogni parola, mentre il formato “frase” ha solo la prima parola maiuscola. Non è necessario scrivere tutte le parole in maiuscolo perché questo rende i moduli più difficili da leggere e da scorrere visivamente. Le etichette possono essere disposte a lato o sopra ai campi di input. Le etichette allineate in alto sono associate a maggiori velocità di completamento, ma potrebbero non essere ideali per moduli più lunghi perché aumentano la lunghezza complessiva. Le etichette allineate a sinistra richiedono meno spazio verticale, ma sono associate a una velocità di completamento più bassa. Le etichette allineate a destra hanno un buon tasso di completamento, offrono una migliore connessione visuale, ma sono più difficili da leggere e scorrere con gli occhi.
TASTI DI AZIONE
Gli action button sono usati sui moduli per eseguire un’azione, ad esempio per l’invio di un modulo. Di solito si trova una maschera con pulsanti di azione come “invia” e “annulla”. È utile impiegare alcune distinzioni visive tra questi pulsanti per aiutare gli utenti a evitare di fare clic su quello sbagliato. Ad esempio si può rendere il pulsante “invia modulo” più grande e più attraente dal punto di vista visivo. Questo tipo di pulsanti di azione dovrebbe essere posto sotto il modulo. Fornire conferme visive sull’effetto di un action button consentirà all’utente di capire chiaramente che ha fatto clic. Queste conferme possono comprendere modifiche del colore o della profondità del tasto.
VALIDAZIONE
La validazione può indicare all’utente i suoi eventuali errori, impedendo la presentazione del modulo. Per rendere il processo di correzione più facile e veloce, la funzionalità di validazione mostrerà specificamente quali campi risultano mancanti. Esistono numerose sottili considerazioni da prendere durante la progettazione di un modulo di acquisizione dati. Quanto abbiamo detto finora dovrebbe essere un buon inizio per realizzare moduli in grado di interagire facilmente con i tuoi utenti.
