Costruzione di Interfacce Lezione 4 Nozioni di geometria per la grafica [email protected] cignoni.
Grafica ed interfacce per la comunicazione - paolavocca.it · Grafica ed interfacce per la...
20
Grafica ed interfacce per la comunicazione Scienze della Comunicazione Paola Vocca Lezione 7: Progetto di esame Lucidi tradotti e adattati da materiale presente su http://www.hcibook.com/e3/resources/ e http://www.robertopolillo.it
Transcript of Grafica ed interfacce per la comunicazione - paolavocca.it · Grafica ed interfacce per la...
Grafica ed interfacce per la comunicazione
Scienze della Comunicazione
Paola Vocca
Lezione 7: Progetto di esame
Lucidi tradotti e adattati da materiale presente su
http://www.hcibook.com/e3/resources/ e
http://www.robertopolillo.it
Scopo di questa lezione
• Descrivere gli obiettivi e le modalità di realizzazione del
progetto d’esame
Grafica ed interfacce per la comunicazione A.A. 2014/15 2
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. 2014/15 3
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. 2014/15 4
Il vostro progetto: deliverables
Grafica ed interfacce per la comunicazione A.A. 2014/15 5
Fasi del progetto
Grafica ed interfacce per la comunicazione A.A. 2014/15 6
Documento dei requisiti
Video scenario
Prototipo di carta 1
prototipo dell’interfacci
a in GIMP
Prototipo navigabile
(POPApps o Kompozer)
2 Prototipo finale
Test usabilità (con video)
3
Revisione
Revisione
Esame
Navigazione a posto
Alle revisioni devono partecipare tutti i membri del gruppo
Il progetto: prima fase
Grafica ed interfacce per la comunicazione A.A. 2014/15 7
Documento dei requisiti
Video scenario
Prototipo di carta 1
Revisione
Alle revisioni devono partecipare tutti i membri del gruppo
Slides in power point (template)
Video max 3 min Progetto su carta dell’interfaccia
Documento dei requisiti e progettazione
Grafica ed interfacce per la comunicazione A.A. 2014/15 8
• Parte Prima: Generalità o Nome del progetto o Team di lavoro o Descrizione generale del prodotto o Obiettivi del prodotto o Utenti o Contesti d’uso o Scenari d’uso o Fattibilità tecnologica o Descrizione di una possibile evoluzione temporale del
progetto
• Parte Seconda: Gannt o Descrizione della tempistica e delle diverse attività
necessarie per la realizzazione del progetto
• Parte Terza: Posizionamento o Situazione attuale o Analisi della concorrenza o Posizionamento competitivo (identificare i punti di
forza e debolezza del progetto in relazione alla concorrenza)
Documento dei requisiti e progettazione
• 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. 2014/15 9
• Parte Quarta: Requisiti o Casi d’uso o Analisi dei compiti o Requisiti per la esperienza utente o Altri requisiti
• Parte Quarta: Progettazione o Concept grafico o Struttura del sito/app o Scenari d’uso
Riferimenti
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é.
• Utilizzare Moviestrom per la realizzazione.
• Non interessa la qualità tecnica. Ciò che importa è la
chiara illustrazione del concept del prodotto
Grafica ed interfacce per la comunicazione A.A. 2014/15 10
Esempi di video scenario
• Con Con prototipo di carta (3’) Applicazione per PDA per incontrare amici all’Università http://it.youtube.com/watch?v=c4-A-9hGn0U
• Order processing (2') https://www.youtube.com/watch?v=k0AiPRtcD5w
• Videoconferencing col ristorante in macchina (2') https://www.youtube.com/watch?v=ZSMPKIe578w
• Orologio intelligente (2') http://www.youtube.com/watch?v=lJLI4Aw897U
• Motorola new life forms (3,4') https://www.youtube.com/watch?v=78QBVEJUqXs
• Lampade programmabili (4') https://www.youtube.com/watch?v=Vf0nLCDcTDc
• Recharge your health in car (1') (con disegni) https://www.youtube.com/watch?v=1vYQFt_7OjI
Grafica ed interfacce per la comunicazione A.A. 2014/15 11
Prototipo di carta
• Schermate disegnate grossolanamente su foglietti di
carta
Grafica ed interfacce per la comunicazione A.A. 2014/15 12
Il progetto: seconda fase
Grafica ed interfacce per la comunicazione A.A. 2014/15 13
Documento dei requisiti
Video scenario
Prototipo di carta 1
prototipo dell’interfacci
a in GIMP
Prototipo navigabile
(POPApps o Kompozer)
2
Revisione
Revisione
Navigazione a posto
Alle revisioni devono partecipare tutti i membri del gruppo
Slides in power point (template)
Video max 3 min Progetto su carta dell’interfaccia
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. 2014/15 14
Grafica ed interfacce per la comunicazione A.A. 2014/15 15
Il progetto: terza fase
Grafica ed interfacce per la comunicazione A.A. 2014/15 16
Documento dei requisiti
Video scenario
Prototipo di carta 1
prototipo dell’interfacci
a in GIMP
Prototipo navigabile
(POPApps o Kompozer)
2
Revisione
Revisione
Navigazione a posto
Alle revisioni devono partecipare tutti i membri del gruppo
Slides in power point (template)
Video max 3 min Progetto su carta dell’interfaccia
Prototipo finale
Test usabilità (con video)
3 Esame
Report + video prototipo
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. 2014/15 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. 2014/15 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. 2014/15 19
Ed ora…
• Formazione dei gruppi
• Discussione delle proposte
• Buon lavoro!
Grafica ed interfacce per la comunicazione A.A. 2014/15 20
