PROGETTAZIONE E SVILUPPO PER PROTOTIPI SUCCESSIVI Corso di Interazione Uomo Macchina AA 2009-2010 Roberto Polillo Universi...
Scopo di questa lezione <ul><li>Discutere il processo di progettazione e sviluppo di sistemi interattivi per prototipi suc...
Temi <ul><li>Progettazione e sviluppo per prototipi successivi </li></ul><ul><li>Tipi di prototipi </li></ul><ul><li>2.  E...
Progettazione e sviluppo per prototipi successivi R.Polillo - 2009
L’ingegneria del software <ul><li>La disciplina che si occupa de problemi tecnici e di gestione dello sviluppo dei sistemi...
Il modello tradizionale di progettazione e sviluppo  Modello “a cascata”:  dopo una decisione, non si torna indietro R.Pol...
Test <ul><li>Il termine generico di “test” denota due tipi di controlli molto diversi: </li></ul><ul><li>Verifica  (ingl.:...
Modello tradizionale: pro e contro <ul><li>PRO : </li></ul><ul><li>fasi logiche ben definite </li></ul><ul><li>ogni fase f...
Il modello  corretto ( iterativo ) Sviluppo per prototipi successivi NOTA BENE: anche i requisiti evolvono durante il proc...
Che cos’è un prototipo <ul><li>Proto-typos : “primo modello” </li></ul><ul><li>Un modello approssimato o parziale del sist...
Esempio R.Polillo - 2009
Esempio Prototipo di cartone di iPhone R.Polillo - 2009
Perchè creare prototipi? <ul><li>Per avere un rapido feedback sul progetto, effettuando dei test iniziali di convalida con...
In pratica, tutti i processi corrono in parallelo, sia pure con enfasi diversa nelle varie fasi: “ Unified Software Develo...
ISO 13407: “Human-centred design process for interactive systems” R.Polillo - 2009 Identifica le  necessità per la progett...
Modello iterativo: pro e contro <ul><li>PRO: </li></ul><ul><li>Il prodotto si vede (anche se in modo parziale), fin dall’i...
Il ciclo compito-artefatto Artefatto Compito Fa nascere Modifica R.Polillo - 2009
L’ingegneria dell’usabilità <ul><li>La disciplina che si occupa dei metodi e delle tecniche che permettano di specificare,...
Tipi di prototipi R.Polillo - 2009
Classificazione dei prototipi: <ul><li>I prototipi possono essere classificati sulla base delle loro caratteristiche, per ...
Prototipi orizzontali / verticali R.Polillo - 2009 prototipo orizzontale prototipo verticale sistema completo funzionalità...
Classificazione dei prototipi (II) <ul><li>Oppure (meglio) i prototipi possono essere classificati sulla base del loro sco...
Prototipi interattivi e non <ul><li>I prototipi più utili sono quelli interattivi, perché possono essere utilizzati per te...
I prototipi iniziali <ul><li>Sono molto utili nelle prime fasi del progetto, per esplorare e valutare diverse soluzioni po...
Prototipi di carta (I) L’interfaccia viene disegnata a bassa fedeltà su cartoncini mobili… R.Polillo - 2009
Prototipo di carta (II) …  che vengono usati per effettuare una  simulazione “manuale” del sistema, con utenti-cavia … …  ...
R.Polillo - 2009
Video <ul><li>Prototipi di carta (3’): </li></ul><ul><li>	http://it.youtube.com/watch?v=GrV2SZuRPv0 </li></ul><ul><li>Prot...
Prototipi di carta <ul><li>VANTAGGI: </li></ul><ul><li>Velocità e basso costo di realizzazione </li></ul><ul><li>Permetton...
Prototipi ipertestuali <ul><li>Schermate cliccabili permettono di “navigare” nell’interfaccia, simulando l’interazione </l...
Prototipi PowerPoint (I) <ul><li>PowerPoint può essere usato per realizzare facilmente prototipo navigabili: </li></ul><ul...
Prototipi PowerPoint (II) <ul><li>VANTAGGI: </li></ul><ul><li>Facili da realizzare e da modificare </li></ul><ul><li>La in...
Esempi (vedi allegati) <ul><li>Applicazioni per cellulari: </li></ul><ul><ul><li>Controllo elettrodomestici </li></ul></ul...
Prototipi HTML <ul><li>Vanno bene per i siti web, indipendentemente dalla tecnologia utilizzata per la realizzazione del s...
Esempio: Prototipo di navigazione per un sito web <ul><li>Obiettivo :  permettere di sperimentare e mettere a punto la str...
Suggerimenti <ul><li>E’ bene evitare strumenti di prototipazione che: </li></ul><ul><ul><li>pongano difficoltà tecniche ne...
Esempio R.Polillo - 2009 Login Benvenuto nel sistema di controllo degli elettrodomestici. Ti preghiamo di autenticarti, in...
R.Polillo - 2009 Login Benvenuto nel sistema di controllo degli elettrodomestici. Ti preghiamo di autenticarti, inserendo ...
Esempio (segue) R.Polillo - 2009 HELP Elettrodomestici Seleziona uno dei link o delle icone sottostanti per accedere alle ...
Esempio (segue) R.Polillo - 2009 Lavatrice HELP generale Programma di lavaggio delicato a bassa temperatura in corso… Avvi...
Esempio (segue) R.Polillo - 2009 HELP Lavatrice dettagli generale Produttore: Ariston Modello: Lavasciuga 2000 Installata ...
Upcoming SlideShare
Loading in …5
×

4.Progettazione e sviluppo per prototipi successivi

2,788 views

Published on

Corso di Interazione Uomo Macchina del Prof.R.Polillo - Università di Milano Bicocca - DISCO - AA. 2009-2010 - Lezione 2
(vedi anche www.rpolillo.it)

Published in: Education, Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,788
On SlideShare
0
From Embeds
0
Number of Embeds
57
Actions
Shares
0
Downloads
116
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • R.Polillo, Interazione uomo macchina - Parte prima, 4
  • R.Polillo, Interazione uomo macchina - Parte prima, 4
  • R.Polillo, Interazione uomo macchina - Parte prima, 4
  • R.Polillo, Interazione uomo macchina - Parte prima, 4
  • R.Polillo, Interazione uomo macchina - Parte prima, 4
  • R.Polillo, Interazione uomo macchina - Parte prima, 4
  • R.Polillo, Interazione uomo macchina - Parte prima, 4
  • R.Polillo, Interazione uomo macchina - Parte prima, 4
  • R.Polillo, Interazione uomo macchina - Parte prima, 4
  • login R.Polillo, Interazione uomo macchina - Parte prima, 4
  • login R.Polillo, Interazione uomo macchina - Parte prima, 4
  • login R.Polillo, Interazione uomo macchina - Parte prima, 4
  • 4.Progettazione e sviluppo per prototipi successivi

    1. 1. PROGETTAZIONE E SVILUPPO PER PROTOTIPI SUCCESSIVI Corso di Interazione Uomo Macchina AA 2009-2010 Roberto Polillo Università di Milano Bicocca Dipartimento di Informatica, Sistemistica e Comunicazione R.Polillo - 2009
    2. 2. Scopo di questa lezione <ul><li>Discutere il processo di progettazione e sviluppo di sistemi interattivi per prototipi successivi, e indicare alcune semplici tecniche di prototipazione </li></ul>R.Polillo - 2009
    3. 3. Temi <ul><li>Progettazione e sviluppo per prototipi successivi </li></ul><ul><li>Tipi di prototipi </li></ul><ul><li>2. Esempi </li></ul>R.Polillo - 2009
    4. 4. Progettazione e sviluppo per prototipi successivi R.Polillo - 2009
    5. 5. L’ingegneria del software <ul><li>La disciplina che si occupa de problemi tecnici e di gestione dello sviluppo dei sistemi software </li></ul><ul><li>Studia, tra l’altro, i vari modelli dei processi di progettazione e sviluppo dei sistemi software </li></ul>R.Polillo - 2009
    6. 6. Il modello tradizionale di progettazione e sviluppo Modello “a cascata”: dopo una decisione, non si torna indietro R.Polillo - 2009 Requisiti Analisi e progettazione Realizzazione Test Rilascio
    7. 7. Test <ul><li>Il termine generico di “test” denota due tipi di controlli molto diversi: </li></ul><ul><li>Verifica (ingl.: verification) </li></ul><ul><li>controllo che il prodotto sia congruente con quanto specificato (“make the thing right”) </li></ul><ul><li>Convalida (ingl.: validation) </li></ul><ul><li>controllo che il prodotto soddisfi effettivamente le esigenze per le quali è stato concepito (“make the right thing”). </li></ul><ul><li>La convalida è molto più “difficile” della verifica, e richiede il coinvolgimento dell’utente </li></ul>R.Polillo - 2009
    8. 8. Modello tradizionale: pro e contro <ul><li>PRO : </li></ul><ul><li>fasi logiche ben definite </li></ul><ul><li>ogni fase fornisce gli input alla fase successiva </li></ul><ul><li>possibilità di mettere check-point fra una fase e l’altra (“milestones”) </li></ul><ul><li>processo (apparentemente) ben controllabile </li></ul><ul><li>CONTRO: </li></ul><ul><li>il sistema prodotto si vede solo alla fine, e può non essere soddisfacente </li></ul><ul><li>il modello è concettualmente sbagliato, e non funziona: </li></ul><ul><ul><li>nella pratica, spesso si rivela necessario modificare le decisioni già prese nelle fasi precedenti, e rifare lavoro già fatto (complessità del sistema, mutate esigenze, problemi evidenziati dall’uso) </li></ul></ul><ul><ul><li>nella pratica, il processo va quindi spesso fuori controllo (allungamento dei tempi di sviluppo, aumento dei costi) </li></ul></ul>R.Polillo - 2009
    9. 9. Il modello corretto ( iterativo ) Sviluppo per prototipi successivi NOTA BENE: anche i requisiti evolvono durante il processo! R.Polillo - 2009 Prototi- pazione T est Proget- tazione Inizio Rilascio Requisiti
    10. 10. Che cos’è un prototipo <ul><li>Proto-typos : “primo modello” </li></ul><ul><li>Un modello approssimato o parziale del sistema che vogliamo sviluppare, realizzato allo scopo di valutarne alcune caratteristiche, e, se necessario, “correggere il tiro” </li></ul><ul><li>“ A representatio of all or part of a product or system that, although limited in some way, can be used for evaluation” (ISO 13407) </li></ul>R.Polillo - 2009
    11. 11. Esempio R.Polillo - 2009
    12. 12. Esempio Prototipo di cartone di iPhone R.Polillo - 2009
    13. 13. Perchè creare prototipi? <ul><li>Per avere un rapido feedback sul progetto, effettuando dei test iniziali di convalida con l’utente </li></ul><ul><li>Per sperimentare design alternativi </li></ul><ul><li>Per migliorare il progetto prima e durante la sua realizzazione </li></ul><ul><li>I test con l’utente fanno parte del processo di progettazione </li></ul>R.Polillo - 2009
    14. 14. In pratica, tutti i processi corrono in parallelo, sia pure con enfasi diversa nelle varie fasi: “ Unified Software Development Process”,Jacobson,Booch, Rumbaugh R.Polillo - 2009 tempo Requisiti Progettazione Prototipazione Test Rilascio sforzo iterazione 1 iterazione 2 iterazione 3 iterazione 4 iterazione 5 iterazione 6 iteratzione 7 iterazione 8 tempo Requisiti Progettazione Prototipazione Test Rilascio
    15. 15. ISO 13407: “Human-centred design process for interactive systems” R.Polillo - 2009 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
    16. 16. Modello iterativo: pro e contro <ul><li>PRO: </li></ul><ul><li>Il prodotto si vede (anche se in modo parziale), fin dall’inizio e viene perfezionato per aggiustamenti successivi </li></ul><ul><li>le scelte effettuate possono essere sperimentate anticipatamente: si possono scartare quelle sbagliate </li></ul><ul><li>è il modello concettualmente corretto per la realizzazione di sistemi complessi </li></ul><ul><li>CONTRO: </li></ul><ul><li>Difficoltà di stima dei costi a preventivo </li></ul><ul><li>Si rischia di far divergere il processo, per troppe richieste di modifiche </li></ul><ul><li>La fluidità delle specifiche rende più difficile la comunicazione fra le persone coinvolte (team di progetto, committente) </li></ul>R.Polillo - 2009
    17. 17. Il ciclo compito-artefatto Artefatto Compito Fa nascere Modifica R.Polillo - 2009
    18. 18. L’ingegneria dell’usabilità <ul><li>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 </li></ul><ul><li>Vari approcci, ma aspetti chiave comuni: </li></ul><ul><ul><li>modello di sviluppo iterativo per prototipi successivi </li></ul></ul><ul><ul><li>coinvolgimento dell’utente durante tutto il processo </li></ul></ul><ul><ul><li>inserimento di “usability engineer” nel team di sviluppo </li></ul></ul><ul><ul><li>definizione di metriche e effettuazione di misure di usabilità </li></ul></ul>R.Polillo - 2009
    19. 19. Tipi di prototipi R.Polillo - 2009
    20. 20. Classificazione dei prototipi: <ul><li>I prototipi possono essere classificati sulla base delle loro caratteristiche, per es.: </li></ul><ul><li>Fedeltà : </li></ul><ul><li>bassa fedeltà : “assomiglia” alla lontana al prodotto finale </li></ul><ul><li>alta fedeltà : “assomiglia” in tutti gli aspetti al prodotto finale </li></ul><ul><li>Tempo di vita : </li></ul><ul><li>“ usa e getta” (“throw away”): realizzato con tecnolgia provvisoria, il suo arco di vita è limitato </li></ul><ul><li>evolutivo : realizzato con la tecnologia finale, e viene fatto evolvere fino al prodotto finale </li></ul><ul><li>Completezza funzionale : </li></ul><ul><li>orizzontale : fornisce tutte le funzioni del prodotto finale, anche se in versione limitata </li></ul><ul><li>verticale : fornisce solo alcune funzioni, realizzate in dettaglio </li></ul>R.Polillo - 2009
    21. 21. Prototipi orizzontali / verticali R.Polillo - 2009 prototipo orizzontale prototipo verticale sistema completo funzionalità dettaglio
    22. 22. Classificazione dei prototipi (II) <ul><li>Oppure (meglio) i prototipi possono essere classificati sulla base del loro scopo, per es.: </li></ul>Ruolo : ruolo del prodotto prototipato nella vita del suo utente Look&feel : esperienza sensoriale dell’uso del prodotto Implementatione : tecniche e componenti usati nella realizzazione del prodotto Cfr. S.Houde, C.Hill, What do Prototypes Prototype? http://www.viktoria.se/fal/kurser/winograd-2004/Prototypes.pdf P 1 P 2 R.Polillo - 2009 Ruolo Implementazione look & feel
    23. 23. Prototipi interattivi e non <ul><li>I prototipi più utili sono quelli interattivi, perché possono essere utilizzati per test con gli utenti </li></ul><ul><li>Questi sono essenziali per valutare la usabilità del prodotto in corso di progettazione </li></ul><ul><li>Attenzione: l’interazione non può essere descritta a parole e immaginata: l’utente deve “metterci le mani sopra” </li></ul>R.Polillo - 2009
    24. 24. I prototipi iniziali <ul><li>Sono molto utili nelle prime fasi del progetto, per esplorare e valutare diverse soluzioni possibili, a costi contenuti </li></ul><ul><li>Sono molto spesso del tipo “usa e getta”, realizzati anche a costi molto bassi </li></ul><ul><li>Le tecnologie usate possono essere varie, di solito molto semplici, per es.: carta, HTML, PowerPoint </li></ul>R.Polillo - 2009
    25. 25. Prototipi di carta (I) L’interfaccia viene disegnata a bassa fedeltà su cartoncini mobili… R.Polillo - 2009
    26. 26. Prototipo di carta (II) … che vengono usati per effettuare una simulazione “manuale” del sistema, con utenti-cavia … … dopodichè l’interfaccia si corregge, e si riprova … R.Polillo - 2009 Utente “ Computer” Osservatori
    27. 27. R.Polillo - 2009
    28. 28. Video <ul><li>Prototipi di carta (3’): </li></ul><ul><li> http://it.youtube.com/watch?v=GrV2SZuRPv0 </li></ul><ul><li>Prototipi di carta e scenari (3’) d’uso: u n’applicazione per PDA per incontrare amici all’Università http://it.youtube.com/watch?v=c4-A-9hGn0U </li></ul>R.Polillo - 2009
    29. 29. Prototipi di carta <ul><li>VANTAGGI: </li></ul><ul><li>Velocità e basso costo di realizzazione </li></ul><ul><li>Permettono di provare l’interazione in modo semplice </li></ul><ul><li>Basso costo delle modifiche </li></ul><ul><li>SVANTAGGI: </li></ul><ul><li>L’interazione è lenta e quindi innaturale, perché simulata attraverso un “mago di Oz” </li></ul><ul><li>Fedeltà molto bassa per gli aspetti di layout grafico </li></ul>R.Polillo - 2009
    30. 30. Prototipi ipertestuali <ul><li>Schermate cliccabili permettono di “navigare” nell’interfaccia, simulando l’interazione </li></ul>Esempi : PowerPoint, Hypercard in qualche caso: HTML, [Flash] R.Polillo - 2009
    31. 31. Prototipi PowerPoint (I) <ul><li>PowerPoint può essere usato per realizzare facilmente prototipo navigabili: </li></ul><ul><ul><li>Ogni schermata è una slide Power Point </li></ul></ul><ul><ul><li>Su ogni schermata vengono realizzate aree sensibili, con link ad altre slide </li></ul></ul><ul><ul><li>Cliccando sulle aree sensibili, l’utente “naviga” nell’interfaccia </li></ul></ul><ul><li>NB: le slide devono contenere solo l’interfaccia, senza commenti o indicazioni </li></ul>R.Polillo - 2009
    32. 32. Prototipi PowerPoint (II) <ul><li>VANTAGGI: </li></ul><ul><li>Facili da realizzare e da modificare </li></ul><ul><li>La interattività non richiede un mago di Oz </li></ul><ul><li>Gli aspetti grafici possono essere definiti “abbastanza” bene </li></ul><ul><li>SVANTAGGI: </li></ul><ul><li>Modello di interazione limitato (“point & click”) </li></ul><ul><li>Limiti pratici alla complessità dell’ipertesto (oltre un centinaio di slide diventa poco gestibile) </li></ul>R.Polillo - 2009
    33. 33. Esempi (vedi allegati) <ul><li>Applicazioni per cellulari: </li></ul><ul><ul><li>Controllo elettrodomestici </li></ul></ul><ul><ul><li>Schedine </li></ul></ul>R.Polillo - 2009
    34. 34. Prototipi HTML <ul><li>Vanno bene per i siti web, indipendentemente dalla tecnologia utilizzata per la realizzazione del sito finale </li></ul><ul><li>Meglio non utilizzarli per altre applicazioni: </li></ul><ul><ul><li>gli aspetti grafici sono poco controllabili (a basso costo) </li></ul></ul><ul><ul><li>lo strumento usato tende a influenzare le scelte di design </li></ul></ul>R.Polillo - 2009
    35. 35. Esempio: Prototipo di navigazione per un sito web <ul><li>Obiettivo : permettere di sperimentare e mettere a punto la struttura di navigazione di un sito web </li></ul><ul><li>Tecnologia : prototipo a bassa fedeltà, usa e getta, in HTML </li></ul><ul><li>Esempi: </li></ul><ul><li>Demo sito di un negozio di chitarre </li></ul><ul><li>Demo sito di un teatro </li></ul><ul><li>Demo sito di una pizzeria </li></ul>R.Polillo - 2009
    36. 36. Suggerimenti <ul><li>E’ bene evitare strumenti di prototipazione che: </li></ul><ul><ul><li>pongano difficoltà tecniche nella realizzazione (devo pensare al prototipo, non allo strumento) </li></ul></ul><ul><ul><li>possano influenzare, con le loro peculiarità, il design del sistema prototipato (“questo non riesco a farlo, quindi cambio il design”) </li></ul></ul><ul><li>Una soluzione spesso molto valida: </li></ul><ul><li>Prototipo di carta poi prototipo PowerPoint </li></ul>R.Polillo - 2009
    37. 37. Esempio R.Polillo - 2009 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
    38. 38. R.Polillo - 2009 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
    39. 39. Esempio (segue) R.Polillo - 2009 HELP Elettrodomestici Seleziona uno dei link o delle icone sottostanti per accedere alle funzionalità: Torna al menù principale Lavatrice Frigorifero Lavastoviglie
    40. 40. Esempio (segue) R.Polillo - 2009 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
    41. 41. Esempio (segue) R.Polillo - 2009 HELP Lavatrice dettagli generale 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

    ×