Usabilità dei form: linee guida

I form sono il punto debole di molte interfacce: alcune linee guida per evitare i problemi di usabilità più ricorrenti.

Lettura: 6 minuti

Indice

Compilare moduli, sia online sia su carta, è un’attività noiosa, poco piacevole, spesso decisamente stressante. Renderla il più leggera possibile è un dovere di ogni designer. L’usabilità dei form è ancora oggi il punto debole di molte interfacce, nonostante gli studi e i test sull’argomento sono numerosi. Qui ho scelto di sottolineare i problemi ancora oggi più ricorrenti; per gli altri rimando alle guide indicate in fondo all’articolo.

Usa il bottone per l’azione principale (Accedi, Invia ecc.), il link testuale per quelle secondarie.

L’impiego di più bottoni in uno stesso form porta a imbarazzo della scelta ed errori: automatismi, abitudini, bias cognitivi possono facilmente indurci a compiere la scelta non voluta. E prevenire l’errore è una delle regole auree dell’usabilità. Occorre perciò creare una gerarchia nelle scelte, usando il bottone (uno solo) per l’azione principale, i link testuali per le altre.

Questa è la pratica migliore. Se proprio dobbiamo impiegare due bottoni, allora è importante distinguerli il più possibile, per colore, dimensioni, posizione. Nei test di usabilità che ho condotto o a cui ho assistito ho notato che il doppio bottone crea spesso un effetto “pillola rossa o pillola blu”, con conseguente anche se lieve momento di indecisione.

Bottone vs text link nei form
Un esempio di form con un unico bottone per l’azione principale, e link testuali per le azioni secondarie.
Bottoni nei form
Form con più bottoni, ma gerarchicamente ben distinti fra loro.

Il captcha deve morire

Compilare un modulo è un’attività faticosa: chiedere nel mentre anche di risolvere indovinelli è sadico.

Captcha: già il nome è oscuro. Il captcha è quel fastidioso intruso che ci chiede di risolvere quiz di vario tipo prima di proseguire un’azione. Il suo danno in termini di usabilità è multiplo: anzitutto, interrompe un processo distogliendo la nostra attenzione dall’obiettivo principale (portare a termine un’operazione); di conseguenza, crea ansia e stress; terzo, espone all’errore.

Il rispetto delle persone è sacro. Se l’usabilità è compromessa in nome della sicurezza, significa che il progettista sta scaricando sull’utente problemi che dovrebbero essere gestiti a monte. Esistono oggi numerose alternative al captcha, perché ostinarsi?

Usabilità dei form: il captcha
Captcha per la prenotazione del vaccino covid.

Velocità vs accuratezza

Non sempre una maggiore velocità di compilazione è l’obiettivo più desiderabile; a volte è preferibile rendere la compilazione più lenta per favorire una maggiore accuratezza.

Numerosi test di usabilità dimostrano che i form con label sopra il campo (top-aligned) garantiscono una maggiore velocità di compilazione. In questa combinazione, infatti, etichette e campi sono molto vicini; inoltre le persone devono muoversi solo in una direzione, verso il basso. Lo svantaggio di questa soluzione è l’aumento della lunghezza del form.

I form con label a sinistra del campo (left-aligned) sono meno veloci da compilare ma favoriscono lo scanning e la visione d’insieme delle etichette. L’allineamento a sinistra delle label crea una maggiore distanza fra label e campo, ma rende più facile scorrere le etichette e comprendere quindi a colpo d’occhio le informazioni richieste. Ciò può essere utile quando l’utente non ha familiarità con il form o i dati richiesti.

Oggi è molto frequente l’impiego di form con label interne al campo stesso, con un rimpiccolimento della label al focus sul campo: questa soluzione ha gli stessi vantaggi di quella top-aligned ma permette di ridurre lo spazio verticale.

In ogni caso, nello scegliere l’una o l’altra soluzione è importante considerare il contesto: non sempre la velocità è l’obiettivo principale da perseguire. Nel caso di operazioni delicate, l’accuratezza può essere più importante ancora. Una soluzione che favorisce lo scanning riducendo leggermente la velocità può essere in questi casi preferibile. Chiaramente su mobile l’opzione con allineamento verticale è quasi obbligata.

Multi-step vs single-step form

In caso di compiti complessi è preferibile scomporre il form in più step. Questo è un esempio di quanto discutevamo al paragrafo precedente: non sempre la velocità è l’obiettivo principale da perseguire. In questi casi scomporre un task complesso come aprire un conto, fare un bonifico, pagare un bollettino in più step aiuta le persone a concentrarsi su uno step (sotto-task) alla volta, riducendo il carico cognitivo, la difficoltà percepita e il margine di errore.

Come ci ricorda l’esperto di usabilità Steve Krug, non è il numero di clic che conta ma la “fatica” che ciascuno comporta: tre clic spensierati sono meglio di un clic che richiede sforzo. Personalmente ho osservato questo comportamento molte volte durante i test di usabilità. E la scomposizione di un unico form in più schermate il più delle volte risolve i problemi.

“Incrociare i flussi è male”

Parola di Egon Spengler (Ghostbusters, 1984).

Come reagiremmo se ordinando un cappuccino al bar il commesso ci rispondesse che prima dobbiamo ordinare la spremuta? Costringere una persona a compilare un form nel bel mezzo di un processo (accesso a un servizio, acquisto ecc.) sortisce lo stesso effetto. Questo è “incrociare i flussi”. Distogliamo l’utente dal flusso principale, l’obiettivo per cui sta facendo ciò che sta facendo, per incanalarlo a forza in un altro flusso.

L’esempio più tipico è la richiesta di registrazione al momento dell’acquisto in un e-commerce. Meglio chiedere la registrazione solo al termine del processo, e se non necessaria renderla opzionale (come fanno gli e-commerce più virtuosi).

Acquisto senza registrazione
Esempio di acquisto senza registrazione.

Ma in alcuni casi abbiamo anche form nei form: in alcuni internet banking, ad esempio, capita spesso che nel bel mezzo di una procedura si chieda all’utente di aggiornare le proprie credenziali o compiere qualche altra registrazione di sorta. Fai finire ciò che la persona ha iniziato, poi chiedigli di fare gli aggiornamenti necessari. Oppure chiediglielo subito, prima che cominci un’attività.

Less is more

Chiedi soltanto le informazioni strettamente necessarie al completamento dell’azione specifica. Non inserire campi opzionali: se sono opzionali perché qualcuno dovrebbe compilarli?

“Meno è più”. Questo motto dell’architetto Ludwig Mies van der Rohe è oltremodo vero per i form. Dove sottrarre tutto ciò che non è necessario è vitale. “Già che ci siamo chiediamo anche questo” è una tentazione tipica, soprattutto di certo marketing che spera così di ottenere più dati. Ma il rischio è di perdere il cliente: un form è un muro, più alto è più il rischio di abbandono aumenta.

Evitare campi inutili o opzionali è quindi la regola aurea. Più un modulo è magro, più le persone ci saranno grate.

Perdi tutto

Evita tassativamente bottoni come Pulisci, Svuota ecc. Gli informatici li amano, gli utenti un po’ meno.

Bottoni di questo tipo se ne vedono ancora in giro. Per quale arcano motivo dovrei cancellare il contenuto di un modulo?

  • Ipotesi A: ho compilato il modulo solo in parte o per nulla, ci ripenso e decido di non proseguire; basta chiudere la pagina o tornare indietro, non ho bisogno di un bottone pulisci.
  • Ipotesi B: devo correggere un inserimento fatto; vado nel campo relativo e correggo. Perché cancellare tutto?
  • Ipotesi C, la più tragica: ho compilato il modulo, arrivo in fondo e per errore scelgo Pulisci. Perdo tutto!

Un bottone Pulisci è criminale almeno per tre motivi:

  • rendiamo possibile un’azione distruttiva
  • dedichiamo a tale azione (che non è sicuramente quella primaria) tanto di bottone (vedi par. Azione primaria vs secondaria)
  • nel migliore dei casi possibili, è inutile.

“Un computer non danneggerà il lavoro dell’utente né permetterà che, a causa del suo mancato intervento, il lavoro dell’utente venga danneggiato” – Jef Raskin, prima legge delle interfacce a misura d’uomo.

Per approfondire

I libri migliori sulla progettazione dei form sono:

Fra le guide online, le più complete sono:

Altre guide su aspetti specifici: