Mobile user testingHurry! Let’s test this UI!

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

By: Marco Buonvino

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

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

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 risultati per costi contenuti

● Varie metodologie adattabili al contesto

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

Test, test, test!Qualitativi

● Svolgimento task ○ desktop○ mobile devices○ paper prototypes

● Card sorting

Quantitativi

● Eyetracking

● A/B o multivariate testing

Quante persone?

“Servono tante persone per avere risultati utili!”

WRONG!!

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

Risultati di un test

● Identificazione dei problemi di usabilità riscontrati

● Suddivisione per gravità e priorità di intervento

● Raccomandazioni per la fase di UI design

Cattura flessibile

● Interazione free-hand

● Sia portrait che landscape

● Cattura del volto e dell’interazione

● Braccio flessibile

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

E in più: screen mirroring

Airdroidhttp://www.airdroid.com

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

Case historyMobile usability testing

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

Esperienza responsive

Interazione multipiattaforma

v

v

v

v

How to test it

Obiettivoidentificare problemi usabilità e di interazione

Main challengemetodologia ‘responsive’

Suddivisione campione: totale 9 utenti

Here comes the method

3 users 3 users 3 users

The test

Rischio di usabilità: Scroll interpretato come Tap

Ambiguità aree attive

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 leggere tutti i contenuti

Che ci portiamo a casa?

Attenzione alle aree di interazione: evitare le ambiguità!

Meanwhile, in iOS7...

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

Swipe up da dentro il

viewport = scroll

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

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 privacy!)

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 wireframe veloci

Un ruolo extra

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

Beep!

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

And so...

● Testare quanto prima (e frequentemente)

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

● Massimizzare il risultato sfruttando tecniche rapide

POP - Prototyping on Paperhttps://popapp.in

Ancora più veloci (e belle)!

Mockabillyhttp://www.mockabilly.com

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à”

Questions?Grazie per l’attenzione! :D

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

@marcobuonvino

marcobuonvino@gmail.com