Grafica ed interfacce per la comunicazione Scienze della Comunicazione

Transcript

1 Grafica ed interfacce per la comunicazione Scienze della Comunicazione Paola Vocca Lezione 9: Progetto di esame Lucidi tradotti e adattati da materiale presente su e

2 Scopo di questa lezione Descrivere gli obiettivi e le modalità di realizzazione del progetto d esame Grafica ed interfacce per la comunicazione A.A. 2013/14 2

3 Il progetto Progettazione e realizzazione di un prototipo di: o Un applicazione mobile usabile per smartphone o tablet o di un sito web Proposto dagli studenti e approvato dal docente o Progettazione centrata sull utente, processo di progettazione o In gruppo, ripartendosi i compiti Grafica ed interfacce per la comunicazione A.A. 2013/14 3

4 Scelta del progetto Scegliete un tema che: o Conoscete bene o Sia semplice o Sia tecnologicamente fattibile o Abbia caratteristiche innovative o Anche un tema in apparenza banale può portare ad un progetto innovativo. Grafica ed interfacce per la comunicazione A.A. 2013/14 4

5 Il vostro progetto: deliverables Grafica ed interfacce per la comunicazione A.A. 2013/14 5

6 Fasi del progetto Alle revisioni devono partecipare tutti i membri del gruppo Revisione Documento dei requisiti Video scenario Prototipo di carta 1 prototipo dell interfacci a in GIMP Navigazione a posto Prototipo navigabile (POPApps o Kompozer) Esame 3 Test usabilità (con video) Prototipo finale 2 Revisione Grafica ed interfacce per la comunicazione A.A. 2013/14 6

7 Il progetto: prima fase Alle revisioni devono partecipare tutti i membri del gruppo Revisione Documento dei requisiti Video scenario Prototipo di carta 1 Slides in power point (template) Video max 3 min Progetto su carta dell interfaccia Grafica ed interfacce per la comunicazione A.A. 2013/14 7

8 Documento dei requisiti e progettazione 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 Parte Quarta: Requisiti Concept grafico Struttura del sito/app Scenari d uso Riferimenti Sintetico ma completo, ben strutturato Userete un template PowerPoint semplice, da personalizzare Valutato su forma e contenuti Grafica ed interfacce per la comunicazione A.A. 2013/14 8

9 Il video scenario Video di max 3 minuti che mostri tipici casi d uso del sistema, collocati nel contesto d uso Non deve illustrare in dettaglio l interfaccia utente, ma il «concept» generale: quando, dove si usa e perché. Non interessa la qualità tecnica (usate il telefonino). Ciò che importa è la chiara illustrazione del concept del prodotto Grafica ed interfacce per la comunicazione A.A. 2013/14 9

10 Esempi di video scenario Con Con prototipo di carta (3 ) Applicazione per PDA per incontrare amici all Università Order processing (2') Videoconferencing col ristorante in macchina (2') Orologio intelligente (2') Motorola new life forms (3,4') Lampade programmabili (4') Recharge your health in car (1') (con disegni) Grafica ed interfacce per la comunicazione A.A. 2013/14 10

11 Prototipo di carta Schermate disegnate grossolanamente su foglietti di carta Grafica ed interfacce per la comunicazione A.A. 2013/14 11

12 Il progetto: seconda fase Alle revisioni devono partecipare tutti i membri del gruppo Revisione Documento dei requisiti Video scenario Prototipo di carta 1 prototipo dell interfacci a in GIMP Slides in power point (template) Video max 3 min Progetto su carta dell interfaccia Navigazione a posto Prototipo navigabile (POPApps o Kompozer) 2 Revisione Grafica ed interfacce per la comunicazione A.A. 2013/14 12

13 Seconda fase del progetto Realizzazione delle singole interfacce in GIMP Realizzazione della navigazione in POP (per le apps) in Kompozer per i siti web Esecuzione simulata con un paio di utenti SCOPO: MESSA A PUNTO DELLLA STRUTTURA DI NAVIGAZIONE Grafica ed interfacce per la comunicazione A.A. 2013/14 13

14 Grafica ed interfacce per la comunicazione A.A. 2013/14 14

15 Il progetto: terza fase Alle revisioni devono partecipare tutti i membri del gruppo Revisione Documento dei requisiti Video scenario Prototipo di carta 1 prototipo dell interfacci a in GIMP Slides in power point (template) Video max 3 min Progetto su carta dell interfaccia Navigazione a posto Prototipo navigabile (POPApps o Kompozer) Esame 3 Test usabilità (con video) Prototipo finale 2 Revisione Report + video prototipo Grafica ed interfacce per la comunicazione A.A. 2013/14 15

16 Il test di usabilità Appunti della lezione 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 Grafica ed interfacce per la comunicazione A.A. 2013/14 16

17 Il rapporto di test: indice di massima Obiettivi del test Metodologia usata o Utenti o Compiti/scenari o Strumentazione o Modalità di svolgimento Risultati del test o Analitici, con le misure Raccomandazioni finali o Analitiche, con livelli di priorità Allegati: o Eventuali questionari utilizzati Grafica ed interfacce per la comunicazione A.A. 2013/14 17

18 Suggerimenti Tenete sempre presenti gli obiettivi del prototipo, e concentratevi sugli aspetti importanti, lasciando perdere i dettagli irrilevanti (es. messaggi di errore, login, ) Non stiamo realizzando il prodotto finale, ma un prototipo per definire e verificare l'interfaccia e la navigazione: la elaborazione dei dati non ci interessa: non perdete tempo su questi Grafica ed interfacce per la comunicazione A.A. 2013/14 18

19 Ed ora Formazione dei gruppi Discussione delle proposte Buon lavoro! Grafica ed interfacce per la comunicazione A.A. 2013/14 19