A brand of tswstrategies.com

TSW strategies

Blog TSW

Feed RSS

Ogni conversazione è un bene prezioso

Benvenuti nel blog di TSW, un luogo di confronto sul marketing online.
Un blog a più mani, espressione delle diverse competenze e personalità di TSW.

Twitter Flickr Slideshare Youtube


Il test mobile di UniCredit: 9 linee guida per un design user – centered

19 gennaio 2012

UniCredit ha da poco rilasciato la app ‘Banca via cellulare’, che permette ai clienti di operare sul loro conto in mobilità al fine di verificare saldo e movimenti, effettuare operazioni bancarie e fare trading online. Per verificare e migliorare l’usabilità della app nelle sue versioni Android e iPhone, About User ha condotto un test di usabilità coinvolgendo 5 utenti, 3 utilizzatori abituali di iPhone e 2 di Android.

Come è andata?

Il test ha messo in luce 69 evidenze di usabilità, tra cui 13 caratteristiche positive e gradite agli utenti, da conservare nelle prossime release.
Alcune delle barriere di usabilità emerse confermano alcuni spunti di progettazioni mobile validi universalmente. Scorriamoli insieme:

1. Sfrutta pattern e API che gli utenti già conoscono
UniCredit ha deciso di sfruttare Google Maps per il servizio di ricerca di filiali e bancomat. Tale scelta si è rivelata decisamente opportuna: tutti gli utenti, utilizzatori abituali della app Google Maps nativa, non hanno avuto nessuna difficoltà a muoversi e zoomare la mappa per visualizzare i punti UniCredit più vicini e a calcolare il percorso più rapido per raggiungerli.

2. Disegna per chi ha il pollice più grande del tuo: i pulsanti devono essere grandi e ben spaziati l’uno dall’altro
Apple raccomanda elementi attivi grandi almeno 44×44 punti. Il Norman Nielsen Group parla invece di 1×1 cm, e ci consiglia di non trascurare i “fat finger men”, coloro che – pur avendo un pollice leggermente più grande della media – provano comunque a interagire con un dispositivo touch.
Durante il test UniCredit abbiamo incontrato un “fat finger man” possessore di un cellulare Android con un display dalle dimensione decisamente contenute, 3.2’ pollici.

Gli abbiamo chiesto di verificare i servizi messi a disposizione dal bancomat dell’agenza “Treviso Aldo Moro”.

Screenshot ricerca agenzie UniCredit

Provando a selezionare la corretta icona Icona localizzatore,  l’utente ha prima fatto tap sull’icona telefono, dando origine a una chiamata alla filiale.

Al secondo tentativo, ha invece involontariamente selezionato l’area grigia. Essa, oltre a fare da contorno al pulsante, è un’area attiva che al tap scende per dare maggior spazio alla mappa.
Vedendo sparire il pulsante, l’utente si è quindi arreso.
Ecco come potremmo rivedere l’interfaccia per risolvere le due precedenti barriere.

Esempio di interfaccia 3. L’interazione costa: gli utenti non fanno tap su ciò che non conoscono. Rendi icone, link e titoli parlanti
Durante il test, per conoscere l’indirizzo esatto dei punti visualizzati sulla mappa, più di un utente ha cercato di visualizzare un listato testuale. Nessuno degli utenti Android ha compreso che tale funzionalità si cela dietro l’icona Icona menù, più chiara invece per utenti Apple – già abituati alla pulsantiera iTunes per modificare la vista della libreria: Libreria

4. Cura al massimo i tuoi contenuti: utilizza la formattazione per favorire la legibilità, sii chiaro e diretto
Gli utenti mobile sono spesso mossi da un bisogno da soddisfare in brevissimo tempo. Per questo motivo, ancora più che sul web, dedicano poca attenzione ai testi informativi.
L’effetto è ancora più grave se i testi sono inseriti in alertbox: questo perché tali finestre compaiono spesso in sovra impressione al primo avvio della app, per informare in merito a contenuti aggiuntivi, promozionali o di natura legale. Gli utenti hanno imparato a skipparle senza leggerle.
Ecco l’effetto del problema riscontrato sulla app UniCredit.

Al primo avvio della app l’utente vede il seguente alertbox

Alertbox

Senza leggerlo, preme “Ok” e si trova di fronte all’interfaccia

Interfaccia codice attivazione

Qui, non sapendo come reperire il codice di attivazione, prova senza successo a tornare alla schermata precedente per rileggere le istruzioni. Dopo numerosi e inutili tentativi viene aiutato dal facilitatore.

5. Abbandona i termini gergali e parla la lingua del tuo utente
Mai dare per scontati concetti a noi noti: di fronte al testo “Banca Via Internet” alcuni utenti danno le più svariate interpretazioni (seppur ridendo, un utente ha letto: “banca, in via Internet”). Solo gli utenti che controllano spesso online il loro conto sanno che tale label fa riferimento alla sezione home banking del sito.

6. Nelle form rendi facoltativi – o meglio elimina! – i campi non essenziali
Sul web si assiste spesso ad una proporzione inversa tra il tasso di conversione e il numero di campi che chiediamo all’utente di compilare.
Progettando una app la form diventa ancora più determinante: pulsanti piccoli, nel caso di iPhone l’assenza di un feedback tattile al tap, caratteri alfanumerici distribuiti su tastierini distinti, rendono l’input molto complesso. Se si trovano in difficoltà, o se non sono sicuri di come compilare uno specifico campo, gli utenti abbandonano l’interfaccia.

7. Presta particolare attenzione ai messaggi di errore: devono aiutare l’utente a rimediare all’errore
Abbiamo chiesto agli utenti di provare ad effettuare un bonifico. Un utente ha immesso l’IBAN del destinatario ma ha lasciato vuoto il campo “Beneficiario”. Di fronte al messaggio di errore “è necessario inserire tutti i campi del beneficiario per eseguire l’operazione”, l’utente ha provato a compilare tutti i campi della form, anche quelli contrassegnati come facoltativi (causale, data esecuzione, indirizzo, …). Ovviamente continuando a lasciare in bianco il campo “Beneficiario”. Solo dopo aver rivisto lo stesso messaggio di errore l’ha correttamente inteso. Terminato l’input di tutti i campi, la sua sessione – durata oltre 7 minuti – è scaduta.

8. Non forzare l’interazione: il controllo spetta all’utente, non al dispositivo. Se disegni per Android, e dunque per schermi di diverse dimensioni, non dimenticare la modalità landscape
L’app UniCredit funziona solo in modalità portrait, eppure due utenti hanno provato a orientare il dispositivo in modalità landscape:

  • un utente iPhone, abituato a fare trading online, cercando e non trovando un grafico azionario
  • l’utente fat finger man, per visualizzare sul suo schermo 3.2’’ un tastierino più grande che potesse rendere la sua compilazione più agevole.

Per concludere, vi lascio con l’ultima raccomandazione, estratta direttamente dalla iOS Human Interface Guidelines

9. Prototype and Iterate
Before you invest significant engineering resources into the implementation of your design, it’s a really good idea to create prototypes for user testing.

E se volete approfondire, ecco il link alla presentazione del test presentata al Business International il 1 dicembre scorso.
Buon user-centered design!

Post correlati:

Tags: , , ,

Categorie: Mobile web, Web Marketing, Web Usability

2 Commenti a “Il test mobile di UniCredit: 9 linee guida per un design user – centered”

davide scrive:
7 febbraio 2012 alle 12:25

Molto interessante… ma possono 5 utenti ritenersi un panel numericamente rilevante? Non è un numero bassino? E qual è il modello che monta Android? Credo che da modello a modello su Android le cose cambino abbastanza…

Paola Casarsa scrive:
28 febbraio 2012 alle 17:00

Ciao Davide,
perdona il largo ritardo, ero barricata in laboratorio!
Grazie al tuo commento posso illustrare in poche parole l’approccio vincente del test iterato. Non voglio dilungarmi a spiegare la relazione tra numero di barriere e numero di utenti; c’è chi l’ha già fatto, peraltro molto bene. Ti consiglio quindi di dare un occhio all’alertbox di Nielsen “Why you only need to test with 5 users”.
Grafici e formule a parte, è possibile spiegare il tutto con un concetto molto semplice.
L’obiettivo di un test non è valutare il livello di usabilità dell’interfaccia. Bensì migliorarla.
5 utenti non sono sufficienti a far emergere tutte le barriere di usabilità (ma ‘solo’ l’80% di esse). E di sicuro non sono abbastanza per quantificare il livello di usabilità della app (quanti utenti riescono a portare a termine il compito e in che tempi medi?). Tuttavia, se 3 utenti incontrano tutti simili difficoltà in una pagina, è evidente che ci troviamo di fronte ad un problema da risolvere. E’ possibile, anche se poco probabile, che sull’intera popolazione solo quei 3 utenti incappino in quel problema. Non significa che la barriera di usabilità vada trascurata.
UniCredit è un nostro cliente affezionato. Abbiamo in programma nuovi e numerosi test.
L’idea è quella di migliorare l’usabilità della app reiterando piccole sessioni di test.
Verifichiamo la natura dei problemi che i primi 5 utenti incontrano, ipotizziamo delle possibili soluzioni per aggirare le barriere incontrate, mettiamo mano al codice e mostriamo l’interfaccia così rivista ad altri 5 o 6 utenti. In questa seconda ‘passata’ saremmo in grado di intercettare eventuali barriere sfuggite ai primi utenti (i quali ne hanno riscontrate solo 56!) ma soprattutto di testare la bontà delle nostre soluzioni.
A parità di costi ed effort avremmo potuto condurre un unico test con una ventina di utenti per raccogliere tutti i problemi dell’interfaccia e quantificare tassi e tempi di successo. Tuttavia, non avremmo potuto testare una versione migliorativa dell’interfaccia, ma solo incrociare le dita!
Quanto ad Android concordo con te che al variare del modello possano variare i risultati. In questo test tutti gli utenti avevano un LG OPtimus 1. Un cellulare che chiamerei ‘entry-level’, con uno schermo piccolino e un tastierino minuto. Migliorare l’interfaccia per chi ha un dispositivo meno performante significa incontrare le esigenze del maggior numero possibile di utenti.

Lascia un commento

Scrivi:

* Campi obbligatori.