0
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
Strategia
Ricerca
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 ...
http://www.youtube.com/watch?v=Ovj4hFxko7c
What the #$%@
is UX Design?
CHE COS’È LA UX?
Le figure
professionali
UX designer
Progetta l’esperienza d’uso di un processo o di un obiettivo
Cerca di capire:
• chi è l’utente, le sue caratte...
Interaction designer
Lavora per realizzare una User Interface:
• che risponda alle necessità dell’utente
• che sia usabile...
Cerca di rendere i contenuti:
• facilmente individuabili e raggiungibili
• ordinati logicamente in strutture adatta ai req...
Usability Researcher
Individua i problemi di usabilità e ne identifica le motivazioni
LE FIGURE PROFESSIONALI
Nel suo lavor...
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...
• Test di usabilità
• Competitive analysis
• Field Study / Etnografia
• Web Analytics
• A-B test / Multivariate test
Qualit...
Il test di usabilità
Strumento a supporto della
fase di progettazione di un
sito web
Permette di raccogliere indicazioni
da utenti reali, slega...
Utente
utilizza l’interfaccia, svolge i task assegnati
Facilitatore
illustra i task, assiste l’utente, sprona il metodo
th...
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...
Usability test qualitativi
• Svolgimento task attraverso:
- desktop
- mobile devices
- paper prototypes
CAPIRE L’UTENTE - ...
Usability test qualitativi
• Svolgimento task attraverso:
• Card sorting
- desktop
- mobile devices
- paper prototypes
CAP...
Usability test qualitativi
• Svolgimento task attraverso:
Usability test quantitativi
• Eye Tracking
• Card sorting
- desk...
Card sorting
x ~15
‣ Nielsen,Why You Only Need to Test with 5 Users,Alertbox,2000
‣ Nielsen,Card Sorting: How Many Users t...
Il prima possibile!
Si può fare un test fin dai primi momenti di vita
di un progetto
CAPIRE L’UTENTE - Il test di usabilità...
• Indicazione dei problemi di usabilità
riscontrati
• Suddivisione per gravità e priorità di
intervento
• Raccomandazioni ...
• con metodo Aperto
• con metodo Chiuso
WIAD 2013
“User testing nello sviluppo di
un'architettura dell'informazione: il Ca...
Altri metodi
• Particolare tipo di test di usabilità
• Si effettua un test su un competitor
• Findings positivi (best practices) e negat...
• L’osservatore segue l’utente nella sua vita quotidiana,
senza interferire
• Obiettivo: raccogliere il maggior numero di
...
• Le web analytics sono una raccolta quantitativa di
tutti i dati di navigazione
• Sono relativi all’intero bacino di uten...
• Presentazione di varianti di progettazione all’intero
pubblico, in modo diretto e bilanciato
• A-B = 1 sola variabile
• ...
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...
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 c...
• Documenti o schemi che illustrano
un’interazione verosimile da parte di un
utente tipo con l’interfaccia
• Considerazion...
• Diagrammi che illustrano tutti i
passaggi di interazione
dell’utente con l’interfaccia
• Vengono considerati anche i
mom...
Capitolo TRE
Le fasi del design
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
Svilup...
LOW-FI MEDIUM-FI HI-FI
Iterazioni preliminari Iterazioni intermedie Iterazioni avanzate
Sketch su carta
(Carta, Balsamiq…)...
• Design preliminare,
ancora in fase
esplorativa
• Schizzi su carta o
programmi di
wireframing rapido
(es. Balsamiq
Mockup...
• 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
T
E
S
T
T
E
S
T
T
E
S
T
Paper prototyping
Iterazioni 1-3 utenti
Test qualitati...
Costa troppo?
• Discount usability method
• È un’analisi condotta da esperti
• Per ridurre il bias, l’analisi viene condotta in
modo par...
• Discount usability method
• È un’analisi condotta attraverso l’utilizzo di
linee guida condivise o create ad hoc
• Metod...
• 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, Ba...
Il Cliente vuole creare un servizio per prenotare sale prova per
musicisti. Non è presente alcun sito web o app.
Obiettivi...
• Wireframe Low-Fi della pagina principale
• (EPIC-level) Anche il wireframe Low-Fi di una
pagina di dettaglio di una sale...
• Un file di esempio per iPad
• iPad screen resolution: 1024x768
• Misure touch-friendly per le aree attive:
- 44x44 px - i...
Concludendo
Balsamiq
www.balsamiq.com
Axure
www.axure.com
Adobe Fireworks
http://www.adobe.com/it/products/fireworks.html
CONCLUDENDO
S...
Steve Krug,
“Don’t Make Me Think”
“Rocket Surgery Made Easy”
Nielsen & Loranger
“Web Usability 2.0”
Donald Norman,
“La caff...
Milan UX Book Club
http://milanuxbookclub.wordpress.com
Appsterdam
http://www.meetup.com/AppsterdamMilan/
Architecta
http:...
Grazie.
QA Session
?
@marcobuonvino
Upcoming SlideShare
Loading in...5
×

Lezione Comunicazione Visiva e Design delle Interfacce - Unimib - 2014 edition

1,091

Published on

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

Published in: Technology
0 Comments
11 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,091
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
54
Comments
0
Likes
11
Embeds 0
No embeds

No notes for slide

Transcript of "Lezione Comunicazione Visiva e Design delle Interfacce - Unimib - 2014 edition"

  1. 1. UX design: una breve panoramica su ruoli e strumenti
  2. 2. UX / Interaction designer Marco Buonvino @marcobuonvino
  3. 3. Ex studente di TTC Interaction designer / Usability researcher THE STORY SO FAR... UX / Interaction designer
  4. 4. Che cos’è la UX?
  5. 5. User eXperience CHE COS’È LA UX?
  6. 6. Contesto e ambiente Utilizzo dell’interfaccia Formazione della necessità Momenti successivi L’utente CHE COS’È LA UX?
  7. 7. Interaction Design CHE COS’È LA UX?
  8. 8. Interaction Design Strategia Ricerca CHE COS’È LA UX? Architettura
  9. 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. 10. http://www.youtube.com/watch?v=Ovj4hFxko7c What the #$%@ is UX Design? CHE COS’È LA UX?
  11. 11. Le figure professionali
  12. 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. 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. 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. 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. 16. http://www.onwardsearch.com/ UX-Career-Guide/ A guide to UX careers LE FIGURE PROFESSIONALI
  17. 17. Capitolo UNO Prima di fare design bisogna conoscere l’utente
  18. 18. • Bisogni e necessità • Contesto e abitudini d’uso • Comportamento durante l’interazione • Atteggiamento e predisposizione CAPIRE L’UTENTE Cosa bisogna capire?
  19. 19. • Test di usabilità • Competitive analysis • Field Study / Etnografia • Web Analytics • A-B test / Multivariate test Qualitativi Quantitativi CAPIRE L’UTENTE Alcuni strumenti
  20. 20. Il test di usabilità
  21. 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. 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. 23. Usability test qualitativi • Svolgimento task attraverso: - desktop CAPIRE L’UTENTE - Il test di usabilità Tipologie
  24. 24. Usability test qualitativi • Svolgimento task attraverso: - desktop - mobile devices CAPIRE L’UTENTE - Il test di usabilità Tipologie
  25. 25. Usability test qualitativi • Svolgimento task attraverso: - desktop - mobile devices - paper prototypes CAPIRE L’UTENTE - Il test di usabilità Tipologie
  26. 26. Usability test qualitativi • Svolgimento task attraverso: • Card sorting - desktop - mobile devices - paper prototypes CAPIRE L’UTENTE - Il test di usabilità Tipologie
  27. 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. 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. 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. 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. 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. 32. Altri metodi
  33. 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. 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. 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. 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. 37. Capitolo DUE Fare design, considerando l’utente
  38. 38. • Personas • Sketch • Scenari d’uso • User journeys DESIGN PER L’UTENTE Gli strumenti principali
  39. 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. 40. http://www.flickr.com/photos/jasontravis/sets/72157603258446753/ Set di: Jason Travis (Flickr) DESIGN PER L’UTENTE Personas
  41. 41. DESIGN PER L’UTENTE
  42. 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. 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. 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. 45. Capitolo TRE Le fasi del design
  46. 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. 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. 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. 49. • Design intermedio • Programmi di wireframing (es. Balsamiq Mockups, Axure) LE FASI DEL DESIGN Med - Fi Design
  50. 50. • Design avanzato • Programmi di wireframing (es. Axure) • HTML + CSS LE FASI DEL DESIGN Hi - Fi Design
  51. 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. 52. Costa troppo?
  53. 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. 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. 55. • http://userium.com LE FASI DEL DESIGN - Discount methods Analisi tramite linee guida
  56. 56. WORKSHOP
  57. 57. • Lavoro di gruppo (3 persone is ok!) • Circa 30 minuti • Deliverable: Wireframe Low-Fi • Strumenti consigliati: Carta, Balsamiq WORKSHOP UI design
  58. 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. 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. 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. 61. Concludendo
  62. 62. Balsamiq www.balsamiq.com Axure www.axure.com Adobe Fireworks http://www.adobe.com/it/products/fireworks.html CONCLUDENDO Strumenti utili
  63. 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. 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. 65. Grazie. QA Session ? @marcobuonvino
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×