Form che funzionano: una checklist per valutare l’usabilità dei form

10 maggio 2006

Questa è la traduzione dell’articolo Sensible Forms: A Form Usability Checklist di Brian Crescimanno, pubblicato originariamente su A List Apart il 19 dicembre 2005. La traduzione viene qui presentata con il consenso dell’editore (A Lista Apart Magazine) e dell’autore.

I computer dovrebbero rendere la nostra vita più semplice, non più complicata. Come progettisti consapevoli dei problemi di usabilità, possiamo semplificare la vita dei nostri utenti valutando con attenzione il modo in cui le persone interagiscono con i nostri siti, fornendo indicazioni chiare, affidando il compito di definire i dettagli di funzionamento ai computer non agli utenti.

È su quest’ultimo aspetto che ci concentreremo in questo articolo. Abbiamo sentito e letto tante cose sui principali errori in tema di usabilità: “Non usare immagini o Flash per la navigazione”, “Non usare Javascript per i link”, etc. Spero davvero che tutti noi stiamo mettendo in pratica queste lezioni nel nostro lavoro. Spesso, comunque, sono i piccoli difetti in termini di usabilità a risultare più fastidiosi per gli utenti, specialmente quando si parla di form HTML. Seguite queste linee guida, allora: saranno certamente un buon punto di partenza.

Usare i campi giusti

Con tanti elementi di form tra cui scegliere, ciascuno con i propri vantaggi e svantaggi, può essere difficile decidere quali usare in una determinata situazione. Usiamo sempre in modo appropriato radio button, checkbox e menu select. Per radio button e checkbox, usiamo i tag <fieldset> e <legend> per raggruppare logicamente gli elementi sotto un’intestazione significativa. Raggruppare in questo modo fa sì che il form sia più facile da gestire da parte dell’utente, dal momento che, mentalmente, può essere separato in tante sezioni più piccole.

Jacob Nielsen (http://www.useit.com) fornisce queste linee guida per l’uso dei radio button rispetto ai checkbox:

I radio button sono usati quando c’è una lista di due o più opzioni che sono reciprocamente esclusive e l’utente deve selezionarne soltanto una. In altri termini, cliccare su un radio button non selezionato deselezionerà automaticamente un radio button che sia stato selezionato in precedenza nella lista.

I checkbox sono invece usati con liste in cui l’utente può selezionare qualunque numero di opzioni (nessuna, una o più di una). In altri termini, ogni checkbox è indipendente dagli altri, così, selezionando un checkbox non si deselezionano gli altri.

Un checkbox individuale è usato per un’opzione singola che l’utente può selezionare o deselezionare.

Fonte: “Checkboxes vs. Radio Buttons” (http://www.useit.com/alertbox/20040927.html).”

Per campi in cui viene richiesta una sola scelta e ci sono diverse opzioni possibili, si valuti se non sia meglio usare un menu select per risparmiare spazio prezioso sullo schermo. Se sia meglio usare una serie di radio button o un menu select, dipende sempre dal contesto. Se ci troviamo a dover usare cinque o più radio button, forse è preferibile optare per una select.

Se un campo prevede selezioni multiple, cerchiamo di evitare l’adozione dei cosiddetti box “multi-select”. Questo elemento, se va bene confonde l’utente, e nello scenario peggiore rende il form inusabile e inutile per quanti non comprendono subito la sua funzione. Se il numero delle opzioni è talmente grande da trasformarsi in qualcosa di indistinto e poco chiaro quando rappresentate sotto forma di checkbox, cerchiamo di raggruppare alcune delle opzioni o di distribuirle secondo una gerarchia a categorie per renderle più comprensibili.

Lasciare spazio per l’inserimento del testo

È importante come il compiere la giusta scelta relativamente al tipo di campo specificarne la giusta lunghezza. Se il nostro nome è Joe Tod non significa che altri utenti non avranno bisogno di più spazio per inserire il loro di nome. Dunque, offriamo almeno 20 caratteri per i campi ‘Nome’ e ‘Cognome’. Inoltre, facciamo in modo che la lunghezza fisica del campo non risulti inferiore all’area di inserimento possibile del testo. Per le aree di testo, assicuriamoci di offrire all’utente lo spazio sufficiente per scrivere e leggere il testo che inseriranno. Aree molto alte e poco larghe sono difficili da leggere quanto quelle eccessivamente estese in larghezza e troppo corte. I valori esatti da usare dipenderanno dall’uso a cui è destinata la textarea, ma per assicurare la leggibilità possiamo stabilire un minimo di 50 caratteri in larghezza e di 10 righe in altezza.

Se vuoi aggiornamenti su Form che funzionano: una checklist per valutare l'usabilità dei form inserisci la tua e-mail nel box qui sotto:
 
X
Se vuoi aggiornamenti su Form che funzionano: una checklist per valutare l'usabilità dei form

inserisci la tua e-mail nel box qui sotto:

Ho letto e acconsento l'informativa sulla privacy

Acconsento al trattamento di cui al punto 3 dell'informativa sulla privacy