Breve panoramica di ruoli e strumenti nell'ambito dello UX design. Lezione (e workshop!) per il corso 2014 di Comunicazione Visiva e Design delle Interfacce, all'Università di Milano-Bicocca. Special thanks: Boraso.com

1. UX design: una
breve panoramica
su ruoli e
strumenti

2. UX / Interaction designer
Marco Buonvino
@marcobuonvino

3. Ex studente
di TTC
Interaction designer /
Usability researcher
THE STORY SO FAR...
UX / Interaction
designer

4. Che cos’è la UX?

5. User eXperience
CHE COS’È LA UX?

6. Contesto e ambiente
Utilizzo dell’interfaccia
Formazione della
necessità
Momenti successivi
L’utente
CHE COS’È LA UX?

7. Interaction Design
CHE COS’È LA UX?

8. Interaction Design
Strategia
Ricerca
CHE COS’È LA UX?
Architettura

9. Ciò che una persona prova quando si relaziona con un
prodotto, un sistema, un servizio, un brand.
Comprende tutto ciò che si avviene prima (l’aspettativa),
durante (l’esperienza) e dopo (il ricordo) l’interazione,
all’interno del contesto di svolgimento.
CHE COS’È LA UX?
User eXperience

10. http://www.youtube.com/watch?v=Ovj4hFxko7c
What the #$%@
is UX Design?
CHE COS’È LA UX?

11. Le figure
professionali

12. UX designer
Progetta l’esperienza d’uso di un processo o di un obiettivo
Cerca di capire:
• chi è l’utente, le sue caratteristiche e le sue necessità
• come sfruttare il contesto d’interazione
Lavora con:
• strumenti di behavioural design, come Personas, Scenari
d’uso e User Journeys
LE FIGURE PROFESSIONALI

13. Interaction designer
Lavora per realizzare una User Interface:
• che risponda alle necessità dell’utente
• che sia usabile e accessibile
Lavora con:
• Sketch, Wireframe, Flussi di interazione e Prototipi
LE FIGURE PROFESSIONALI
Si occupa di progettare l’interazione uomo-interfaccia

14. Cerca di rendere i contenuti:
• facilmente individuabili e raggiungibili
• ordinati logicamente in strutture adatta ai requisiti
Adora lavorare con:
• Schemi e diagrammi di architettura informativa
Information Architect
LE FIGURE PROFESSIONALI
Si occupa della gestione e dell’organizzazione dei contenuti

15. Usability Researcher
Individua i problemi di usabilità e ne identifica le motivazioni
LE FIGURE PROFESSIONALI
Nel suo lavoro:
• collabora strettamente con il designer
• chiede la partecipazione di utenti finali
• va d’accordo con esperti di web analytics
I suoi strumenti:
• Test di usabilità, Valutazione euristica, Linee guida

16. http://www.onwardsearch.com/
UX-Career-Guide/
A guide to
UX careers
LE FIGURE PROFESSIONALI

17. Capitolo UNO
Prima di fare
design bisogna
conoscere l’utente

18. • Bisogni e necessità
• Contesto e abitudini d’uso
• Comportamento durante l’interazione
• Atteggiamento e predisposizione
CAPIRE L’UTENTE
Cosa bisogna capire?

19. • Test di usabilità
• Competitive analysis
• Field Study / Etnografia
• Web Analytics
• A-B test / Multivariate test
Qualitativi
Quantitativi
CAPIRE L’UTENTE
Alcuni strumenti

20. Il test di usabilità

21. Strumento a supporto della
fase di progettazione di un
sito web
Permette di raccogliere indicazioni
da utenti reali, slegati dal progetto
Alta qualità di risultati per costi
contenuti
Varie metodologie, adattabili al
contesto d’indagine
CAPIRE L’UTENTE - Il test di usabilità

22. Utente
utilizza l’interfaccia, svolge i task assegnati
Facilitatore
illustra i task, assiste l’utente, sprona il metodo
thinking aloud
Osservatori
raccolgono indicazioni sui comportamenti e sui
percorsi di interazione dell’utente
CAPIRE L’UTENTE - Il test di usabilità
I ruoli

23. Usability test qualitativi
• Svolgimento task attraverso:
- desktop
CAPIRE L’UTENTE - Il test di usabilità
Tipologie

24. Usability test qualitativi
• Svolgimento task attraverso:
- desktop
- mobile devices
CAPIRE L’UTENTE - Il test di usabilità
Tipologie

25. Usability test qualitativi
• Svolgimento task attraverso:
- desktop
- mobile devices
- paper prototypes
CAPIRE L’UTENTE - Il test di usabilità
Tipologie

26. Usability test qualitativi
• Svolgimento task attraverso:
• Card sorting
- desktop
- mobile devices
- paper prototypes
CAPIRE L’UTENTE - Il test di usabilità
Tipologie

27. Usability test qualitativi
• Svolgimento task attraverso:
Usability test quantitativi
• Eye Tracking
• Card sorting
- desktop
- mobile devices
- paper prototypes
CAPIRE L’UTENTE - Il test di usabilità
Tipologie

28. Card sorting
x ~15
‣ Nielsen,Why You Only Need to Test with 5 Users,Alertbox,2000
‣ Nielsen,Card Sorting: How Many Users to Test,Alertbox,2004
‣ Nielsen,How Many Test Users in a Usability Study?,Alertbox,2014
‣ Steve Krug,Rocket Surgery Made Easy,New Riders,2010
‣ Tullis and Wood,How Many Users Are Enough for a Card-Sorting Study?,2004
Qualitative
desktop
Qualitative tablet /
smartphone
Paper prototyping
x ~5
Eyetracking
x ~30
CAPIRE L’UTENTE - Il test di usabilità
Quanti utenti?

29. Il prima possibile!
Si può fare un test fin dai primi momenti di vita
di un progetto
CAPIRE L’UTENTE - Il test di usabilità
Quando fare un test?

30. • Indicazione dei problemi di usabilità
riscontrati
• Suddivisione per gravità e priorità di
intervento
• Raccomandazioni per la fase di UI design
CAPIRE L’UTENTE - Il test di usabilità
Risultati

31. • con metodo Aperto
• con metodo Chiuso
WIAD 2013
“User testing nello sviluppo di
un'architettura dell'informazione: il Card
Sorting”
http://www.slideshare.net/bastianlion/user-testing-nello-sviluppo-di-
unarchitettura-dellinformazione-il-card-sorting
CAPIRE L’UTENTE - Il test di usabilità
Card Sorting

32. Altri metodi

33. • Particolare tipo di test di usabilità
• Si effettua un test su un competitor
• Findings positivi (best practices) e negativi (problemi
da evitare!)
• Ok, se non si ha ancora un sito proprio
CAPIRE L’UTENTE - Altri strumenti
Competitive analysis

34. • L’osservatore segue l’utente nella sua vita quotidiana,
senza interferire
• Obiettivo: raccogliere il maggior numero di
informazioni sulle abitudini di interazione
• È possibile capire i punti in cui gli utenti possono aver
bisogno di un’innovazione
• Molto costoso
CAPIRE L’UTENTE - Altri strumenti
Field study / Etnografia

35. • Le web analytics sono una raccolta quantitativa di
tutti i dati di navigazione
• Sono relativi all’intero bacino di utenza
• Più è ampio il traffico, più è possibile generalizzare
dei comportamenti
• Si vanno ad analizzare bounce rate, abbandoni o
percorsi specifici
CAPIRE L’UTENTE - Altri strumenti
Web Analytics

36. • Presentazione di varianti di progettazione all’intero
pubblico, in modo diretto e bilanciato
• A-B = 1 sola variabile
• Multivariate = più variabili contemporanee
• Devi comunque progettare tutte le variabili
CAPIRE L’UTENTE - Altri strumenti
A-B / Multivariate test

37. Capitolo DUE
Fare design,
considerando
l’utente

38. • Personas
• Sketch
• Scenari d’uso
• User journeys
DESIGN PER L’UTENTE
Gli strumenti principali

39. • Rappresentazioni di utenti tipo
• Necessità, obiettivi,
caratteristiche e abitudini d’uso
della tecnologia
• Derivati da serie di interviste con
utenti reali
• Proto-personas: basati su web
analytics e test di usabilità
DESIGN PER L’UTENTE
Personas

40. http://www.flickr.com/photos/jasontravis/sets/72157603258446753/
Set di:
Jason Travis
(Flickr)
DESIGN PER L’UTENTE
Personas

41. DESIGN PER L’UTENTE

42. • Illustrazioni o schemi
• Raccontano la sequenza di
interazione di un utente con la UI
• Scopo: verificare e 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 agli sviluppatori
DESIGN PER L’UTENTE
Sketch

43. • Documenti o schemi che illustrano
un’interazione verosimile da parte di un
utente tipo con l’interfaccia
• Considerazione del contesto e
dell’ambiente
• Scopo:
• verificare come l’interfaccia potrebbe
risolvere il task dell’utente,
• individuare problemi di usabilità
• individuare altre funzionalità di cui l’utente
potrebbe aver bisogno
DESIGN PER L’UTENTE
Scenari d’uso

44. • Diagrammi che illustrano tutti i
passaggi di interazione
dell’utente con l’interfaccia
• Vengono considerati anche i
momenti preliminari e
conseguenti rispetto
all’interazione (anche un
eventuale ritorno)
• Scopo: identificare i punti di
attrito, per capire dove
concentrare il design
DESIGN PER L’UTENTE
User Journeys

45. Capitolo TRE
Le fasi del design

46. LE FASI DEL DESIGN
42
Il processo di progettazione
Low-Fi
Design
Med-Fi
Design
Hi-Fi
Design
T
E
S
T
T
E
S
T
T
E
S
T
Sviluppo
Manutenzione /
Ottimizzazione
Analytics
Brief
Behavioural
Research
A-B test /
multivariate
Behavioural
Design

47. LOW-FI MEDIUM-FI HI-FI
Iterazioni preliminari Iterazioni intermedie Iterazioni avanzate
Sketch su carta
(Carta, Balsamiq…)
Wireframe interattivi
(Balsamiq, Axure…)
Visual design
(HTML + CSS, Axure, mockup)
LE FASI DEL DESIGN
UI Design

48. • Design preliminare,
ancora in fase
esplorativa
• Schizzi su carta o
programmi di
wireframing rapido
(es. Balsamiq
Mockups)
LE FASI DEL DESIGN
Low - Fi Design

49. • Design intermedio
• Programmi di
wireframing
(es. Balsamiq
Mockups, Axure)
LE FASI DEL DESIGN
Med - Fi Design

50. • Design avanzato
• Programmi di
wireframing
(es. Axure)
• HTML + CSS
LE FASI DEL DESIGN
Hi - Fi Design

51. Low-Fi
Design
Medium-Fi
Design
Hi-Fi
Design
T
E
S
T
T
E
S
T
T
E
S
T
Paper prototyping
Iterazioni 1-3 utenti
Test qualitativo
Iterazioni 3-6 utenti
Test qualitativo
Iterazioni 3-6 utenti
LE FASI DEL DESIGN
Design iterativo

52. Costa troppo?

53. • Discount usability method
• È un’analisi condotta da esperti
• Per ridurre il bias, l’analisi viene condotta in
modo parallelo fra più valutatori (circa 3)
• Viene seguito il percorso di un task
rappresentativo, poi un’analisi completa
LE FASI DEL DESIGN - Discount methods
Analisi euristica di usabilità

54. • Discount usability method
• È un’analisi condotta attraverso l’utilizzo di
linee guida condivise o create ad hoc
• Metodo rapido, ma talvolta poco flessibile
LE FASI DEL DESIGN - Discount methods
Analisi tramite linee guida

55. • http://userium.com
LE FASI DEL DESIGN - Discount methods
Analisi tramite linee guida

56. WORKSHOP

57. • Lavoro di gruppo (3 persone is ok!)
• Circa 30 minuti
• Deliverable:
Wireframe Low-Fi
• Strumenti consigliati: Carta, Balsamiq
WORKSHOP
UI design

58. Il Cliente vuole creare un servizio per prenotare sale prova per
musicisti. Non è presente alcun sito web o app.
Obiettivi del Cliente:
• permettere ai musicisti di prenotare la sala prove
• consentire agli utenti di inserire recensioni o commenti
• dare ai gestori la possibilità di aggiungere la loro sala prove
• target di riferimento: musicisti sia novizi che esperti
WORKSHOP
Brief

59. • Wireframe Low-Fi della pagina principale
• (EPIC-level) Anche il wireframe Low-Fi di una
pagina di dettaglio di una saletta e del
sistema di prenotazione
Provate a farlo per tablet!
CHALLENGE ACCEPTED?
WORKSHOP
Consegne

60. • Un file di esempio per iPad
• iPad screen resolution: 1024x768
• Misure touch-friendly per le aree attive:
- 44x44 px - indice (misure Apple)
- 56x56 px - indice (misure da altre fonti)
- 72x72 px - pollice
http://bit.ly/12NZHYK
WORKSHOP
Utility

61. Concludendo

62. Balsamiq
www.balsamiq.com
Axure
www.axure.com
Adobe Fireworks
http://www.adobe.com/it/products/fireworks.html
CONCLUDENDO
Strumenti utili

63. 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à”
Tutti i libri di
A-Book-Apart
Nielsen Alertbox
http://www.nngroup.com/
articles/
CONCLUDENDO
Letture consigliate

64. Milan UX Book Club
http://milanuxbookclub.wordpress.com
Appsterdam
http://www.meetup.com/AppsterdamMilan/
Architecta
http://www.architecta.it
AIAP
http://www.aiap.it
CONCLUDENDO
Cosa seguire / partecipare!

65. Grazie.
QA Session
?
@marcobuonvino