fabio.paterno at isti.cnr.it
Orario: Lunedì 12.00 - 13.30 - Mercoledì 12.00 - 13.30
Le lezioni si svolgeranno in presenza, verranno anche trasmesse in streaming e registrate, ma si consiglia vivamente di seguirle in presenza.
Anno Accademico 2023 - 2024 - I Semestre
Laurea Magistrale in Informatica Umanistica ed Informatica - Università di Pisa
Lo scopo del corso è di apprendere i concetti di base ed i metodi principali per progettare e valutare interfacce utenti di sistemi informatici, anche quelli che utilizzano tecniche di intelligenza artificiale, caratterizzate da usabilità, accessibilità, ed una buona esperienza utente. Verranno considerati anche vari strumenti automatici in grado di supportare i metodi considerati. Alla fine del corso lo studente dovrebbe essere in grado di progettare e valutare autonomamente sistemi interattivi al fine di ottenere applicazioni con buona usabilità e capaci di adattarsi al contesto di uso.
The purpose of the course is to learn the basic concepts and main methods to design and evaluate user interfaces of informatic systems, also those that adopt artificial intelligence techniques, characterised by usability, accessibility, and good user experience. Automatic tools to support the methodologies presented will be considered as well. The student who successfully completes the course will have the ability to design and evaluate interactive systems in order to obtain applications with good usability and able to adapt to the context of use.
Nella prima parte del corso si inizierà con esempi di interfacce difficili da usare, per introdurre i concetti e gli aspetti che si devono tenere presente quando si progettano interfacce utenti. Poi, si passerà a vedere come usare questi concetti in concreto nella progettazione ed implementazione dei dialoghi e le presentazioni forniti da applicazioni interattive, con esempi ed esercizi. Si fornirà particolare attenzione alla progettazione di siti web, interfacce adattabili ed intelligenti, applicazioni multimodali, interfacce per dispositivi mobili, ed ad ambienti che permettono a persone senza esperienza di programmazione di creare automazioni con oggetti intelligenti. La seconda parte del corso verrà dedicata a come valutare l’usabilità di applicazioni interattive considerando vari metodi, da quelli basati su ispezione dell’interfaccia seguendo criteri predefiniti a quelli che si basano su informazioni empiriche, includendo tecniche remote, dove utenti e valutatori lavorano in siti e/o tempi differenti. Si finirà il corso considerando anche l'accessibilità, come evolvono le tecnologie per supportarla, ed i relativi metodi e criteri di valutazione.
In the first part of the course, examples of user interfaces difficult to use will be given, followed by basic concepts and aspects to take into account when designing user interfaces are introduced. Then, the focus will shift on how to use such concepts in the concrete design and implementation of dialogues and presentations provided by interactive applications, with additional examples and exercises. Particular attention will be paid on the design of web sites, adaptable and intelligent user interfaces, multimodal applications, interfaces for mobile devices, and environments that allow people without programming experience to create automations with smart objects. The second part of the course will be dedicated to usability evaluation of interactive applications considering various methods ranging from interface inspections based on predefined criteria to the methods that are based on empirical information, including remote techniques where users and evaluators are distant in space and/or time. Lastly, attention will be paid to accessibility, how technologies supporting it are evolving, and the associated evaluation methods and criteria.
Illustrazione struttura del Corso. Introduzione allo Human-Computer Interaction. Concetti di base. Le tappe storiche principali nell'interazione con i computer. Evoluzione delle tecnologie e degli utenti. Modello di Norman dell'Interazione. Concetti di base di usabilità ed accessibilità. Importanza della usabilità. Esempi.
Lettura: Interazione Uomo-Computer: Un Introduzione, Fabio Paternò, Mondo Digitale, N.4, Dicembre 2004.
Criteri per il design. Tecniche orientate alla comunicazione. Affordance. Metafore. Material Design. Regolarizzare gli elementi per facilitare la scansione visiva. Le variabili grafiche. Associazione dati / attributi grafici. I colori ed il loro uso nelle interfacce utenti. Come organizzare una struttura visuale. Errori comuni (frammentazione, effetti inutili, spreco di spazio ...). I principi della Gestalt nella percezione delle interfacce grafiche. Esempi positivi e negativi. Supporto dei CSS per il visual design.
Rappresentare informazione. I task principali nell'accesso a grandi quantità di informazioni. Tipi di dati e relative rappresentazioni. Accesso e navigazione tra i dati. Overview+Details. Focus+Context. Fisheye. Semantic Zoom. Magic Lens. Tree Maps, Layout radiali. Tecniche basate su suggerimenti. Applicazioni ai social networks.
Progettazione centrata sull'utente. Requisiti funzionali e non. Interviste. Questionari. Scenari. Use Cases. Personas. Card Sorting. I prototipi: motivazione e classificazione. Mock-up. Figma. Wireframes. Analisi dei compiti.
Modellazione delle attività logiche da supportare. ConcurTaskTrees. Esempi. Tool per Progettare ed Analizzare Modelli di Task. Dalla Progettazione Concettuale alla Progettazione Concreta. Come usare modelli dei task per la progettazione delle interfacce utenti. Possibili livelli di astrazione nella descrizione di sistemi interattivi. La semantica di alcuni tipici oggetti di interazione. HTML 5. I possibili eventi e la loro gestione. Altri aspetti di progettazione concreta.
Progettazione applicazione interattiva: Scrittura scenari, Modellazione dei task con CTTE, Creazione Mock-up con Figma
Video: Modelling tasks with ConcurTaskTrees Roberto Ristuccia - Video Come usare il CTTE
Aspetti di progettazione e comunicazione: Strategia comunicativa, La persuasione tramite interfacce utenti, Stimolare emozioni tramite il Web, La User Experience, Home Page e progettazione concreta. Aspetti tecnologici: I content management systems, Il DOM (Document Object Model), Gli script Ajax e l’usabilità, Relazioni tra task, interfacce utenti e tipi di dispositivi
Lettura: Design Criteria for Stimulating Emotions in Web Applications, Mori G. Paternò F. Furci F. - INTERACT 2015, LNCS Volume 9296, pp 165-182, Springer
Motivazioni. Dimensioni dell'adattamento. Adattabilità ed adattività. Modelli di Utente. Tecniche per l'adattamento della presentazione, della navigazione e dei contenuti. Responsive Design. Media Queries. Bootstrap. Layout multi-dispositivi. Esempi di interfacce adattabili e/o adattive. Sistemi di raccomandazione. Collaborative filtering
Definizione e Motivazioni. Come interagiscono con il sistema cognitivo umano. Interazione naturale. Differenze interfacce grafiche ed interfacce multimodali. Classificazione multimodalità in base ad aspetti temporali ed interpretazione. Come combinare le modalità: Complementarietà, Assegnamento, Ridondanza, Equivalenza. Interfacce Vocali. Web Speech API. Assistenti Personali Vocali. Alexa. Agenti Conversazionali: gestione intenti ed entità. Esempi. Agenti conversazionali basati su large language models. Interfacce audio non vocali (auditory icons e earcons). Interfacce Aptiche (Cutanee e Cinestetiche). Interfacce Gestuali. Schermi multi-tocco. Feedback vibrotattile. Brain-computer interaction. Adattamento a parametri fisiologici.
L'accesso Web tramite smartphones. Interazione basata sul tocco. Differenze tra interazione basata su mouse e su tocco. Problemi di usabilità negli smartphones. I Sensori nei Dispositivi Mobili. Le Applicazioni dipendenti dal Contesto di Uso. Gli smartwatches. Interfacce Utenti Multi-dispositivi. Interfacce Utenti Distribuite. Interfacce Utenti Migratorie
L'Internet delle Cose. End-user development: Definizione e motivazioni. Possibili Approcci. Relazioni con l'Intelligenza Artificiale. Programmazione Trigger-Action. Differenza tra eventi e condizioni. IFTTT. Strumenti Visuali per la creazione di automazioni. Agenti conversazionali per le automazioni. Creazione tramite smartphone con tecniche di realtà aumentata
Video: F.Paternò, Quando l'Intelligenza Artificiale non Basta , Seminario di Cultura Digitale, Ottobre 2020
Introduzione. Motivazioni. Concetti di base. Caratteristiche a seconda del dominio applicativo. User Experience. I possibili tipi di approcci alla valutazione dell'usabilità. Come organizzare un test di utente. Aspetti da considerare. Le possibili metriche nell'usabilità. I laboratori di usabilità. Wizard of Oz. Fattori sperimentali. Variabili dipendenti ed indipendenti in un test di utente. Partecipazione utenti between-subjects e within-subjects, Think Aloud. Analisi dei dati (correlazione tra variabili, intervallo di confidenza). Statistica descrittiva e statistica inferenziale.
Lettura: Capitolo 6 in Gamberini, Chittaro, Paternò (eds.), Human-Computer Interaction - I fondamenti dell'interazione tra persone e tecnologie 2012, ISBN 9788871927824.
Lettura: Chapter 2 in T.Tullis, B.Albert, Measuring the User Experience , Morgan Kaufmann 2013
GOMS/KLM. La legge di Fitts, Tecniche basate su feedback dell'utente: interviste, questionari, focus group. Thematic Analysis. Scale di Likert e Differenziale Semantico. Google Forms. System Usability Scale (SUS). NASA TLX. PANAS. User Engagement Scale. Caratteristiche della valutazione analitica. Valutazione euristica. Dimensioni Cognitive (Cognitive Dimensions) Cammini cognitivi (Cognitive Walkthrough). Guidelines. Esempi di applicazione e esercizi. Criteri per la scelta del metodo di valutazione
Lettura: Capitolo 6 in Gamberini, Chittaro, Paternò (eds.), Human-Computer Interaction - I fondamenti dell'interazione tra persone e tecnologie 2012, ISBN 9788871927824.
Motivazioni e possibili approcci. Analisi dei Video, Valutazione Remota dell'Usabilità, Sistemi di Logging, Analisi dei log. Bad Usability Smells. Sistemi di Eye Tracking. Uso di parametri fisiologici
Accessibilità. Tipologie di Disabilità. Tecnologie Assistive. Screen Readers. Esempi di problemi con interazione tramite screen readers. La situazione normativa italiana. Evoluzioni nelle Lineeguida per l'Accessibilità. Le WCAG 2.1. WAI/ARIA. I validatori di lineeguida. MAUVE++.
L'esame viene dato in modo differente a seconda se si è frequentato il corso o no. Per frequentante si intende uno studente che è presente in modo continuo alle lezioni, con partecipazione attiva, e che svolge le esercitazioni che vengono proposte durante il corso in modo sufficiente. Le esercitazioni corrette vanno consegnate al docente entro l'esercitazione successiva. In questo caso l'esame consiste in un orale sugli argomenti trattati durante il corso
Nel caso di studente non frequentante al posto delle esercitazioni va fatto un progetto. Il tema del progetto va concordato almeno un mese prima, una bozza del progetto va mostrata almeno 15 giorni prima dell’esame. E' fondamentale studiare prima il materiale del corso eppoi fare il progetto, perché lo scopo del progetto è di applicare i concetti presentati nel corso ad uno specifico caso di studio. L'argomento del progetto non può essere un semplice sito Web per sistema desktop. Lo scopo del progetto è di mostrare di saper applicare i concetti discussi a lezione, quindi i progetti possono essere o un applicazione cross-device (accedibile tramite sistema desktop e mobile in modo coordinato) od un applicazione multimodale (che usa sia grafica che voce per l'interazione) od un applicazione per dispositivi mobili dipendente dal contesto od una applicazione che usa tecniche di information visualization avanzate od un'applicazione che è in grado di interagire con dei sensori e degli oggetti
Il progetto deve essere accompagnato da una relazione che deve spiegare le scelte progettuali fatte da parte dello studente secondo i vari aspetti visti a lezione. Essa deve contenere le seguenti informazioni: obiettivi; applicazioni simili; scenari d'uso, analisi dei compiti, spiegazioni delle scelte progettuali e dei criteri applicati per supportare i compiti identificati, dettagli su come si è progettato la presentazione, la navigazione ed i contenuti dell'interfaccia e le caratteristiche dei dispositivi per i quali è stata progettata; se vi sono livelli di adattabilità od adattività (opzionale); se vi sono aspetti di multimodalità o multimedialità (opzionale); tecniche di implementazione usate; valutazione dell'usabilità (spiegare il metodo, il perchè della scelta del metodo, i risultati). Ricordarsi che per fare un progetto è necessario fare un minimo di back-end, perché se non si salva qualche dato l’applicazione rischia di diventare alquanto banale.
Progetto e relazione devono essere inviate al docente almeno una settimana prima dell'orale, che verterà sul progetto e sugli argomenti trattati durante il corso.
Per preparare l'orale è sufficiente studiare i lucidi e gli appunti di lezione. Una lettura consigliata per chi non ha seguito il corso sono i capitoli 1, 2, 3, 4, 6, 7, e 8 del libro Gamberini, Chittaro, Paternò (eds.), Human-Computer Interaction - I fondamenti dell'interazione tra persone e tecnologie 2012, ISBN 9788871927824.
L'esame si tiene nella stanza del docente al CNR: Edificio B, Entrata 17, Piano secondo, Stanza I 94, Come raggiungere la stanza
Si danno tesi di laurea e tirocini sugli argomenti del corso
Si preparerà un sito web del corso che raccoglierà i vari progetti.
Si cercherà di preparare un testo specifico contenente il relativo materiale didattico.
