Post on 14-Jan-2015
description
transcript
UX design: una breve panoramica su ruoli e strumenti
UX / Interaction designer
Marco Buonvino@marcobuonvino
Ex studente di TTC
Interaction designer /Usability researcher
THE STORY SO FAR...
UX / Interaction designer
Che cos’è la UX?
User eXperience
CHE COS’È LA UX?
Contesto e ambiente
Utilizzo dell’interfaccia
Formazione della necessità
Momenti successivi
L’utente
CHE COS’È LA UX?
Interaction Design
CHE COS’È LA UX?
Interaction Design
StrategiaRicerca
CHE COS’È LA UX?
Architettura
��
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
http://www.youtube.com/watch?v=Ovj4hFxko7c
What the #$%@ is UX Design?
CHE COS’È LA UX?
Le figure professionali
UX designerProgetta 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
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
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
Usability ResearcherIndividua 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
http://www.onwardsearch.com/UX-Career-Guide/
A guide to UX careers
LE FIGURE PROFESSIONALI
Capitolo UNO
Prima di fare design bisogna conoscere l’utente
• Bisogni e necessità
• Contesto e abitudini d’uso
• Comportamento durante l’interazione
• Atteggiamento e predisposizione
CAPIRE L’UTENTE
Cosa bisogna capire?
• Test di usabilità
• Competitive analysis
• Field Study / Etnografia
• Web Analytics
• A-B test / Multivariate test
Qualitativi
Quantitativi
CAPIRE L’UTENTE
Alcuni strumenti
Il 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
CAPIRE L’UTENTE - Il test di usabilità
Utenteutilizza l’interfaccia, svolge i task assegnati
Facilitatoreillustra i task, assiste l’utente, sprona il metodo thinking aloud
Osservatoriraccolgono indicazioni sui comportamenti e sui percorsi di interazione dell’utente
CAPIRE L’UTENTE - Il test di usabilità
I ruoli
Usability test qualitativi
• Svolgimento task attraverso:
- desktop
CAPIRE L’UTENTE - Il test di usabilità
Tipologie
Usability test qualitativi
• Svolgimento task attraverso:
- desktop
- mobile devices
CAPIRE L’UTENTE - Il test di usabilità
Tipologie
Usability test qualitativi
• Svolgimento task attraverso:
- desktop
- mobile devices
- paper prototypes
CAPIRE L’UTENTE - Il test di usabilità
Tipologie
Usability test qualitativi
• Svolgimento task attraverso:
• Card sorting
- desktop
- mobile devices
- paper prototypes
CAPIRE L’UTENTE - Il test di usabilità
Tipologie
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
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?
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?
• 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
• 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
Altri metodi
• 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
• 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
• 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
• 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
Capitolo DUE
Fare design, considerando l’utente
• Personas
• Sketch
• Scenari d’uso
• User journeys
DESIGN PER L’UTENTE
Gli strumenti principali
• 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
http://www.flickr.com/photos/jasontravis/sets/72157603258446753/
Set di:Jason Travis
(Flickr)
DESIGN PER L’UTENTE
Personas
DESIGN PER L’UTENTE
• 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
• 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
• 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
Capitolo TRE
Le fasi del design
LE FASI DEL DESIGN
42
Il processo di progettazione
Low-Fi Design
Med-Fi Design
Hi-Fi Design
TEST
TEST
TEST
Sviluppo Manutenzione / Ottimizzazione
Analytics
Brief Behavioural Research
A-B test / multivariate
Behavioural Design
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
• Design preliminare, ancora in fase esplorativa
• Schizzi su carta o programmi di wireframing rapido (es. Balsamiq Mockups)
LE FASI DEL DESIGN
Low - Fi Design
• Design intermedio
• Programmi di wireframing(es. Balsamiq Mockups, Axure)
LE FASI DEL DESIGN
Med - Fi Design
• Design avanzato
• Programmi di wireframing(es. Axure)
• HTML + CSS
LE FASI DEL DESIGN
Hi - Fi Design
Low-Fi Design
Medium-Fi Design
Hi-Fi Design
TEST
TEST
TEST
Paper prototypingIterazioni 1-3 utenti
Test qualitativoIterazioni 3-6 utenti
Test qualitativoIterazioni 3-6 utenti
LE FASI DEL DESIGN
Design iterativo
Costa troppo?
• 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à
• 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
• http://userium.com
LE FASI DEL DESIGN - Discount methods
Analisi tramite linee guida
WORKSHOP
• Lavoro di gruppo (3 persone is ok!)
• Circa 30 minuti
• Deliverable:
Wireframe Low-Fi
• Strumenti consigliati: Carta, Balsamiq
WORKSHOP
UI design
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
• 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
• 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
Concludendo
Balsamiqwww.balsamiq.com
Axurewww.axure.com
Adobe Fireworkshttp://www.adobe.com/it/products/fireworks.html
CONCLUDENDO
Strumenti utili
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 Alertboxhttp://www.nngroup.com/articles/
CONCLUDENDO
Letture consigliate
Milan UX Book Clubhttp://milanuxbookclub.wordpress.com
Appsterdamhttp://www.meetup.com/AppsterdamMilan/
Architectahttp://www.architecta.it
AIAPhttp://www.aiap.it
CONCLUDENDO
Cosa seguire / partecipare!
Grazie.
QA Session
?@marcobuonvino