Course Description

This is an introductory course on human-computer interaction for undergraduate students. This course does not require any knowledge of human-computer interaction, psychology, and cognition. The class will cover the theories and foundations of human-computer interaction including the fundamentals and principles of human-computer interaction, user interface technology, visual information design, and system design and evaluation. It will also discuss recent research trends in human-computer interaction, such as intelligent interfaces and human-centered artificial intelligence. Students in this course will work on several programming assignments and one individual project to design, implement, and evaluate human-computer interaction systems and user interfaces.

Topics include:

  • Fundamentals of human-computer interaction
  • Preliminary knowledge of human, computer, and interaction
  • Needfinding: survey, dairy, and interview
  • Basic introduction to cognition, context, and perception
  • Visual design and information visualization
  • Color theory
  • UX design
  • Human-centered artifical intellgience

Course Goals

This is a technical class. Students will learn about all concepts (human, computer, interaction, design, etc.) and framework (i.e., React) aspects of Human-Computer Interaction (HCI). The goal for this class is to learn all of these aspects in a hands-on manner. The goal for each student is to build a fully functional interface, including considering usability, color preception, error prevention, navigation etc. In addition, students also have the ability to evaluate a interactive system in both quantitative and qualitative views.



  • Pre-required Courses : CSC 1001 or CSC 1003, and CSC 3002.
  • Proficiency in Web-based Programming : All programming assignments will be implemented in HTML, CSS, and JavaScript. If you are not familiar with these programming languages, please go through the following tutorials (HTML, CSS, JavaScript, and SVG) by yourself before the course starts.
  • Familair with Figma: The project will be developed based the design software. If you are not familiar with the mentioned software, please go through the YouTube Videos Introduction to Figma .

  • Class Time and Lecture Format

    Mon. and Wen. from 8:30 AM - 9:50 AM at Zhixin Buliding 102.

    If you have questions related to the lecture material, use Excel to ask.

    Office Hours

    Every Monday from 10:00 AM - 11:00 AM at Daoyuan Building 323b.


    Email me ONLY when your problems cannot be resolved via Excel Dicussion.


    All assignments and the final project should be submitted to Black Board.

    Textbooks, Course Notes, and other Reading Materials

    Students may need to read additional resources as indicated for some lectures. These readings will help get a better intuition and deeper insights into the topics of this course.

    Recommended Books:

    Suggested Reading Materials:

    Grading Policy

    The course requirements include: (1) 2 assignments, (2) a mid-term exam, (3) an individual project, and (4) CTE.

    Assignment Details

    Each assignment contains one programming question and multiple answer questions. Each assignment has two or three weeks for students to complete.

    Mid-term Exam

    To be announced.

    Project Theme

    Final project is an opportunity for you to apply what you have learned in class to a problem of your interest in human-computer interaction. The first step will be to propose a project. We have two options for you below. If you pick option 1 (going with a suggested topic), then your project proposal only needs to let us know which topic you picked. If you go with option 2 (your own idea for a project), then you will need to write a short doc proposing what you will do (details below under the Option 2 section). There is no programming in this project.

    Option 1: Choose from the suggested topics.

    There are ten project topics you can be able to select in this course. The candidate projects are listed as below.
  • Design an album sales tracker app for a Blues band
  • Design a recipe nutrition calculator app for a large fast food chain
  • Design a mobile ticketing app for a movie theater
  • Design a staff scheduling app for a car dealership
  • Design an appointment calendar app for an amusement park snack shop
  • Design a payment app for a cafe in your favorite city
  • Design a customer service app for a cooking school
  • Design a customer loyalty app for your favorite restaurant
  • Design a mobile-web app for a major sports arena
  • Design an art history app for an art gallery
  • Option 2: Your own project.

    You could select a topic related to designing a specific mobile app for human-computer interaction that interests you the most and work on it as your course project. Please clearly specify and justify: (1) what problem you plan to solve and (2) why it is important.

    Class Format

    Each week, there are two lectures. No tutorial is offered in this course .

    Getting Help

    If you have a question, to get a response from the instructor quickly we strongly encourage you to post it to Excel. For private matters, please send a an email to the course instructor. For longer discussions and to get help in person, we strongly encourage you to come to office hours.

    Late policy

    There are NO late days for assignments.

    Related Courses

    Related courses at other universities that you may also find interesting:

    A few of the course topics overlap with different parts of related courses.


    This webpage is based on the website for CS231N. We thank Andrej Karparthy, who designed the CS231N website.