Course Syllabus

Human-Computer Interaction (draft syllabus)

 DIS Logo

FA16_GameDesignLongTrip_Berlin&Frankfurt_JinglunDing(28 of 54).jpg  

Semester & Location:

Fall 2025- DIS Copenhagen
Type & Credits:

Elective Course - 3 credits

Major Disciplines:

Computer Science, Design, Psychology

Prerequisite(s):

One year of computer science. Knowledge of at least one programming language (e.g. C / C++ / Java / Python).
Faculty Members:

TBA (current students please use the Canvas Inbox)
Program Contact:

Natalia Landázuri, Ph.D.

csc-engr@disstockholm.se
Time & Place:

TBA

 

Course Description

Computers are popping up everywhere: your pocket, your wrist, your glasses, your car, your home. They are no longer confined to a desk or laptop. Why are computers special, so special in fact that we have a science of “Human-Computer Interaction (HCI)”? When they are designed correctly, they make us smarter, they increase our memory and speed, they extend the reach of our communication and provide endless opportunities for learning and entertainment. For this to work, the interaction between computers and humans needs to be carefully designed and evaluated.

In this course, you will take a hands-on approach to learn about, analyze, design, prototype, develop, and evaluate interfaces that incorporate physical, cognitive, and psychological human factors. Digitized societies raise important issues related to safety, security, ethics, and equality. You will discuss the impact of computer-based solutions on individual and social existence. Additionally, you will explore and reflect on the implications of the latest advancements in human-AI interaction, including generative AI and large language models such as ChatGPT.

Course Design and Learning Outcomes

Human-Computer Interaction

  • History of interaction design.
  • Understanding interaction models.
  • Hands-on interaction design and user experience.
  • The interaction design workflow: from ideation to prototypes to testing to evaluating.

Human-centered design

  • Connect humans and computers: interaction techniques and practices.
  • Principles of interaction design.
  • Respect the user: How to design for a target user group.
  • Know your tasks: avoid misuse and deception.
  • Morals and ethics of interaction: towards universal design.

Technical skills

  • Ideation boards - for example Miro
  • Prototyping tools - for example Figma
  • Development tools - for example Python
  • Elicitation tools - for example contextual inquiry
  • Testing tools - for example SUS
  • Evaluation tools - for example UX

Examples of possible software tools (see below for a more detailed list)

  • Miro
  • Figma
  • Python
  • HTML, CSS, Javascript (if web based project)
  • C# (if mobile project)

Faculty

TBA

Readings

Book to be used in the course

  1. Rogers, Y., Sharp, H., & Preece, J. (2023). Interaction design : beyond human-computer interaction (Sixth edition). John Wiley and Sons. LINK

Recommended Papers (a selection will be posted on Canvas and discussed with students)

Two papers encapsulating 80 years of HCI:

    1. Bush, Vannevar. "As we may think." The atlantic monthly 176, no. 1 (1945): 101-108. PDF

  • Bush introduces the core of hyperlinks and the world wide web in 1945!

    1. Weiser, Mark. "The Computer for the 21 st Century." Scientific american 265, no. 3 (1991): 94-105. PDF

  • Weiser describes how computers will merge with everyday life, including what is to become smartphones, smart tvs, and smart watches in 1991.

Introductory papers and books to HCI:

  1. Card, Stuart K., Thomas P. Moran, and Allen Newell. "The keystroke-level model for user performance time with interactive systems." Communications of the ACM 23, no. 7 (1980): 396-410. LINK
    • This seminal paper introduces the keystroke-level model (KLM), a predictive model for the time it takes to perform tasks using an interactive system.
  2. Norman, Donald A. "Cognitive engineering." In User Centered System Design, edited by Donald A. Norman and Stephen W. Draper, 31-61. Hillsdale, NJ: Lawrence Erlbaum Associates, 1986. LINK
    • This chapter from Norman’s influential book discusses cognitive engineering principles and their application to system design.
  3. Nielsen, Jakob. "Heuristic evaluation." In Usability Inspection Methods, edited by Jakob Nielsen and Robert L. Mack, 25-62. New York: John Wiley & Sons, 1994. LINK
    • This paper outlines heuristic evaluation, a widely used usability inspection method.
  4. Schneiderman, Ben. "The future of interactive systems and the emergence of direct manipulation." Behaviour & Information Technology 1, no. 3 (1982): 237-256. LINK
    • Schneiderman’s paper introduces the concept of direct manipulation, a foundational idea 
  5. Buxton, Bill. "A three-state model of graphical input." Human-Computer Interaction 1, no. 2 (1990): 249-268. LINK
    • This paper presents a model for graphical input, emphasizing the importance of different states in input devices.
  1. Dix, Alan, et al. Human-Computer Interaction. 3rd ed. Harlow, England: Pearson Education, 2004. LINK
    • This comprehensive textbook is a foundational resource in HCI, offering detailed coverage of principles, methodologies, and technologies.
  2. Bødker, Susanne. "Through the interface: A human activity approach to user interface design." DAIMI Report Series 16, no. 224 (1991): 1-235. LINK
    • Bødker’s work integrates activity theory into HCI, offering a unique perspective on user interaction through the lens of human activities.
  3. Grudin, Jonathan. "The computer reaches out: The historical continuity of interface design." CHI '90 Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (1990): 261-268. LINK
    • This paper discusses the evolution of interface design, highlighting the challenges and continuities in HCI development.
  4. Hutchins, Edwin L., James D. Hollan, and Donald A. Norman. "Direct manipulation interfaces." Human-Computer Interaction 1, no. 4 (1985): 311-338. LINK
    • This paper delves into the concept of direct manipulation interfaces, further expanding on the ideas introduced by Shneiderman.
  5. Greenberg, Saul, and Bill Buxton. "Usability evaluation considered harmful (some of the time)." CHI '08 Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (2008): 111-120. LINK
    • This paper critically examines the limitations of traditional usability evaluation methods, urging the field to consider more contextually rich approaches.

Field Studies

Possible visits, to learn from professionals working int the field of Human-Computer Interaction, and witness the latest developments, may include:

Guest Lecturers

TBA

Approach to Teaching

We will use various learning methods, including interactive lectures, class discussions, critical analysis of reading material, field studies, and project-based learning to build a final project. All sessions combine active learning with short presentations from the lecturer and from students as well. We will learn through reflective exercises with existing interfaces and design sessions for possible alternatives to these interfaces. We will have analytical tasks and present results for critical and constructive feedback. Furthermore, students will create their own interactions and interfaces and provide constructive peer feedback to each other. We will have short take-home quizzes to discuss the reading material for each session. The pace and specific activities planned for certain days may change depending on the interest of the students.

DIS Accommodations Statement 

Your learning experience in this class is important to me.  If you have approved academic accommodations with DIS, please make sure I receive your DIS accommodations letter within two weeks from the start of classes. If you can think of other ways I can support your learning, please don't hesitate to talk to me. If you have any further questions about your academic accommodations, contact Academic Support acadsupp@dis.dk. 

Expectations of the Students

  • Students should participate during lectures, peer-led oral presentations, discussions, group work and exercises.
  • Laptops may be used for note‐taking, fact‐checking, or assignments in the classroom, but only when indicated by the instructor. At all other times laptops and electronic devices should be put away during class time.
  • Reading must be done prior to the class session. A considerable part of the class depends on class discussions.
  • Students need to be present, arrive on time and participate to receive full credit. The final grade will be affected by unexcused absences and lack of participation. The participation grade will be reduced by 10 points (over 100) for every unexcused absence. Remember to be in class on time!
  • Classroom etiquette includes being respectful of other opinions, listening to others and entering a dialogue in a constructive manner.
  • Students are expected to ask relevant questions in regards to the material covered.

 

Evaluation and Grading

To be eligible for a passing grade in this class, all of the assigned work must be completed.

Students are expected to turn in all the assignments on the due date. If an assignment is turned in after the due date, the grade of the assignment will be reduced by 10 points (over 100) for each day the submission is late.

The factors influencing the final grade and the proportional importance of each factor is shown below:

Assignment

Percent

Active participation

10%

Reading take-home quizzes

10%

In-class exercises

20%

Short projects

20%

Course project: proposal 

10%

Course project: early demo

10%

Course project: final demo

10%

Course project: report

10%


 

Academic Regulations 

Please make sure to read the Academic Regulations on the DIS website. There you will find regulations on:

 

 

DIS - Study Abroad in Scandinavia - www.DISabroad.org

 

Course Summary

 

Part I: Interacting with and through computers

  1. Introduction and motivation (Session 1)
    1. What is HCI?
    2. What can it do for you when designed correctly?
      1. In-class, hands-on exercises and reflections.
    3. How can it drive you crazy and actually put you in mortal danger when designed incorrectly?
      1. In-class, hands-on exercises and reflections.
  2. History of HCI (Sessions 2 - 5) - students read, prepare and present
    1. Vannebar Bush - As we may think, 1945 - foreshadowing hypertext and the internet.
    2. JCR Licklier - ARPANET and human-computer symbiosis 1963 - designing the internet.
    3. Douglas Engerlbart - The mother of all demos, 1968 - real-time interaction with the mouse and other pointing devices.
    4. Ivan Sutherland - Sketchpad (1963) and VR (1968) graphical user interfaces GUIs and virtual reality VR.
    5. Alan Kay - Dynabook 1972, interacting with a tablet.
    6. Ben Shneiderman - direct manipulation, 1983 - GUIs and visualization.
    7. Don Norman - Design thinking and usability, 1988 - user experience UX.
    8. Sherry Turkle - The second self, 1984 - technology shaping human identity.
    9. Mark Weiser - computing in the 21st century, 1991 - smartphones, IoT, smartwatches, smartTVs.
    10. Paul Dourish - embodied computing, 2001 - wearable computing.
    11. The present and future - human-ai interaction, 2024 - ongoing.

 

Part II: Building interfaces and user experiences

  1. Understanding the users, their context and their needs (Sessions 6 - 9). Hands-on in-class and take-home group exercises and project milestone deliverables.
    1. Contextual Inquiry
    2. Interviews
    3. Questionnaires
    4. Surveys
    5. Non-participatory direct observation - shadowing
    6. Focus groups
  2. Prototyping, testing, early validation (Sessions 10 - 12). Hands-on in-class and take-home group exercises and project milestone deliverables.
    1. Co-Design sessions
    2. Participatory design
    3. Research through design
  3. From low- to high-fidelity prototypes (Sessions 13 - 21). Hands-on in-class and take-home individual and group exercises and project milestone deliverables. Student groups may choose on which tools they will focus their prototyping and developing.

 

Part III: Course project presentations 

  1. Course Project Final Presentations Part 1 (Session 22)
  2. Course Project Final Presentations Part 2 (Session 23)

 

Examples of tools for prototyping user interactions/faculty will select from:

1. Sketch

  • Purpose: Sketch is a vector-based design tool used primarily for creating user interfaces and wireframes.
  • Features: It allows designers to create high-fidelity prototypes and collaborate with others through plugins and integrations.
  • Why Popular: Known for its simplicity and efficiency in designing web and mobile interfaces, especially among macOS users.

2. Figma

  • Purpose: Figma is a web-based interface design tool that supports real-time collaboration.
  • Features: It offers a robust set of features for designing, prototyping, and testing, with the added advantage of cloud-based collaboration.
  • Why Popular: Its real-time collaboration features make it ideal for teams working remotely or across different locations.

3. Adobe XD

  • Purpose: Adobe XD is a design tool for creating wireframes, prototypes, and interactive user experiences.
  • Features: It integrates well with other Adobe Creative Cloud apps, making it a powerful tool for designers who already use Adobe products.
  • Why Popular: Adobe XD is favored for its integration with Adobe's ecosystem and its ability to create interactive prototypes.

4. InVision

  • Purpose: InVision is a digital product design platform that allows for the creation of interactive prototypes.
  • Features: InVision provides tools for prototyping, design handoff, and collaboration, including feedback collection and user testing.
  • Why Popular: It’s well-known for its ability to create clickable prototypes and gather feedback from stakeholders and users.

5. Axure RP

  • Purpose: Axure RP is a comprehensive tool for creating wireframes, prototypes, and documentation.
  • Features: It allows for complex interactions, dynamic content, and conditional logic, making it suitable for designing intricate user experiences.
  • Why Popular: Axure is preferred when detailed, high-fidelity prototypes are needed, especially for complex projects.

6. Marvel

  • Purpose: Marvel is an all-in-one platform for designing, prototyping, and collaborating on digital products.
  • Features: It offers an easy-to-use interface for creating low to high-fidelity prototypes and collecting feedback.
  • Why Popular: Marvel is appreciated for its simplicity and ease of use, making it accessible for beginners and teams looking for quick prototyping.

7. Balsamiq

  • Purpose: Balsamiq is a low-fidelity wireframing tool.
  • Features: It’s designed to quickly sketch and iterate on design ideas without getting bogged down in details.
  • Why Popular: Balsamiq is popular for early-stage design work, allowing teams to focus on structure and flow rather than visual polish.

8. UserTesting

  • Purpose: UserTesting is a platform that allows designers to conduct remote usability testing.
  • Features: It provides tools for recording user interactions, gathering qualitative feedback, and analyzing user behavior.
  • Why Popular: It’s widely used for obtaining real user insights and improving designs based on user feedback.

9. Framer

  • Purpose: Framer is a design tool focused on interactive design and prototyping.
  • Features: It allows designers to create highly interactive and responsive prototypes with real-time feedback.
  • Why Popular: Framer is preferred for advanced prototyping, especially when interaction design and animations are crucial.

10. Maze

  • Purpose: Maze is a user research and testing platform that integrates with design tools like Figma, Sketch, and Adobe XD.
  • Features: It allows for the creation of rapid, unmoderated usability tests and gathering of actionable insights.
  • Why Popular: Maze is valued for its ability to quickly turn prototypes into tests and gather data-driven insights.

 

Examples of tools for developing user interactions/faculty will select from:

1. Web Development Languages and Frameworks

  • HTML/CSS/JavaScript:
    • Purpose: The foundational technologies for web development. HTML structures the content, CSS styles it, and JavaScript adds interactivity.
    • Common Frameworks:
      • React: A JavaScript library for building user interfaces, particularly single-page applications.
      • Vue.js: Another JavaScript framework, known for its simplicity and flexibility.
      • Angular: A TypeScript-based framework for building complex web applications.
    • Usage: Widely used for creating responsive and interactive web interfaces.
  • TypeScript:
    • Purpose: A superset of JavaScript that adds static types, making it easier to catch errors early and build more reliable code.
    • Usage: Increasingly popular in large-scale web applications, often used with frameworks like Angular or React.

2. Mobile Development

  • Swift (for iOS):
    • Purpose: A programming language developed by Apple for building iOS and macOS applications.
    • Usage: The primary language for creating native iOS apps, known for its performance and ease of use.
  • Kotlin (for Android):
    • Purpose: A modern, statically typed programming language used for Android development.
    • Usage: The preferred language for Android development, often replacing Java for its conciseness and improved safety features.
  • Flutter (Dart):
    • Purpose: An open-source UI software development kit (SDK) created by Google.
    • Usage: Allows developers to build natively compiled applications for mobile, web, and desktop from a single codebase using the Dart language.

3. Desktop Application Development

  • Electron:
    • Purpose: A framework for building cross-platform desktop applications using web technologies (HTML, CSS, and JavaScript).
    • Usage: Popular for creating desktop apps that need to work across multiple operating systems, such as Visual Studio Code and Slack.
  • Qt (C++/QML):
    • Purpose: A free and open-source widget toolkit for creating graphical user interfaces as well as cross-platform applications.
    • Usage: Used for developing applications with a native look and feel across various operating systems.

4. Game Development (also relevant for interactive UIs)

  • Unity (C#):
    • Purpose: A cross-platform game engine that is also used for creating simulations and interactive experiences.
    • Usage: Popular for both 2D and 3D game development, as well as VR/AR applications.
  • Unreal Engine (C++/Blueprints):
    • Purpose: A powerful game engine known for high-quality graphics and complex simulations.
    • Usage: Used for developing AAA games, VR/AR applications, and increasingly, interactive media experiences.

5. Low-Code and No-Code Platforms

  • Bubble:
    • Purpose: A no-code platform that allows users to build web applications without writing code.
    • Usage: Popular among startups and small businesses for quickly developing and iterating on web apps.
  • OutSystems:
    • Purpose: A low-code platform for building enterprise-grade applications.
    • Usage: Used by large organizations to accelerate the development process while maintaining control over the application’s structure and functionality.