Curare l’aspetto e l’interazione delle form è un’attività su cui qualsiasi web architect prima o poi si imbatte (e si sbatte).
Parliamo sia di semplici form di contatto con nome, cognome e email (anch’esse suscettibili di un design studiato), che di situazioni complesse in cui all’utente viene chiesto di districarsi tra date picker, multi select e chi più ne ha più ne metta.
In questi casi dobbiamo aiutare e guidare il più possibile l’utente, anche perché è proprio qui che gli si chiede di interagire nel maggior grado possibile.
Come possiamo farlo?
Una delle procedure più semplici (e spesso molto efficace) è quella di inserire informazioni funzionali sulla procedura, in prossimità del campo che stiamo chiedendo di riempire, spesso accompagnando le istruzioni con esempi.
Ciò traduce nella funzione di comunicazione informatica, che consiste nella traduzione,in parole o in grafica, la logica procedurale dei comandi.
Vediamo però come possono essere implementate tali funzioni, e quali sono le combinazioni più confusionarie e incoerenti.
(Ricordiamo che la coerenza è la chiave di qualsiasi progettazione usabile)
Di norma ogni valore che l’utente deve riempire è rappresentato da:
- nome del campo
- campo
- istruzione (comunicazione informatica)
- esempio
Nella progettazione delle form vengono spesso fatti errori di progettazione e di incoerenza sull’uso degli spazi entro cui inserire gli elementi.
Prendiamo l’esempio di seguito e analizziamo l’uso dello spazio dedicato all’operazione dell’utente, ovvero il campo stesso:
Esempio di una form con i campi precompilati
Spesso quest’area viene utilizzata anche per inserire alcuni degli elementi appena elencati, precomplilando la form, cercando di risparmiare spazio, ma il più delle volte non rispettando alcunacoerenza.
Nell’esempio il nome del campo è rappresentato al di fuori del campo stesso, separando lo spazio della meta informazione dallo spazio operativo, lo spazio cioè entro cui l’utente deve operare.
Questa divisione viene però poi rotta dall’inserimento, all’interno del campo stesso, di istruzioni sulla compilazione (password e password confirmation).
Con questa sovrapposizione l’istruzione viene oscurata nel momento in cui l’utente inizia a scrivere, vanificando l’utilità della stessa informazione.
Ha più senso inserire nel campo (sempre se proprio dobbiamo inserire qualcosa) un esempio del valore che ci si aspetta che l’utente compili (nell’esempio, first, last name ed email).
In questo caso la tipologia dell’informazione rimarrà la stessa (nome e cognome ed email, anche se non veritieri).
Nell’esempio, infine, sono identificabili chiaramente la scarsa costanza nell’impiegare questo spazio con diverse modalità di dialogo.
Difatti il campo è riempito con:
- un esempio
- un’istruzione sulla modalità di inserimento
- una istruzione sull’operazione da svolgere
senza alcuna ridondanza positiva per l’utente.
Riassumendo, nella compilazione delle form, per mantenere una costanza e una usabilità nella progettazione è necessario
- dividere lo spazio delle operazioni dedicate all’utente da quelle dedicate alle istruzioni
- rimanere costanti nelle informazioni associate ad uno spazio