Metodi di usability testing per mobile devices, fra cui test di usabilità e paper prototyping. Presentato con Paolo Montevecchi (@giesus) a Bologna per la settima edizione del IAsummit 2013, con Architecta (http://www.architecta.it)

1. VII Summit Italiano di Architettura dell’Informazione / Bologna 15 –16 novembre 2013
Mobile user testing
Hurry! Let’s test this UI!
By: Marco Buonvino

2. Who am I?
Hi!
They say I am a UX designer...
In realtà mi diverto a pensare a
metodi di interazione e a come
testarli con l’aiuto degli utenti!
@marcobuonvino

3. Utenti nel processo di design
La partecipazione di utenti nel design è vantaggiosa!
● Early testing
● Design più sicuro, basato su dati
● Migliore gestione di correzioni e modifiche
● Controllo proattivo

4. Il test di usabilità
ovvero: “Come ti metto in discussione il design”

5. Cosa è un test di usabilità
● Strumento a supporto
della progettazione
● Indicazioni da utenti reali
● Alta qualità di risultati
per costi contenuti
● Varie metodologie
adattabili al contesto

6. I ruoli in un test di usabilità
Facilitatore
illustra i task, assiste l’utente, sprona il metodo thinking
aloud
Utente
utilizza l’interfaccia, svolge i task assegnati
Osservatori
raccolgono indicazioni sui comportamenti e sui percorsi di
interazione dell’utente

7. Test, test, test!
Qualitativi
Quantitativi
● Svolgimento task
● Eyetracking
○
desktop
○
mobile devices
○
paper prototypes
● Card sorting
● A/B o multivariate testing

8. Quante persone?
“Servono tante persone
per avere risultati utili!”
WRONG!!

9. Quante persone?
x ~5
Svolgimento task
●
●
●
x ~15
Card sorting
x ~30
Eyetracking
desktop
mobile
paper prototyping
Nielsen, Why You Only Need to Test with 5 Users, Alertbox, 2000
Steve Krug, Rocket Surgery Made Easy, New Riders, 2010
Nielsen, Card Sorting: How Many Users to Test, Alertbox, 2004
Nielsen, How Many Test Users in a Usability Study?, Alertbox, 2014
Tullis and Wood, How Many Users Are Enough for a Card-Sorting Study?, 2004

10. Risultati di un test
● Identificazione dei problemi di usabilità
riscontrati
● Suddivisione per gravità e priorità di
intervento
● Raccomandazioni per la fase di UI design

11. Cattura flessibile
● Interazione free-hand
● Sia portrait che
landscape
● Cattura del volto e
dell’interazione
● Braccio flessibile

12. E in più: screen mirroring
Reflectorapp
http://www.airsquirrels.com/reflector/
Airdroid
http://www.airdroid.com

13. Google Glass prototyping
by Tom Chi
Prototyping rules
1.
Find the quickest way
to experience
2.
Doing is the best kind
of thinking
3.
Use materials that
move at the speed of
thought to maximize
your rate of learning
http://ed.ted.com/lessons/rapid-prototyping-google-glass-tom-chi

14. Case history
Mobile usability testing

15. The background
Cliente
settore banking
Oggetto
concorso estivo a premi, con quiz settimanali, per
sponsorizzare un nuovo prodotto
Obiettivo
testare l’interfaccia con utenti reali, su più dispositivi

16. Esperienza responsive
Interazione multipiattaforma

17. v
v

19. v
v

20. How to test it
Obiettivo
identificare problemi usabilità e di interazione
Main challenge
metodologia ‘responsive’

21. Here comes the method
Suddivisione campione: totale 9 utenti
3 users
3 users
3 users

22. The test

23. Ambiguità aree attive
Rischio di usabilità: Scroll interpretato come Tap

24. Allegati PDF desktop
Desktop - una voce di menu apre un PDF in altra tab:
problema del ritorno alla tab iniziale.

25. Allegati PDF mobile (I)
iOS - la voce di menu apre un PDF in altra tab

26. Allegati PDF mobile (II)
Android - salvataggio del PDF come allegato: poca
visibilità dello stato del sistema

27. Considerazioni
Problemi di interazione
● Form su touchscreen davvero noiosi
● Smartphone: schermo piccolo, poca voglia di leggere
tutti i contenuti

28. Che ci portiamo a casa?
Attenzione alle aree di interazione: evitare le
ambiguità!

29. Meanwhile, in iOS7...
Swipe up da
dentro il
viewport =
scroll
Swipe up da appena
fuori il viewport =
comparsa pannello
accesso veloce

30. Che ci portiamo a casa?
Input a tastiera non sono sempre il massimo
dell’usabilità: bisogna semplificare la vita
Per esempio inserendo il codice fiscale o un IBAN

31. Metodi di input
SwiftKey (http://www.swiftkey.net/en/)

32. Metodi di input
Riconoscimento
vocale, inserimento
testo o ricerca
assistita.
(Qualche problema con la
punteggiatura e privacy!)

33. Un altro metodo...

34. Paper prototyping
...basta qualche pezzo di carta.

35. Paper prototyping
Per fare test di
usabilità non serve
una centrale
nucleare
A volte basta solo
qualche pezzo di carta

36. Paper prototyping
← You can test

37. Paper prototyping
→ You get results

38. Paper prototyping test
● Particolare test di usabilità
● Rapido, preliminare
● Molto vantaggioso per
testare sketch e
wireframe veloci

39. Un ruolo extra
Beep!
Il Computer
simula la risposta dell’interfaccia, mostrando gli stati e le
relative pagine, a seguito dell’interazione dell’utente

40. Un esempio
● L’utente indica la
propria interazione
con una penna o una
matita
● Il “computer”
aggiorna il sistema
posizionando foglietti
https://www.youtube.com/watch?v=Bq1rkVTZLtU

41. And so...
● Testare quanto prima (e frequentemente)
● Verificare ipotesi di progettazione su ciò che
si ha a disposizione
● Massimizzare il risultato sfruttando tecniche
rapide

42. Ancora più veloci (e belle)!
POP - Prototyping on Paper
https://popapp.in
Mockabilly
http://www.mockabilly.com

43. Further reading
● Luke Wroblewski
○
Mobile First
● Steve Krug,
○
○
● Ethan Marcotte
○
“Don’t Make Me Think”,
“Rocket Surgery Made
Easy”
Responsive Web Design
● Nielsen & Loranger,
● Our Mobile Planet: Italia,
Google
[http://services.google.
com/fh/files/misc/omp-2013-itlocal.pdf]
○
“Web Usability 2.0”
● Donald Norman,
○
○
○
“La caffettiera del
masochista”,
“Emotional Design”,
“Gestire la complessità”

44. VII Summit Italiano di Architettura dell’Informazione / Bologna 15 –16 novembre 2013
Questions?
Grazie per l’attenzione! :D
@marcobuonvino
marcobuonvino@gmail.com