05-431/631 Software Structures for User Interfaces (SSUI) - Fall 2021

Web Site

This is the class website: http://www.uicourse.org (temporarily)
Permanent link: http://www.cs.cmu.edu/~bam/uicourse/05631fall2021/

The schedule and readings and homeworks and policies are on different pages.

See also the course 1 minute video introduction.

Description

This course covers the basic and detailed concepts that go into building software to implement user interfaces (UIs). It considers factors of input, output, application interface, and related infrastructure as well as the typical patterns used to implement them.

It considers how these aspects are organized and managed within a well-structured object oriented system. We will cover the Tools and Skills for a variety of "front-end" programming contexts, including conventional graphical user interface (GUI) programming for mobile apps (phones, watches and other wearables), web apps, and regular desktop applications, across a variety of programming languages and frameworks. We will briefly touch on programming for data-driven and conversational (AI) user interfaces (including speech and "chat bots"), front-end programming for visualizations, games, 3D, and virtual and artificial reality (VR and AR), along with interactive UI tools such as GUI builders, prototypers, and resource editors. The homeworks and project in this course will involve extensive object-oriented programming in JavaScript, so this course is only appropriate for students with a strong programming background.

This content will be important for people with roles such as front end or full-stack developers, user experience engineers, design technologists, creative technologists, and HCI technical researchers.

Note that this is not an HCI Methods course -- we do not cover user-centered design or evaluation methods. This course is designed for students in the SCS HCI undergrad Major, but it also available to BHCI second majors or HCI minors, Masters of HCI and METALS students, or any undergrad or graduate students with an interest in the topic and solid prior programming experience, who wish to understand the structures needed for professional development of interactive systems. SSUI now covers different material than other HCII courses, so you can take it even if you have taken 05-430/05-630 PUI or 05-391/05-891 DHCS.

The graduate (05-631) and undergraduate (05-431) numbers are for the same course with the same work.

Key Topics and homework in this course

Using and designing User Interface (UI) Toolkits and Frameworks; Input, Output and Behaviors for User Interface Front-end Programming; the Software Structures for Tools such as React, Angular, Android, Apple Xcode, Windows SDK, Java Swing, Flutter, Unity, D3, etc.

Please see the schedule for the complete list of topics, and the homework descriptions, which includes the policies for homeworks and the class.

Prerequisite Knowledge

Students must be strong programmers. For example, having taken 17-214 or 17-514 or 17-437 or 15-214 or 15-213 or 18-213 or 15-513 or 14-513 or equivalent. 15-1xx level courses will not be sufficient. Familiarity with object-oriented programming is strongly recommended. Basic programming experience in JavaScript is recommended, since the homeworks will be in JavaScript. Introductory courses or background in HCI is recommended but not required (note that this is not an HCI methods course, so students are expected to learn HCI methods elsewhere).

Course Relevance

Most software developers will be involved in programming the front-end of applications, and there are standard software structures that pervade all of the tools that are used to support this. This content will be important for people with roles such as front end programmer, user experience engineers, design technologists, creative technologists, and HCI technical researchers.

Course Goals

Students will learn the software structures that have stood the test of time, and are the foundation of user interface frameworks and libraries for various platforms, as well as newer structures for programming the user interfaces for AI, data-driven, game and AR/VR systems.

Assessment Structure

The course will have multiple programming assignments as the homeworks, a final project, and a midterm.. Homeworks will involve programming in JavaScript, and later, using the React-JS library.

Recordings

Classes will be recorded, as recommended by CMU, so you can watch the recording if you are sick or otherwise not able to attend class. However, the recordings are not intended as a replacement for attendance. Please plan to attend in-person whenever you are able. The videos will be saved in the "Files" section of Canvas, in the "Lecture Videos" folder. Note that, except where noted, recordings of course sessions are provided solely for educational use by students enrolled in the course and may not be distributed to any other person or posted on the internet without the express written permission of the course instructor. Therefore, the link to the videos will only work for students enrolled in the class.

Learning Resources

Students will use a variety of learning resources including documentation for existing user interface frameworks and tools, along with academic research articles (which are all accessible free on-line via University library resources).

Extra Time Commitments

Assignments, readings and the project for this course are done outside of class, but should fit within typical expectations based on the number of units of credit.

Nice (Anonymous) Comments from Last Year

"Professor Myers was very considerate and receptive to feedback. He has an extremely deep understanding of the topic area and provided a unique, first-hand perspective on much of the subject matter."

"I think the course has a good split of implementation and theory."

"In my opinion this is a great course for an overview on how to make interactive websites. I knew no JavaScript/React before this class, and still was able to follow along and complete the homework with the information provided. I feel like the class covers a lot of info about front end programming I had not previously known."

"I think [the homeworks] are fun to do and I learned a lot during the process."