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.

Interventi correlati:

1. ASP.NET: Mantenere lo stato – L’evento Page Load e i form Postback
   Corso ASP.NET: seconda puntata Esempio funzionante | Sorgente | Scarica il sorgente (zip) Le pagine ASP.NET sono un’istanza della classe Page, da cui ereditano alcuni eventi. Tra tutti gli eventi, il più usato è Page_Load. È il posto ideale in … Continua a leggere →...
2. Interfacce tolleranti
   Se dovessi scegliere una funzionalità di Google Calendar che ho trovato particolarmente utile è quella chiamata Quick Add. E’ cioè possibile aggiungere un evento al calendario senza doversi necessariamente posizionare sul giorno desiderato e inserire tutti i campi. Google Calendar … Continua a leggere →...
3. ASP.NET: Web Form Controls e gli eventi
   Sono i controlli più potenti che ASP.NET rende disponibili. Hanno il vantaggio di usare una nomenclatura coerente e di spostare l'attenzione del programmatore sulle logiche di sviluppo piuttosto che sul codice Html Continua a leggere →...