Follow the UX path @Appsterdam

  • 319 views
Uploaded on

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

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.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
319
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
15
Comments
0
Likes
7

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. “Follow the UX path” Because we love User eXperience
  • 2. Ciao! UX designer & Usability researcher Laurea in TTC UX Info-Interaction Designer Laurea in TTC Marco Buonvino Luana Donetti @marcobuonvino @ldonetti
  • 3. UXthis Andiamo a caccia di problemi di usabilità nelle cose di tutti i giorni, che pubblichiamo su: “UXthis!” - http://uxthis.tumblr.com
  • 4. Immaginiamo... Arriva un lavoro, si inizia a pianificare il processo di sviluppo. Generalmente, si viene fuori con...
  • 5. Un processo di lavoro tipo... Brief Definizione requisiti di design Wireframe Visual design Sviluppo Mantenimento / ottimizzazione Web Analytics Usability test Implementazione
  • 6. Waterfall - Quality Control ● Reparti coinvolti in sequenza ● Metodo canonico e prevedibile ● Consegna di documenti e specifiche ● Controllo della qualità after-the-fact
  • 7. Ma in tutto questo... dov’è l’utente?
  • 8. Waterfall - Quality Control Brief Definizione requisiti di design Wireframe Visual design Sviluppo Mantenimento / ottimizzazione Web Analytics Usability test ImplementazioneOnly here?
  • 9. Waterfall - Quality Control ● L’utente viene coinvolto tardi ● Design basato su assunzioni ● Le possibilità di correzione sono limitate ● Controllo a posteriori
  • 10. Testare troppo tardi... Che gran lavoro! Chiama l’utente e vediamo se la casa gli va bene! Ehm...
  • 11. E se ci confrontassimo con l’utente un po’ prima?
  • 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. ● Early testing ● Design più sicuro, basato su dati ● Migliore gestione di correzioni e modifiche ● Controllo proattivo Waterfall - Quality Assurance
  • 14. Coinvolgere l’utente fin da subito ...e anche prima.
  • 15. User Centered Design Non progettare per te stesso.
  • 16. User Centered Design Progetta per l’utente, tenendolo sempre in considerazione
  • 17. Come coinvolgere l’utente nel processo di lavoro?
  • 18. Behavioural Research “Confrontarsi direttamente con l’utente” ● Test di usabilità ● Competitive analysis ● Field study / Etnografia
  • 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. Svolgimento task ● desktop ● mobile devices ● paper prototypes Card sorting Usability test qualitativi Behavioural Research
  • 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. ● 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. Behavioural Design “Progettare tenendo al centro l’utente” ● Personas ● Scenari d’uso ● Sketch ● User Journeys
  • 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. 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. 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. 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. UI Design “Disegnare l’interfaccia un passo alla volta” ● Low-fi design ● Medium-fi design ● Hi-fi design
  • 29. Low-Fi design ● Design preliminare, ancora in fase esplorativa ● Schizzi su carta o programmi di wireframing rapido (es. Balsamiq Mockups) UI Design
  • 30. Med-Fi design ● Design intermedio ● Programmi di wireframing elettronico (es. Balsamiq Mockups, Axure, OmniGraffle) UI Design
  • 31. Hi-Fi design ● Design avanzato ● Programmi di wireframing elettronico (es. Axure, HotGloo) ● HTML + CSS UI Design
  • 32. Questo era il path ideale. Ma non è sempre così.
  • 33. Tempistiche cliente poco gestibili = impossibilità o difficoltà a seguire uno o più nodi del path
  • 34. Tempistiche interne poco realistiche = stime UX unfriendly e quasi imposte perdita di qualità
  • 35. Disallineamento tra risorse = rework e correzioni ripetute con perdita di efficacia, tempo e focus sulla qualità. E i costi aumentano.
  • 36. Progettazione non user centered = mancanza test utente “dominio delle opinioni”
  • 37. Sottovalutazione usability e UX = wireframes su decisioni già prese lato creativo “dominio delle opinioni”
  • 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. 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. 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. 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. 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. Qualche trucco per un processo più UX friendly?
  • 44. Discount Usability Quando il test costa troppo, apriamo gli sconti! ● Valutazione euristica ● Analisi con linee guida
  • 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. 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. 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. #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. Ogni volta che predomina l’ opinionanza e non l’ usabilità, un utente agonizza, mentre uno UX muore in preda a spasmi ” “
  • 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. 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. 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. Your turn! Avete già idee per coinvolgere da subito l’utente nel processo di lavoro?
  • 54. Questions? Se avete dubbi, contattateci! @ldonetti @marcobuonvino Grazie per l’attenzione