Le applicazioni web usano i form in modo estensivo per raccogliere dati dagli utenti. Non sempre, però, vengono usate in modo consistente. Variazioni nell’allineamento dei campi e delle loro relative etichette, bottoni e gli elementi visuali che attorniano i form possono aiutare o impedire il corretto utilizzo degli stessi.

Oggi segnalo un ottimo articolo che prende in considerazione alcuni aspetti che caratterizzano i moduli web e ci aiuta a comprenderne i pregi e i difetti di alcune soluzioni.

Layout

Quando il tempo di compilazione deve essere ridotto al minimo e i dati da raccogliere sono facili e familiari all’utente come il nome, l’indirizzo, allora il layout da preferire è quello verticale. Etichette e campi sono uno sopra l’altro in modo da diminuire il movimento degli occhi e facilitare di conseguenza la lettura. L’accoppiamento tra etichetta e campo è data dalla prossimità verticale. Spesso, per aumentare il peso visivo dell’etichetta si consiglia di renderla in grassetto.

Quando invece i dati da raccogliere non sono familiari e il modulo è lungo, allora l’approccio migliore è quello delle etichette allineate a sinistra. In questo caso l’utente sarà facilitato nella lettura dei campi che potrà leggere tutti insieme.

Un modo alternativo è quello di allineare le etichette a destra, in modo da rafforzare il legame tra etichetta e campo. D’altro canto, questa soluzione crea uno spazio irregolare a sinistra che rende la scansione di lettura verticale meno immediata. Noi occidentali, abituati a leggere da sinistra a destra, preferiamo avere un punto fisso a sinistra, all’inizio della riga e per questo è meglio allineare le etichette a sinistra.

Uso di elementi visuali

Visto che la soluzione "orizzontale" a sinistra, sembra essere la migliore, cerchiamo di ovviare al suo principale svantaggio, cioè della separazione visiva tra il campo e l’etichetta.

Si possono aggiungere quindi sfondi colorati e righe di separazione. Sebbene questo approccio sembri ottimale, in realtà comporta alcuni problemi. Il modulo è in effetti sporcato da elementi che distraggono la nostra innata capacità di raggruppare visivamente gli elementi. Nella figura sotto, vediamo che sono stati introdotti 15 nuovi elementi.

Questo non significa che sfondi e righe di separazioni non debbano mai essere usate. Quando è fondamentale dividere blocchi di domande, sottili righe orizzontali e leggeri sfondi si possono usare. Entrabi questi elementi grafici sono soprattutto utili quando si vuole evidenziare il bottone che intraprende l’azione.

Azioni primarie e secondarie

L’ultimo aspetto che prendiamo in considerazione sono i bottoni o i link che permettono di compiere l’azione principale e secondaria. Di solito si tratta di sottomettere il modulo o di cancellarlo.

L’azione primaria deve essere visualmente molto carica (colori chiari, testo grassetto, sfondo colorato) rispetto agli altri elementi del modulo e deve essere allineata ai campi di immissione.

Quando un modulo ha più di un’azione possibile, come "continua" e "torna indietro", è consigliato diminuire la forza visiva dell’azione secondaria. Questo minimizza la possibilità d’errore da parte dell’utente e conduce l’utente alla terminazione del processo di compilazione.

(traduzione da Web Application Form Design, di User Interface Engineering)