Registrare un Test di Usabilità – Guida Pratica
Dato che fare UX non vuol dire solo fare wireframe, oggi parlerò di come registrare un test di usabilità.
L'argomento test di usabilità è molto ampio, non mi soffermerò su cos'è un test di usabilità, sul valore che questo ha, sulla parte teorica o su come assoldare i partecipanti, ma ti spiegherò nella pratica come registrare un test di usabilità.
Se vuoi approfondire l'argomento usabilità ti consiglio di leggere 2 libri di Steve Krug:
- Don't make me think. Un libro molto scorrevole che consiglio a chi è un po' a digiuno di test di usabilità.
- Usabilità. Individuare e risolvere i problemi. Lo definirei un manuale pratico per eseguire test di usabilità "fai da te".
Cosa serve?
Di seguito una serie di strumenti indispensabili per registrare il test:
- Liberatoria per il consenso al trattamento dei dati
- Guida alla conduzione del test
- Lista dei task da far eseguire al partecipante
- Un computer con webcam e microfono, browser e una connessione a internet stabile
- Un software per registrare video e audio
- Un software di videoconferenza (opzionale)
Vediamo nel dettaglio. Registreremo un test di usabilità su un sito web, ma la stessa procedura può essere applicata a qualsiasi prototipo funzionante che possa girare sul nostro computer (un prototipo InVision, un file Principle o Flinto).
1. Legal e liberatoria
Avendo la necessità di registrare, dovremmo metterci apposto dal punto di vista legale. Sul sito designers.italia.it puoi trovare un sacco di materiale utile per designer e tra i vari kit troverai il kit di Usability Test con vari documenti tra cui appunto una liberatoria per il consenso al trattamento dei dati. Crea una copia sul tuo Google Drive (oppure scaricalo come .docx o .odt consapevole che qualcosa andrà storto), modifica i campi evidenziati in azzurro, stampala in duplice copia e falla compilare e firmare a ogni partecipante prima di iniziare il test (lascia una copia al partecipante).
2. Guida alla conduzione del test
Sempre nello stesso kit di Usability Test su designers.italia.it troverai la Guida alla conduzione del test. Stampala, ti servirà leggere la parte Introduzione al test ad ogni partecipante prima di iniziare il test, in modo che gli sia tutto chiaro.
3. Lista Task
Nello stesso file scaricato al punto precedente troverai una lista dei task dove ognuno è composto da descrizione, criteri di successo e appunti. Questa sarà la lista con i vari compiti che vuoi fare eseguire al partecipante. Stilala con attenzione per evitare di fare variazioni in corso d'opera o tra un partecipante e l'altro. In alternativa potrebbe anche essere una lista semplice ordinata.
4. Computer
Passata la parte scartoffie, veniamo alla parte tecnica. Va benissimo un computer con qualsiasi sistema operativo, Windows, macOS 10.11+ o Linux. Sarà necessario avere una webcam e un microfono. Personalmente preferisco la webcam e il microfono incorporati nel portatile perché sono meno invasivi e rendono il tutto più naturale, inoltre configurare tutto su un portatile ti darà la possibilità di spostarti da un ambiente all'altro qualora fosse necessario.
Se quello che testeremo è un sito internet sarà ovviamente necessario un browser e una connessione a internet stabile. Ricordati di avviare la navigazione in incognito per evitare dati salvati, completamenti automatici dei campi o che alcuni link risultino già visitati. Se reputi opportuno, cancella anche cache e file temporanei.
5. Software di registrazione audio e video
Registrare il test ci darà la possibilità di riguardarlo e ascoltarlo con calma, esaminare meglio quali problemi l’utente riscontra nell’utilizzo ed eventualmente poter condividere la registrazione con altri membri del team. Se abbiamo la possibilità registriamo anche il volto del partecipante (le sue espressioni potranno dirci molto).
Esistono diversi tool di registrazione, quello che mi sento di consigliare è OBS Studio. È gratis e funziona alla grande 👍
Scaricalo e installalo. Vediamo come configurarlo.
In OBS Studio è possibile configurare delle Scene che conterranno delle Fonti. Nel nostro caso sarà sufficiente una scena con le seguenti 3 fonti:
- Dispositivo di cattura video. Per registrare con la webcam.
- Cattura lo schermo. Per registrare ciò che avviene sullo schermo.
- Cattura l'audio in ingresso. Per registrare l'audio.
Possiamo aggiungere nuove fonti cliccando sul tasto più '+' nel pannello Fonti. Dovresti ottenere una situazione simile:
Se reputi opportuno puoi riposizionare o ridimensionare il riquadro Dispositivo di cattura video.
Andiamo a impostare la risoluzione. Di default i settaggi potrebbero generare dei filmati moooolto ingombranti in termini di MB. Vai in Impostazioni ▸ Uscita e accertati che sia impostato in questo modo:
Se preferisci cambia il percorso di registrazione. A questo punto esegui un test per vedere se tutto funziona, clicca quindi il pulsante Avvia la registrazione che trovi in basso a destra, registra qualche secondo, parla per testare l'audio e termina la registrazione. Riproduci il video che hai appena registrato per verificare che sia tutto OK.
OBS Studio permette altri settaggi (frame rate, frequenza di campionamento audio e altro), ma questa configurazione è sufficiente.
6. Software di videoconferenza (opzionale)
Se oltre al partecipante e te (facilitatore) dovranno essere presenti altri membri del team, stakeholder o altre persone (osservatori), allora sarà necessario che ti dotassi di un software di videoconferenza per condividere video e audio e permettere alle altre persone di seguire il test da un altro ambiente evitando qualsiasi tipo di interferenza e condizionamento.
Personalmente non sono mai riuscito a fare una chiamata decente con Skype 👎. Un'alternativa potrebbe essere Google Meet, lo trovo comodo per le chiamate, ma non sembra faccia condividere il video della webcam in contemporanea alla condivisione dello schermo.
Esistono altre alternative, quello che posso consigliarti è Zoom che ha un costo di 13,99 euro al mese per la versione Pro (esiste una versione free, ma ha un limite di 40 minuti per singola chiamata). Puoi nascondere la thumbnail del video sul tuo computer per evitare che il partecipante si distragga o si possa sentire in soggezione. Ricordati di disattivare l'audio e il video in entrata nel computer degli osservatori. Verifica il funzionamento sempre prima di iniziare il test.
Adesso hai tutto il necessario per fare i tuoi test di usabilità! 🗣🖥
Ti lascio di seguito un promemoria con una lista di compiti da eseguire ogni volta che farai un test:
- Verifica hardware e software. Fai una piccola registrazione e controlla video e audio.
- Dati d'accesso. Stampa i dati d'accesso per il test se sul sito da testare sarà necessario effettuare il login.
- Accogli il partecipante.
- Leggigli la guida alla conduzione del test. Fallo sempre, andando a braccio qualcosa prima o poi la dimenticherai.
- Fai firmare la liberatoria.
- Avvia la registrazione. Fallo mentre firma la liberatoria.
- Esegui il test.
- Termina la registrazione. Evita di fare un'unica enorme registrazione.
- Ringrazia e congeda il partecipante
- Prendi qualche appunto. Altrimenti rischierai di mischiare le idee tra un test e l'altro.
- Resetta il computer. Svuota cache e file temporanei, se hai usato la navigazione in incognito dovrebbe poter bastare chiudere e riaprire una nuova scheda in incognito.
- Prenditi 5 minuti di pausa.
- Accogli l'eventuale partecipante successivo.
Hamburger icon, l'ennesimo articolo a riguardo
Hamburger Icon — Per alcuni sarà un argomento trito e ritrito, specie per i più vicini al settore UI e UX, ma voglio comunque dirti la mia (e non solo).
Premessa per Newbie - Cos'è l'hamburger icon?
L’hamburger icon ormai è dappertutto. Stiamo parlando di quell’icona rappresentata generalmente da tre linee orizzontali, una sotto l’altra, che cliccandola ci mostra le voci di menu inizialmente nascoste (solitamente nascoste per questione di spazio). Ormai è presente in tantissime app e in altrettanti siti, specie quando li visualizzi da mobile. La prima domanda da porsi è perché.
Perché si usa?
Questa icona assolve alla necessità di ottimizzare gli spazi dedicando alla navigazione un contenitore che verrà mostrato solo su richiesta, appunto solo dopo che l’utente avrà cliccato l’icona in questione. Questo ci permette di non sacrificare voci di menu e, allo stesso tempo, mantenere la nostra interfaccia piuttosto semplice e pulita.
L’origine dell'hamburger icon
Sembra che il primo ad utilizzare l'hamburger icon sia stato Norm Cox nel disegnare un’interfaccia per Xerox Star. All’epoca non divenne così usata, fu poi rispolverata da Apple su iOS quando la propose all’interno dell’app per registrare l’audio. Nel tempo è spopolata anche grazie alla massiccia diffusione degli smartphone fino a diventare la soluzione più semplice e quasi scontata per organizzare delle voci di menu.
Perché non dovremmo usarla?
In giro sul web c’è chi sta quasi demonizzando quest'icona. Ma cosa ci ha fatto di male? La risposta è molto semplice: nulla, ma basterebbe utilizzarla con moderazione nella progettazione delle nostre interfacce.
In breve alcuni evidenti svantaggi:
- Richiede più click per raggiungere la voce di menu desiderata
- A colpo d’occhio l’utente non sa quali siano le sezioni del sito/app
- Ma soprattutto, non tutti sanno a cosa serve!
Molto interessante l'articolo pubblicato su Nielsen Norman Group (se pur datato rimane comunque molto attuale), dove vengono messi in chiaro alcuni numeri a seguito di test di usabilità.
Tutti la conoscono?
La risposta breve è “No”.
La risposta lunga: quando disegniamo interfacce dobbiamo ricordarci che progettiamo per l’utente, o meglio per una varietà di utenti. Tra questi ci saranno indubbiamente quelli meno avvezzi alla tecnologia per i quali non sarà così scontato che dietro quell’icona sia nascosto un menu di navigazione.
Purtroppo si è diffusa anche la pratica di utilizzare questa soluzione per i siti anche quando li navighiamo da desktop. Una fetta dei nostri utenti sarà composta da chi non utilizza smartphone, o comunque da chi non è molto pratico con device mobili, app e simili, che non riconoscerà nell’hamburger icon un’icona dedicata alla navigazione (qualche designer ha ovviato a questo problema affiancandoci un’etichetta “Menu”).
Ma quando parliamo di un sito desktop è proprio la soluzione giusta? Forse no. Con tutto lo spazio a disposizione, se questa risulta la soluzione migliore, allora forse dovremmo fare qualche passo indietro e capire cosa abbiamo sbagliato.
Ok, ma quali sono le alternative all'hamburger icon?
Mentre su desktop personalmente l’abolirei, la situazione cambia su mobile. La prima domanda da farci è “L’hamburger icon è davvero l’unica soluzione?”.
Iniziamo a pensare a delle valide alternative. Se le nostre voci di menu non sono molte potremmo pensare di utilizzare una bottom navigation posizionata quindi in fondo alla schermata. Se le voci di menu sono più di 5, potremmo pensare di usare la bottom navigation per le principali e optare per un’hamburger icon (o qualcosa di simile) per quelle meno importanti. Questa soluzione, se ci fai caso, è utilizzata in parecchie applicazioni.
N.B.: Stiamo attenti quando usiamo soluzioni simili: spesso le sole icone non saranno abbastanza esplicite e sarà bene chiarire dove portano aggiungendoci delle etichette, del testo che renda inequivocabile la navigazione.
Menu con Orizzontal Scroll
Se le voci di menu sono tante o se la bottom navigation ci sembra un approccio "troppo app", potrebbe essere una buona soluzione disporre le voci di menu in alto, una affianco all'altra, dentro un contenitore scrollabile orizzontalmente. Molto interessante la soluzione adottata da Medium: menu disposto in orizzontale con delle frecce per sfogliare le voci.
In conclusione
Non dico di non utilizzare mai l’hamburger icon, ma semplicemente usiamola responsabilmente. A volte la usiamo solo perché risulta la via più facile e veloce, ma prima dovremmo valutare sempre se è la soluzione giusta e vagliare le possibili alternative.
Empty State, cosa sono e a cosa servono
Nel settore del design delle interfacce, con la parola “empty state” (letteralmente stato vuoto) si intendono tutte quelle schermate che, per un motivo o per un altro, non restituiscono risultati.
Un esempio
Prova a pensare ad un e-commerce. Stai cercando un prodotto specifico e quindi utilizzi la barra di ricerca per scrivere il nome del prodotto che desideri. Ma purtroppo l’e-commerce potrebbe non avere nulla da mostrarti perché magari non tratta quel prodotto oppure perché hai scritto male il nome.
Cosa verrà mostrato? Ci auguriamo almeno una schermata che indicherà che non è stato possibile trovare ciò che cercate.
È una buona occasione, dopo una schermata “deludente”, per consigliare all’utente un’azione da compiere (ad esempio controllare l’ortografia, fare un’altra ricerca o sfogliare i prodotti per categoria).
Ecco cosa mostra Amazon.it:
Mediaworld.it invece non si preoccupa neanche di avvisarci che la ricerca non ha restituito nulla dopo aver applicato dei filtri (forse per vergogna):
Basta qualche esempio per far capire l’importanza che hanno gli empty state in termini di esperienza utente.
Se pensiamo alle app per smartphone i casi in cui possano essere restituiti degli empty state aumentano. Pensa alla connessione assente o a un timeout causato da una connessione lenta.
Zero Data State
Parliamo di stato zero data quando l'applicativo parte da uno stato, con appunto, zero dati all'interno. Questa è una buona occasion per mostrare un pulsante, una call to action che inviti l'utente a fare la prima mossa.
Esempio: Pensa ad una classica app per le note. È ovvio che dopo il primo avvio ancora l’app non abbia alcuna nota da mostrare, quindi indicherà che non c’è ancora nulla e magari ti inviterà ad inserire la tua prima nota.
Miglior Risultato
Alcune applicazioni quando non trovano risultati a seguito di una query di ricerca, cercano di mostrare comunque qualcosa che si avvicini il più possibile: il miglior risultato.
Pensa ad un qualsiasi ecommerce, piuttosto che non mostrare alcun prodotto potrebbe mostrare una lista di prodotti in un qualche modo collegati alla tua ricerca.
È comunque bene specificare che sono dei suggerimenti e non risultati di una corrispondenza esatta con le parole cercate.
Pensa a quale impatto lato business avrebbe un’accortezza del genere in un ecommerce da milioni di visite.
Spesso ci imbattiamo in casi dove non vengono neanche minimamente pensati gli empty state, questo aspetto viene ignorato o sottovalutato e questo non fa altro che aumentare la delusione dell’utente lasciandolo spaesato. Senza dirgli cosa è successo e perché non viene mostrato nulla, dovrà essere lui a fare delle supposizioni con conseguente frustrazione e probabile chiusura della pagina o dell’app.
Empty State, un po’ d’ispirazione
Se stai cercando un po’ d’ispirazione per i tuoi empty state, fai un salto su EmptyStat.es, un sito completamente dedicato agli stati vuoti, oppure dai un’occhiata a questo articolo su Hongkiat.
C'è sempre un primo post
Ciao, in primis mi presento. Sono Gabriele Malaspina, sono un designer freelance e mi occupo di user experience e user interface design.
Questo è il primo articolo di uiux.it, uno spazio che non si pone alcun obiettivo serio o nobile, non salveremo assolutamente il mondo dalle cattive interfacce, dal design brutto o non funzionale (queste cose ci saranno sempre, facciamocene una ragione).
È solo un contenitore di storie, idee, opinioni e appunti su tovagliolini.
A presto! 🖖🏻