Buone pratiche per progettare i form
Segnalo tre ottime risorse che si propongono di aiutare nella progettazione di maschere di inserimento dati (form). Operazione solo a prima vista facile e spesso sottovalutata, ma piena di insidie e trabocchetti.
La prima, e sicuramente la migliore, è la presentazione di Luke Wroblewki, designer di Yahoo!, dal titolo Best Practices for Form Design, che è possibile scaricare in formato Pdf. Una presentazione piena zeppa di suggerimenti e consigli su come presentare e raggruppare i campi di un form. Ne segnalo solo alcuni:
- posizionare le etichette di campi in alto è utile per ridurre il tempo di completamento, ma richiede ovviamente più spazio verticale; allinearle a destra del campo lega con evidenza il campo e l’etichetta, ma può ridurre la leggibilità; allinearle a destra facilita la lettura delle etichette, ma ne riduce l’associazione con il campo
- vale la pena indicare i campi obbligatori solo se sono in minima parte, altrimenti meglio indicare quelli opzionali
- la lunghezza del campo fornisce preziose informazioni sulla compilazione
- è bene cercare di raggruppare campi che sono in qualche modo correlati, per velocizzare la compilazione del form
- le azioni primarie (salva, continua, invia) devono essere chiaramente separate ed evidenziate rispetto alle azioni secondarie (cancella, indietro, reset)
- meglio usare poche indicazioni su come compilare il form, da porre vicino ai campi che richiedono attenzione
Molti, molti altri consigli nella presentazione.
Un’alta interessante documento è la guida realizzata dal ministero del commercio norvegese: Simplified Forms for the Public Sector, progetto Elmer. Si tratta di una serie di linee guida rivolte principalmente al settore pubblico, suddivise in categorie e sezioni. Alcuni suggerimenti sono forse fin troppo specifici ed esagerati, ma darci un occhio matura sicuramente delle buone ideee per il futuro.
Vale la pena anche dare un’occhiata alla presentazione di Aaron Gustafson dal titolo Learning to Love Forms, decisamente più tecnica e che va diretta al codice Html. Anche qui interessanti suggerimenti, come quello di usare le liste al posto di “div” o paragrafi per ospitare i campi del form e qualche esempio su come utilizzare tag normalmente dimenticati, come legend e fieldset. Sono 100 slide con estratti di codice che vale davvero la pena di provare.
Commento di Xavier Debanne inserito il 30 luglio 2007 | Replica
Complimenti per la segnalazione di tre documenti importanti. In particolare ho apprezzato il primo; nonostante la sua dimensione (più di 110 slide), è veramente ricco di contenuti e di idee innovative, dalla prima slide all’ultima.