Follow the UX path @Appsterdam
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Follow the UX path @Appsterdam

  • 532 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
532
On Slideshare
530
From Embeds
2
Number of Embeds
2

Actions

Shares
Downloads
15
Comments
0
Likes
7

Embeds 2

http://miaricerca.wikispaces.com 1
http://www.lbollini.it 1

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