UX design - Breve panoramica su strumenti e professionalità Presentazione spiegata in aula, all'Università degli Studi di Milano-Bicocca - Unimib. Strumenti, Metodi e Workflow per raggiungere lo User Centered Design nella creazione di esperienze digitali.

1. UX design: una breve
panoramica su ruoli e
strumenti
By: Marco Buonvino
about.me/mrgoodwine
@marcobuonvino
mercoledì 29 maggio 13

2. Ciao!
Ex studente
di TTC
Interaction designer /
Usability researcher
• Web Agency di Milano
• Sviluppo di siti web desktop e mobile
• Circa 30 persone
• Creative, Development, Usability, Marketing
mercoledì 29 maggio 13

3. Che cos’è la UX?
mercoledì 29 maggio 13

4. User eXperience
mercoledì 29 maggio 13

5. Contesto e ambiente
Utilizzo dell’interfaccia
Formazione
della necessità Momenti successivi
The user
mercoledì 29 maggio 13

6. User Experience
Interaction Design
Strategia
Usability research
mercoledì 29 maggio 13

7. http://www.youtube.com/watch?v=Ovj4hFxko7c
What the #$%@ is
UX Design?
mercoledì 29 maggio 13

8. Le figure professionali
mercoledì 29 maggio 13

9. UX designer
UX Progetta e migliora l’esperienza d’uso
di un processo o un task
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
mercoledì 29 maggio 13

10. Interaction Design
UI Si occupa di progettare l’interazione
uomo-interfaccia
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
mercoledì 29 maggio 13

11. Information Architect
Si occupa della gestione e
dell’organizzazione dei contenuti
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
IA
mercoledì 29 maggio 13

12. Usability Researcher
Usability Individua i problemi di usabilità e
ne identifica le motivazioni
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
mercoledì 29 maggio 13

13. http://www.onwardsearch.com/
UX-Career-Guide/
A guide to UX
careers
mercoledì 29 maggio 13

14. Prima di fare design,
bisogna capire l’utente
- Capitolo uno -
mercoledì 29 maggio 13

15. Capire l’utente
• Bisogni e necessità
• Contesto e abitudini d’uso
• Comportamento durante l’interazione
• Atteggiamento e predisposizione
mercoledì 29 maggio 13

16. Alcuni strumenti
• Test di usabilità
• Competitive analysis
• Field Study / Etnografia
• Web Analytics
• A-B test / Multivariate test
Qualitativi
Quantitativi
mercoledì 29 maggio 13

17. Il test di usabilità
mercoledì 29 maggio 13

18. Test di usabilità
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
mercoledì 29 maggio 13

19. Ruoli in un test
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
mercoledì 29 maggio 13

20. Test di usabilità
Usability test qualitativi
• Svolgimento task attraverso:
- desktop
mercoledì 29 maggio 13

21. Test di usabilità
Usability test qualitativi
• Svolgimento task attraverso:
- desktop
- mobile devices
mercoledì 29 maggio 13

22. Test di usabilità
Usability test qualitativi
• Svolgimento task attraverso:
- desktop
- mobile devices
- paper prototypes
mercoledì 29 maggio 13

23. Test di usabilità
Usability test qualitativi
• Svolgimento task attraverso:
• Card sorting
- desktop
- mobile devices
- paper prototypes
mercoledì 29 maggio 13

24. Test di usabilità
Usability test qualitativi
• Svolgimento task attraverso:
Usability test quantitativi
• Eye Tracking
• Card sorting
- desktop
- mobile devices
- paper prototypes
mercoledì 29 maggio 13

25. Usability Lab
Osservatori
Utente e facilitatore
mercoledì 29 maggio 13

26. Quanti utenti?
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
mercoledì 29 maggio 13

27. Quando fare un test
Il prima possibile!
Si può fare un test fin dai primi momenti di
vita di un progetto
mercoledì 29 maggio 13

28. Risultati
• Indicazione dei problemi di usabilità
riscontrati
• Suddivisione per gravità e priorità di
intervento
• Raccomandazioni per la fase di UI design
mercoledì 29 maggio 13

29. Card Sorting
Approfondimento sul tipo di user test:
• 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
mercoledì 29 maggio 13

30. Altri metodi
mercoledì 29 maggio 13

31. Competitive analysis
• 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
mercoledì 29 maggio 13

32. Field Study / Etnografia
• 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
mercoledì 29 maggio 13

33. Web Analytics
• 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
mercoledì 29 maggio 13

34. A-B / Multivariate test
• 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
mercoledì 29 maggio 13

35. Fare design,
considerando l’utente
- Capitolo due -
mercoledì 29 maggio 13

36. Alcuni strumenti
• Personas
• Sketch
• Scenari d’uso
• User journeys
mercoledì 29 maggio 13

37. Personas
• 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à
mercoledì 29 maggio 13

38. Personas
http://www.flickr.com/photos/jasontravis/sets/72157603258446753/
Set di:
Jason Travis
(Flickr)
mercoledì 29 maggio 13

39. Personas - un esempio
mercoledì 29 maggio 13

40. Sketch
• 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
mercoledì 29 maggio 13

41. Scenari d’uso
• 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
mercoledì 29 maggio 13

42. User Journey
• 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
mercoledì 29 maggio 13

43. Le fasi del design
- Capitolo tre -
mercoledì 29 maggio 13

44. 3 fasi del design
LOW-FI MEDIUM-FI HI-FI
Iterazioni preliminari Iterazioni intermedie Iterazioni avanzate
Wireframes su carta
(disegni, Balsamiq…)
Wireframe elettronici
(Balsamiq,Axure…)
Screen design
Interazioni realistiche
(HTML + CSS,Axure, mockup)
mercoledì 29 maggio 13

45. Low-Fi design
• Design preliminare,
ancora in fase
esplorativa
• Schizzi su carta o
programmi di
wireframing rapido
(es. Balsamiq Mockups)
mercoledì 29 maggio 13

46. Medium-Fi design
• Design intermedio
• Programmi di
wireframing
elettronico
(es. Balsamiq
Mockups,Axure)
mercoledì 29 maggio 13

47. Hi-Fi design
• Design avanzato
• Programmi di
wireframing
elettronico
(es.Axure)
• HTML + CSS
mercoledì 29 maggio 13

48. Work flow
- Capitolo quattro -
mercoledì 29 maggio 13

49. Quality Assurance - Waterfall
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
Behavioural
Design
A-B test /
multivariate
mercoledì 29 maggio 13

50. Iterative design
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
mercoledì 29 maggio 13

51. ...costa troppo?
mercoledì 29 maggio 13

52. Heuristic Evaluation
• 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
mercoledì 29 maggio 13

53. Guidelines Inspection
• Discount usability method
• È un’analisi condotta attraverso l’utilizzo di
linee guida condivise o create ad hoc
• Metodo rapido, ma talvolta poco flessibile
mercoledì 29 maggio 13

54. Guidelines Inspection
• http://userium.com
mercoledì 29 maggio 13

55. Workshop!
mercoledì 29 maggio 13

56. UI design workshop
• Lavoro di gruppo (3 persone is ok!)
• Circa 30 minuti
• Deliverable:
Wireframe Low-Fi
• Recommended tool: Balsamiq
mercoledì 29 maggio 13

57. Brief
Il Cliente possiede la gioielleria “Tempi e Gioie”.
Non è presente alcun sito web.
Obiettivi del Cliente:
• farsi conoscere con qualche info sulla storia del negozio
• fornire l’indirizzo del negozio
• vendere online orologi di marche prestigiose (es. Rolex)
• target di riferimento: fascia medio-alta
mercoledì 29 maggio 13

58. Deliverables
• Wireframe Low-Fi della homepage
• (EPIC-level) Anche il wireframe Low-Fi di una
pagina prodotto
Provate a farli per tablet!
CHALLENGE ACCEPTED?
mercoledì 29 maggio 13

59. Utility
• Un file di esempio per iPad
• Screen resolution: 1024x768
• Misure touch-friendly per le aree attive
• 44x44 px - indice (misure Apple)
• 56x56 px - indice (misure altre fonti)
• 72x72 px - pollice
http://bit.ly/12NZHYK
mercoledì 29 maggio 13

60. Concludendo...
mercoledì 29 maggio 13

61. Strumenti utili
Balsamiq
www.balsamiq.com
Axure
www.axure.com
Adobe Fireworks
http://www.adobe.com/it/products/fireworks.html
mercoledì 29 maggio 13

62. Letture consigliate
Steve Krug,
“Don’t Make MeThink”
“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/
mercoledì 29 maggio 13

63. Cosa si muove in Italia
Milan UX Book Club
http://milanuxbookclub.wordpress.com
Appsterdam
http://www.meetup.com/AppsterdamMilan/
Architecta
http://www.architecta.it
AIAP
http://www.aiap.it
mercoledì 29 maggio 13

64. Domande?
mercoledì 29 maggio 13

65. Grazie mille!
about.me/mrgoodwine
@marcobuonvino
mercoledì 29 maggio 13