L'ottimo form per il processo di checkout dell'Apple store

Form migliori in 5 mosse

Published 7 years ago · 6 mins read

6 mins read

Ho recentemente partecipato ad un progetto che ha richiesto il design di una web-application per la gestione e generazione automatizzata di documenti. Per quanto lo scopo dell’applicazione sia abbastanza semplice (al termine si deve ottenere un PDF personalizzato), il processo richiesto per la generazione di questi documenti è abbastanza complesso. Il fulcro di tutto è un workflow composto da 7 passi diversi, ognuno dei quali richiede all’utente di inserire diversi dati in una form. Il lavoro di design doveva far sì che il processo fosse il più semplice e veloce possibile: era quindi necessario considerare le problematiche relative all’usabilità dell’interfaccia di queste form.

Durante questo lavoro e nell’attività di documentazione su Internet ho imparato molte cose interessanti riguardo al design di web application fortemente interattive. Vorrei condividere qui una serie di “best practices” che ho ricavato e che sarebbe utile applicare quando ci si trova a dover progettare un processo più o meno complesso, che richiede l’input dell’utente. Spiegherò poi, con degli esempi, ognuna di queste raccomandazioni.

  1. Indicare sempre l’obiettivo del processo
  2. Indicare sempre lo stato di avanzamento
  3. Dare feedback adeguati all’utente
  4. Usare “smart defaults” quando possibile
  5. Dare suggerimenti sopratutto quando sono richiesti dati in formati standard

1. Obiettivo del processo

Se il processo in cui l’utente è coinvolto è abbastanza complesso e composto da diversi passi è utile indicare chiaramente in ogni pagina qual è l’obiettivo finale del workflow. Questo aiuta a fare chiarezza sullo scopo che la form permette di raggiungere e funziona anche da utile promemoria per chi, nel corso del processo, si fosse dimenticato il motivo che lo aveva spinto ad iniziare. Sembra strano, ma può succedere più spesso di quanto si creda!

Come

Un titolo ben visibile che riporta il nome del processo è sufficiente per questo scopo. L’ideale è posizionarlo in alto, in ogni caso il più vicino possibile all’indicatore di progresso (vedi punto 2).

Il processo di creazione di un canale su LiveStream

Il processo di creazione di un canale su LiveStream. Lo scopo del processo è chiaramente indicato dal titolo di inizio pagina "Launch a channel"

2. Stato di avanzamento

Quando l’utente deve passare attraverso diverse pagine per completare il processo, è necessario dare continuamente una chiara indicazione dello stato in cui si trova, dei passi completati e di quelli ancora da fare. Questo aiuta un utente non esperto nella procedura, a capire i passi necessari per completarla, dando anche una generica indicazione del tempo totale che viene richiesto.

Come

Non è necessario che i passi siano indicati con assoluta precisione: è anche sufficiente un’indicazione generica delle fasi da completare. Infatti, in base ai risultati intermedi, il numero di passi può cambiare (ad esempio, se è richiesta una registrazione e l’utente non è già registrato). Guardate ad esempio l’indicatore di progresso usato su amazon.com e riportato nella prossima figura. E’ comunque utile limitare il numero di pagine diverse che l’utente dovrà visitare (non più di 10).
Infine, l’indicatore deve riportare visivamente in modo molto chiaro quali sono i passi già completati, il passo corrente e quelli ancora da fare.


Indicatore di progresso su amazon.com

I passi indicati nel processo di checkout su amazon.com

3. Feedback adeguati

Ora che le applicazioni basate su AJAX sono così popolari la nozione di feedback per le azioni dell’utente dovrebbe essere abbastanza familiare per i Web designer. Ad ogni bottone premuto deve seguire un feedback visuale evidente che dia l’impressione all’utente che il sistema sta rispondendo alle sue azioni. Allo stesso modo gli errori fatti nelle form devono essere indicati il prima possibile.

Come

Se si implementa la form con tecnologie dinamiche AJAX (o simili) prevedere sempre degli indicatori di caricamento, progresso e/o conferma per ogni azione possibile dell’utente. Ad esempio, usare una barra di caricamento per indicare lo stato di upload di un file, oppure, alla pressione di un pulsante, mostrare un simbolo animato che indica l’attività del sistema, come viene fatto da anni nelle interfacce dei sistemi operativi.

Per quanto riguarda i messaggi di errore, il consiglio è di mostrarli sempre appena possibile all’utente. La tendenza attuale è di controllare e indicare dinamicamente la validità di un campo di una form non appena l’utente toglie il focus da esso (non prima! Sarebbe molto fastidioso). Ad esempio, dopo l’inserimento di un indirizzo e-mail, il sistema controlla e valida il formato in tempo reale, indicando l’errore o la correttezza dell’inserimento.

Un esempio di feedback inadeguato lo troviamo sul sito di Poste Italiane, che riportiamo nelle immagini successive. Nella form di login (immagine a sinistra) l’utente può inserire username e password. In caso di errore la pagina che ci viene restituita è quella che troviamo a destra. Nessuna indicazione! Non sappiamo neanche se qualcosa è andato realmente storto. Potremmo aver sbagliato username, password oppure potrebbe essere il sistema ad avere qualche problema (dopotutto non ci sta dicendo nulla!). Non lo sapremo mai. Pessimo design per una semplicissima form.

Poste Italiane - login errato

Un feedback praticamente inesistente dopo un login errato sul sito di Poste Italiane

4. Smart defaults

Smart defaults sul sito di Alitalia

Sul sito di Alitalia, invece di lasciare i campi Data partenza/Data ritorno vuoti, il sistema li compila automaticamente con due date plausibili per una persona che deve prenotare un aereo (una settimana dopo)

Quando l’utente deve scegliere tra molte opzioni, ma è possibile dedurre le più probabili che verranno scelte, inserire la più probabile come valore di default del campo della form. Questo permette di velocizzare operazioni comuni, dando comunque la possibilità all’utente di modificare questi valori standard. Inoltre è utile per indicare la formattazione dei dati da inserire, nel caso in cui l’utente non sia familiare con la procedura. Sarebbe invece una tecnica da evitare quando i campi devono essere compilati con estrema attenzione dall’utente.

Come

I valori di default possono essere di due tipi: “non personalizzati” ovvero un valore di default comune per tutti gli utenti del sito (vedi esempio di Alitalia) e “personalizzati“, ovvero un valore di default dato in base alle caratteristiche dell’utente (storia d’uso dell’applicazione, provenienza geografica, lingua, ecc.). In entrambi i casi va lasciata ovviamente la possibilità di modificare questi valori.

5. Suggerimenti per dati standard

Quando il sistema richiede formati strutturati per alcuni campi della form (es. date, ore, nomi di aeroporti, ecc.) oppure i valori dovrebbero essere preferibilmente selezionati da un insieme di termini già esistenti, è utile dare all’utente “suggerimenti” e strumenti adatti per inserire correttamente i dati. Questo riduce sensibilmente la probabilità di errore e la frustrazione dell’utente, che può compilare la form preoccupandosi meno del modo in cui scrive i dati.

Come

L’esempio più comune sono i widget per l’inserimento delle date/ore. In casi estremi, è possibile utilizzare dei semplici controlli drop-down o checkbox, per inserire i dati scegliendoli da un elenco di valori ammessi. Quest’ultimo metodo è tuttavia molto inefficiente: basti pensare a quanto sia noioso inserire una data di nascita selezionando prima il giorno, poi il mese e l’anno da tre menù drop-down  diversi.
Quando invece i valori ammessi sono molti, è utile usare dei metodi di suggerimento, simili a quanto fanno i motori di ricerca quando inseriamo un termine più o meno comune. Vediamo in questo caso la differente User eXperience dell’utente su due siti che offrono due servizi simili, ovvero ricerca/prenotazione di voli aerei.

Il primo (expedia.com) non fornisce suggerimenti all’utente quando inserisce i dati delle città di partenza ed arrivo. Il risultato è che ci viene spesso richiesto in una pagina aggiuntiva di specificare l’aeroporto e la città specifica che che volevamo inserire. Un passo aggiuntivo molto fastidioso e che rallenta il processo di acquisto.

La cattiva User experience di expedia.com

La cattiva User experience di expedia.com

Il secondo sito (alitalia.com) fornisce invece degli utili suggerimenti man mano che l’utente digita il nome della città che vuole raggiungere. In questo modo le probabilità di errore si riducono drasticamente, evitando quindi passi aggiuntivi e messaggi di errore inutili.

Gli utili suggerimenti del sito di Alitalia

Gli utili suggerimenti del sito di Alitalia migliorano l'User experience complessiva

Conclusioni

Siamo sinceri, compilare form non piace a nessuno. Tuttavia i designer di interfacce web hanno a disposizione numerosi strumenti  per migliorare la User eXperience durante questo procedimento e renderla il meno “dolorosa” possibile. In questo articolo ho illustrato 5 tecniche utili migliorare l’usabilità dei form e, più in generale, dei processi guidati composti da più pagine. Ispirati e affiancati da altri principi di usabilità, questi suggerimenti possono aiutare i webdesigner alle prese con form di registrazione, procedure di pagamento, pagine di ricerca e quant’altro.

Altre risorse

Queste 5 tecniche non sono ovviamente tutto. Vi segnalo qui alcune risorse molto utili da consultare, che riguardano il design di form e di applicazioni altamente interattive. Io stesso mi documento spesso su questi siti e parte dei concetti spiegati qui deriva da studi del materiale che propongono:

  • Web form design: un video (in inglese, circa 75 min) registrato al MIX 09 in cui Luke Wroblewsky (esperto di usabilità e Interaction design di fama mondiale) spiega gli errori più comuni relativi al design di form interattivi, riportando esempi dal mondo reale e fornendo utili “best practices” da seguire
  • UI-patterns:  una collezione di pattern ricorrenti nel design di web application interattive. Un’utilissima risorsa che permette di risolvere problemi di design con soluzioni “chiavi in mano” già sviluppate. Ricchissimo di esempi tratti da applicazioni web reali
  • Welie.com: sito simile al precedente. Una buona collezione di pattern comuni, ben spiegati e corredati da schemi esplicativi molto chiari