Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

2. Progettazione iterativa

1,465 views

Published on

Slides dalle lezioni del corso di Interazione Uomo Macchina per il corso di laurea in Informatica - Università di Milano Bicocca - Prof.R.Polillo (A.A.2014-15) - lezione del 4 marzo 2015

Published in: Education

2. Progettazione iterativa

  1. 1. Progettazione per prototipi successivi Corso di Interazione Uomo Macchina AA 2014-2015 Roberto Polillo Corso di laurea in Informatica Università di Milano Bicocca Dipartimento di Informatica, Sistemistica e Comunicazione Edizione 2014-15
  2. 2. Queste slides… … si basano sul libro “Facile da usare”, dell’autore, dove si trovano tutte le necessarie spiegazioni. Vedi www.rpolillo.it Queste slide sono disponibili con licenza Creative Commons (attribuzione, non commerciale, condividi allo stesso modo) a chiunque desiderasse utilizzarle, per esempio a scopo didattico, senza necessità di preventiva autorizzazione: http://creativecommons.org/licenses/by-nc-sa/3.0/it/deed.it La licenza non si estende alle immagini fotografiche e alle screen shots, i cui diritti restano in capo ai rispettivi proprietari, che sono stati indicati, ove possibile, nelle didascalie del libro. L’autore si scusa per eventuali omissioni, e resta a disposizione per correggerle. R.Polillo - Marzo 20152
  3. 3. Scopo di questa lezione R.Polillo - Marzo 2015 3 Discutere il processo di progettazione e sviluppo di sistemi interattivi per prototipi successivi, e indicare alcune semplici tecniche di prototipazione
  4. 4. L’ingegneria del software R.Polillo - Marzo 2015 4  La disciplina che si occupa de problemi tecnici e di gestione dello sviluppo dei sistemi software  Studia, tra l’altro, i vari modelli dei processi di progettazione e sviluppo dei sistemi software
  5. 5. Il modello tradizionale di progettazione e sviluppo R.Polillo - Marzo 2015 5 Requisiti Analisi e progettazione Realizzazione Test Rilascio Modello “a cascata”: dopo una decisione, non si torna indietro
  6. 6. Test R.Polillo - Marzo 2015 6 Termine generico che denota due tipi di controlli diversi:  Verifica (verification) controllo che il prodotto sia congruente con quanto specificato (“make the thing right”)  Convalida (validation) controllo che il prodotto soddisfi effettivamente i bisogni del suo utente (“make the right thing”). La convalida è molto più difficile della verifica, e richiede il coinvolgimento dell’utente
  7. 7. Modello tradizionale: pro e contro R.Polillo - Marzo 2015 7 PRO:  fasi logiche ben definite  ogni fase fornisce gli input alla fase successiva  possibilità di mettere check-point fra una fase e l’altra  processo (apparentemente) ben controllabile CONTRO:  il sistema prodotto si vede solo alla fine, e può non essere soddisfacente  Gli utenti sono coinvolti solo all'inizio (requisiti) e alla fine (test)  il modello è concettualmente sbagliato, e non funziona…
  8. 8. Il modello corretto (iterativo) R.Polillo - Marzo 2015 8 Sviluppo per prototipi successivi Prototi- pazione Test Proget- tazione Inizio Rilascio Requisiti NOTA BENE: anche i requisiti evolvono durante il processo!
  9. 9. Modello iterativo: pro e contro R.Polillo - Marzo 2015 9 PRO:  Il prodotto si vede (anche se in modo parziale), fin dall’inizio e viene perfezionato per aggiustamenti successivi  le scelte effettuate possono essere sperimentate anticipatamente: si possono scartare quelle sbagliate  è il modello concettualmente corretto per la realizzazione di sistemi complessi CONTRO:  Difficoltà di stima dei costi a preventivo  Si rischia di far divergere il processo, per troppe richieste di modifiche  La fluidità delle specifiche rende più difficile la comunicazione fra le persone coinvolte (team di progetto, committente)
  10. 10. Meglio: rappresentazione "a spirale" R.Polillo - Marzo 2015 10 Requisiti Progettazione Realizzazione Test Prototipi successivi Rilascio fnale
  11. 11. User Centred Design (UCD) R.Polillo - Marzo 2015 11 Requisiti Progettazione Realizzazione Test Prototipi successivi Rilascio fnale Coinvolgimento dell'utente In alcuni metodi, l'utente viene coinvolto anche qui
  12. 12. ISO 13407: “Human-centred design process for interactive systems” R.Polillo - Marzo 2015 12 Identifica le necessità per la progettazione centrata sull’utente Comprendi e specifica il contesto d’uso Specifica i requisiti dell’utente e dell’organizzazione Valuta il progetto rispetto ai requisiti Produci soluzioni di progetto il sistema soddisfa i requisiti dell’utente e dell’organizzazione
  13. 13. Il documento dei requisiti  Descrive in forma organica le proprietà richieste al sistema da realizzare  Non solo requisiti funzionali (…!) R.Polillo - Marzo 2015 13
  14. 14. Il documento dei requisiti che dovete fare voi Parte Prima: Generalità  Descrizione generale del prodotto  Obiettivi del prodotto  Utenti  Contesti d’uso  Scenari d’uso  Fattibilità tecnologica Parte Seconda: Posizionamento  Situazione attuale  Analisi della concorrenza  Posizionamento competitivo Parte Terza: Requisiti  Casi d’uso  Requisiti per la esperienza utente  Altri requisiti Riferimenti R.Polillo - Marzo 2015 Valutato su forma e contenuti 14  Sintetico ma completo, ben strutturato,  Userete un template PowerPoint molto semplice, da personalizzare
  15. 15. Progettazione Si utilizzano diversi strumenti di rappresentazione: Informali (es. schizzi, storyboard, diagrammi) Formali (es. diagrammi UML) R.Polillo - Marzo 2015 15
  16. 16. Diagrammi informali: navigazione R.Polillo - Marzo 2015 16
  17. 17. Storyboard R.Polillo - Marzo 2015 17
  18. 18. Prototipi Proto-typos: "primo modello" Modello aprossimato o parziale del sistema in corso di sviluppo, realizzato per valutarne le caratteristiche e, se necessario, "aggiustare il tiro" R.Polillo - Marzo 2015 18
  19. 19. Perchè creare prototipi? R.Polillo - Marzo 2015 19  Per avere un rapido feedback sul progetto, effettuando dei test iniziali di convalida con l’utente  Per sperimentare design alternativi  Per migliorare il progetto prima e durante la sua realizzazione I test con l’utente fanno parte del processo di progettazione
  20. 20. Prototipi: differenti scopi R.Polillo - Marzo 2015 20  Ruolo per sperimentare il ruolo del prodotto nella vita del suo utente  User experience per sperimentare l'esperienza dell’uso del prodotto  Implementazione per sperimentare tecniche e componenti usati nella realizzazione del prodotto
  21. 21. Prototipi interattivi e non R.Polillo - Marzo 2015 21  I prototipi più utili sono quelli interattivi, perché possono essere utilizzati per test con gli utenti  Questi sono essenziali per valutare la usabilità del prodotto in corso di progettazione  Attenzione: l’interazione non può essere descritta a parole e immaginata: l’utente deve “metterci le mani sopra”
  22. 22. Prototipi non interattivi: esempio R.Polillo - Marzo 2015 22 Prototipo di cartone di iPhone
  23. 23. Prototipi interattivi: quali tipi R.Polillo - Marzo 2015 23  Alta o bassa fedeltà “assomigliano” o meno al prodotto finale  "Usa e getta" o evolutivo realizzato con tecnolgia provvisoria (viene poi buttato) o con quella definitiva (evolve fino al prodotto finale)  Orizzontale o verticale fornisce tutte le funzioni (anche se in versione limitata) o solo alcune (realizzate in dettaglio)
  24. 24. Prototipi orizzontali / verticali R.Polillo - Marzo 2015 24 prototipo orizzontale prototipo verticale sistemacompleto funzionalità dettaglio
  25. 25. I prototipi iniziali R.Polillo - Marzo 2015 25  Molto utili nelle prime fasi del progetto, per esplorare e valutare diverse soluzioni possibili, a costi contenuti  Bassa fedeltà, molto spesso del tipo “usa e getta”, realizzati a costi molto bassi  Possono essere usati vari strumenti di prototipazione, di solito molto semplici, per es.: carta, HTML, PowerPoint, …
  26. 26. Il prototipo di carta  Schermate disegnate grossolanamente su foglietti di carta  Esecuzione simulata con un paio di utenti  Scopo: messa a punto della struttura della navigazione R.Polillo - Marzo 201526
  27. 27. L’interfaccia viene disegnata a bassa fedeltà su fogli di carta … Prototipi di carta: esempi R.Polillo - Marzo 2015 27
  28. 28. Prototipi di carta: esempi R.Polillo - Marzo 2015 28
  29. 29. R.Polillo - Marzo 2015 29
  30. 30. Utente Osservatori "Sistema" Prototipi di carta: simulazione R.Polillo - Marzo 2015 30
  31. 31. Prototipi di carta: video R.Polillo - Marzo 2015 31  Prototipi di carta (2’): http://it.youtube.com/watch?v=GrV2SZuRPv0
  32. 32. POP: Prototyping on Paper R.Polillo - Marzo 201532 App per iPhone / iPad / Android: https://popapp.in
  33. 33. Iniziate così… R.Polillo - Marzo 2015 33
  34. 34. Poi così… R.Polillo - Marzo 2015 34 Poi fotografate e simulate con POP
  35. 35. Prototipi di carta R.Polillo - Marzo 2015 35 VANTAGGI:  Velocità e basso costo di realizzazione  Permettono di provare l’interazione in modo semplice  Bassissimo costo delle modifiche SVANTAGGI:  Fedeltà molto bassa per gli aspetti di layout grafico
  36. 36. Video scenari R.Polillo - Marzo 2015 36  Prototipi di carta e scenari (3’) d’uso: un’applicazione per PDA per incontrare amici all’Università http://it.youtube.com/watch?v=c4-A-9hGn0U
  37. 37. Video scenari: che cosa dovete fare  Un video di 3 minuti  Eventualmente usando il prototipo di carta  Mostrando soprattutto il contesto della vostra applicazione, e un paio di casi d’uso tipici  Può essere rozzo, ma efficace: usate il cellulare R.Polillo - Marzo 2015 37
  38. 38. La tecnica del mago di Oz R.Polillo - Marzo 2015 38
  39. 39. Prototipi ipertestuali R.Polillo - Marzo 2015 39 Schermate cliccabili permettono di “navigare” nell’interfaccia, simulando l’interazione Esempi: PowerPoint, HTML, [Flash]
  40. 40. Prototipi PowerPoint R.Polillo - Marzo 2015 40  PowerPoint può essere usato per realizzare facilmente prototipo navigabili:  Ogni schermata è una slide Power Point  Su ogni schermata vengono realizzate aree sensibili, con link ad altre slide  Cliccando sulle aree sensibili, l’utente “naviga” nell’interfaccia
  41. 41. Prototipi PowerPoint R.Polillo - Marzo 2015 41 VANTAGGI:  Facili da realizzare e da modificare  Gli aspetti grafici possono essere definiti “abbastanza” bene SVANTAGGI:  Modello di interazione limitato (“point & click”)  Limiti pratici alla complessità dell’ipertesto (oltre un centinaio di slide diventa poco gestibile)
  42. 42. Login Benvenuto nel sistema di controllo degli elettrodomestici. Ti preghiamo di autenticarti, inserendo il tuo nome utente e la password. NOME UTENTE PASSWORD OK michele ******** HELP Esempio R.Polillo - Marzo 201542
  43. 43. Login Benvenuto nel sistema di controllo degli elettrodomestici. Ti preghiamo di autenticarti, inserendo il tuo nome utente e la password. NOME UTENTE PASSWORD OK michele ******** HELP R.Polillo - Marzo 201543
  44. 44. HELP Elettrodomestici Seleziona uno dei link o delle icone sottostanti per accedere alle funzionalità: Torna al menù principale Lavatrice Frigorifero Lavastoviglie Esempio (segue) R.Polillo - Marzo 201544
  45. 45. Lavatrice HELP generale Programma di lavaggio delicato a bassa temperatura in corso… Avvia Esecuzione lavoro (interrotto) 10% completato… (in pausa) Riprendi dettagli Torna al menù elettrodomestici 1 Esempio (segue) R.Polillo - Marzo 201545
  46. 46. HELP Lavatrice dettagligenerale Produttore: Ariston Modello: Lavasciuga 2000 Installata il 18/07/2002. Driver aggiornato al 16/10/2002. Ore di funzionamento: 92. Interventi tecnici: nessuno. Media interventi: non disponibile. Torna al menù elettrodomestici 2 Esempio (segue) R.Polillo - Marzo 201546
  47. 47. Prototipi HTML R.Polillo - Marzo 2015 47  Vanno bene per i siti web, indipendentemente dalla tecnologia utilizzata per la realizzazione del sito finale  Tipicamente, prototipi "wireframe"  Meglio non utilizzarli per altre applicazioni:  gli aspetti grafici sono poco controllabili (a basso costo)  lo strumento usato tende a influenzare le scelte di design
  48. 48. Prototipi wireframe R.Polillo - Marzo 2015 48
  49. 49. Suggerimenti R.Polillo - Marzo 2015 49 E’ bene evitare strumenti di prototipazione che:  pongano difficoltà tecniche nella realizzazione (devo pensare al prototipo, non allo strumento)  possano influenzare, con le loro peculiarità, il design del sistema prototipato (“questo non riesco a farlo, quindi cambio il design”)
  50. 50. L'ingegneria dell'usabilità R.Polillo - Marzo 2015 50 La disciplina che si occupa dei metodi e delle tecniche che permettano di specificare, raggiungere e verificare gli obiettivi di usabilità nella progettazione e sviluppo dei sistemi interattivi Vari approcci, ma aspetti chiave comuni:  modello di sviluppo per prototipi successivi  Coinvolgimento dell’utente durante tutto il processo  inserimento di “usability engineer” nel team di sviluppo  definizione di metriche e effettuazione di misure di usabilità
  51. 51. Il vostro progetto: deliverable R.Polillo - Marzo 2015 51 Requisiti Progettazione Realizzazione Test Requisiti iniziali Protipo a bassa fedeltà Protipo a alta fedeltà Test usabilità Scenario d'uso (video) Revisione Esame
  52. 52. Il test di usabilità  Faremo una lezione sull'argomento  Sul prototipo finale deve essere fatto un test di usabilità strutturato (3 utenti), e descritto in un rapporto di test (template Word sul sito)  Durante il processo di prototipazione possono essere fatti test di usabilità informali, non documentati R.Polillo - Marzo 201552
  53. 53. Il rapporto di test: indice di massima Obiettivi del test Metodologia usata Utenti Compiti/scenari Strumentazione Modalità di svolgimento Risultati del test Analitici, con le misure Raccomandazioni finali Analitiche, con livelli di priorità Allegati: Eventuali questionari utilizzati R.Polillo - Marzo 201553

×