Grafica ed interfacce per la comunicazione Scienze della Comunicazione Paola Vocca Lezione 9: Prototipazione Lucidi tradotti e adattati da materiale presente su http://www.hcibook.com/e3/resources/ e http://www.robertopolillo.it
Scopo di questa lezione Discutere il processo di progettazione e sviluppo di sistemi interattivi per prototipi successivi, e indicare alcune semplici tecniche di prototipazione Grafica ed interfacce per la comunicazione A.A. 2014/15 2
Il modello tradizionale di progettazione e sviluppo Requisiti Analisi e progettazione Modello a cascata : dopo una decisione, non si torna indietro Realizzazione Test Rilascio Grafica ed interfacce per la comunicazione A.A. 2013/14 3
Modello tradizionale: pro e contro 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 il modello è concettualmente sbagliato, e non funziona: Grafica ed interfacce per la comunicazione A.A. 2013/14 4
Il modello corretto (iterativo) Inizio Requisiti Sviluppo per prototipi successivi NOTA BENE: anche i requisiti evolvono durante il processo! Progettazione Test Rilascio Prototipazione Grafica ed interfacce per la comunicazione A.A. 2013/14 5
Che cos è un prototipo Proto-typos : primo modello o Modello approssimato o parziale sistema da sviluppare, realizzato per valutarne caratteristiche o Se necessario, si può correggere il tiro A representation of all or part of a product or system that, although limited in some way, can be used for evaluation (ISO 13407) Grafica ed interfacce per la comunicazione A.A. 2013/14 6
Esempio Grafica ed interfacce per la comunicazione A.A. 2013/14 7
Esempio Prototipo di cartone di iphone Grafica ed interfacce per la comunicazione A.A. 2013/14 8
Perché creare prototipi? Rapido feedback su progetto o effettuazione test iniziali di convalida con utente Sperimentare design alternativi Migliorare progetto prima e durante la realizzazione Test con utente parte processo di progettazione Grafica ed interfacce per la comunicazione A.A. 2013/14 9
ISO 13407: Human-centred design process for interactive systems il sistema soddisfa i requisiti dell utente e dell organizzazione Identifica le necessità per la progettazione centrata sull utente Comprendi e specifica il contesto d uso Valuta il progetto rispetto ai requisiti Specifica i requisiti dell utente e dell organizzazione Produci soluzioni di progetto Grafica ed interfacce per la comunicazione A.A. 2013/14 10
I ruoli possibili dell utente il sistema soddisfa i requisiti dell utente e dell organizzazione Identifica le necessità per la progettazione centrata sull utente Comprendi e specifica il contesto d uso Valuta il progetto rispetto ai requisiti Specifica i requisiti dell utente e dell organizzazione Produci soluzioni di progetto Grafica ed interfacce per la comunicazione A.A. 2013/14 11
Modello iterativo: pro e contro 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) Grafica ed interfacce per la comunicazione A.A. 2013/14 12
Esempio: Modello di progettazione di siti web Documento dei requisiti Piano di qualità Prototipo di navigazione Prototipo di comunicazione Prototipo funzionale Prototipo editoriale Sistema on line 1 2 3 4 5 6 7 Definizione dei requisiti Avviamento del progetto Web design Visual design Sviluppo Redazione dei contenuti Pubblicazione Gestione del sito Da R.Polillo, Plasmare il Web, Apogeo, 2006 Grafica ed interfacce per la comunicazione A.A. 2013/14 13
Classificazione dei prototipi: Fedeltà: - bassa fedeltà: assomiglia alla lontana al prodotto finale - alta fedeltà: assomiglia in tutti gli aspetti al prodotto finale Tempo di vita: - usa e getta ( throw away ): realizzato con tecnolgia provvisoria, il suo arco di vita è limitato - evolutivo: realizzato con la tecnologia finale, e viene fatto evolvere fino al prodotto finale Completezza funzionale: - orizzontale: fornisce tutte le funzioni del prodotto finale, anche se in versione limitata - verticale: fornisce solo alcune funzioni, realizzate in dettaglio Grafica ed interfacce per la comunicazione A.A. 2013/14 14
I prototipi iniziali Sono molto utili nelle prime fasi del progetto, per esplorare e valutare diverse soluzioni possibili, a costi contenuti Sono molto spesso del tipo usa e getta, realizzati anche a costi molto bassi Possono essere usati vari strumenti, di solito molto semplici, per es.: carta, HTML, PowerPoint Grafica ed interfacce per la comunicazione A.A. 2013/14 17
Prototipi di carta (I) L interfaccia viene disegnata a bassa fedeltà su cartoncini mobili Grafica ed interfacce per la comunicazione A.A. 2013/14 18
Grafica ed interfacce per la comunicazione A.A. 2013/14 19
Video Prototipi di carta (2 )http://it.youtube.com/watch?v=grv2szurpv 0 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 Grafica ed interfacce per la comunicazione A.A. 2013/14 20
Prototipi di carta VANTAGGI: Velocità e basso costo di realizzazione Permettono di provare l interazione in modo semplice Basso costo delle modifiche SVANTAGGI: L interazione è lenta e quindi innaturale, perché simulata Fedeltà molto bassa per gli aspetti di layout grafico Grafica ed interfacce per la comunicazione A.A. 2013/14 21
Prototipi PowerPoint PowerPoint può essere usato per realizzare facilmente prototipo navigabili: o Ogni schermata è una slide Power Point o Su ogni schermata vengono realizzate aree sensibili, con link ad altre slide o Cliccando sulle aree sensibili, l utente naviga nell interfaccia NB: le slide devono contenere solo l interfaccia, senza commenti o indicazioni Grafica ed interfacce per la comunicazione A.A. 2013/14 23
Prototipi PowerPoint VANTAGGI: Facili da realizzare e da modificare Gestione semplice dell interattività 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) Grafica ed interfacce per la comunicazione A.A. 2013/14 24
Esempio Login Benvenuto nel sistema di controllo degli elettrodomestici. Ti preghiamo di autenticarti, inserendo il tuo nome utente e la password. NOME UTENTE PASSWORD michele ******** OK HELP Grafica ed interfacce per la comunicazione A.A. 2013/14 25
Esempio (segue) Elettrodomestici Seleziona uno dei link o delle icone sottostanti per accedere alle funzionalità: Frigorifero Lavastoviglie Lavatrice HELP Torna al menù principale Grafica ed interfacce per la comunicazione A.A. 2013/14 26
Esempio (segue) Lavatrice generale dettagli Programma di lavaggio delicato a bassa temperatura in corso Esecuzione lavoro (interrotto) 1 10% completato (in pausa) Riprendi HELP Avvia Torna al menù elettrodomestici Grafica ed interfacce per la comunicazione A.A. 2013/14 27
Esempio (segue) Lavatrice generale dettagli Produttore: Ariston Modello: Lavasciuga 2000 2 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 HELP Grafica ed interfacce per la comunicazione A.A. 2013/14 28
Prototipi HTML Vanno bene per i siti web, indipendentemente dalla tecnologia utilizzata per la realizzazione del sito finale Meglio non utilizzarli per altre applicazioni: o gli aspetti grafici sono poco controllabili (a basso costo) o lo strumento usato tende a influenzare le scelte di design Grafica ed interfacce per la comunicazione A.A. 2013/14 29
Grafica Grafica ed interfacce ed per per la comunicazione la A.A. A.A. 2013/14 2012/13 30
Grafica ed interfacce per la comunicazione A.A. 2013/14 31