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.
Rossana Bazzano, Service designer e Roberta Fitti, Digital Project Manager @M...
UX TTC
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
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
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
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
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
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
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
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
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
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
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
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
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