Your SlideShare is downloading. ×
0
“Follow the UX path”
Because we love User eXperience
Ciao!
UX designer &
Usability researcher
Laurea in TTC
UX Info-Interaction
Designer
Laurea in TTC
Marco Buonvino Luana Don...
UXthis
Andiamo a caccia di problemi di usabilità nelle
cose di tutti i giorni, che pubblichiamo su:
“UXthis!” - http://uxt...
Immaginiamo...
Arriva un lavoro, si inizia a pianificare il
processo di sviluppo.
Generalmente, si viene fuori con...
Un processo di lavoro tipo...
Brief
Definizione
requisiti di design
Wireframe Visual design Sviluppo
Mantenimento /
ottimi...
Waterfall - Quality Control
● Reparti coinvolti in sequenza
● Metodo canonico e prevedibile
● Consegna di documenti e spec...
Ma in tutto questo...
dov’è l’utente?
Waterfall - Quality Control
Brief
Definizione
requisiti di design
Wireframe Visual design Sviluppo
Mantenimento /
ottimizz...
Waterfall - Quality Control
● L’utente viene coinvolto tardi
● Design basato su assunzioni
● Le possibilità di correzione ...
Testare troppo tardi...
Che gran lavoro! Chiama
l’utente e vediamo se la
casa gli va bene! Ehm...
E se ci confrontassimo
con l’utente un po’ prima?
Waterfall - Quality Assurance
Brief Usability research
Low-fi
design
Med-fi
design
Hi-fi
design
Mantenimento /
ottimizzazi...
● Early testing
● Design più sicuro, basato su dati
● Migliore gestione di correzioni e modifiche
● Controllo proattivo
Wa...
Coinvolgere l’utente
fin da subito
...e anche prima.
User Centered Design
Non progettare per te stesso.
User Centered Design
Progetta per l’utente,
tenendolo sempre in considerazione
Come coinvolgere l’utente
nel processo di lavoro?
Behavioural Research
“Confrontarsi direttamente con l’utente”
● Test di usabilità
● Competitive analysis
● Field study / E...
Test di usabilità
● Strumento a supporto della
fase di progettazione
● Permette di raccogliere
indicazioni da utenti reali...
Svolgimento task
● desktop
● mobile devices
● paper prototypes
Card sorting
Usability test qualitativi
Behavioural Research
● Particolare test di usabilità
● Si svolge su un competitor
● Utile per:
○ Assimilare aspetti positivi
○ Evitare aspetti ...
● L’osservatore segue l’utente nella sua vita
quotidiana
● Obiettivo: raccogliere informazioni sulle abitudini
di interazi...
Behavioural Design
“Progettare tenendo al centro l’utente”
● Personas
● Scenari d’uso
● Sketch
● User Journeys
Personas
● Rappresentazioni di utenti tipo
● Necessità, obiettivi, caratteristiche e abitudini d’uso
● Interviste con uten...
Scenari d’uso
Documenti che illustrano un’
interazione verosimile da parte
di un utente tipo
Scopo:
● verificare come l’in...
Sketch
● Raccontano l’interazione di
un utente con la UI
● Scopo: condividere con il
team quale possa essere l’
interazion...
User Journeys
● Diagrammi che illustrano
tutti i passaggi di
interazione dell’utente con
l’interfaccia
● Vengono considera...
UI Design
“Disegnare l’interfaccia un passo alla volta”
● Low-fi design
● Medium-fi design
● Hi-fi design
Low-Fi design
● Design preliminare,
ancora in fase
esplorativa
● Schizzi su carta o
programmi di
wireframing rapido
(es. B...
Med-Fi design
● Design
intermedio
● Programmi di
wireframing
elettronico
(es. Balsamiq Mockups,
Axure, OmniGraffle)
UI Des...
Hi-Fi design
● Design
avanzato
● Programmi di
wireframing
elettronico
(es. Axure, HotGloo)
● HTML + CSS
UI Design
Questo era il
path ideale.
Ma non è sempre così.
Tempistiche cliente poco
gestibili
=
impossibilità o difficoltà a seguire uno o più
nodi del path
Tempistiche interne poco
realistiche
=
stime UX unfriendly e quasi imposte
perdita di qualità
Disallineamento tra risorse
=
rework e correzioni ripetute con perdita di
efficacia, tempo e focus sulla qualità.
E i cost...
Progettazione non user centered
=
mancanza test utente
“dominio delle opinioni”
Sottovalutazione usability e UX
=
wireframes su decisioni già prese lato
creativo
“dominio delle opinioni”
Story
C’era una volta un brief per un gioco
tematico, destinato a un target di bambini
piccoli (fascia 6-8) e con vincoli ...
Story - i problemi
● Tempistiche ristrette e
● cambiamenti in corso d’opera
hanno portato a
● disaccordi su funzionalità e...
Story - i problemi
Risultato:
● perdita focus sull’utente
● perdita di alcune fette di semplicità
● dominio del pensiero s...
Story - l’ultima speranza
Brief Usability research
Low-fi
design
Med-fi
design
Hi-fi
design
Mantenimento /
ottimizzazione
...
Story - il (quasi) lieto fine
● i test hanno suscitato interesse e
aumentato l’awareness di tutte le figure
coinvolte
● ha...
Qualche trucco per un
processo più UX friendly?
Discount Usability
Quando il test costa troppo, apriamo gli sconti!
● Valutazione euristica
● Analisi con linee guida
Valutazione euristica
● Discount usability method
● È un’analisi condotta da esperti
● Per aumentare l’oggettività dei ris...
Analisi con linee guida
● Discount usability method
● È un’analisi condotta attraverso l’utilizzo di
linee guida condivise...
Takeaway - five lessons
#1
Coinvolgere l’utente prima possibile
#2
Testare il lavoro quanto prima, con l’utente
reale
(non...
#4
I test servono a tutte le figure coinvolte, perché
aumentano la coscienza sui problemi di
usabilità tramite prova diret...
Ogni volta che predomina l’
opinionanza e non l’
usabilità, un utente
agonizza, mentre uno UX
muore in preda a spasmi
”
“
Esistono anche altri metodi
● Agile
Agile SCRUM workshop, 21 settembre --ci vediamo là
http://milan.impacthub.net/files/20...
Strumenti utili
● Axure - http://www.axure.com
● Balsamiq - http://balsamiq.com
● OmniGraffle - http://www.omnigroup.com/
...
What to read
● Steve Krug
○ “Don’t Make Me Think”
○ “Rocket Surgery Made Easy”
● Susan Weinshenk
○ “100 things every desig...
Your turn!
Avete già idee per coinvolgere da
subito l’utente nel processo di lavoro?
Questions?
Se avete dubbi, contattateci!
@ldonetti
@marcobuonvino
Grazie per l’attenzione
Upcoming SlideShare
Loading in...5
×

Follow the UX path @Appsterdam

404

Published on

Qual è il processo ideale di design, almeno agli occhi due UX designer? Come si può andare incontro a una progettazione più User Centered?

5 Takeaways derivanti dall'esperienza di Luana Donetti (@ldonetti) e Marco Buonvino (@marcobuonvino) all'interno di web agency e agenzie di comunicazione.

Transcript of "Follow the UX path @Appsterdam"

  1. 1. “Follow the UX path” Because we love User eXperience
  2. 2. Ciao! UX designer & Usability researcher Laurea in TTC UX Info-Interaction Designer Laurea in TTC Marco Buonvino Luana Donetti @marcobuonvino @ldonetti
  3. 3. UXthis Andiamo a caccia di problemi di usabilità nelle cose di tutti i giorni, che pubblichiamo su: “UXthis!” - http://uxthis.tumblr.com
  4. 4. Immaginiamo... Arriva un lavoro, si inizia a pianificare il processo di sviluppo. Generalmente, si viene fuori con...
  5. 5. Un processo di lavoro tipo... Brief Definizione requisiti di design Wireframe Visual design Sviluppo Mantenimento / ottimizzazione Web Analytics Usability test Implementazione
  6. 6. Waterfall - Quality Control ● Reparti coinvolti in sequenza ● Metodo canonico e prevedibile ● Consegna di documenti e specifiche ● Controllo della qualità after-the-fact
  7. 7. Ma in tutto questo... dov’è l’utente?
  8. 8. Waterfall - Quality Control Brief Definizione requisiti di design Wireframe Visual design Sviluppo Mantenimento / ottimizzazione Web Analytics Usability test ImplementazioneOnly here?
  9. 9. Waterfall - Quality Control ● L’utente viene coinvolto tardi ● Design basato su assunzioni ● Le possibilità di correzione sono limitate ● Controllo a posteriori
  10. 10. Testare troppo tardi... Che gran lavoro! Chiama l’utente e vediamo se la casa gli va bene! Ehm...
  11. 11. E se ci confrontassimo con l’utente un po’ prima?
  12. 12. Waterfall - Quality Assurance Brief Usability research Low-fi design Med-fi design Hi-fi design Mantenimento / ottimizzazione Web Analytics / A-B testing Implementazione Usability design T E S T T E S T T E S T
  13. 13. ● Early testing ● Design più sicuro, basato su dati ● Migliore gestione di correzioni e modifiche ● Controllo proattivo Waterfall - Quality Assurance
  14. 14. Coinvolgere l’utente fin da subito ...e anche prima.
  15. 15. User Centered Design Non progettare per te stesso.
  16. 16. User Centered Design Progetta per l’utente, tenendolo sempre in considerazione
  17. 17. Come coinvolgere l’utente nel processo di lavoro?
  18. 18. Behavioural Research “Confrontarsi direttamente con l’utente” ● Test di usabilità ● Competitive analysis ● Field study / Etnografia
  19. 19. Test di usabilità ● Strumento a supporto della fase di progettazione ● Permette di raccogliere indicazioni da utenti reali, slegati dal progetto ● Alta qualità di risultati per costi contenuti ● Varie metodologie, adattabili al contesto d’indagine Behavioural Research
  20. 20. Svolgimento task ● desktop ● mobile devices ● paper prototypes Card sorting Usability test qualitativi Behavioural Research
  21. 21. ● Particolare test di usabilità ● Si svolge su un competitor ● Utile per: ○ Assimilare aspetti positivi ○ Evitare aspetti negativi ● Ok se non si ha ancora un sito proprio Competitive Analysis Behavioural Research
  22. 22. ● L’osservatore segue l’utente nella sua vita quotidiana ● Obiettivo: raccogliere informazioni sulle abitudini di interazione ● È possibile capire i punti in cui gli utenti possono aver bisogno di un’innovazione ● Molto costoso Field study / Etnografia Behavioural Research
  23. 23. Behavioural Design “Progettare tenendo al centro l’utente” ● Personas ● Scenari d’uso ● Sketch ● User Journeys
  24. 24. Personas ● Rappresentazioni di utenti tipo ● Necessità, obiettivi, caratteristiche e abitudini d’uso ● Interviste con utenti reali oppure basati su web analytics e test di usabilità Behavioural Design
  25. 25. Scenari d’uso Documenti che illustrano un’ interazione verosimile da parte di un utente tipo Scopo: ● verificare come l’interfaccia potrebbe risolvere gli obiettivi dell’ utente ● individuare problemi di usabilità ● individuare altre funzionalità di cui l’utente potrebbe aver bisogno Behavioural Design
  26. 26. Sketch ● Raccontano l’interazione di un utente con la UI ● Scopo: 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 ai membri del team Behavioural Design
  27. 27. User Journeys ● Diagrammi che illustrano tutti i passaggi di interazione dell’utente con l’interfaccia ● Vengono considerati anche i momenti preliminari e conseguenti rispetto all’interazione ● Scopo: identificare i punti di attrito, per capire dove concentrare il design Behavioural Design
  28. 28. UI Design “Disegnare l’interfaccia un passo alla volta” ● Low-fi design ● Medium-fi design ● Hi-fi design
  29. 29. Low-Fi design ● Design preliminare, ancora in fase esplorativa ● Schizzi su carta o programmi di wireframing rapido (es. Balsamiq Mockups) UI Design
  30. 30. Med-Fi design ● Design intermedio ● Programmi di wireframing elettronico (es. Balsamiq Mockups, Axure, OmniGraffle) UI Design
  31. 31. Hi-Fi design ● Design avanzato ● Programmi di wireframing elettronico (es. Axure, HotGloo) ● HTML + CSS UI Design
  32. 32. Questo era il path ideale. Ma non è sempre così.
  33. 33. Tempistiche cliente poco gestibili = impossibilità o difficoltà a seguire uno o più nodi del path
  34. 34. Tempistiche interne poco realistiche = stime UX unfriendly e quasi imposte perdita di qualità
  35. 35. Disallineamento tra risorse = rework e correzioni ripetute con perdita di efficacia, tempo e focus sulla qualità. E i costi aumentano.
  36. 36. Progettazione non user centered = mancanza test utente “dominio delle opinioni”
  37. 37. Sottovalutazione usability e UX = wireframes su decisioni già prese lato creativo “dominio delle opinioni”
  38. 38. Story C’era una volta un brief per un gioco tematico, destinato a un target di bambini piccoli (fascia 6-8) e con vincoli grafici intrinsecamente impattanti sull’usabilità. Parola d’ordine: semplicità.
  39. 39. Story - i problemi ● Tempistiche ristrette e ● cambiamenti in corso d’opera hanno portato a ● disaccordi su funzionalità e su peso dei vari elementi del gioco
  40. 40. Story - i problemi Risultato: ● perdita focus sull’utente ● perdita di alcune fette di semplicità ● dominio del pensiero soggettivo: il gioco era “così semplice da essere ovvio”
  41. 41. Story - l’ultima speranza Brief Usability research Low-fi design Med-fi design Hi-fi design Mantenimento / ottimizzazione Web Analytics / A-B testing Implementazione Usability design T E S T T E S T T E S T Fine tuning: test utente con hi-fi prototypes
  42. 42. Story - il (quasi) lieto fine ● i test hanno suscitato interesse e aumentato l’awareness di tutte le figure coinvolte ● hanno validato le scelte prese e, in alcuni casi ● hanno portato alla modifica di elementi poco usabili.
  43. 43. Qualche trucco per un processo più UX friendly?
  44. 44. Discount Usability Quando il test costa troppo, apriamo gli sconti! ● Valutazione euristica ● Analisi con linee guida
  45. 45. Valutazione euristica ● Discount usability method ● È un’analisi condotta da esperti ● Per aumentare l’oggettività dei risultati, l’ analisi viene condotta in modo parallelo fra più valutatori (circa 3) ● Viene seguito il percorso di un task rappresentativo, poi un’analisi completa
  46. 46. Analisi con linee guida ● Discount usability method ● È un’analisi condotta attraverso l’utilizzo di linee guida condivise o create ad hoc ● Metodo rapido, ma talvolta poco flessibile
  47. 47. Takeaway - five lessons #1 Coinvolgere l’utente prima possibile #2 Testare il lavoro quanto prima, con l’utente reale (non serve per forza un laboratorio, basta anche qualcosa più informale) #3 Usare degli strumenti semplici per non perdere mai di vista gli obiettivi degli utenti
  48. 48. #4 I test servono a tutte le figure coinvolte, perché aumentano la coscienza sui problemi di usabilità tramite prova diretta. #5 Avere uno UX che minimizzi i problemi di usabilità è un bene. Fare i test è prezioso. Takeaway - five lessons
  49. 49. Ogni volta che predomina l’ opinionanza e non l’ usabilità, un utente agonizza, mentre uno UX muore in preda a spasmi ” “
  50. 50. Esistono anche altri metodi ● Agile Agile SCRUM workshop, 21 settembre --ci vediamo là http://milan.impacthub.net/files/2013/09/Agile_Workshop.pdf ● Lean UX ebook by: Jeff Gothelf, Josh Seiden http://www.leanuxbook.com
  51. 51. Strumenti utili ● Axure - http://www.axure.com ● Balsamiq - http://balsamiq.com ● OmniGraffle - http://www.omnigroup.com/ ● Morae - http://www.techsmith.com/morae.html ● Silverback - http://silverbackapp.com ● Skype - http://www.skype.com/it/ Ma a volte bastano anche: ● Carta e penna ● Una lavagna e dei pennarelli
  52. 52. What to read ● Steve Krug ○ “Don’t Make Me Think” ○ “Rocket Surgery Made Easy” ● Susan Weinshenk ○ “100 things every designer should know about people” ● Nielsen & Loranger ○ “Web Usability 2.0” ● Donald Norman ○ “La caffettiera del masochista” ○ “Emotional Design” ○ “Gestire la complessità” ● A Book Apart - http://www.abookapart.com ● Nielsen Alertbox - http://www.nngroup.com/articles/
  53. 53. Your turn! Avete già idee per coinvolgere da subito l’utente nel processo di lavoro?
  54. 54. Questions? Se avete dubbi, contattateci! @ldonetti @marcobuonvino Grazie per l’attenzione
  1. A particular slide catching your eye?

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

×