Current Courses

Article Index

Official website of the course "Human Computer Interaction" (code 02JSKOV) offered to students in the 2nd year of the M.S. in Computer Engineering (among elective courses).

Short link to this page:

Latest news

  • 2020-09-18: Welcome to the 2020 edition of the course.

Basic info

See the Information section.


Identity card

Title: Human Computer Interaction
Credits: 6 credits
Year: 2nd year Master degree (elective courses)
Semester 1st semester (September-January)
Language: English
Official link: Portale della Didattica
Videolecture: YouTube Playlist
Main teacher: Luigi De Russis
Other teachers: Fulvio Corno

Class hours

Tuesday 17:30-19:00 Online Class
Wednesday 11:30-13:00 Online Class
Thursday 10:00-11:30 Online/LABINF Lab (group I)
Thursday 11:30-13:00 Online Lab (group II)

See the Schedule section for detailed information.

Course Contents

Nowadays, computing devices are ubiquitously present and integrated in our daily life. Sensors and actuators are, indeed, embedded in home appliances, lights, or cars; wearable devices like smart watches provide information at glance and act as always-on and personal digital extensions; smartphones and tablets are widely spread. Moreover, most of such devices are Internet-connected and powered by Artificial Intelligence, and people communicate with them by using various interaction paradigms, ranging from “click”, to “touch”, to gestures, speech, or tangible manipulation. As the technology improves, however, we are challenged of how to design suitable interfaces and interactions, so that people can use such technologies with "joy" rather than "frustration".
This course would provide a strong foundation to address this challenge. In addition, the course will give students hands-on practice to master this complexity and to develop innovative solutions by adopting a modern human-centered design process while building a web application to serve a set of target users. In the end, students will learn how to design and build technologies usable, useful, and used.
The course will be held in English.

Learning Outcomes

Knowledge: Concepts of Usability, User Experience. Human-centered design processes and their application. Novel Interaction Technologies.

Skills: Developing a working prototype according to a human-centered design process. Mastering some novel interaction technologies. Experience joint development of a project in a group of engineers.


Programming skills
Knowledge on web and related technologies/languages (e.g., HTML, JS, client-server architectures, …)
Attitude towards working in teams


Course topics will cover three areas:

  1. Introduction to Human-Computer Interaction: history, the human, the computer, vision of the future.
  2. Building interactive applications with a human-centered process. The main tasks and methods to design, develop, and evaluate an interactive application: needfindings strategies, low- and high-fidelity prototypes, mental models and visual design, heuristic evaluation, and basic concepts and methods for controlled experiments (3 credits of lectures and exercises). This part will focus, in general, on the design process. Such concepts will be applied to a specific application domain in the development of a group project, which will be carried on during the lab hours (2 credits).
  3. "Beyond WIMP" paradigms: e.g., interaction with AI-powered systems, tangible interaction, voice user interfaces, wearables, gestures, and eye tracking. Selected paradigms will be discussed from different perspectives, ranging from rationale and vision, to contemporary examples and development tools (1 credit). Thematic seminars on emerging topics will also be included, as well as the illustration of specific "case studies".

Most of the topics will have a theoretical (in-class) foundation plus hands-on (in-lab) experiences by using web technologies. Students' projects will follow the proposed human-centered design process and will submit intermediate deliverables. Projects will consist of interactive prototypes as modern web applications, in which "beyond WIMP" paradigms might be exploited for user interaction.
During the course, communication within teams and with teachers as well as project development will adopt contemporary solutions and tools (e.g., Git and GitHub, Slack, …).


The learning method is both project-based (i.e., students learn by doing a project) and problem-based (i.e., the project work starts from real users’ needs), with teams of students working together towards a common goal.

Project-related activities will start since the beginning of the course and teachers will provide support and guidance for the entire semester. The project will be accompanied by deliverables to be prepared before given deadlines. The course may include live seminars by people from industry or other organizations.


The course material is available in the Schedule section and in a dedicated GitHub repository. Lectures will be video-recorded and will be made available on the Portale della Didattica, on this website, and in this YouTube playlist.

Course material encompasses slides, readings, exercises and examples (both in class and in lab), as well as additional references and links.


This section hosts the schedule and learning materials of all the lectures and labs, with topics and deadlines described in each of them. Please consider that the following information is a tentatitive preview of the course organization, is provided only for helping students organization and planning, and is subject to change without notice.

All slides, examples, exercises, and any other material used in the classroom and in the lab will be also posted in a GitHub repository. Moreover, all lectures will be video-recorded and will be available on the Portale della Didattica, as well as here and in a dedicated YouTube playlist.

Type: L = Lecture, EA = Exercises in classroom, EL = Exercises in laboratory
Teacher: FC = Fulvio Corno, LDR = Luigi De Russis

29/09/2020 L

Introduction to the course
Presentation of the Project Work

17:30-19:00 icons8 play button 48 LDR
30/09/2020 L

What is HCI?

11:30-13:00 icons8 play button 48 FC
06/10/2020 L

Needfinding (part I)

17:30-19:00 icons8 play button 48 FC
07/10/2020 L

Needfinding (part II)

11:30-13:00 icons8 play button 48 FC
08/10/2020 EL

Hall of (Sh|F)ame: UI edition (A-L, online on Zoom)

10:00-11:30 - LDR
08/10/2020 EL

Hall of (Sh|F)ame: UI edition (M-Z, online on Zoom)

11:30-13:00 - LDR
08/10/2020   Milestone 0 due EOD    
13/10/2020 EA

Needfinding: exercise

17:30-18:30 icons8 play button 48 FC
14/10/2020  L

Needfinding: exercise (cont'd)

Task Analysis

11:30-13:00 icons8 play button 48 FC
15/10/2020 EL Needfinding: preparation for M1 (in-person group) 10:00-11:30 - LDR
15/10/2020 EL Needfinding: preparation for M1 (online group) 11:30-13:00 - LDR
20/10/2020 L Task Analysis (part II)
Prototyping (part I)
17:30-19:00 icons8 play button 48 FC
21/10/2020 L Prototyping (part II) 11:30-13:00 icons8 play button 48 FC
22/10/2020  EL Needfinding (cont'd, in-person group) 10:00-11:30 - LDR
22/10/2020 EL Needfinding (cont'd, online group) 11:30-13:00 - LDR
27/10/2020 L Guidelines (part I) 17:30-19:00 icons8 play button 48 FC
28/10/2020 L Guidelines (part II) 11:30-13:00 icons8 play button 48 FC
28/10/2020   Milestone 1 due EOD    
29/10/2020  EL Storyboards and paper prototypes (in-person group) 10:00-11:30 - LDR
29/10/2020 EL Storyboards and paper prototypes (online group, on Zoom) 11:30-13:00 - LDR
03/11/2020 L Visual design 17:30-19:00 icons8 play button 48 FC
04/11/2020 L Visual design 11:30-13:00 icons8 play button 48 FC
05/11/2020  EL Storyboards and paper prototypes (cont'd, in-person group) 10:00-11:30 - LDR
05/11/2020 EL Storyboards and paper prototypes (cont'd, online group) 11:30-13:00 - LDR
10/11/2020 L Heuristic evaluation 17:30-19:00 icons8 play button 48 FC
11/11/2020 L Heuristic evaluation 11:30-13:00 icons8 play button 48 FC
11/11/2020   Milestone 2 due EOD    
12/11/2020  EL Wireframe (in-person group) 10:00-11:30 - LDR
12/11/2020 EL Wireframe (online group) 11:30-13:00 - LDR
17/11/2020 EA Visual design and heuristics: exercise 17:30-19:00 icons8 play button 48 LDR
18/11/2020 L Multimodal interaction 11:30-13:00 icons8 play button 48 LDR
19/11/2020  EL Heuristic evaluation (in-person group) 10:00-11:30 - LDR
19/11/2020 EL Heuristic evaluation (online group) 11:30-13:00 - LDR
24/11/2020 L   17:30-19:00    
25/11/2020 L   11:30-13:00    
26/11/2020  EL   10:00-11:30    
26/11/2020 EL   11:30-13:00    

Video Lectures


Development Resources

This section presents some resources useful for software development that may be relevant for (final) interactive prototypes. Moreover, it lists the software applications and libraries used during the course.

Do you need to refresh your memory about web development? Web Fundamentals is "Google's opinionated reference for building amazing web experiences".

Software In Use

Design Resources

  • Fonts: Google Fonts is a great resource of easy-to-use fonts, while FontPair may help you pair them
  • Icons: Font Awesome and Noun Project are a good free icons package
  • Subtle Patterns is useful if you want to add some light patterns to any plain background color
  • Sample images: Wunderstock and Unsplash are a good starting point to find Creative Commons photos
  • Colors: Adobe Color is an interactive web app to help you choose nice color schemes

Web Development Resources



The exam consists of two parts:

  1. Written test [40%: 13 points, minimum 7]
    • Design methods, design processes, design and analysis instruments, ...
    • No coding
  2. Evaluation of the projects (by group) [60%: 20 points]
    • Milestones
    • Source code

Both parts must be passed in the same academic year, in any order. Material for the projects evaluation must be available on the GitHub repositories assigned to each group.

Next exams, with deadlines:

  • [written test] xx/xx/2021, h. xx:xx
    • remember to enroll at the exam, by xx/xx/2021, on the Portale della Didattica
  • [project eval] xx/xx/2021, h. xx:xx
    • remember to enroll at the exam, by xx/xx/2021, on the Portale della Didattica
    • all the milestones (including the code) must be on the group's GitHub repository by xx/xx/2021
    • specify any request via Slack at the teachers (#discussion channel), by xx/xx/2021

Group Projects (with Milestones)

All the deadlines are EOD (End Of Day).

  • Description of the Project Work
  • Group composition
    • Deadline: October 8, 2020
    • Submit the form
    • GitHub repositories will be created after the deadline
  • Milestone 1
  • Milestone 2
  • Milestone 3
    • Wireframe and Heuristics
    • Deadline: November 25, 2020
    • Template (.md), to be put in the group repository in a "M3" folder
  • Milestone 4
    • Usability testing and hi-fi prototype code
    • Deadline: 7 days before the oral exam
    • Template (.md) for the usability testing, to be put in the group repository in a "M4" folder
    • Prototype code must be in the "-code" group repository

Written Exams