I form sono una delle modalità di interazione con l'utente più importanti e allo stesso tempo più odiate. Ai fini dell'esperienza la compilazione di un form deve risultare rapida e non ambigua.

In questo articolo vogliamo fornire dei consigli per il design dei form che possono risultare utili per velocizzare la progettazione e ridurre l'effort cognitivo dell'utente finale.

Struttura e componenti di un form

Un form è tipicamente composto da vari elementi che devono risultare strutturalmente e logicamente connessi tra di loro.

Campi di input

Sono l'elemento fondamentale di un form, possono essere di vario tipo, testuali, numerici, date, selezione multipla; per quanto riguarda quest'ultima una delle accortezze e delle possibilità di design che ci è data dalle moderne tecnologie è quella di evitare di utilizzare componenti come liste infinite di checkbox o select per gli input che sono già conosciuti all'utente, puntando quando possibile su quelli che offrono meccanismi di autocompletamento.

Un campo di input deve essere sempre accompagnato da una label:

• Una pratica da evitare è quella di usare il placeholder per indicare un campo.
• E' bene che la lunghezza del testo di una label sia ridotto in maniera tale da rendere il campo immediatamente individuabile nello scanning visivo della pagina.
• Evitare labels con testi completamente in maiuscolo.

Un'altra pratica da evitare assolutamente è quella di utilizzare un campo di input disabilitato in un contesto di sola lettura (es. dettaglio di un entità); oltre ad essere potenzialmente dannosa in fase di development rende i form e i campi stessi meno riconoscibili dall'utente all'interno dell'applicazione.

Layout e Gruppi di Input

E' bene, soprattutto vista l'attuale predominanza del mobile, che i form mantengano una verticalità e i singoli campi siano disposti su un'unica colonna.

Tale discorso vale anche in riferimento alle label, che risultano più leggibili quando poste in alto rispetto al relativo campo, e per i campi di selezione multipla, come ad esempio i checkbox.

L'eccezione è data dai singoli campi logicamente connessi tra di loro, che dovrebbero essere organizzati in gruppi e resi identificabili nei layout (es. anagrafica). I gruppi di cui parliamo devono essere identificati dal punto di vista dell'utente e non del sistema o della base dati.

Definire un ordine che rispecchia gli studi sulle gerarchie visive aiuta a non spezzare il momentum dell'utente durante la compilazione di un form.

Azioni

Le azioni su un form, come il classico "submit", spesso rappresentate tramite un pulsante sulla UI, devono essere facilmente distinguibili e il loro livello di visibilità deve essere correlato alla loro importanza.

• Rendiamo le azioni secondarie meno accessibili, in maniera tale anche da evitare missclick da parte dell'utente.
• Riguardo click accidentali, evitare in maniera assolutata azioni che azzerino il contenuto di singoli campi o peggio ancora dell'intero form.
• Manteniamo delle convenzioni riguardo il naming e utilizziamole in tutti i form dell'applicazione.

Feedback sui Form

I feedback sui form, sottoforma di testi, colori e icone, servono a trasmettere un messaggio dal sistema verso l'utente. Possono essere generalmente di due tipi:

• Informativi, descrizioni accessorie, tooltip che aiutano l'utente a comprendere meglio cosa deve fare. Un feedback di questo tipo va usato con discrezione: il form nel suo complesso deve risultare facilmente leggibile e compilabile in poco tempo, se abbiamo bisogno di dare troppi suggerimenti all'utente affinché riesca a completarlo evidentemente c'è un errore di design alla base.
• Di Validazione, successo o errore. La validazione inline è la pratica consigliata e anche in questo caso è bene seguire un flusso verticale, mostrando ad esempio un testo di errore in basso rispetto al relativo campo.

I colori e le icone sono molto importanti a questo proposito ed è bene seguire una classificazione rigorosa. Quando non è possibile eseguire una validazione inline, eventuali messaggi di errore devono risultare diretti e comprensibili. per ulteriori informazioni rimandiamo all'apposita serie sulle notifiche e feedback.

Test di usabilità

Per creare un form soddisfacente ai fini dell'esperienza utente i test di usabilità sono uno strumento essenziale:

• Possiamo capire il tempo medio di compilazione di un form e agire sulle sezioni che maggiormente contribuiscono al rallentamento.
• Riusciamo a identificare i punti ostici e meno comprensibili e apportare le dovute modifiche o aggiungere suggerimenti a riguardo.
• Abbiamo feedback riguardo i meccanismi di segnalazione degli errori e sulla validazione del form.