UX TTC

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

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

Che cos’è la UX?

User eXperience

Contesto e ambiente
Utilizzo dell’interfaccia
Formazione
della necessità Momenti successivi
The user

User Experience
Interaction Design
Strategia
Usability research

http://www.youtube.com/watch?v=Ovj4hFxko7c
What the #$%@ is
UX Design?

Le ﬁgure professionali

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

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

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

Usability Researcher
Usability Individua i problemi di usabilità e
ne identiﬁca le motivazioni
Nel suo lavoro:
• collabora strettamente con il designer
• chiede la partecipazione di utenti ﬁnali
• va d’accordo con esperti di web analytics
I suoi strumenti:
• Test di usabilità,Valutazione euristica, Linee guida

http://www.onwardsearch.com/
UX-Career-Guide/
A guide to UX
careers

Prima di fare design,
bisogna capire l’utente
- Capitolo uno -

Capire l’utente
• Bisogni e necessità
• Contesto e abitudini d’uso
• Comportamento durante l’interazione
• Atteggiamento e predisposizione

Alcuni strumenti
• Test di usabilità
• Competitive analysis
• Field Study / Etnograﬁa
• Web Analytics
• A-B test / Multivariate test
Qualitativi
Quantitativi

Il test di usabilità

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

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

Test di usabilità
Usability test qualitativi
• Svolgimento task attraverso:
- desktop

Test di usabilità
- desktop
- mobile devices

Test di usabilità
- desktop
- mobile devices
- paper prototypes

Test di usabilità
• Card sorting
- desktop
- mobile devices
- paper prototypes

Test di usabilità
Usability test quantitativi
• Eye Tracking
• Card sorting
- desktop
- mobile devices
- paper prototypes

Usability Lab
Osservatori
Utente e facilitatore

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

Quando fare un test
Il prima possibile!
Si può fare un test ﬁn dai primi momenti di
vita di un progetto

Risultati
• Indicazione dei problemi di usabilità
riscontrati
• Suddivisione per gravità e priorità di
intervento
• Raccomandazioni per la fase di UI design

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

Altri metodi

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

Field Study / Etnograﬁa
• 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

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 trafﬁco, più è possibile
generalizzare dei comportamenti
• Si vanno ad analizzare bounce rate,
abbandoni o percorsi speciﬁci

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

Fare design,
considerando l’utente
- Capitolo due -

Alcuni strumenti
• Personas
• Sketch
• Scenari d’uso
• User journeys

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à

Personas
http://www.ﬂickr.com/photos/jasontravis/sets/72157603258446753/
Set di:
Jason Travis
(Flickr)

Personas - un esempio

Sketch
• Illustrazioni o schemi
• Raccontano la sequenza di
interazione di un utente con la UI
• Scopo: veriﬁcare 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

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:
• veriﬁcare come l’interfaccia potrebbe
risolvere il task dell’utente,
• individuare problemi di usabilità
• individuare altre funzionalità di cui l’utente
potrebbe aver bisogno

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: identiﬁcare i punti di
attrito, per capire dove
concentrare il design

Le fasi del design
- Capitolo tre -

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)

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

Medium-Fi design
• Design intermedio
• Programmi di
wireframing
elettronico
(es. Balsamiq
Mockups,Axure)

Hi-Fi design
• Design avanzato
• Programmi di
wireframing
elettronico
(es.Axure)
• HTML + CSS

Work ﬂow
- Capitolo quattro -

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

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
Test qualitativo

...costa troppo?

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

Guidelines Inspection
• Discount usability method
• È un’analisi condotta attraverso l’utilizzo di
linee guida condivise o create ad hoc
• Metodo rapido, ma talvolta poco ﬂessibile

Guidelines Inspection
• http://userium.com

Workshop!

UI design workshop
• Lavoro di gruppo (3 persone is ok!)
• Circa 30 minuti
• Deliverable:
Wireframe Low-Fi
• Recommended tool: Balsamiq

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

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

Utility
• Un ﬁle 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

Concludendo...

Strumenti utili
Balsamiq
www.balsamiq.com
Axure
www.axure.com
Adobe Fireworks
http://www.adobe.com/it/products/ﬁreworks.html

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/

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

Domande?

Grazie mille!
about.me/mrgoodwine
@marcobuonvino

UX TTC

More Related Content

What's hot

Similar to UX TTC

UX TTC