Lezione Comunicazione Visiva e Design delle Interfacce - Unimib - 2014 edition
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Lezione Comunicazione Visiva e Design delle Interfacce - Unimib - 2014 edition

  • 874 views
Uploaded on

Breve panoramica di ruoli e strumenti nell'ambito dello UX design. ...

Breve panoramica di ruoli e strumenti nell'ambito dello UX design.

Lezione (e workshop!) per il corso 2014 di Comunicazione Visiva e Design delle Interfacce, all'Università di Milano-Bicocca.

Special thanks: Boraso.com

More in: Technology
  • 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
874
On Slideshare
846
From Embeds
28
Number of Embeds
5

Actions

Shares
Downloads
38
Comments
0
Likes
10

Embeds 28

https://twitter.com 15
http://www.slideee.com 7
http://www.linkedin.com 4
https://www.linkedin.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. UX design: una breve panoramica su ruoli e strumenti
  • 2. UX / Interaction designer Marco Buonvino @marcobuonvino
  • 3. Ex studente di TTC Interaction designer / Usability researcher THE STORY SO FAR... UX / Interaction designer
  • 4. Che cos’è la UX?
  • 5. User eXperience CHE COS’È LA UX?
  • 6. Contesto e ambiente Utilizzo dell’interfaccia Formazione della necessità Momenti successivi L’utente CHE COS’È LA UX?
  • 7. Interaction Design CHE COS’È LA UX?
  • 8. Interaction Design Strategia Ricerca CHE COS’È LA UX? Architettura
  • 9. Ciò che una persona prova quando si relaziona con un prodotto, un sistema, un servizio, un brand. Comprende tutto ciò che si avviene prima (l’aspettativa), durante (l’esperienza) e dopo (il ricordo) l’interazione, all’interno del contesto di svolgimento. CHE COS’È LA UX? User eXperience
  • 10. http://www.youtube.com/watch?v=Ovj4hFxko7c What the #$%@ is UX Design? CHE COS’È LA UX?
  • 11. Le figure professionali
  • 12. UX designer Progetta l’esperienza d’uso di un processo o di un obiettivo Cerca di capire: • chi è l’utente, le sue caratteristiche e le sue necessità • come sfruttare il contesto d’interazione Lavora con: • strumenti di behavioural design, come Personas, Scenari d’uso e User Journeys LE FIGURE PROFESSIONALI
  • 13. Interaction designer Lavora per realizzare una User Interface: • che risponda alle necessità dell’utente • che sia usabile e accessibile Lavora con: • Sketch, Wireframe, Flussi di interazione e Prototipi LE FIGURE PROFESSIONALI Si occupa di progettare l’interazione uomo-interfaccia
  • 14. Cerca di rendere i contenuti: • facilmente individuabili e raggiungibili • ordinati logicamente in strutture adatta ai requisiti Adora lavorare con: • Schemi e diagrammi di architettura informativa Information Architect LE FIGURE PROFESSIONALI Si occupa della gestione e dell’organizzazione dei contenuti
  • 15. Usability Researcher Individua i problemi di usabilità e ne identifica le motivazioni LE FIGURE PROFESSIONALI Nel suo lavoro: • collabora strettamente con il designer • chiede la partecipazione di utenti finali • va d’accordo con esperti di web analytics I suoi strumenti: • Test di usabilità, Valutazione euristica, Linee guida
  • 16. http://www.onwardsearch.com/ UX-Career-Guide/ A guide to UX careers LE FIGURE PROFESSIONALI
  • 17. Capitolo UNO Prima di fare design bisogna conoscere l’utente
  • 18. • Bisogni e necessità • Contesto e abitudini d’uso • Comportamento durante l’interazione • Atteggiamento e predisposizione CAPIRE L’UTENTE Cosa bisogna capire?
  • 19. • Test di usabilità • Competitive analysis • Field Study / Etnografia • Web Analytics • A-B test / Multivariate test Qualitativi Quantitativi CAPIRE L’UTENTE Alcuni strumenti
  • 20. Il test di usabilità
  • 21. Strumento a supporto della fase di progettazione di un sito web Permette di raccogliere indicazioni da utenti reali, slegati dal progetto Alta qualità di risultati per costi contenuti Varie metodologie, adattabili al contesto d’indagine CAPIRE L’UTENTE - Il test di usabilità
  • 22. Utente utilizza l’interfaccia, svolge i task assegnati Facilitatore illustra i task, assiste l’utente, sprona il metodo thinking aloud Osservatori raccolgono indicazioni sui comportamenti e sui percorsi di interazione dell’utente CAPIRE L’UTENTE - Il test di usabilità I ruoli
  • 23. Usability test qualitativi • Svolgimento task attraverso: - desktop CAPIRE L’UTENTE - Il test di usabilità Tipologie
  • 24. Usability test qualitativi • Svolgimento task attraverso: - desktop - mobile devices CAPIRE L’UTENTE - Il test di usabilità Tipologie
  • 25. Usability test qualitativi • Svolgimento task attraverso: - desktop - mobile devices - paper prototypes CAPIRE L’UTENTE - Il test di usabilità Tipologie
  • 26. Usability test qualitativi • Svolgimento task attraverso: • Card sorting - desktop - mobile devices - paper prototypes CAPIRE L’UTENTE - Il test di usabilità Tipologie
  • 27. Usability test qualitativi • Svolgimento task attraverso: Usability test quantitativi • Eye Tracking • Card sorting - desktop - mobile devices - paper prototypes CAPIRE L’UTENTE - Il test di usabilità Tipologie
  • 28. Card sorting x ~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?,2004 Qualitative desktop Qualitative tablet / smartphone Paper prototyping x ~5 Eyetracking x ~30 CAPIRE L’UTENTE - Il test di usabilità Quanti utenti?
  • 29. Il prima possibile! Si può fare un test fin dai primi momenti di vita di un progetto CAPIRE L’UTENTE - Il test di usabilità Quando fare un test?
  • 30. • Indicazione dei problemi di usabilità riscontrati • Suddivisione per gravità e priorità di intervento • Raccomandazioni per la fase di UI design CAPIRE L’UTENTE - Il test di usabilità Risultati
  • 31. • con metodo Aperto • con metodo Chiuso WIAD 2013 “User testing nello sviluppo di un'architettura dell'informazione: il Card Sorting” http://www.slideshare.net/bastianlion/user-testing-nello-sviluppo-di- unarchitettura-dellinformazione-il-card-sorting CAPIRE L’UTENTE - Il test di usabilità Card Sorting
  • 32. Altri metodi
  • 33. • 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 proprio CAPIRE L’UTENTE - Altri strumenti Competitive analysis
  • 34. • L’osservatore segue l’utente nella sua vita quotidiana, senza interferire • Obiettivo: raccogliere il maggior numero di informazioni sulle abitudini di interazione • È possibile capire i punti in cui gli utenti possono aver bisogno di un’innovazione • Molto costoso CAPIRE L’UTENTE - Altri strumenti Field study / Etnografia
  • 35. • Le web analytics sono una raccolta quantitativa di tutti i dati di navigazione • Sono relativi all’intero bacino di utenza • Più è ampio il traffico, più è possibile generalizzare dei comportamenti • Si vanno ad analizzare bounce rate, abbandoni o percorsi specifici CAPIRE L’UTENTE - Altri strumenti Web Analytics
  • 36. • Presentazione di varianti di progettazione all’intero pubblico, in modo diretto e bilanciato • A-B = 1 sola variabile • Multivariate = più variabili contemporanee • Devi comunque progettare tutte le variabili CAPIRE L’UTENTE - Altri strumenti A-B / Multivariate test
  • 37. Capitolo DUE Fare design, considerando l’utente
  • 38. • Personas • Sketch • Scenari d’uso • User journeys DESIGN PER L’UTENTE Gli strumenti principali
  • 39. • Rappresentazioni di utenti tipo • Necessità, obiettivi, caratteristiche e abitudini d’uso della tecnologia • Derivati da serie di interviste con utenti reali • Proto-personas: basati su web analytics e test di usabilità DESIGN PER L’UTENTE Personas
  • 40. http://www.flickr.com/photos/jasontravis/sets/72157603258446753/ Set di: Jason Travis (Flickr) DESIGN PER L’UTENTE Personas
  • 41. DESIGN PER L’UTENTE
  • 42. • Illustrazioni o schemi • Raccontano la sequenza di interazione di un utente con la UI • Scopo: verificare e 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 agli sviluppatori DESIGN PER L’UTENTE Sketch
  • 43. • Documenti o schemi che illustrano un’interazione verosimile da parte di un utente tipo con l’interfaccia • Considerazione del contesto e dell’ambiente • Scopo: • verificare come l’interfaccia potrebbe risolvere il task dell’utente, • individuare problemi di usabilità • individuare altre funzionalità di cui l’utente potrebbe aver bisogno DESIGN PER L’UTENTE Scenari d’uso
  • 44. • Diagrammi che illustrano tutti i passaggi di interazione dell’utente con l’interfaccia • Vengono considerati anche i momenti preliminari e conseguenti rispetto all’interazione (anche un eventuale ritorno) • Scopo: identificare i punti di attrito, per capire dove concentrare il design DESIGN PER L’UTENTE User Journeys
  • 45. Capitolo TRE Le fasi del design
  • 46. LE FASI DEL DESIGN 42 Il processo di progettazione Low-Fi Design Med-Fi Design Hi-Fi Design T E S T T E S T T E S T Sviluppo Manutenzione / Ottimizzazione Analytics Brief Behavioural Research A-B test / multivariate Behavioural Design
  • 47. LOW-FI MEDIUM-FI HI-FI Iterazioni preliminari Iterazioni intermedie Iterazioni avanzate Sketch su carta (Carta, Balsamiq…) Wireframe interattivi (Balsamiq, Axure…) Visual design (HTML + CSS, Axure, mockup) LE FASI DEL DESIGN UI Design
  • 48. • Design preliminare, ancora in fase esplorativa • Schizzi su carta o programmi di wireframing rapido (es. Balsamiq Mockups) LE FASI DEL DESIGN Low - Fi Design
  • 49. • Design intermedio • Programmi di wireframing (es. Balsamiq Mockups, Axure) LE FASI DEL DESIGN Med - Fi Design
  • 50. • Design avanzato • Programmi di wireframing (es. Axure) • HTML + CSS LE FASI DEL DESIGN Hi - Fi Design
  • 51. Low-Fi Design Medium-Fi Design Hi-Fi Design T E S T T E S T T E S T Paper prototyping Iterazioni 1-3 utenti Test qualitativo Iterazioni 3-6 utenti Test qualitativo Iterazioni 3-6 utenti LE FASI DEL DESIGN Design iterativo
  • 52. Costa troppo?
  • 53. • Discount usability method • È un’analisi condotta da esperti • Per ridurre il bias, l’analisi viene condotta in modo parallelo fra più valutatori (circa 3) • Viene seguito il percorso di un task rappresentativo, poi un’analisi completa LE FASI DEL DESIGN - Discount methods Analisi euristica di usabilità
  • 54. • Discount usability method • È un’analisi condotta attraverso l’utilizzo di linee guida condivise o create ad hoc • Metodo rapido, ma talvolta poco flessibile LE FASI DEL DESIGN - Discount methods Analisi tramite linee guida
  • 55. • http://userium.com LE FASI DEL DESIGN - Discount methods Analisi tramite linee guida
  • 56. WORKSHOP
  • 57. • Lavoro di gruppo (3 persone is ok!) • Circa 30 minuti • Deliverable: Wireframe Low-Fi • Strumenti consigliati: Carta, Balsamiq WORKSHOP UI design
  • 58. Il Cliente vuole creare un servizio per prenotare sale prova per musicisti. Non è presente alcun sito web o app. Obiettivi del Cliente: • permettere ai musicisti di prenotare la sala prove • consentire agli utenti di inserire recensioni o commenti • dare ai gestori la possibilità di aggiungere la loro sala prove • target di riferimento: musicisti sia novizi che esperti WORKSHOP Brief
  • 59. • Wireframe Low-Fi della pagina principale • (EPIC-level) Anche il wireframe Low-Fi di una pagina di dettaglio di una saletta e del sistema di prenotazione Provate a farlo per tablet! CHALLENGE ACCEPTED? WORKSHOP Consegne
  • 60. • Un file di esempio per iPad • iPad screen resolution: 1024x768 • Misure touch-friendly per le aree attive: - 44x44 px - indice (misure Apple) - 56x56 px - indice (misure da altre fonti) - 72x72 px - pollice http://bit.ly/12NZHYK WORKSHOP Utility
  • 61. Concludendo
  • 62. Balsamiq www.balsamiq.com Axure www.axure.com Adobe Fireworks http://www.adobe.com/it/products/fireworks.html CONCLUDENDO Strumenti utili
  • 63. Steve Krug, “Don’t Make Me Think” “Rocket Surgery Made Easy” Nielsen & Loranger “Web Usability 2.0” Donald Norman, “La caffettiera del masochista” “Emotional Design” “Gestire la complessità” Tutti i libri di A-Book-Apart Nielsen Alertbox http://www.nngroup.com/ articles/ CONCLUDENDO Letture consigliate
  • 64. Milan UX Book Club http://milanuxbookclub.wordpress.com Appsterdam http://www.meetup.com/AppsterdamMilan/ Architecta http://www.architecta.it AIAP http://www.aiap.it CONCLUDENDO Cosa seguire / partecipare!
  • 65. Grazie. QA Session ? @marcobuonvino