“Follow the UX path”Because we love User eXperience

Ciao!

UX designer & Usability researcher

Laurea in TTC

UX Info-Interaction Designer

Laurea in TTC

Marco Buonvino Luana Donetti

@marcobuonvino @ldonetti

UXthisAndiamo a caccia di problemi di usabilità nelle

cose di tutti i giorni, che pubblichiamo su:

“UXthis!” - http://uxthis.tumblr.com

Immaginiamo...Arriva un lavoro, si inizia a pianificare il

processo di sviluppo.

Generalmente, si viene fuori con...

Un processo di lavoro tipo...

Brief Definizione requisiti di design

Wireframe Visual design Sviluppo

Mantenimento / ottimizzazione Web Analytics

Usability test Implementazione

Waterfall - Quality Control● Reparti coinvolti in sequenza

● Metodo canonico e prevedibile

● Consegna di documenti e specifiche

● Controllo della qualità after-the-fact

Ma in tutto questo...

dov’è l’utente?

Waterfall - Quality Control

Brief Definizione requisiti di design

Wireframe Visual design Sviluppo

Mantenimento / ottimizzazione Web Analytics

Usability test ImplementazioneOnly here?

Waterfall - Quality Control ● L’utente viene coinvolto tardi

● Design basato su assunzioni

● Le possibilità di correzione sono limitate

● Controllo a posteriori

Testare troppo tardi...

Che gran lavoro! Chiama l’utente e vediamo se la

casa gli va bene! Ehm...

E se ci confrontassimo con l’utente un po’ prima?

Waterfall - Quality Assurance

Brief Usability research

Low-fidesign

Med-fidesign

Hi-fi design

Mantenimento / ottimizzazione

Web Analytics / A-B testingImplementazione

Usability design

TEST

TEST

TEST

● Early testing

● Design più sicuro, basato su dati

● Migliore gestione di correzioni e modifiche

● Controllo proattivo

Waterfall - Quality Assurance

Coinvolgere l’utente

fin da subito

...e anche prima.

User Centered Design

Non progettare per te stesso.

User Centered Design

Progetta per l’utente, tenendolo sempre in considerazione

Come coinvolgere l’utente

nel processo di lavoro?

Behavioural Research“Confrontarsi direttamente con l’utente”

● Test di usabilità

● Competitive analysis

● Field study / Etnografia

Test di usabilità● Strumento a supporto della

fase di progettazione

● Permette di raccogliere indicazioni da utenti reali, slegati dal progetto

● Alta qualità di risultati per costi contenuti

● Varie metodologie, adattabili al contesto d’indagine

Behavioural Research

Svolgimento task ● desktop● mobile devices● paper prototypes

Card sorting

Usability test qualitativiBehavioural Research

● Particolare test di usabilità

● Si svolge su un competitor

● Utile per: ○ Assimilare aspetti positivi○ Evitare aspetti negativi

● Ok se non si ha ancora un sito proprio

Competitive AnalysisBehavioural Research

● L’osservatore segue l’utente nella sua vita quotidiana

● Obiettivo: raccogliere informazioni sulle abitudini di interazione

● È possibile capire i punti in cui gli utenti possono aver bisogno di un’innovazione

● Molto costoso

Field study / EtnografiaBehavioural Research

Behavioural Design“Progettare tenendo al centro l’utente”

● Personas

● Scenari d’uso

● Sketch

● User Journeys

Personas● Rappresentazioni di utenti tipo

● Necessità, obiettivi, caratteristiche e abitudini d’uso

● Interviste con utenti reali oppure basati su web analytics e test di usabilità

Behavioural Design

Scenari d’usoDocumenti che illustrano un’interazione verosimile da parte di un utente tipo

Scopo: ● verificare come l’interfaccia

potrebbe risolvere gli obiettivi dell’utente

● individuare problemi di usabilità

● individuare altre funzionalità di cui l’utente potrebbe aver bisogno

Behavioural Design

Sketch● Raccontano l’interazione di

un utente con la UI

● Scopo: condividere con il team quale possa essere l’interazione e i passaggi su cui focalizzare il design

● Molto utile per iniziare a raccontare l’idea ai membri del team

Behavioural Design

User Journeys● Diagrammi che illustrano

tutti i passaggi di interazione dell’utente con l’interfaccia

● Vengono considerati anche i momenti preliminari e conseguenti rispetto all’interazione

● Scopo: identificare i punti di attrito, per capire dove concentrare il design

Behavioural Design

UI Design“Disegnare l’interfaccia un passo alla volta”

● Low-fi design

● Medium-fi design

● Hi-fi design

Low-Fi design

● Design preliminare, ancora in fase esplorativa

● Schizzi su carta o programmi di wireframing rapido(es. Balsamiq Mockups)

UI Design

Med-Fi design

● Design intermedio

● Programmi di wireframing elettronico(es. Balsamiq Mockups, Axure, OmniGraffle)

UI Design

Hi-Fi design

● Design avanzato

● Programmi di wireframing elettronico(es. Axure, HotGloo)

● HTML + CSS

UI Design

Questo era il path ideale.

Ma non è sempre così.

Tempistiche cliente poco gestibili

=

impossibilità o difficoltà a seguire uno o più nodi del path

Tempistiche interne poco realistiche

=

stime UX unfriendly e quasi imposte

perdita di qualità

Disallineamento tra risorse

=

rework e correzioni ripetute con perdita di efficacia, tempo e focus sulla qualità.

E i costi aumentano.

Progettazione non user centered

=

mancanza test utente

“dominio delle opinioni”

Sottovalutazione usability e UX

=

wireframes su decisioni già prese lato creativo

“dominio delle opinioni”

Story

C’era una volta un brief per un gioco

tematico, destinato a un target di bambini

piccoli (fascia 6-8) e con vincoli grafici

intrinsecamente impattanti sull’usabilità.

Parola d’ordine: semplicità.

Story - i problemi

● Tempistiche ristrette e

● cambiamenti in corso d’opera

hanno portato a

● disaccordi su funzionalità e su peso dei vari

elementi del gioco

Story - i problemi

Risultato:

● perdita focus sull’utente

● perdita di alcune fette di semplicità

● dominio del pensiero soggettivo: il gioco era “così semplice da essere ovvio”

Story - l’ultima speranza

Brief Usability research

Low-fidesign

Med-fidesign

Hi-fi design

Mantenimento / ottimizzazione

Web Analytics / A-B testingImplementazione

Usability design

TEST

TEST

TEST

Fine tuning: test utente con hi-fi prototypes

Story - il (quasi) lieto fine

● i test hanno suscitato interesse e aumentato l’awareness di tutte le figure coinvolte

● hanno validato le scelte prese

e, in alcuni casi

● hanno portato alla modifica di elementi poco usabili.

Qualche trucco per un

processo più UX friendly?

Discount UsabilityQuando il test costa troppo, apriamo gli sconti!

● Valutazione euristica

● Analisi con linee guida

Valutazione euristica● Discount usability method

● È un’analisi condotta da esperti

● Per aumentare l’oggettività dei risultati, l’analisi viene condotta in modo parallelo fra più valutatori (circa 3)

● Viene seguito il percorso di un task rappresentativo, poi un’analisi completa

Analisi con linee guida● Discount usability method

● È un’analisi condotta attraverso l’utilizzo di linee guida condivise o create ad hoc

● Metodo rapido, ma talvolta poco flessibile

Takeaway - five lessons#1Coinvolgere l’utente prima possibile

#2Testare il lavoro quanto prima, con l’utente reale(non serve per forza un laboratorio, basta anche qualcosa più informale)

#3Usare degli strumenti semplici per non perdere mai di vista gli obiettivi degli utenti

#4I test servono a tutte le figure coinvolte, perché aumentano la coscienza sui problemi di usabilità tramite prova diretta.

#5Avere uno UX che minimizzi i problemi di usabilità è un bene. Fare i test è prezioso.

Takeaway - five lessons

Ogni volta che predomina l’

opinionanza e non l’

usabilità, un utente

agonizza, mentre uno UX

muore in preda a spasmi ”

“

Esistono anche altri metodi

● AgileAgile SCRUM workshop, 21 settembre --ci vediamo làhttp://milan.impacthub.net/files/2013/09/Agile_Workshop.pdf

● Lean UXebook by: Jeff Gothelf, Josh Seidenhttp://www.leanuxbook.com

Strumenti utili● Axure - http://www.axure.com ● Balsamiq - http://balsamiq.com ● OmniGraffle - http://www.omnigroup.com/ ● Morae - http://www.techsmith.com/morae.html ● Silverback - http://silverbackapp.com ● Skype - http://www.skype.com/it/

Ma a volte bastano anche:● Carta e penna● Una lavagna e dei pennarelli

What to read● Steve Krug

○ “Don’t Make Me Think”○ “Rocket Surgery Made Easy”

● Susan Weinshenk○ “100 things every designer should know about people”

● Nielsen & Loranger○ “Web Usability 2.0”

● Donald Norman○ “La caffettiera del masochista”○ “Emotional Design”○ “Gestire la complessità”

● A Book Apart - http://www.abookapart.com ● Nielsen Alertbox - http://www.nngroup.com/articles/

Your turn!

Avete già idee per coinvolgere da subito l’utente nel processo di lavoro?

Questions?

Se avete dubbi, contattateci!@ldonetti

@marcobuonvino

Grazie per l’attenzione