Quando il cliente va di fretta

L’errore più comune commesso da chi progetta interfacce e interazioni per il web è credere che, trovata una soluzione, questa sia applicabile in ogni contesto.

Illuminante in questo senso l’esempio riportato da Luke Wroblewski nel proprio blog.

Immaginate di trovarvi in aeroporto e di avere 10 minuti di tempo per collegarvi a un provider wireless per leggere la posta.

Ecco, in questo caso l’interfaccia deve davvero mirare al sodo e limitare gli errori introdotti dal cliente, tanto che perfino la procedura di registrazione potrebbe essere superflua o, perlomeno, evitare il continuo caricamento della pagina a ogni invio.

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.

Designer oggi

Consiglio a chiunque si occupi di progettare interfacce per applicazioni web, ma anche di semplici siti, la lettura della trascrizione dell’intervento di Luke Wroblewski, Senior Principal Designer a Yahoo!, alla User Interface Conference a Cambridge, nel 2006.

Una presentazione importante per capire come cambia il ruolo del web designer ai nostri giorni. Design non significa più solo abbellimento, ma anche innovazione. E non si tratta di decidere se un bottone dev’essere sottolineato, bold o rosso, ma si tratta di guidare l’utente nell’uso e fruzione del sistema in costruzione.

I fattori che guidano questo cambiamento di rotta nella professione sono 3:

  • i mercati in rapida evoluzione ed espansione e crescita, anche quelli nati da poco. Quando i mercati sono maturi, più produttori offrono un prodotto con le medesime funzionalità, che deve differenziarsi anche grazie al design
  • le esigenze degli utenti cambiano radidamente e la tecnologia, in taluni casi, le anticipano. Il design è in continua evoluzione
  • information overload (sovraccarico di informazioni). Un buon design aiuta l’utente a districarsi con facilità anche tra dati e processi ad altra complessità

Una professione in continua evoluzione, quindi. Ma i designer italiani, web e non, se ne rendono conto, o continuano a ragionare solo in termini di spazi, colori, risoluzione, fondini?