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

Credits: 12 units
Lectures: Tuesdays / Thursdays, 3:05PM – 4:25PM in GHC 4102
Lab: Fridays, 3:35PM – 4:25PM in WEH 4623
Instructor: Brad Myers (he/him)
TA: Alex Cabrera
email: acabrera@andrew.cmu.edu
Piazza: piazza.com/cmu/fall2022/05431631 - We will be using Piazza for questions and answers, especially about homeworks
Office Hours:

Alex (TA): Monday 1:00-2:00pm on Zoom (link in Zoom section of Canvas)
Brad (Prof): Wednesdays at 11:00am - 12:00noon in NSH 3513
or by appointment - just email us!

Web Site

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

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

Description

This course covers the basic and detailed concepts and principles 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, and how these aspects are organized and managed within a well-structured object oriented system. We will cover the libraries, design patterns, 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 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 principles and structures needed for professional development of interactive systems.

The graduate (05-631) and undergraduate (05-431) numbers are for the same course with the same work, but students must register for the number appropriate to their level (05631 for grads and 05431 for undergrads).

SSUI is now approved as an alternative to 05-630 Programming User Interfaces (PUI) for Masters of HCI (MHCI) students who are strong programmers.

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. The homeworks will be in JavaScript and React-JS. Lab session will help students learn JavaScript, so students who are experienced programmers in different languages should be fine.

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, a midterm, and a final test on the second half of the course. 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. 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.

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.” 

“Good exposure to existing research in UI/HCI, good learning experience for web UI.”

“I feel like the class covers a lot of info about front end programming I had not previously known.”

“The homeworks were really great.”

“Final project is very fun.”

“The content was extremely helpful.”