Il buon design è fatto di particolari...

Uso moltissimo il sito delle nostre ferrovie e devo dire che, a parte qualche problema inspiegabile (per esempio i biglietti ticketkless sono rimborsabili solo in rete e molto difficili da cambiare se cambi il treno), sono un cliente soddisfatto.

Il design della pagine devo dire che non è mai stato il punto di forza di questo sito, alcune delle spigolosità che avevo segnalato anche qui sono state messe a posto: per esempio il messaggio che informa che la transazione della carta di credito è andata a buon fine non è più assurdamente rossa, ma usandolo si trovano ancora problemi che fanno pensare che una revisione della usabilità non ci starebbe male.

Un esempio.

Quando si prenota o si cambia una prenotazione è possibile farsi mandare un messaggio SMS con tutti i dati che sono poi quelli che vanno presentati al momento del controllo, non serve più dunque una stampa del biglietto. La cosa è comodissima.

Peccato che quando si tratta di immettere il numero di telefono ci si trova di fronte a due campi, uno sopra l'altro. Il primo è per il prefisso, il secondo per il numero, ma la cosa non è specificata. Se per esempio, come è successo a me, vi fate l'idea del fatto che il primo campo sia utilizzato per l'eventuale prefisso internazionale e mettete tutto il numero nel secondo campo il risultato è il messaggio di errore che si vede, si fa per dire, nella immagine qui sopra.

Sono state violate una intera serie di regole base di usabilità, se qualcuno è interessato le trovate per esempio nelle slide delle mie lezioni.

1) less is more

Il buon design si fa per sottrazione, tutto quello che non serve è dannoso. Ebbene in questo caso il designer si sarebbe dovuto chiedere se avere due campi, uno per il prefisso e l'altro per il numero servisse veramente e la riposta è certamente no visto che il prefisso va comunque e sempre composto.

2) utilizzare le modalità comunemente usate

Quando si progettano azioni che sono comuni a molti siti è opportuno fare un bel giro in rete per vedere se per caso non ci sia per quella specifica funzione una la convergenza verso uno standard di fatto: se questi standard ci sono, a meno di evidentissime controindicazioni, vanno adottati.

In questo caso lo standard di fatto c'è e si trova anche in applicazioni molto diverse.

Questa immissione di numero di telefono viene dalla gestione dei contatti di Gmail, la posta di Google:

Quest'altra, praticamente identica viene da Microsoft Outlook 2010:

3) L'interfaccia deve presentare un buon livello di AFFORDANCE

Affordance è un termine che viene dalla psicologia, non è traducibile in italiano: indica la capacità di un oggetto o di un ambiente di mostrare all'individuo come fare una certa operazione. Quando andiamo a casa di un amico sappiamo aprire le porte e l'acqua nel lavandino del bagno anche se non abbiamo mai visto quel modello di maniglia o quel tipo di rubinetto, con poche scellerate eccezioni dovute alla eccessiva creatività di qualche designer.

Il fatto che ci siano due campi senza la più vaga indicazione dell'uso che ne va fatto è una grave carenza di affordance.

4) Degrado morbido

Un sistema ben progettato dovrebbe avere, in caso di errore, quello che si chiama "degrado morbido", devono essere messe in atto tutte le strategie che permettano all'utente la comprensione e la correzione dell'errore con il minimo carico cognitivo possibile.

In questo caso trovandosi riempito il solo campo inferiore sarebbe opportuno analizzare il numero cercando il prefisso, cosa facilissima visto che i prefissi sono un insieme finito e chiuso, e proporre la correzione.

5) Gestione degli errori

La gestione dei messaggi di errore dovrebbe essere la più efficacie possibile, la apertura di una nuova finestra che può andare come in questo caso a sovrapporsi alla parte della interfaccia che contiene l'errore ha scarsa efficacia, meglio ripresentare la pagina con una chiara indicazione posizionata appena sopra, appena sotto o di fianco alla riga sbagliata con le indicazioni per la correzione.

Sarebbe logico utilizzare per questi allarmi il colore rosso evitando di usarlo, come in questo sito, per messaggi ordinari. Il rosso è percepito come indicazione di errore dalla stragrande maggioranza degli utenti.

6) Molteplicità dei browser

Come si vede nella figura la finestra che si apre non è leggibile perché per motivi che mi sfuggono non riporta solo un messaggio di errore, ma una intera pagina che la mancanza di barre di scorrimento e la impossibilità di ridimensionare rendono completamente inutile.

Un mio studente ha ipotizzato che si tratti di un problema legato a Firefox, non so se sia vero, ma se così fosse peggio mi sentirei visto che non stiamo parlando di un browser esoterico, ma di uno dei più usati al mondo.

Il sito delle Ferrovie dello Stato, lo ripeto, non è poi così male, io lo uso moltissimo, ma ha spigolosità ed errori di interfaccia e carenze imbarazzanti.

Se entro per esempio con la mia parola utente e password finisco in una pagina che riporta in testa, correttamente, il mio nome, ma se passo alla pagina di acquisto dei biglietti il sistema mi dice che per comperare devo essere registrato.

Scegliendo la voce "Acquisto biglietti e/o abbonamenti" finisco qui:

Ma come mi avevi riconosciuto e ora ti sei dimenticato di me?

Manca anche una funzione per la registrazione dei percorsi più usati. Io viaggio praticamente solo da Milano a Ventimiglia e da Ventimiglia a Milano (vivo in Costa Azzurra e lavoro a Milano) ed ogni volta che entro devo rispecificare le stazioni di partenza e di arrivo...

Devo dire che stupisce il fatto che in progetti voluminosi e costosi non si dedichi abbastanza attenzione alla usabilità, una attività relativamente poco costosa che spesso fa la differenza!