UX TTC

1,632 views

Published on

UX design - Breve panoramica su strumenti e professionalità
Presentazione spiegata in aula, all'Università degli Studi di Milano-Bicocca - Unimib.
Strumenti, Metodi e Workflow per raggiungere lo User Centered Design nella creazione di esperienze digitali.

Published in: Design
0 Comments
26 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,632
On SlideShare
0
From Embeds
0
Number of Embeds
61
Actions
Shares
0
Downloads
0
Comments
0
Likes
26
Embeds 0
No embeds

No notes for slide

UX TTC

  1. 1. UX design: una brevepanoramica su ruoli estrumentiBy: Marco Buonvinoabout.me/mrgoodwine@marcobuonvinomercoledì 29 maggio 13
  2. 2. Ciao!Ex studentedi TTCInteraction designer /Usability researcher• Web Agency di Milano• Sviluppo di siti web desktop e mobile• Circa 30 persone• Creative, Development, Usability, Marketingmercoledì 29 maggio 13
  3. 3. Che cos’è la UX?mercoledì 29 maggio 13
  4. 4. User eXperiencemercoledì 29 maggio 13
  5. 5. Contesto e ambienteUtilizzo dell’interfacciaFormazionedella necessità Momenti successiviThe usermercoledì 29 maggio 13
  6. 6. User ExperienceInteraction DesignStrategiaUsability researchmercoledì 29 maggio 13
  7. 7. http://www.youtube.com/watch?v=Ovj4hFxko7cWhat the #$%@ isUX Design?mercoledì 29 maggio 13
  8. 8. Le figure professionalimercoledì 29 maggio 13
  9. 9. UX designerUX Progetta e migliora l’esperienza d’usodi un processo o un taskCerca di capire:• chi è l’utente, le sue caratteristiche e le sue necessità• come sfruttare il contesto d’interazioneLavora con:• strumenti di behavioural design, come Personas, Scenari d’usoe User Journeysmercoledì 29 maggio 13
  10. 10. Interaction DesignUI Si occupa di progettare l’interazioneuomo-interfacciaLavora per realizzare una User Interface:• che risponda alle necessità dell’utente• che sia usabile e accessibileLavora con:• Sketch,Wireframe, Flussi di interazione e Prototipimercoledì 29 maggio 13
  11. 11. Information ArchitectSi occupa della gestione edell’organizzazione dei contenutiCerca di rendere i contenuti:• facilmente individuabili e raggiungibili• ordinati logicamente in strutture adatta ai requisitiAdora lavorare con:• Schemi e diagrammi di architettura informativaIAmercoledì 29 maggio 13
  12. 12. Usability ResearcherUsability Individua i problemi di usabilità ene identifica le motivazioniNel suo lavoro:• collabora strettamente con il designer• chiede la partecipazione di utenti finali• va d’accordo con esperti di web analyticsI suoi strumenti:• Test di usabilità,Valutazione euristica, Linee guidamercoledì 29 maggio 13
  13. 13. http://www.onwardsearch.com/UX-Career-Guide/A guide to UXcareersmercoledì 29 maggio 13
  14. 14. Prima di fare design,bisogna capire l’utente- Capitolo uno -mercoledì 29 maggio 13
  15. 15. Capire l’utente• Bisogni e necessità• Contesto e abitudini d’uso• Comportamento durante l’interazione• Atteggiamento e predisposizionemercoledì 29 maggio 13
  16. 16. Alcuni strumenti• Test di usabilità• Competitive analysis• Field Study / Etnografia• Web Analytics• A-B test / Multivariate testQualitativiQuantitativimercoledì 29 maggio 13
  17. 17. Il test di usabilitàmercoledì 29 maggio 13
  18. 18. Test di usabilitàStrumento a supporto della fase diprogettazione di un sito webPermette di raccogliere indicazionida utenti reali, slegati dal progettoAlta qualità di risultati per costicontenutiVarie metodologie, adattabili alcontesto d’indaginemercoledì 29 maggio 13
  19. 19. Ruoli in un testUtente:utilizza l’interfaccia, svolge i task assegnatiFacilitatore:illustra i task, assiste l’utente, sprona il metodothinking aloudOsservatori:raccolgono indicazioni sui comportamenti e suipercorsi di interazione dell’utentemercoledì 29 maggio 13
  20. 20. Test di usabilitàUsability test qualitativi• Svolgimento task attraverso:- desktopmercoledì 29 maggio 13
  21. 21. Test di usabilitàUsability test qualitativi• Svolgimento task attraverso:- desktop- mobile devicesmercoledì 29 maggio 13
  22. 22. Test di usabilitàUsability test qualitativi• Svolgimento task attraverso:- desktop- mobile devices- paper prototypesmercoledì 29 maggio 13
  23. 23. Test di usabilitàUsability test qualitativi• Svolgimento task attraverso:• Card sorting- desktop- mobile devices- paper prototypesmercoledì 29 maggio 13
  24. 24. Test di usabilitàUsability test qualitativi• Svolgimento task attraverso:Usability test quantitativi• Eye Tracking• Card sorting- desktop- mobile devices- paper prototypesmercoledì 29 maggio 13
  25. 25. Usability LabOsservatoriUtente e facilitatoremercoledì 29 maggio 13
  26. 26. Quanti utenti?Card sortingx ~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?,2004Qualitative desktopQualitative tablet /smartphonePaper prototypingx ~5Eyetrackingx ~30mercoledì 29 maggio 13
  27. 27. Quando fare un testIl prima possibile!Si può fare un test fin dai primi momenti divita di un progettomercoledì 29 maggio 13
  28. 28. Risultati• Indicazione dei problemi di usabilitàriscontrati• Suddivisione per gravità e priorità diintervento• Raccomandazioni per la fase di UI designmercoledì 29 maggio 13
  29. 29. Card SortingApprofondimento sul tipo di user test:• con metodo Aperto• con metodo ChiusoWIAD 2013“User testing nello sviluppo diunarchitettura dellinformazione: il Card Sorting”http://www.slideshare.net/bastianlion/user-testing-nello-sviluppo-di-unarchitettura-dellinformazione-il-card-sortingmercoledì 29 maggio 13
  30. 30. Altri metodimercoledì 29 maggio 13
  31. 31. Competitive analysis• 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 propriomercoledì 29 maggio 13
  32. 32. Field Study / Etnografia• L’osservatore segue l’utente nella sua vitaquotidiana, senza interferire• Obiettivo: raccogliere il maggior numero diinformazioni sulle abitudini di interazione• È possibile capire i punti in cui gli utentipossono aver bisogno di un’innovazione• Molto costosomercoledì 29 maggio 13
  33. 33. Web Analytics• Le web analytics sono una raccoltaquantitativa di tutti i dati di navigazione• Sono relativi all’intero bacino di utenza• Più è ampio il traffico, più è possibilegeneralizzare dei comportamenti• Si vanno ad analizzare bounce rate,abbandoni o percorsi specificimercoledì 29 maggio 13
  34. 34. A-B / Multivariate test• Presentazione di varianti di progettazioneall’intero pubblico, in modo diretto e bilanciato• A-B = 1 sola variabile• Multivariate = più variabili contemporanee• Devi comunque progettare tutte le variabilimercoledì 29 maggio 13
  35. 35. Fare design,considerando l’utente- Capitolo due -mercoledì 29 maggio 13
  36. 36. Alcuni strumenti• Personas• Sketch• Scenari d’uso• User journeysmercoledì 29 maggio 13
  37. 37. Personas• Rappresentazioni di utenti tipo• Necessità, obiettivi,caratteristiche e abitudinid’uso della tecnologia• Derivati da serie di intervistecon utenti reali• Proto-personas: basati su webanalytics e test di usabilitàmercoledì 29 maggio 13
  38. 38. Personashttp://www.flickr.com/photos/jasontravis/sets/72157603258446753/Set di:Jason Travis(Flickr)mercoledì 29 maggio 13
  39. 39. Personas - un esempiomercoledì 29 maggio 13
  40. 40. Sketch• Illustrazioni o schemi• Raccontano la sequenza diinterazione di un utente con la UI• Scopo: verificare e condividerecon il team quale possa esserel’interazione e i passaggi su cuifocalizzare il design• Molto utile per iniziare araccontare l’idea agli sviluppatorimercoledì 29 maggio 13
  41. 41. Scenari d’uso• Documenti o schemi che illustranoun’interazione verosimile da parte diun utente tipo con l’interfaccia• Considerazione del contesto edell’ambiente• Scopo:• verificare come l’interfaccia potrebberisolvere il task dell’utente,• individuare problemi di usabilità• individuare altre funzionalità di cui l’utentepotrebbe aver bisognomercoledì 29 maggio 13
  42. 42. User Journey• Diagrammi che illustranotutti i passaggi di interazionedell’utente con l’interfaccia• Vengono considerati anche imomenti preliminari econseguenti rispettoall’interazione (anche uneventuale ritorno)• Scopo: identificare i punti diattrito, per capire doveconcentrare il designmercoledì 29 maggio 13
  43. 43. Le fasi del design- Capitolo tre -mercoledì 29 maggio 13
  44. 44. 3 fasi del designLOW-FI MEDIUM-FI HI-FIIterazioni preliminari Iterazioni intermedie Iterazioni avanzateWireframes su carta(disegni, Balsamiq…)Wireframe elettronici(Balsamiq,Axure…)Screen designInterazioni realistiche(HTML + CSS,Axure, mockup)mercoledì 29 maggio 13
  45. 45. Low-Fi design• Design preliminare,ancora in faseesplorativa• Schizzi su carta oprogrammi diwireframing rapido(es. Balsamiq Mockups)mercoledì 29 maggio 13
  46. 46. Medium-Fi design• Design intermedio• Programmi diwireframingelettronico(es. BalsamiqMockups,Axure)mercoledì 29 maggio 13
  47. 47. Hi-Fi design• Design avanzato• Programmi diwireframingelettronico(es.Axure)• HTML + CSSmercoledì 29 maggio 13
  48. 48. Work flow- Capitolo quattro -mercoledì 29 maggio 13
  49. 49. Quality Assurance - WaterfallLow-FiDesignMed-FiDesignHi-FiDesignTESTTESTTESTSviluppoManutenzione /OttimizzazioneAnalyticsBriefBehaviouralResearchBehaviouralDesignA-B test /multivariatemercoledì 29 maggio 13
  50. 50. Iterative designLow-FiDesignMedium-FiDesignHi-FiDesignTESTTESTTESTPaper prototypingIterazioni 1-3 utentiTest qualitativoIterazioni 3-6 utentiTest qualitativoIterazioni 3-6 utentimercoledì 29 maggio 13
  51. 51. ...costa troppo?mercoledì 29 maggio 13
  52. 52. Heuristic Evaluation• Discount usability method• È un’analisi condotta da esperti• Per ridurre il bias, l’analisi viene condotta inmodo parallelo fra più valutatori (circa 3)• Viene seguito il percorso di un taskrappresentativo, poi un’analisi completamercoledì 29 maggio 13
  53. 53. Guidelines Inspection• Discount usability method• È un’analisi condotta attraverso l’utilizzo dilinee guida condivise o create ad hoc• Metodo rapido, ma talvolta poco flessibilemercoledì 29 maggio 13
  54. 54. Guidelines Inspection• http://userium.commercoledì 29 maggio 13
  55. 55. Workshop!mercoledì 29 maggio 13
  56. 56. UI design workshop• Lavoro di gruppo (3 persone is ok!)• Circa 30 minuti• Deliverable:Wireframe Low-Fi• Recommended tool: Balsamiqmercoledì 29 maggio 13
  57. 57. BriefIl Cliente possiede la gioielleria “Tempi e Gioie”.Non è presente alcun sito web.Obiettivi del Cliente:• farsi conoscere con qualche info sulla storia del negozio• fornire l’indirizzo del negozio• vendere online orologi di marche prestigiose (es. Rolex)• target di riferimento: fascia medio-altamercoledì 29 maggio 13
  58. 58. Deliverables• Wireframe Low-Fi della homepage• (EPIC-level) Anche il wireframe Low-Fi di unapagina prodottoProvate a farli per tablet!CHALLENGE ACCEPTED?mercoledì 29 maggio 13
  59. 59. Utility• Un file di esempio per iPad• Screen resolution: 1024x768• Misure touch-friendly per le aree attive• 44x44 px - indice (misure Apple)• 56x56 px - indice (misure altre fonti)• 72x72 px - pollicehttp://bit.ly/12NZHYKmercoledì 29 maggio 13
  60. 60. Concludendo...mercoledì 29 maggio 13
  61. 61. Strumenti utiliBalsamiqwww.balsamiq.comAxurewww.axure.comAdobe Fireworkshttp://www.adobe.com/it/products/fireworks.htmlmercoledì 29 maggio 13
  62. 62. Letture consigliateSteve Krug,“Don’t Make MeThink”“Rocket Surgery Made Easy”Nielsen & Loranger“Web Usability 2.0”Donald Norman,“La caffettiera del masochista”“Emotional Design”“Gestire la complessità”Tutti i libri diA-Book-ApartNielsen Alertboxhttp://www.nngroup.com/articles/mercoledì 29 maggio 13
  63. 63. Cosa si muove in ItaliaMilan UX Book Clubhttp://milanuxbookclub.wordpress.comAppsterdamhttp://www.meetup.com/AppsterdamMilan/Architectahttp://www.architecta.itAIAPhttp://www.aiap.itmercoledì 29 maggio 13
  64. 64. Domande?mercoledì 29 maggio 13
  65. 65. Grazie mille!about.me/mrgoodwine@marcobuonvinomercoledì 29 maggio 13

×