index.md

layout: default
warning: draft

Welcome to Interaction Programming!

Interactive technology is changing society. Some of today’s interfaces are used by a billion people at a time. Almost everything we create is created for people to use, through user interfaces. We will learn about interactive systems, including programming paradigms and design of event handling, layout, undo, accessibility and context awareness.

For quick links to key things, check out the navigation bar above and the table of contents here:

• TOC {:toc}

Class Times

See Canvas for all zoom meeting links

Class Time: M/W/F at 10:30am PDT \ Lab Times: 9:30am PDT (Section AA) and 10:30 am PDT (Section AB)

Course staff

(More information on Pronouns)

Instructor

| Jennifer Mankoff (she/her)
Office Hours: TBD

TAs

:--: | :---------: | :-- | | :--: | :---------: | :-- Section AA | | Taylor Gotfrid (she/her) | | Section AB | | David Chen (he/him) Infrastructure | | Jeremy Zhang (he/him) | | | |

Should I take this class?

Yes! Some of today’s interfaces are being used by a billion people at a time. Almost everything we create is created for people to use, and user interfaces are how people interact with anything else you do (whether it is a new machine learning algorithm or a database system). User interfaces are incredibly important, but they also represent a different programming paradigm than you may have learned before. This class will teach you

• How to write an event-driven program which reacts to user input and displays output. If you’ve never done this before, the abstractions you will learn are standard in almost any user interface toolkit. Even if you have, too often, without attention to structure, interfaces become impenetrable spaghetti code.
• How to think about the design of novel interaction techniques. As devices diversify, so too do the ways in which people interact, from voice based interfaces to augmented reality. By understanding the principles of interaction technique design you can do a better job of making interactions that users will want, which improves both the user experience and the business value of what you create.
• How to avoid common gotchas in the implementation of user interfaces. We will teach you the proper way to create Accessible Interaces and implement features like Undo. We will also touch on other design principles (no modal dialogues; good use of color; inclusion of support for help and so on) that work in any user interface!ß

Taking a class is a big commitment, and you will work hard in this class. So we want to help you make sure this is the right class for you. Below is some information about prerequisites and expectations.

Prereqs and expectations

The only requirement for this class is that you have taken CS 142 and 143 or an equivalent class, meaning you are comfortable programming in Java, and have some experience with data structures. However, if you are not comfortable working in an IDE environment, using version control, and picking up and working with someone else’s library code, you will likely need to plan for extra time with TAs, and possibly attend extra tutoring sessions, to keep up with the class. Taking CSE 391 just before or concurrently with 340 can help, but our staff can also assist where needed.

The specific platform and language for this class are Java on Android phones (or simulators); using the IntelliJ IDE (Android Studio). While Google is switching over to Kotlin, there are good reasons to start learning Android with Java first.

Note that this class is designed for CS majors, and other students who work regularly with information technology and are strong programmers. While we will consider applications from outside the major, financial and other restrictions may limit space for such students.

Course Modules

Module	Interaction Programming Theory	Programming Practice
Visual	- Interface Toolkits - Interactor Hierarchy - Peer Review - Visual Design Tips	- Android Programming - Drawing on a Canvas - Bounding Boxes - Animation
Layout	- Visual Layout - Layout Constraints - Layout algorithm	- Layout in Android
Accessibility	- Accessible Design Principles	- Building Accessible Apps
Events	- Input Devices and Types - Event Handling - Model View Controller - Essential Behavior - Finite State Machines	- Java callbacks - Event handling in Android - Build a novel color picker interactor
Interaction	- Physical computing - Motor Design Tips - Predicting and testing interactor efficiency - Application design principles - Quantitative Study Design - Data Analysis	- Building pop up menus
Behavior	- Theories of User Behavior - Behavior Change - Machine Learning - Application Security - Heuristic Evaluation	- Implementing a drawing program - Implementing undo/redo feature

Drawing

How do I draw things on the screen? Do you know how to control what is shown to the user?

• Learn to use drawing abstractions such as https://developer.android.com/reference/android/graphics/Canvas to programmatically draw on screen and use coordinate transformations to move and scale and orient them. You should be able to place a https://developer.android.com/reference/android/view/View anywhere onscreen simply by specifying it's upper left x/y coordinates.

• When creating a new component on screen, it is important to properly size it so it is just big enough to fit its content (text, image, etc). To do this, you will Learn to properly set up bounding boxes so Android knows where to place https://developer.android.com/reference/android/view/Views even during dynamic events such as resizing or animation. The bounding box should be the smallest possible that surrounds the contents

• Nice interactions often incorporate animation. You should be able to set up an animations using timing options such as slow in/slow out.

Layout

How do I set up an interface so that it looks the way I want and reacts properly to changes in orientation and size? Do you know how to implement a layout, supporting reactivity and so on?

• Be able to visually represent an interface as an https://developer.android.com/studio/debug/layout-inspector (and vice versa). Given a picture of an interface, can you draw an interactor hierarchy that has all of the necessary components to be properly rendered as that interface? Similarly, given an interactor hierarchy, can you tell what interface it would be rendered as?
• Create reactive layouts that properly position things and handle dynamic events such as resizing or switching from portrait to landscape mode. Also, given an interactor hierarchy, you should be able to point at which interface images it matches, or edit it to add or remove a visual element.
• Design and implement your own a layout container that can properly lay out any number of child items, to a spec. For example, can you implement a two column scrolling layout, or the facebook newsfeed which dynamically shows things as you scroll? You will need to properly support dynamic addition and removal of child components, as well as properly reacting to changes in scale or orientation.

Events