Mobile user testing - IAsummit2013

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

description

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)

Transcript of Mobile user testing - IAsummit2013

Page 1: Mobile user testing - IAsummit2013

Mobile user testingHurry! Let’s test this UI!

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

By: Marco Buonvino

Page 2: Mobile user testing - IAsummit2013

Who am I?

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!

Hi!

@marcobuonvino

Page 3: Mobile user testing - IAsummit2013

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

Page 4: Mobile user testing - IAsummit2013

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

Page 5: Mobile user testing - IAsummit2013

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

Page 6: Mobile user testing - IAsummit2013

I ruoli in un test di usabilità

Facilitatoreillustra i task, assiste l’utente, sprona il metodo thinking aloud

Utenteutilizza l’interfaccia, svolge i task assegnati

Osservatoriraccolgono indicazioni sui comportamenti e sui percorsi di interazione dell’utente

Page 7: Mobile user testing - IAsummit2013

Test, test, test!Qualitativi

● Svolgimento task ○ desktop○ mobile devices○ paper prototypes

● Card sorting

Quantitativi

● Eyetracking

● A/B o multivariate testing

Page 8: Mobile user testing - IAsummit2013

Quante persone?

“Servono tante persone per avere risultati utili!”

WRONG!!

Page 9: Mobile user testing - IAsummit2013

Quante persone?

Nielsen, Why You Only Need to Test with 5 Users, Alertbox, 2000Nielsen, Card Sorting: How Many Users to Test, Alertbox, 2004Tullis and Wood, How Many Users Are Enough for a Card-Sorting Study?, 2004

Steve Krug, Rocket Surgery Made Easy, New Riders, 2010Nielsen, How Many Test Users in a Usability Study?, Alertbox, 2014

x ~5 x ~15 x ~30

Svolgimento task● desktop ● mobile● paper prototyping

Card sorting Eyetracking

Page 10: Mobile user testing - IAsummit2013

Risultati di un test

● Identificazione dei problemi di usabilità riscontrati

● Suddivisione per gravità e priorità di intervento

● Raccomandazioni per la fase di UI design

Page 11: Mobile user testing - IAsummit2013

Cattura flessibile

● Interazione free-hand

● Sia portrait che landscape

● Cattura del volto e dell’interazione

● Braccio flessibile

Page 12: Mobile user testing - IAsummit2013

Reflectorapphttp://www.airsquirrels.com/reflector/

E in più: screen mirroring

Airdroidhttp://www.airdroid.com

Page 13: Mobile user testing - IAsummit2013

Google Glass prototyping

http://ed.ted.com/lessons/rapid-prototyping-google-glass-tom-chi

Prototyping rules1. 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

by Tom Chi

Page 14: Mobile user testing - IAsummit2013

Case historyMobile usability testing

Page 15: Mobile user testing - IAsummit2013

The background

Clientesettore banking

Oggettoconcorso estivo a premi, con quiz settimanali, per sponsorizzare un nuovo prodotto

Obiettivo testare l’interfaccia con utenti reali, su più dispositivi

Page 16: Mobile user testing - IAsummit2013

Esperienza responsive

Interazione multipiattaforma

Page 17: Mobile user testing - IAsummit2013

v

v

Page 18: Mobile user testing - IAsummit2013
Page 19: Mobile user testing - IAsummit2013

v

v

Page 20: Mobile user testing - IAsummit2013

How to test it

Obiettivoidentificare problemi usabilità e di interazione

Main challengemetodologia ‘responsive’

Page 21: Mobile user testing - IAsummit2013

Suddivisione campione: totale 9 utenti

Here comes the method

3 users 3 users 3 users

Page 22: Mobile user testing - IAsummit2013

The test

Page 23: Mobile user testing - IAsummit2013

Rischio di usabilità: Scroll interpretato come Tap

Ambiguità aree attive

Page 24: Mobile user testing - IAsummit2013

Allegati PDF desktop

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

Page 25: Mobile user testing - IAsummit2013

Allegati PDF mobile (I)

iOS - la voce di menu apre un PDF in altra tab

Page 26: Mobile user testing - IAsummit2013

Allegati PDF mobile (II)

Android - salvataggio del PDF come allegato: poca visibilità dello stato del sistema

Page 27: Mobile user testing - IAsummit2013

Considerazioni

Problemi di interazione● Form su touchscreen davvero noiosi

● Smartphone: schermo piccolo, poca voglia di leggere tutti i contenuti

Page 28: Mobile user testing - IAsummit2013

Che ci portiamo a casa?

Attenzione alle aree di interazione: evitare le ambiguità!

Page 29: Mobile user testing - IAsummit2013

Meanwhile, in iOS7...

Swipe up da appena fuori il viewport = comparsa pannello accesso veloce

Swipe up da dentro il

viewport = scroll

Page 30: Mobile user testing - IAsummit2013

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

Page 31: Mobile user testing - IAsummit2013

Metodi di input

SwiftKey (http://www.swiftkey.net/en/)

Page 32: Mobile user testing - IAsummit2013

Metodi di input

Riconoscimento vocale, inserimento testo o ricerca assistita.

(Qualche problema con la punteggiatura e privacy!)

Page 33: Mobile user testing - IAsummit2013

Un altro metodo...

Page 34: Mobile user testing - IAsummit2013

Paper prototyping...basta qualche pezzo di carta.

Page 35: Mobile user testing - IAsummit2013

Paper prototyping

Per fare test di usabilità non serve una centrale nucleare

A volte basta solo qualche pezzo di carta

Page 36: Mobile user testing - IAsummit2013

Paper prototyping

← You can test

Page 37: Mobile user testing - IAsummit2013

Paper prototyping

→ You get results

Page 38: Mobile user testing - IAsummit2013

Paper prototyping test● Particolare test di usabilità

● Rapido, preliminare

● Molto vantaggioso per testare sketch e wireframe veloci

Page 39: Mobile user testing - IAsummit2013

Un ruolo extra

Il Computersimula la risposta dell’interfaccia, mostrando gli stati e le relative pagine, a seguito dell’interazione dell’utente

Beep!

Page 40: Mobile user testing - IAsummit2013

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

Page 41: Mobile user testing - IAsummit2013

And so...

● Testare quanto prima (e frequentemente)

● Verificare ipotesi di progettazione su ciò che si ha a disposizione

● Massimizzare il risultato sfruttando tecniche rapide

Page 42: Mobile user testing - IAsummit2013

POP - Prototyping on Paperhttps://popapp.in

Ancora più veloci (e belle)!

Mockabillyhttp://www.mockabilly.com

Page 43: Mobile user testing - IAsummit2013

Further reading● Luke Wroblewski

○ Mobile First

● Ethan Marcotte○ Responsive Web Design

● Our Mobile Planet: Italia, Google[http://services.google.com/fh/files/misc/omp-2013-it-local.pdf]

● Steve Krug,○ “Don’t Make Me Think”, ○ “Rocket Surgery Made

Easy”

● Nielsen & Loranger, ○ “Web Usability 2.0”

● Donald Norman,○ “La caffettiera del

masochista”, ○ “Emotional Design”, ○ “Gestire la complessità”

Page 44: Mobile user testing - IAsummit2013

Questions?Grazie per l’attenzione! :D

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

@marcobuonvino

[email protected]