Grafica ed Interfacce per la Comunicazione – A.A. 2014/15

Obiettivi

Il corso consentirà di ottenere conoscenze riguardo alle principali tecniche sviluppate in relazione alle tematiche d’interazione persona-macchina. Lo studente riceverà nozioni relative alle principali tecniche di analisi dell’usabilità e dell’accessibilità di interfacce utente, alla progettazione del dialogo e di sistemi interattivi in generale e alla modellazione di sistemi.

Al termine del corso, lo studente sarà in grado di definire i passi necessari per ideare, progettare e valutare interfacce utente in relazione alla loro usabilità, a costruire un modello degli utenti di un’applicazione interattiva, considerando diverse piattaforme di utilizzo, inclusi dispositivi mobili e browser Web.

Prerequisiti

• Conoscenze di base della struttura e del funzionamento di un personal computer, delle reti informatiche, impatto di queste tecnologie sulla società e la vita di tutti i giorni.
• Funzionamento di Internet e le tecniche di costruzione di siti Web.
• Realizzazione di pagine nei linguaggi HTML e Javascript.
• Cenni di elaborazione lato server.

Articolazione

Sono previste lezioni frontali ed esercitazioni di laboratorio. Nelle lezioni saranno presentate le nozioni strettamente necessarie all’uso dei prodotti informatici (cosa si può fare e perché). Nelle esercitazioni di laboratorio gli studenti potranno apprendere la tecnica fine dell’uso dei prodotti (come si può fare). Nei limiti delle possibilità ed in rapporto al numero degli studenti frequentanti si cercherà di mantyenere il rapporto uno ad uno studente-calcolatore.

Frequenza

Per questo insegnamento la frequenza non è obbligatoria ma fortemente consigliata. Non saranno fatte distinzioni in sede di esame tra studenti frequentanti e non frequentanti. Tuttavia, gli studenti che non frequentano devono prevedere di dedicare del tempo individuale per le indispensabili esercitazioni pratiche, o con un proprio calcolatore, o nelle aule informatiche del Dipartimento, in presenza del Docente e compatibilmente con le attività didattiche.

Modalità d’esame

La prova d’esame consiste nella discussione e valutazione di un progetto realizzato dallo studente. Il progetto dovrà essere corredato di una tesina con la documentazione del progetto e la valutazione di usabilità. La èrova orale comprende anche una valutazione delle conoscenze acquisite durante il corso

Scricare il programma in formato .pdf

[wpfilebase tag=file id=95 tpl=download-button /]

Argomenti

Il corso affronta i problemi relativi alla progettazione, analisi e realizzazione di sistemi interattivi usabili, dal punto di vista metodologico. In particolare si considereranno le seguenti tematiche:

• un panorama generale delle questioni che influenzano l’interazione fra umani e computer;
• l’importanza dell’interfaccia utente;
• l’esistenza di diverse classi di utenti e di applicazioni, e il loro impatto sul progetto di interfacce utente;
• la necessità del lavoro di gruppo, e della collaborazione di figure con competenze diverse nel progetto di sistemi interattivi;
• un approccio alla progettazione di interfacce guidata da modelli;
• la rilevanza della valutazione dell’usabilità del sistema,
• regole per l’accessibilità;
• ambienti di prototipazione e progettazione grafica (si utilizzerà un sistema per la grafica)

Programma dettagliato

Interazione, interfaccia persona-macchina, Ergonomia Complessità dell’interazione.

Problemi relativi all’HCI. Comoscere ilWEb: Le radici del Web: Ipertesti; le reti e i browser. Architetture, indirizzi Web.

Interfacce Persona-macchina. Competenze necessarie per lo sviluppo di un sistema Web. Separazione contenuto presentazione e funzionalità. Necessità degli standard di progettazione. Definizione del modello d’interazione. Interfaccia. Esempi di nterfacce Livelli di complessità dell’interazione.

Usabilità: definizione, esempi, Affordance e feedback. Definizione di usabilità. Misure di valutazione dell’usabilità Learnability e memorabilility. Manuali d’uso. Progettazione Human centered. Progettazione vs realizzazione. Use cases.

Progettazione utente: progettazione dell’interazione, casi d’uso, scenari, attori, Accessibilità, Esempi di progettazione.

Progettazione interefacce web: legge di Fitts, navigazione, accessibilità, tipologia di interazione, problematiche e specificità, Small World assumption, Oggetti interattivi, Prototipazione.

Valutazione Usabilità: Criteri e metriche Criteri euristici di Nielsen, Norman. Test di usabilità: metodologie ed esempi.

Conoscere l’utente: Attenzione: attenzione selettiva e divisa. Memoria: memoria e breve termine e a lungo termine. Guidelines di progettazione in considerazione dei limiti della memoria e dell’attenzione. La visione Anatomia dell’occhio,La visione Acuità, proprietà della visione, illusioni ottiche.

Progettazione grafica. Caratteristiche: Chiarezza, Discriminabilità, Chiarezza, Concisione, Consistenza, Scopribilità, Leggibilità, Comprensibilità. Minimalismo vs. massimalità. Ruolo delle immagini. Griglie e allineamenti. Percorsi visivi. Teoria della Gestalt. Legge della continuità di direzione, Legge della buona forma, Legge dell’esperienza passata, Legge della vicinanza, Legge della somiglianza, Legge della chiusura. Uso dei colori.

Progettare il testo: font; print font e screen font; Il processo di lettura; Misurare la legibility; allineamenti; Colori e polarità; L’indice Gulpease; Il testo nel web; Leggibilità e readability. Linee guida.

Conoscere L’utente: Il sistema motorio. Feedback, La legge di Fitts, legge esponenziale della pratica,

Progettazione dell’errore e linee guida

Studio di un ambiente grafico e presentazione del progetto d’esame.

1. R. Polillo. Facile da usare. Una moderna introduzione alla ingegneria della usabilità, Milano: Apogeo 2010
2. David Benyon. Progettare l’interazione. Metodi e tecniche per il design di media interattivi, Pearson, 2012.
3. A. Dix, J. Finlay, G. Abowd, R. Beale.Human Computer Interaction, Terza edizione, Prentice Hall, 2004.
4. J. Preece, Y. Rogers, H. Sharp. Interaction Design, Apogeo 2004.
5. Jakob Nielsen. Web Usability, Apogeo, 2000.

• Lezione 0: Presentazione del corso [wpfilebase tag=file id=98 tpl=simple /]
• Lezione 1: Conoscere il web. La nascita di Internet. Html. Reti [wpfilebase tag=file id=101 tpl=simple /]
• Lezione 2: Interazione. Interazione uomo-macchina. Interfacce. Interdisciplinarietà  [wpfilebase tag=file id=102 tpl=simple /]
• Lezione 3: Usabilità. Modello di Norman. Affordamce e Feedback [wpfilebase tag=file id=103 tpl=simple /]
• Lezione 4: Accessibilità. Definizione e requisiti di conformità. Usabilità e accessibilità[wpfilebase tag=file id=108 tpl=simple /]
• Lezione 5: Progettazione Utente. Definizione HCI. casi d’uso. Utenti. Scenari[wpfilebase tag=file id=109 tpl=simple /]
• Esercitazione 1: Progettazione di una app. [wpfilebase tag=file id=110 tpl=simple /]
• Lezione 6: Ingegneria e creatività [wpfilebase tag=file id=117 tpl=simple /]
• Lezione 7: Progetto d’esame [wpfilebase tag=file id=118 tpl=simple /]
• Lezione 8: Interfaccia web e mobile [wpfilebase tag=file id=119 tpl=simple /]
• Lezione 9: Prototipazione [wpfilebase tag=file id=127 tpl=simple /]
• Lezione 10: Valutazione dell’usabilità [wpfilebase tag=file id=128 tpl=simple /]
• Lezione 11: GIMP[wpfilebase tag=file id=129 tpl=simple /]
• Lezione 12: Conoscere l’utente: attenzione e memoria [wpfilebase tag=file id=130 tpl=simple /]
• Lezione 13: Conoscere l’utente: visione [wpfilebase tag=file id=137 tpl=simple /]
• Lezione 14: Progettazione grafica [wpfilebase tag=file id=135 tpl=simple /]
• Lezione 15: GIMP: Creazione di un’interfaccia Web [wpfilebase tag=file id=136 tpl=simple /]
• Lezione 16: Conoscere L’utente: il sistema motorio [wpfilebase tag=file id=141 tpl=simple /]
• Lezione 17: Progettare il testo [wpfilebase tag=file id=142 tpl=simple /]
• Lezione 18: Progettare l’errore [wpfilebase tag=file id=143 tpl=simple /]
• Lezione 19: Linee guida [wpfilebase tag=file id=144 tpl=simple /]
• Lezione 20: Considerazioni sulle Gui per app Android e iPhone [wpfilebase tag=file id=145 tpl=simple /]
• Lezione 21: Progettazione di un’interfaccia di una App lettore musicale in GIMP [wpfilebase tag=file id=146 tpl=simple /]

Descrizione del progetto, modello per la descrizione dei requisiti e analisi dell’usabilità[wpfilebase tag=file id=120 tpl=simple /]