Qual è il processo ideale di design, almeno agli occhi due UX designer? Come si può andare incontro a una progettazione più User Centered? 5 Takeaways derivanti dall'esperienza di Luana Donetti (@ldonetti) e Marco Buonvino (@marcobuonvino) all'interno di web agency e agenzie di comunicazione.

1. “Follow the UX path”
Because we love User eXperience

2. Ciao!
UX designer &
Usability researcher
Laurea in TTC
UX Info-Interaction
Designer
Laurea in TTC
Marco Buonvino Luana Donetti
@marcobuonvino @ldonetti

3. UXthis
Andiamo a caccia di problemi di usabilità nelle
cose di tutti i giorni, che pubblichiamo su:
“UXthis!” - http://uxthis.tumblr.com

4. Immaginiamo...
Arriva un lavoro, si inizia a pianificare il
processo di sviluppo.
Generalmente, si viene fuori con...

5. Un processo di lavoro tipo...
Brief
Definizione
requisiti di design
Wireframe Visual design Sviluppo
Mantenimento /
ottimizzazione
Web Analytics
Usability test Implementazione

6. Waterfall - Quality Control
● Reparti coinvolti in sequenza
● Metodo canonico e prevedibile
● Consegna di documenti e specifiche
● Controllo della qualità after-the-fact

7. Ma in tutto questo...
dov’è l’utente?

8. Waterfall - Quality Control
Brief
Definizione
requisiti di design
Wireframe Visual design Sviluppo
Mantenimento /
ottimizzazione
Web Analytics
Usability test ImplementazioneOnly here?

9. Waterfall - Quality Control
● L’utente viene coinvolto tardi
● Design basato su assunzioni
● Le possibilità di correzione sono limitate
● Controllo a posteriori

10. Testare troppo tardi...
Che gran lavoro! Chiama
l’utente e vediamo se la
casa gli va bene! Ehm...

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

12. Waterfall - Quality Assurance
Brief Usability research
Low-fi
design
Med-fi
design
Hi-fi
design
Mantenimento /
ottimizzazione
Web Analytics /
A-B testing
Implementazione
Usability design
T
E
S
T
T
E
S
T
T
E
S
T

13. ● Early testing
● Design più sicuro, basato su dati
● Migliore gestione di correzioni e modifiche
● Controllo proattivo
Waterfall - Quality Assurance

14. Coinvolgere l’utente
fin da subito
...e anche prima.

15. User Centered Design
Non progettare per te stesso.

16. User Centered Design
Progetta per l’utente,
tenendolo sempre in considerazione

17. Come coinvolgere l’utente
nel processo di lavoro?

18. Behavioural Research
“Confrontarsi direttamente con l’utente”
● Test di usabilità
● Competitive analysis
● Field study / Etnografia

19. 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

20. Svolgimento task
● desktop
● mobile devices
● paper prototypes
Card sorting
Usability test qualitativi
Behavioural Research

21. ● 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 Analysis
Behavioural Research

22. ● 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 / Etnografia
Behavioural Research

23. Behavioural Design
“Progettare tenendo al centro l’utente”
● Personas
● Scenari d’uso
● Sketch
● User Journeys

24. 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

25. Scenari d’uso
Documenti 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

26. 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

27. 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

28. UI Design
“Disegnare l’interfaccia un passo alla volta”
● Low-fi design
● Medium-fi design
● Hi-fi design

29. Low-Fi design
● Design preliminare,
ancora in fase
esplorativa
● Schizzi su carta o
programmi di
wireframing rapido
(es. Balsamiq Mockups)
UI Design

30. Med-Fi design
● Design
intermedio
● Programmi di
wireframing
elettronico
(es. Balsamiq Mockups,
Axure, OmniGraffle)
UI Design

31. Hi-Fi design
● Design
avanzato
● Programmi di
wireframing
elettronico
(es. Axure, HotGloo)
● HTML + CSS
UI Design

32. Questo era il
path ideale.
Ma non è sempre così.

33. Tempistiche cliente poco
gestibili
=
impossibilità o difficoltà a seguire uno o più
nodi del path

34. Tempistiche interne poco
realistiche
=
stime UX unfriendly e quasi imposte
perdita di qualità

35. Disallineamento tra risorse
=
rework e correzioni ripetute con perdita di
efficacia, tempo e focus sulla qualità.
E i costi aumentano.

36. Progettazione non user centered
=
mancanza test utente
“dominio delle opinioni”

37. Sottovalutazione usability e UX
=
wireframes su decisioni già prese lato
creativo
“dominio delle opinioni”

38. 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à.

39. 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

40. 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”

41. Story - l’ultima speranza
Brief Usability research
Low-fi
design
Med-fi
design
Hi-fi
design
Mantenimento /
ottimizzazione
Web Analytics /
A-B testing
Implementazione
Usability design
T
E
S
T
T
E
S
T
T
E
S
T
Fine tuning: test utente con hi-fi prototypes

42. 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.

43. Qualche trucco per un
processo più UX friendly?

44. Discount Usability
Quando il test costa troppo, apriamo gli sconti!
● Valutazione euristica
● Analisi con linee guida

45. 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

46. 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

47. Takeaway - five lessons
#1
Coinvolgere l’utente prima possibile
#2
Testare il lavoro quanto prima, con l’utente
reale
(non serve per forza un laboratorio, basta anche qualcosa più informale)
#3
Usare degli strumenti semplici per non perdere
mai di vista gli obiettivi degli utenti

48. #4
I test servono a tutte le figure coinvolte, perché
aumentano la coscienza sui problemi di
usabilità tramite prova diretta.
#5
Avere uno UX che minimizzi i problemi di
usabilità è un bene. Fare i test è prezioso.
Takeaway - five lessons

49. Ogni volta che predomina l’
opinionanza e non l’
usabilità, un utente
agonizza, mentre uno UX
muore in preda a spasmi
”
“

50. Esistono anche altri metodi
● Agile
Agile SCRUM workshop, 21 settembre --ci vediamo là
http://milan.impacthub.net/files/2013/09/Agile_Workshop.pdf
● Lean UX
ebook by: Jeff Gothelf, Josh Seiden
http://www.leanuxbook.com

51. 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

52. 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/

53. Your turn!
Avete già idee per coinvolgere da
subito l’utente nel processo di lavoro?

54. Questions?
Se avete dubbi, contattateci!
@ldonetti
@marcobuonvino
Grazie per l’attenzione