L'allineamento dei campi in un form

Quando si crea un form web, una delle tante scelte che si deve fare è come allineare le etichette con i campi d'inserimento.
Questa non è una decisione banale, in quanto questa posizione influenza la leggibilità e la fruibilità del nostro form. Diamo un'occhiata alle possibili scelte e analizziamo i vantaggi di ognuna.

TOP-ALIGNED LABELS
In questo caso il completamento della maggior parte delle informazioni risulterà più veloce, ci sarà meno confusione per gli utenti, e meno movimento per gli occhi di chi è impegnato nella compilazione.
Ogni etichetta ed il rispettivo campo risultano raggruppati in poco spazio e l'allineamento uniforme in verticale.
Gli occhi dell'utente si devono muovere in una sola direzione: verso il basso, quindi il tempo dedicato alla compilazione risulterà minore.
Un altro vantaggio dell'allineamento verticale è la quantità di spazio orizzontale risparmiato. Se il vostro form sarà tradotto o comunque offerto in un'altra lingua, tale margine può essere di vitale importanza. Lingue diverse possono avere etichette più lunghe di quelle della prima lingua utilizzata.
Per contro se il form è piuttosto lungo avremo un ingombro verticale piuttosto ampio dato dalla somma dell'altezza di: label + input field + margine tra i due elementi. Il tempo di compilazione è destinato ad allungarsi a causa del tempo perso anche per lo scorrimento del form verso il basso.



LEFT-ALIGNED LABELS
L'allineamento delle etichette a sinistra risulta invece il migliore per quanto riguarda la velocità di lettura dei nomi dei campi.
Dal momento che sono tutti in ordine verticale uno sotto l'altro, gli utenti possono rapidamente individuarli leggendo le etichette. Questo può essere l'ideale quando il modulo sta chiedendo dati insoliti, e l'etichetta di ciascun campo deve essere molto chiara ed intuitiva.
L'allineamento a sinistra delle etichette ha il vantaggio di richiedere molto meno spazio verticale. Di contro ingombra più spazio in orizzontale a causa dell'affiancamento delle label e del campo input.
Lo svantaggio più grande dell'allineamento delle etichette a sinistra è un tempo più lento di completamento del form a causa della distanza visiva tra l'etichetta ed il campo di input. L'utende deve saltare con gli occhi da una colonna all'altra, per trovare il campo associato all'etichetta corrispondente, prima di procedere all'inserimento dei dati. Più veloce da leggere è l'etichetta, più rapido sarà l'inserimento dei dati nel campo.
La lentezza di completamento non è sempre una cosa negativa nel caso si richieda l'inserimento di dati poco facili da ricordare. Se si richiedono dati particolari come il numero di un documento o del codice fiscale rallentarne appositamente l'inserimento in modo che l'utente presti maggior attenzione alla compilazione degli stessi e non commetta errori, può essere una buona cosa e può essere agevolata da questo tipo di allineamento.



RIGHT-ALIGNED LABELS
L'allineamento delle etichette a destra presenta più o meno gli stessi vantaggi/svantaggi dell'allineamento a sinistra: hanno bisogno di più spazio orizzontale, ma di meno in verticale.
Persiste il problema del supporto multilingua.
Il grande vantaggio è il forte legame visivo tra l'etichetta ed il campo di input. Nei form più corti, si può avere un grande vantaggio per quanto riguarda i tempi di completamento. A volte fino a due volte più veloce di un form con allineamento a sinistra, visto che eredita meno il problema visivo della lontananza tra l'etichetta ed il campo di input.
Lo svantaggio maggiore dell'allineamento a destra è dato dalla maggior scomodità di lettura del testo. Il form risentirà della mancanza dell'allineamento a sinistra, che lo renderà meno comodo da guardare e difficile da leggere.
Questo problema è ridotto al minimo per quanto riguarda form di piccole dimensioni e con dati facili da compilare. Diventa invece un problema con i form che presentano molte domande e dai dati più complessi.

Condividi

0 Commenti