Syllabus del corso
Area di apprendimento
3: Tecniche, strumenti e tecnologie della comunicazione.
Obiettivi formativi
Conoscenza e comprensione
- Gli studenti apprenderanno metodi di progettazione, prototipazione e valutazione di usabilità di interfacce web. Acquisiranno inoltre conoscenze di base su HTML/CSS e competenze pratiche sugli strumenti di prototipazione per le applicazioni web. Svilupperanno un atteggiamento critico verso l'intero processo di sviluppo delle applicazioni web e comprenderanno i principi fondamentali del Design User-Centered, che enfatizza l'importanza di comprendere i bisogni degli utenti e soddisfare i requisiti di usabilità ed utilità.
Capacità di applicare conoscenza e comprensione
- Al termine di questo corso, gli studenti saranno in grado di applicare le conoscenze, la comprensione e le competenze pratiche acquisite per valutare in modo sistematico l'usabilità delle interfacce web, e per progettare e prototipare applicazioni web utili, facili da usabili, e di alta qualità comunicativa.
Autonomia di giudizio
- Attraverso le attività progettuali previste nel corso, e l'interazione con il docente durante il tutoring di progetto, gli studenti migliorerano la capacità di valutare criticamente le informazioni, formulare opinioni motivate e prendere decisioni in modo autonomo.
Abilità comunicative
- Il corso potenzierà la capacità di comunicare efficacemente le proprie conoscenze, valutazioni, e scelte progettuali, sia oralmente che per iscritto, attraverso le attività di reporting dei processo di valutazione di usabilità e progettazione della interfaccia web del sistema assegnati.
Capacità di apprendere
- Le attività progettuali stimoleranno la capacità di continuare ad apprendere in modo autonomo ed indipendente, aggiornando le proprie conoscenze e competenze nel tempo.
Contenuti sintetici
I contenuti del corso comprendono sia argomenti metododologici, relativi alla progettazione di interfacce web e alla valutazione di usabilità, sia contenuti pratici relativi alla prototipazione delle applicazioni web, anche mediante AI Generativa.
Programma esteso
- Usabilità delle interfacce web: principi e metodi di valutazione (ispezione euristica e test empirico con gli utenti).
- Elicitazione dei requisiti comunicativi delle applicazioni web.
- Progettazione dell'esperienza utente (UX/UI) nelle applicazioni web data-intensive: metodi e modelli concettuali.
- Strumenti tecnologici per la progettazione e prototipazione di interfacce web (Figma).
- Elementi di base della programmazione in HTML/CSS (cenni).
- AI Generativa per la creazione di contenuti multimediali (cenni).
Prerequisiti
Conoscenze di base su creazione e gestione file (off line e in cloud).
Metodi didattici
Il metodo didattico comprende Didattica Erogativa (circa 30%) e Didattica Interattiva (circa 70%).
Le lezioni frontali - concentrate nella prima parte del corso - saranno focalizzate sui metodi di usabilità, analisi dei requisiti, progettazione concettuale.
I contenuti di natura più tecnologica verranno svolte in modalità interattiva, con attività pratiche sull’uso di Figma e AI generativa, e attività progettuali di gruppo (definizione e valutazione di interfacce web) svolte con la supervisione della docente.
Circa il 20% della didattica, sia erogativa che interattiva, sarà svolta in modalità remota.
Tutte le lezioni frontali saranno tenute in lingua inglese.
Modalità di verifica dell'apprendimento
L'esame mira a verificare che gli studenti abbiano compreso i metodi e gli strumenti presentati nel corso e abbiano imparato ad applicarli.
La valutazione si basa sul risultato di due attività progettuali e su un esame orale.
• Attività 1: Analisi di usabilità di un sito web esistente assegnato dal docente. La valutazione si basa sull'accuratezza e la completezza del report di valutazione dell'usabilità, che può essere consegnato in itinere (non obbligatoriamente) o in una data ufficiale d'esame.
• Attività 2: Modellazione dei requisiti utente, progettazione concettuale e prototipazione di un sito web su un argomento assegnato dal docente. I criteri di valutazione sono la correttezza e la completezza di 2 elaborati: report di progettazione e prototipo Figma. Entrambi due elaborati devono essere consegnati nella data ufficiale scelta per d'esame.
E' fortemente raccomandato svolgere in gruppo (min 2 - max 4 persone) tutte le attivita' progettuali (valutazione di usabilità, progettazione e protipizzazione delle applicazioni web assegnate).
L'esame orale è individuale e si svolge esclusivamente nelle date ufficiali degli appelli. Consiste nella presentazione e discussione dei progetti, e nella verifica del contributo individuale alle attività progettuali e nella valutazione delle conoscenze e competenze effettivamente acquisite.
La lingua dei report progettuali e dell'esame orale può essere - indifferentemente - l'italiano o l'inglese.
Testi di riferimento
-
Materiali didattici resi disponibile dal docente per tutti gli studenti iscritti al corso (slides e codice HTML e CSS).
-
Manuali di riferimento su HTML & CSS disponibili online, ad esempio:
HTML: http://www.w3schools.com/html/
CSS: http://www.w3schools.com/css/; https://www.codeschool.com/learn/html-css
Ulteriori letture:
- Jennifer Robbins (2018). Learning Web Design: A Beginner's Guide to HTML, CSS, JavaScript, and Web Graphics. 5th Edition, O'Reilly Ed.
- Beaird J. Walker A. George J. (2021). Web design per creativi, grafici, sviluppatori. Apogeo.
- Beaird J. Walker A. George J. (2020). The Principles of Beautiful Web Design. Sitepoint Ed.
Sustainable Development Goals
Learning area
3: Techniques, tools, and technologies of communication.
Learning objectives
Knowledge and Understanding
- Students will learn methods for the design, prototyping, and usability evaluation of web interfaces. They will also acquire basic knowledge of HTML/CSS and practical skills with prototyping tools for web applications. They will develop a critical attitude toward the entire web application development process and understand the fundamental principles of User-Centered Design, which emphasizes the importance of understanding user needs and meeting usability and utility requirements.
Ability to Apply Knowledge and Understanding
- By the end of this course, students will be able to apply the knowledge, understanding, and practical skills acquired to systematically evaluate the usability of web interfaces and to design and prototype web applications that are useful, easy to use, and of high communicative quality.
Making judgements
- Through the project activities planned in the course and the interaction with the instructor during project tutoring, students will improve their ability to critically evaluate information, formulate well-founded opinions, and make independent decisions.
Communication Skills
- The course will enhance the ability to effectively communicate one’s knowledge, evaluations, and design choices, both orally and in writing, through reporting activities related to the usability evaluation process and the interface design of the assigned system.
Learning Skills
- The project activities will stimulate the ability to continue learning independently and autonomously, updating one's knowledge and skills over time.
Contents
The course content includes both methodological topics related to web interface design and usability evaluation, as well as practical content related to the prototyping of web applications (also supported by Generative AI).
Detailed program
- Web usability: principles and evaluation methods (heuristic inspection and empirical user testing).
- Elicitation of the communicative requirements of data intensive web applications.
- User experience (UX/UI) design of data intensive web applications: methods and conceptual models.
- Technological tools for web interface design and prototyping (Figma).
- Basic elements of HTML/CSS programming (overview).
- Generative AI for multimedia content creation.
Prerequisites
Basic knowledge of file management (off line and on cloud).
Teaching methods
The teaching method is a mix of "ex-cathedra" Teaching (approximately 30%) and Interactive Teaching (approximately 70%).
Lectures will be concentrated in the first part of the course, focusing on usability methods, requirements analysis, and conceptual design.
The more technological content will be delivered in an interactive format, with hands-on activities involving the use of Figma and generative AI, as well as web design and evaluation projects carried out in group under the supervision of the instructor.
Approximately 20% of the teaching, both lectures and interactive sessions, will be conducted remotely.
All lectures will be delivered in English.
Assessment methods
The exam is designed to assess whether students have understood the methods and tools presented during the course and have learned how to apply them.
The evaluation is based on the outcome of two project activities and an oral exam.
• Activity 1: Usability analysis of an existing website assigned by the instructor. The evaluation will be based on the accuracy and completeness of the usability evaluation report. The report may be submitted during the course (optionally) or on any official exam date.
• Activity 2: User requirements modeling, conceptual design, and prototyping of a website on a topic assigned by the instructor. The evaluation criteria are the correctness and completeness of both the design report and the prototype. These two documents must be submitted on any official exam date.
It is recommended that project activities be carried out in groups (minimum 2 – maximum 4 people).
The oral exam is individual and takes place exclusively on official exam dates. It consists of the presentation and discussion of the projects, verification of the individual contribution to the project work, and assessment of the knowledge and skills actually acquired.
The language of the project reports and the oral exam can be either Italian or English.
Textbooks and Reading Materials
Course material (e.g., slides, HTML and CSS code) - available to all students enrolled in the course.
Any HTML & CSS reference guide or online resource. For example:
HTML: http://www.w3schools.com/html/
CSS: http://www.w3schools.com/css/; https://www.codeschool.com/learn/html-css
Additional readings:
- Jennifer Robbins (2018). Learning Web Design: A Beginner's Guide to HTML, CSS, JavaScript, and Web Graphics. 5th Edition, O'Reilly Ed.
- Beaird J. Walker A. George J. (2021). Web design per creativi, grafici, sviluppatori. Apogeo.
- Beaird J. Walker A. George J. (2020). The Principles of Beautiful Web Design. Sitepoint Ed.
Sustainable Development Goals
Staff
-
Franca Garzotto
