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
- 2020-08-19: Added the next exam dates, with deadlines (in the "Exam" section)
- 2020-06-11: Added the next exam dates, with deadlines (in the "Exam" section)
- 2019-11-21: Added a new "Development Resources" section, to provide students with pointers to relevant Web resources.
- 2019-10-14: All the communication and messages with teachers, and among students, will happen in a dedicated Slack workspace (i.e., no emails). Please, join the workspace by following the invitation link published on the Portale della Didattica.
- 2019-10-09: Updated the exam section. Published the first lab.
- 2019-09-25: Welcome to the first 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 |
| Main teacher: | Fulvio Corno |
| Other teachers: | Luigi De Russis |
Class hours
| Day | Hour | Location | Type |
|---|---|---|---|
| Tuesday | 17:30-19:00 | Room 10I | Class |
| Wednesday | 11:30-13:00 | Room 10I | Class |
| Thursday | 10:00-11:30 | LABINF | Lab (group I) |
| Thursday | 11:30-13:00 | LABINF | 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 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 (0.5 credit).
- 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. In parallel, the concepts will be applied to a specific application domain and a specific interaction technology and carried on during the lab hours in the course projects developed by student groups (1.5 credits).
- "Beyond WIMP" paradigms: e.g., tangible interaction, wearables, voice user interfaces, gestures, eye tracking, and interaction with IoT systems. Each paradigm 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 a modern web application, in which one of the "beyond WIMP" technologies is 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, in a YouTube playlist, and on BitTorrent.
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 (LABINF)
Teacher: FC = Fulvio Corno, LDR = Luigi De Russis
| Date | Type | Details | Time | Video | Teacher |
|---|---|---|---|---|---|
| 01/10/2019 | L | Introduction to the course Presentation of the Project Work |
17:30-19:00 |  |
FC |
| 02/10/2019 | L | What is HCI? | 11:30-13:00 | |
FC |
| 08/10/2019 | L | Human-Centered Design Process Needfinding |
17:30-19:00 | |
FC |
| 09/10/2019 | L | Needfinding | 11:30-13:00 | |
FC |
| 10/10/2019 | EL | Hall of (Sh|F)ame: UI edition | 10:00-11:30 | - | LDR |
| 15/10/2019 | L | Prototyping (I) | 17:30-19:00 | |
FC |
| 16/10/2019 | L | Prototyping (II) | 11:30-13:00 | |
FC |
| 17/10/2019 | EL | Needfinding: preparation for Milestone 1 | 10:00-11:30 | - | LDR |
| 22/10/2019 | L | Prototyping (III) | 17:30-19:00 | |
FC |
| 23/10/2019 | L | Guidelines (I) | 11:30-13:00 | |
FC |
| 24/10/2019 | EL | Needfinding (cont'd) | 10:00-11:30 | - | LDR |
| 29/10/2019 | L | Guidelines (II) | 17:30-19:00 | |
FC |
| 30/10/2019 | L | Heuristic evaluation (I) | 11:30-13:00 | |
FC |
| 31/10/2019 | EL | Storyboards and paper mockups | 10:00-11:30 | LDR | |
| 05/11/2019 | L/EA | Heuristic evaluation (II) | 17:30-19:00 | |
FC |
| 06/11/2019 | EA/L | Heuristics (exercise) | 11:30-13:00 | |
FC |
| 07/11/2019 | EL | Heuristic evaluation | 10:00-11:30 | - | LDR |
| 12/11/2019 | L | Visual design | 17:30-19:00 | |
FC |
| 13/11/2019 | L | Multimodal interaction (I) | 11:30-13:00 | |
LDR |
| 14/11/2019 | - | Participation to World Usability Day Torino (UniTo) | 09:00-13:00 | - | - |
| 19/11/2019 | L | Multimodal interaction (II) | 17:30-19:00 | |
LDR |
| 20/11/2019 | L | Voice user interfaces | 11:30-13:00 | |
LDR |
| 21/11/2019 | EL | Wireframe and UI skeleton. Supervised work group (web app implementation) | 10:00-13:00 | - | LDR |
| 26/11/2019 | EA |
Voice user interfaces on the Web (I): overview and Web Speech API
|
17:30-19:00 | |
LDR |
| 27/11/2019 | EA | Voice user interfaces on the Web (II): Dialogflow | 11:30-13:00 | |
LDR |
| 28/11/2019 | EL | Supervised work group (web app implementation) | 10:00-11:30 | - | LDR |
| 03/12/2019 | EA | Voice user interfaces on the Web (III): Dialogflow integration | 17:30-19:00 | |
LDR |
| 04/12/2019 | EA | Voice user interfaces on the Web (IV): Webhook | 11:30-13:00 | |
LDR |
| 05/12/2019 | EL | Supervised work group (web app implementation) | 10:00-11:30 | - | LDR |
| 10/12/2019 | L | User Evaluation: Usability Testing (I) | 17:30-19:00 | |
LDR |
| 11/12/2019 | L | User Evaluation: Usability Testing (II) | 11:30-12:00 | |
LDR |
| 11/12/2019 | EA | Usability Testing: example of planning | 12:00-13:00 | - | LDR |
| 12/12/2019 | EL | Supervised work group (web app implementation) | 10:00-11:30 | - | LDR |
| 17/12/2019 | - | No class! | - | - | - |
| 18/12/2019 | EA | Exercises for the exam | 11:30-13:00 | |
FC |
| 19/12/2019 | EL | Supervised work group (web app implementation) | 10:00-11:30 | - | FC |
| Christmas vacation | |||||
| 07/01/2020 | L | User Evaluation: Controlled Experiments (I) | 17:30-19:00 | |
LDR |
| 08/01/2020 | - | No class (sospensione attività didattica) | 11:30-13:00 | - | - |
| 09/01/2020 | EL | Usability Testing: preparation | 10:00-11:30 | - | FC |
| 14/01/2020 | L | User Evaluation: Controlled Experiments (II) | 17:30-19:00 | |
LDR |
| 15/01/2020 | L | User Evaluation: Controlled Experiments (III). Example. | 11:30-13:00 | |
LDR |
| 16/01/2020 | EL | Supervised work group (web app implementation) | 10:00-11:30 | - | LDR |
| 16/01/2020 | L | Written exam simulation [Room 13S] | 11:30-13:00 | - | LDR |
Video Lectures
Video lectures area also available to download via BitTorrent.
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
- PHP and Apache server: XAMPP (or equivalent)
- JetBrains PhpStorm
- apply here, with your student e-mail address, for a free licence: https://www.jetbrains.com/student/
- Composer - a dependency manager for PHP (easy to "install" through PhpStorm)
- Dialogflow PHP Client Library
- git
- ngrok
Web Design and Development Resources
- Fonts: Google Fonts is a great resource of easy-to-use fonts
- Icons: Font Awesome is 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 is a good starting point to find Creative Commons photos
- 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
- Camera and camera roll: take (and read) photos with the HTML5 Media Capture API
- Notifications: HTML5 Notifications API allows the generatio of notifications from the browser
- useful read: Web Workers and PWA
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 repository assigned to each group.
Next exams, with deadlines:
- [written test] 03/09/2020, h. 14:00
- remember to enroll at the exam, by 28/08/2020, on the Portale della Didattica
- [project eval] 10/09/2020, h. 10:00
- remember to enroll at the exam, by 04/09/2020, on the Portale della Didattica
- all the milestones (including the code) must be on the group's GitHub repository by 04/09/2020
- specify any request via Slack at the teachers (#discussion channel), by 04/09/2020
Group Projects (with Milestones)
All the deadlines are EOD (End Of Day).
- Description of the Project Work
- Group composition
- Deadline: October 10, 2019
- Submit the form
- GitHub repositories will be created after the deadline
- Milestone 1:
- Project description and needfinding
- Deadline: October 28, 2019
- Template (.md), to be put in the group repository in a "M1" folder
- Milestone 2:
- Prototyping and Heuristics
- Deadline: November 14, 2019
- Template (.md), to be put in the group repository in a "M2" folder
- Milestone 3:
- Deadline: November 28, 2019
- Template (.md), to be put in the group repository in a "M3" folder
- Milestone 4:
- Usability testing and 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 have to be in the group repository (outside any Mx folders)
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