VII Summit Italiano di Architettura dell’Informazione / Bologna 15 –16 novembre 2013

Mobile user testing
Hurry! Let’s tes...
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...
Utenti nel processo di design
La partecipazione di utenti nel design è vantaggiosa!
● Early testing
● Design più sicuro, b...
Il test di usabilità
ovvero: “Come ti metto in discussione il design”
Cosa è un test di usabilità
● Strumento a supporto
della progettazione
● Indicazioni da utenti reali
● Alta qualità di ris...
I ruoli in un test di usabilità
Facilitatore
illustra i task, assiste l’utente, sprona il metodo thinking
aloud

Utente
ut...
Test, test, test!
Qualitativi

Quantitativi

● Svolgimento task

● Eyetracking

○

desktop

○

mobile devices

○

paper pr...
Quante persone?
“Servono tante persone
per avere risultati utili!”

WRONG!!
Quante persone?

x ~5
Svolgimento task
●
●
●

x ~15
Card sorting

x ~30
Eyetracking

desktop
mobile
paper prototyping

Nie...
Risultati di un test
● Identificazione dei problemi di usabilità
riscontrati
● Suddivisione per gravità e priorità di
inte...
Cattura flessibile
● Interazione free-hand
● Sia portrait che
landscape
● Cattura del volto e
dell’interazione
● Braccio f...
E in più: screen mirroring
Reflectorapp
http://www.airsquirrels.com/reflector/

Airdroid
http://www.airdroid.com
Google Glass prototyping
by Tom Chi

Prototyping rules
1.

Find the quickest way
to experience

2.

Doing is the best kind...
Case history
Mobile usability testing
The background
Cliente
settore banking
Oggetto
concorso estivo a premi, con quiz settimanali, per
sponsorizzare un nuovo p...
Esperienza responsive
Interazione multipiattaforma
v

v
v

v
How to test it
Obiettivo
identificare problemi usabilità e di interazione
Main challenge
metodologia ‘responsive’
Here comes the method
Suddivisione campione: totale 9 utenti

3 users

3 users

3 users
The test
Ambiguità aree attive
Rischio di usabilità: Scroll interpretato come Tap
Allegati PDF desktop
Desktop - una voce di menu apre un PDF in altra tab:
problema del ritorno alla tab iniziale.
Allegati PDF mobile (I)
iOS - la voce di menu apre un PDF in altra tab
Allegati PDF mobile (II)
Android - salvataggio del PDF come allegato: poca
visibilità dello stato del sistema
Considerazioni
Problemi di interazione
● Form su touchscreen davvero noiosi
● Smartphone: schermo piccolo, poca voglia di ...
Che ci portiamo a casa?
Attenzione alle aree di interazione: evitare le
ambiguità!
Meanwhile, in iOS7...

Swipe up da
dentro il
viewport =
scroll

Swipe up da appena
fuori il viewport =
comparsa pannello
a...
Che ci portiamo a casa?
Input a tastiera non sono sempre il massimo
dell’usabilità: bisogna semplificare la vita
Per esemp...
Metodi di input
SwiftKey (http://www.swiftkey.net/en/)
Metodi di input
Riconoscimento
vocale, inserimento
testo o ricerca
assistita.
(Qualche problema con la
punteggiatura e pri...
Un altro metodo...
Paper prototyping
...basta qualche pezzo di carta.
Paper prototyping
Per fare test di
usabilità non serve
una centrale
nucleare
A volte basta solo
qualche pezzo di carta
Paper prototyping

← You can test
Paper prototyping

→ You get results
Paper prototyping test
● Particolare test di usabilità
● Rapido, preliminare
● Molto vantaggioso per
testare sketch e
wire...
Un ruolo extra
Beep!

Il Computer
simula la risposta dell’interfaccia, mostrando gli stati e le
relative pagine, a seguito...
Un esempio
● L’utente indica la
propria interazione
con una penna o una
matita
● Il “computer”
aggiorna il sistema
posizio...
And so...
● Testare quanto prima (e frequentemente)
● Verificare ipotesi di progettazione su ciò che
si ha a disposizione
...
Ancora più veloci (e belle)!
POP - Prototyping on Paper
https://popapp.in

Mockabilly
http://www.mockabilly.com
Further reading
● Luke Wroblewski
○

Mobile First

● Steve Krug,
○
○

● Ethan Marcotte
○

“Don’t Make Me Think”,
“Rocket S...
VII Summit Italiano di Architettura dell’Informazione / Bologna 15 –16 novembre 2013

Questions?
Grazie per l’attenzione! ...
Mobile user testing - IAsummit2013
Upcoming SlideShare
Loading in...5
×

Mobile user testing - IAsummit2013

605

Published on

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)

Published in: Design
1 Comment
10 Likes
Statistics
Notes
No Downloads
Views
Total Views
605
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
21
Comments
1
Likes
10
Embeds 0
No embeds

No notes for slide

Mobile user testing - IAsummit2013

  1. 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. 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. 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. 4. Il test di usabilità ovvero: “Come ti metto in discussione il design”
  5. 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. 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. 7. Test, test, test! Qualitativi Quantitativi ● Svolgimento task ● Eyetracking ○ desktop ○ mobile devices ○ paper prototypes ● Card sorting ● A/B o multivariate testing
  8. 8. Quante persone? “Servono tante persone per avere risultati utili!” WRONG!!
  9. 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. 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. 11. Cattura flessibile ● Interazione free-hand ● Sia portrait che landscape ● Cattura del volto e dell’interazione ● Braccio flessibile
  12. 12. E in più: screen mirroring Reflectorapp http://www.airsquirrels.com/reflector/ Airdroid http://www.airdroid.com
  13. 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. 14. Case history Mobile usability testing
  15. 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. 16. Esperienza responsive Interazione multipiattaforma
  17. 17. v v
  18. 18. v v
  19. 19. How to test it Obiettivo identificare problemi usabilità e di interazione Main challenge metodologia ‘responsive’
  20. 20. Here comes the method Suddivisione campione: totale 9 utenti 3 users 3 users 3 users
  21. 21. The test
  22. 22. Ambiguità aree attive Rischio di usabilità: Scroll interpretato come Tap
  23. 23. Allegati PDF desktop Desktop - una voce di menu apre un PDF in altra tab: problema del ritorno alla tab iniziale.
  24. 24. Allegati PDF mobile (I) iOS - la voce di menu apre un PDF in altra tab
  25. 25. Allegati PDF mobile (II) Android - salvataggio del PDF come allegato: poca visibilità dello stato del sistema
  26. 26. Considerazioni Problemi di interazione ● Form su touchscreen davvero noiosi ● Smartphone: schermo piccolo, poca voglia di leggere tutti i contenuti
  27. 27. Che ci portiamo a casa? Attenzione alle aree di interazione: evitare le ambiguità!
  28. 28. Meanwhile, in iOS7... Swipe up da dentro il viewport = scroll Swipe up da appena fuori il viewport = comparsa pannello accesso veloce
  29. 29. 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
  30. 30. Metodi di input SwiftKey (http://www.swiftkey.net/en/)
  31. 31. Metodi di input Riconoscimento vocale, inserimento testo o ricerca assistita. (Qualche problema con la punteggiatura e privacy!)
  32. 32. Un altro metodo...
  33. 33. Paper prototyping ...basta qualche pezzo di carta.
  34. 34. Paper prototyping Per fare test di usabilità non serve una centrale nucleare A volte basta solo qualche pezzo di carta
  35. 35. Paper prototyping ← You can test
  36. 36. Paper prototyping → You get results
  37. 37. Paper prototyping test ● Particolare test di usabilità ● Rapido, preliminare ● Molto vantaggioso per testare sketch e wireframe veloci
  38. 38. Un ruolo extra Beep! Il Computer simula la risposta dell’interfaccia, mostrando gli stati e le relative pagine, a seguito dell’interazione dell’utente
  39. 39. 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
  40. 40. And so... ● Testare quanto prima (e frequentemente) ● Verificare ipotesi di progettazione su ciò che si ha a disposizione ● Massimizzare il risultato sfruttando tecniche rapide
  41. 41. Ancora più veloci (e belle)! POP - Prototyping on Paper https://popapp.in Mockabilly http://www.mockabilly.com
  42. 42. 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à”
  43. 43. VII Summit Italiano di Architettura dell’Informazione / Bologna 15 –16 novembre 2013 Questions? Grazie per l’attenzione! :D @marcobuonvino marcobuonvino@gmail.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×