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).
This page contains the archived version for the 2019/2020 edition of the course. Short link to the current edition: http://bit.ly/polito-hci
Latest news
- 2021-07-25: Update the exam dates for the fall session
- 2021-06-15: Update the exam dates for the summer session.
- 2021-01-05: Update the exam dates (written test).
- 2020-09-18: Welcome to the 2020 edition of the course.
Basic info
See the Information section.
Information
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
| Day | Hour | Location | Type |
|---|---|---|---|
| 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.
Prerequisites
Programming skills
Knowledge on web and related technologies/languages (e.g., HTML, JS, client-server architectures, …)
Attitude towards working in teams
Topics
Course topics will cover three areas:
- Introduction to Human-Computer Interaction: history, the human, the computer, vision of the future.
- 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).
- "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, …).
Organization
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.
Materials
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.
Schedule
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.
Legends
Type: L = Lecture, EA = Exercises in classroom, EL = Exercises in laboratory
Teacher: FC = Fulvio Corno, LDR = Luigi De Russis
| Date | Type | Details | Time | Video | Teacher |
|---|---|---|---|---|---|
| 29/09/2020 | L | 17:30-19:00 |  |
LDR | |
| 30/09/2020 | L | 11:30-13:00 | |
FC | |
| 06/10/2020 | L | 17:30-19:00 | |
FC | |
| 07/10/2020 | L |
Needfinding (part II) |
11:30-13:00 | |
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 | 17:30-18:30 | |
FC | |
| 14/10/2020 | L | 11:30-13:00 | |
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 | |
FC |
| 21/10/2020 | L | Prototyping (part II) | 11:30-13:00 | |
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 | |
FC |
| 28/10/2020 | L | Guidelines (part II) | 11:30-13:00 | |
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) | 11:30-13:00 | - | LDR |
| 03/11/2020 | L | Visual design (part I) |
17:30-19:00 | |
FC |
| 04/11/2020 | L | Visual design (part II) | 11:30-13:00 | |
FC |
| 05/11/2020 | EL | Storyboards and paper prototypes (cont'd, online group I) | 10:00-11:30 | - | LDR |
| 05/11/2020 | EL | Storyboards and paper prototypes (cont'd, online group II) | 11:30-13:00 | - | LDR |
| 10/11/2020 | L | 17:30-19:00 | |
LDR | |
| 11/11/2020 | L | Heuristic evaluation (part II) | 11:30-13:00 | |
LDR |
| 12/11/2020 | EL | Storyboards and paper prototypes (cont'd, online group I) | 10:00-11:30 | - | LDR |
| 12/11/2020 | EL | Storyboards and paper prototypes (cont'd, online group II) | 11:30-13:00 | - | LDR |
| 17/11/2020 | EA | Visual design and heuristics: exercise | 17:30-19:00 | |
FC |
| 18/11/2020 | L | 11:30-13:00 | |
LDR | |
| 18/11/2020 | Milestone 2 due | EOD | |||
| 19/11/2020 | EL | Wireframe (online group I) | 10:00-11:30 | - | LDR |
| 19/11/2020 | EL | Wireframe (online group II) | 11:30-13:00 | - | LDR |
| 24/11/2020 | L | Multimodal interaction (part I) | 17:30-19:00 | |
LDR |
| 25/11/2020 | L | Multimodal interaction (part II) | 11:30-13:00 | |
LDR |
| 26/11/2020 | EL | Heuristic evaluation (online group I) | 10:00-11:30 | - | LDR |
| 26/11/2020 | EL | Heuristic evaluation (online group II) | 11:30-13:00 | - | LDR |
| 01/12/2020 | L | Multimodal Interaction (part III) Interacting with AI |
17:30-19:00 | |
LDR |
| 02/12/2020 | EA |
Interacting with AI: exercise |
11:30-13:00 | |
LDR |
| 02/12/2020 | Milestone 3 due | EOD | |||
| 03/12/2020 | EL | Hi-fi prototype implementation (online group I) | 10:00-11:30 | - | LDR |
| 03/12/2020 | EL | Hi-fi prototype implementation (online group II) | 11:30-13:00 | - | LDR |
| 08/12/2020 | - | No class (holiday) | |||
| 09/12/2020 | L | Evaluation: usability testing (part I) | 11:30-13:00 | |
LDR |
| 10/12/2020 | EL | Mobile sensing for interaction: examples (online group I) | 10:00-11:30 | - | LDR |
| 10/12/2020 | EL | Mobile sensing for interaction: examples (online group II) | 11:30-13:00 | - | LDR |
| 15/12/2020 | L | Evaluation: usability testing (part II) | 17:30-19:00 | |
LDR |
| 16/12/2020 | EA | Planning for usability testing: exercise (draft plan created during the lecture) |
11:30-13:00 | |
LDR |
| 17/12/2020 | EL | Hi-fi prototype implementation (online group I) | 10:00-11:30 | - | LDR |
| 17/12/2020 | EL | Hi-fi prototype implementation (online group II) | 11:30-13:00 | - | LDR |
| 22/12/2020 | L | Evaluation: controlled experiments (part I) Questions & answers |
17:30-19:00 | |
LDR |
| Christmas vacation | |||||
| 07/01/2021 | EL | Usability testing: protocol (online group I) | 10:00-11:30 | - | LDR |
| 07/01/2021 | EL | Usability testing: protocol (online group II) | 11:30-13:00 | - | LDR |
| 12/01/2021 | L | Evaluation: controlled experiments (part II) | 17:30-19:00 | |
LDR |
| 13/01/2021 | EA | Controlled experiments: exercise | 11:30-13:00 | |
LDR |
| 14/01/2021 | EL | Hi-fi prototype implementation (online, everybody) | 10:00-11:30 | - | LDR |
| 14/01/2021 | EA | Written exam simulation (solutions in the Exam section) | 11:30-13:00 | |
LDR |
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
- Node.js 12.19 (LTS) and npm
- Visual Studio Code
- git
- ngrok
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
- Simulate a mobile device from a desktop browser (e.g., with Chrome's Device Mode)
- Geolocation:
- Device orientation: you can access the device gyroscope/accelerometer through dedicate HTML5 API
- Microphone and camera: get audio and take photos with the HTML5 Media Capture API
- Camera roll: to open the smartphone's camera roll, just use
<input type="file" accept="image/*" capture="camera">
- Vibration: make the phone vibrate with the HTML5 Vibration API
- Touch gesture: enable advanced touch gestures (e.g., multi-touch, force touch, etc.) thanks to the HTML5 Touch events
- Notifications: HTML5 Notifications API allows the generation of notifications from the browser
- useful read: Web Workers and PWA
- Sample usage in the course organization: https://github.com/polito-hci-2020?q=sample
Exam
The exam consists of two parts:
- Written test [40%: 13 points, minimum 7]
- Design methods, design processes, design and analysis instruments, ...
- No coding
- 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] 07/09/2021, h. 14:00, virtual classroom
- remember to enroll at the exam, by 26/08/2021, on the Portale della Didattica
- [project eval] contact the teachers on Slack
remember to enroll at the exam, by xx/xx/2021, on the Portale della Didatticaall the milestones (including the code) must be on the group's GitHub repository by xx/xx/2021specify 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
- Project description and needfinding
- Deadline: October 28, 2020
- Template (.md), to be put in the group repository in a "M1" folder
- Milestone 2
- Low-Fi Prototyping
- Deadline: November 18, 2020
- Template (.md), to be put in the group repository in a "M2" folder
- Milestone 3
- Wireframe and Heuristics
- Deadline: December 2, 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
- Sample exam questions (2019-12-18)
- Exam simulation (2020-01-16), with some possible solutions
- Written exam of 2020-01-29: text, possible solutions
- Written exam of 2020-02-10: text, possible solutions
- Exam simulation (2021-01-14), with some possible solutions
- Written exam of 2021-01-28: text, possible solutions