Follow the UX path @Appsterdam

489
-1

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.

0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
489
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
24
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide

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

×