This is the Spring 2021 final website.

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:

• Class Times
• Course staff
• Why should I take this class?
• Prereqs and expectations
• Course Learning Goals
• Course Structure
• Workload
• Class Coordination
• Android Studio and Emulator Remote Access
• Class Expectations
• Grading
• Academic Conduct
• Other relevant classes to know about
• Indigenous Land Acknowledgement

Class Times

See Canvas for all zoom meeting links

Schedule: Click here for a visual schedule of class, office hours, and section zoom links.
Class Time: M/W/F 10:30pm - 11:20pm PDT
Lab Times: 9:30 am PDT (Section AA) and 10:30 am PDT (Section AB)

Course staff

All times listed in the Pacific (Seattle) Time zone

Instructor

Lauren Bricker (she/her) Office Hours: 11:30-12:30 M/W

TAs

Section AA		Zeynep Toprakbasti (she/her); M 12:30, F 1:30		Jesse Martinez (he/him); Office Hours: T 2:00, W 3:30
Section AB		Taylor Gotfrid (she/her); Office Hours T 10:00, W 11:30		Jasper Palmer (he/him); Office Hours: Th, F 11:30
Grader		Jay Lin; Office Hours: W, Sat 2:30pm

(More information on Pronouns)

Why should I take this class?

Interfaces are an importan part of our daily lives. 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 in a high quality, structured way. The abstractions you will learn in this class will transfer to almost any user interface toolkit.
• 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 users will want, which improves both the user experience and the business value of what you create.
• How to avoid common pitfalls when implementing user interfaces. We will teach you the proper way to create Accessible Interfaces and implement user-centered features such as Undo. We will also discuss other design principles that work in any user interface!

Taking any class is a commitment, and this one is no exeception. We want to make sure you get the most out of your experience. Below is some information about prerequisites and expectations.

Prereqs and expectations

The only requirement for this class is that you have taken CSE 142 and 143 or an equivalent class, meaning you are comfortable programming in Java, and have some experience with data structures.

There are other skills that are required for the class that are not explicitly taught, which means you should plan to spend extra time (either independently or in OH) learning and practicing those skills. These include:

• working in an Integrated Development Environment (IDE) that is more complicated than JGrasp
• Using a version control systems (Git)
• Reading and understanding library and toolkit documentation
• Reading and understanding a larger starter code base
• Reflecting on and explaining the coding work you have done
• Reading through assignment specifications which are “more complicated and less detailed” than a typical Introduction to CS assignment specification.

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 CSE 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 Learning Goals

This is an interaction programming course which will teach the abstractions that underly all user interfaces. To learn these concepts, we will cover a mix of theoretical aspects of HCI (such as how to predict the time it will take to click on a button, or why Undo is important to implement) and practical aspects of HCI (such as how to handle user interface events). What we will not cover is Android programming.

To re-iterate, this is not an Android programming class and you will be expected to research Android programming yourself. We will point you at the relevant of Android documentation but you must be willing to read through and explore this documentation on your own.

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 using a Canvas to programmatically draw on screen and use coordinate transformations to move and scale and orient them. You should be able to place a 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 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 Interactor Hierarchy (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

How do I handle input from the user, both at the application level and within a specific interactor? An advanced but important aspect of android programming is implementing your own interactors. This is strongly tied to event handling because they can only be interactive if you know how to deal with events.

• The most basic and absolutely necessary form of event handling is application callbacks. This is how your application responds when someone presses a button or otherwise interacts, it is the minimum necessary to build a full interface.
• You should be able to build an application that can respond to callbacks from interactors such as buttons, or custom interactors and properly support separation of concerns between the application and interactors.
• All information should pass through the callback, and you should be able to update application state in response.
• You should understand how to use advanced Java programming concepts such as inner classes to support your work.
• If you want to go beyond the default library provided by Android, you need to know how to build an interactor yourself. This involves dealing with lower level events (such as click or keypress events).
  • To do this properly, you need to build an extended finite state machine that knows what state the interactor is in and how to respond to different events depending upon its state.
• Be able to build non-rectangular interactors and other useful interaction techniques. You will learn to use your knowledge of the event handling/bubbling algorithm to properly build non-rectangular interactors, lenses, and other special case input handling.
• Support a class of interaction techninques by building variations on a single interactor that all make use of the same finite state machine controller for their essential behavior.
• For example, a selection task might be handled as a pie menu or a linear menu.
• You should be able to accomplish this simply by varying the implementation of essential geometry for your interactor, without needing to modify the state machine underlying your interactor.

Applications

Learn to build an application that meets basic standards that require programmatic support for accessibility, security, and interactivity.

There are interaction programming concepts that need to be considered at the application level. These may not ever show up in a spec, but are still the responsibility of the implementer to consider. Some examples include making your interface secure; supporting undo; and making it accessible. Human behavior is another essential aspect of interface design you must consider. But how does it interact with interface programming? More specifically, this class will cover the following learning goals

• You should be able to implement a simple application from scratch. To meet expectations, this should be complete, meaning it includes an interactor hierarchy, event handling and a responsive layout.
• Fix accessibility problems including adding proper labeling, focus, navigation and contrast.
  • Properly use alt text to describe items on the screenhow to optimize navigation
  • Make sure that everything can be accessed by the accessibility tools
  • Ensure that contrast and scaling work properly… etc.
• Be able to assess potential security considerations with an app and fix them, based on android’s best practices and information found on sites like PrivacyGrade.org
• Properly implement Undo in any interface to help users recover from errors. This requires an understanding of how to capture and store information about changes to an interface over time; and memory management so too much history isn’t stored.

Communication about app concerns

You are unlikely to be building an interface in a vacuum – you will need to be able to read specs that are provided to you, identify potential problems, and advocate for new directions. These are communication tasks that are critical to success whether you are building interfaces or designing them. We will cover a sample of these in this class including:

• You should be able to read, understand, and apply documentation and specs.
• You should be able to use things you haven’t seen in the library before such as Canvas, Toasts and Floating Action Buttons; Bundler; Activities and the activity life cycle; and XML specifications including inflation.
  • All of these are Android specific concepts that we will not teach in any detail, but will expect you to master.
  • Other examples include Activities, Inflation, Bundles.
• Ethics. Although this is a programming course, unexamined decisions can easily lead to major ethics violations. Thus, it is the job of every employee/creator to search for possible concerns. You will learn to examine an application and identify violations of ethics in the domains of behavior change, machine learning, inclusion/accessibility and/or security.
  • This includes accessibility and security, but also other things such as unexamined biases
  • e.g. assumptions about skin color.
• Accessibility and Security.
  • Find and describe accessibility/security problems.
  • Part of finding problems is being able to report on them. Such a report might go to someone else who will fix the problems.
• The implementation of a study. You need to properly log behavior and analyze that behavior for a study to run.
  • You should be able to properly consent participants, accurately describe the study process, and clearly describe the results of the study, using charts correctly to illustrate them and to draw valid conclusions consistent with your data.
  • Furthermore, based on Fitts law, you should be able to predict which interactions will be slow. This can be helpful in finding small issues such as making an interactor that could have infinite width or height smaller.

Course Structure

Each week, there will be three hours of lecture material (Monday, Wednesday, Friday) and one TA-led lab (Thursday). In addition the instrutor and TAs will host office hours, sometimes in pairs.

Zoom

All schedule sessions for this course are scheduled to run synchronously at your scheduled class time via Zoom. These Zoom class sessions will be recorded. The recording will capture the presenter’s audio, video and computer screen. Student audio and video will be recorded if they share their computer audio and video during the recorded session. The recordings will only be accessible to students enrolled in the course to review materials. These recordings will not be shared with or accessible to the public.

The University and Zoom have FERPA-compliant agreements in place to protect the security and privacy of UW Zoom accounts. Students who do not wish to be recorded should:

• Change their Zoom screen name to a school appropriate screen name that hides any personal identifying information such as their name or UW Net ID
• Not share their computer audio or video during their Zoom sessions

Lectures

Lectures are designed to introduce new material throughout the quarter, motivate key theories and concepts, as well as demonstrate Interface Programming primarily using the Android Studio development environment.

The goals in this class center around learning by doing. This means that hands on time trying out everything from implementation to evaluation is critical to learning. Active learning has been shown to increase student performance in STEM subjects.

Thus, class time will be used as much as possible for in class exercises and surveys, as well as discussion and review. You will be graded on general participation in lecture for understanding using a variety of technologies. We also highly encourage questions in lecture. Often many students share the same question and those questions can help the instructor gauge student understanding.

Lecture Readings

Preparation outside of class and participation in class are both very important and will improve your class experience. The pre-lecture readings and activities are designed to support your studying and learning, particularly as we discuss both theoretical and practical aspects of interface Programming. We will use interactive techniques during class to check for your understanding on these materials. Stay on top of the course materials and bring your questions to class!

Assessments

There will not be quizzes, or a midterm or final exam this quarter. Instead, your knowledge will be assessed via your code and detailed reflections related to those coding projects. In the final reflection you will expect you to synthesize all of the course material.

There will be “practice” quizzes each week that will allow you to check for your own understanding on the material in the course. You will be graded up to 2 points for each practice quiz that is completed. This work will be part of your participation grade for the course.

Remote Lecture Guidelines and Expectations

Students are expected to adhere to the below expectations for remote lectures. These guidelines are intended to help lecture go more smoothly, facilitate questions and group activities, and foster a sense of community within the class.

• You are not required to have your video turned on during lecture except during group activities in breakout rooms
• Please keep your mic muted unless you’re asking a question
• To ask a question, you may use the raise hand feature in zoom, or type “hand”. The instructor or moderator will call on you to unmute yourself and ask your question.
  • You may also post questions in the chat, but you may be asked to unmute your mic and ask your question aloud.
• There will be individual and group based activities which you are expected to participate in (please contact the instructor if you not able to participate in the lectures synchronously due to your current living situation).
• It may be helpful for some students to see the instructor speaking even when the instructor is sharing their screen.
  • This can be achieved by right clicking the instructor’s video and choosing “pin” video.
  • Then, under “view options” you can choose the side-by-side option which will enlarge the instructor video

Lab

On Thursdays, you will participate in a weekly lab, held at either 9:30 or 10:30 am PDT. These labs will be similar those you may have had in other classes - we will spend the 50 minutes answering questions, going over common errors in homework solutions, discussing sample problems in more detail than we can in lecture, and completing exercise worksheets with TAs available to help.

Remote Lab Guidelines and Expectations

Students are expected to adhere to the below expectations for remote labs. These guidelines are intended to help lab go more smoothly, facilitate questions and group activities, and foster a sense of community within the class.

• If possible you should have your video on at all times during lab. This is not to monitor you, but to help create a sense of community in the classroom.
• Please keep your mic muted unless you’re asking a question
• To ask a question, please raise your hand using the Zoom reactions or type “hand” in the chat. A TA will call on you and then you can unmute your mic and ask your question
• You may also post questions in the chat, but you will be asked to unmute your mic and ask your question aloud
• There will be individual and group based activities which you are expected to participate in. Please contact the instructor if you are unable to participate in these activities synchronously due to your remote living situation.

Workload

This is a four credit class, meaning you should expect 8 hours of homework outside of class a week. We hope make the workload as predictable as possible. Assignments will have a fixed and an open ended piece, and some will require a structured peer review. They will typically involve either a single (one-week) part or be split into two parts, with each about a week long. After you turn in an assignment you will also work on a short practice quiz on the most relevant material taught in the assignment.

Class Coordination

We want you to succeed in this class, and an important way that you do that is by asking questions and discussing course issues with your peers and teaching staff. Some ways to do that include:

• We have a class discussion board on Ed, where you can make public posts that benefit the whole class, and are answered more quickly because your fellow students can help the course staff by responding also.
  • This is the best way to ask questions about things like homework and programming
  • Before posting, please search through the questions that have already been posted in case someone has already asked the same question.
• We hold office hours (see above).
• If none of those times work for you, you can also discuss matters with us privately on the Ed discussion board. Using Ed notifies the whole course staff at once and is usually faster than email.
• If none of these work for you you can send an email asking to set up an appointment.

Android Studio and Emulator Remote Access

In this class you are required to use Android Studio as well as the emulator or a physical Android phone to test your code with. If you are unable to install Android Stuido on your own machine, you can remotely access virtual lab machines which can run both Android Studio and the emulator. For instructions on how to run the virtual machine and to install the necessary software check this link: Remotely Access Android Studio + Emulator.

The Allen school support staff have a limited number of Android phones available to check out for the quarter. We will be asking you to fill out a form (sent on our discussion board) by the first Wednesday of the class to ensure a phone can be shipped to you as soon as possible.

Class Expectations

The class is a shared learning environment and it is important it is a welcoming environment for everyone, from all backgrounds. As instructors, we know that students in this class may need materials to be accessible by screen reader, or may need extra time on exams. You may observe religious holidays that overlap class times, or have work, childcare or appointments that have to be prioritized at specific times. As students we also ask you to remember that each person brings different priorities and experiences to class. We should all strive to treat everyone in the class with respect and understanding.

The Allen School seeks to create a more diverse, inclusive, and equitable environment for our community and our field (see the Allen School’s Inclusiveness Statement). Specific things we will do to promote welcoming class environment include:

• Working Together: We will encourage students in this class working together, as long as you only turn in code that you implemented.
• Wellness: It is very important to us that you take care of your mental health throughout the course. Everyone on the course staff is available to chat, and you can always attend office hours for a non-academic conversation if necessary. Beyond the course staff, the University of Washington provides the following resources for mental health concerns. Your anonymity and privacy are protected.
  • Please reach out to the UW Counseling Center for any help and concerns related to mental health (including increased stress), available to all UW students at no cost.
  • If you are ever feeling uncomfortable and need to talk or are worried about someone close to you, it is highly recommended to visit the UW Heath and Wellness programs. They offer resources to students that can help.
  • If you’re concerned for yourself or a friend, please call SafeCampus at (206) 685-7233.
• Accessibility: If you have a temporary health condition or permanent disability (either mental health or physical health related) that impacts your academic experience, please let us know how we can accomodate you. You are NOT obligated to disclose any of these issues with the instrutor, only specify if there’s any accommodations required.
  • If there is something we can do to make your experience better, please let us know. We have attempted to make all the course materials accessible according to web standards but there are always things we may not have thought of.
  • If you need any additional support, we are always happy to work with you directly or through DRS to make sure that the class meets your needs. If you need any adaptations for course materials (large font, pacing, image description, closed captioning), just let the instructor know.
  • You may also want to contact Disability Resources for Students (DRS) at uwdrs@uw.edu if you have not already. DRS offers a wide range of services for students with disabilities, that are individually designed and remove the need to reveal sensitive medical information to the course staff, but it is important to start the process as soon as possible to avoid delays.
• Religious Accommodations The UW’s policy, including more information about how to request an accommodation, is available at Religious Accommodations Policy. Accommodations can be requested within the first two weeks of this course using the Religious Accommodations Request form on UW’s site.
• Inclusivity: Our goal is to make CSE 340 a welcoming environment for all. We are working toward using a broad base of examples in our course material. Please let us know if you see an opportunity to improve our course materiale to be more representative of our student population. Additionally, if you experience interactions with anyone that are excluding or otherwise uncomfortable, please reach out to the course staff so that we can address the situation. Should you feel uncomfortable bringing up an issue with a staff member directly, there are a number of Community Feedback Mechanisms and Resources including the Anonymous Feedback form, but understand we can not respond to you directly if you use the latter. Responses, if possible, will be broadcast to the class as a whole or systematic changes to the class when necessary.
• Sexual Harrassment: University policy prohibits all forms of sexual harassment.
  • If you feel you have been a victim of sexual harassment or if you feel you have been discriminated against, you may speak with your instructor, teaching assistant, the chair of the department
  • You can also file a complaint with the UW Ombudsman’s Office for Sexual Harassment. Their office is located at 339 HUB, (206)543-6028. There is a second office, the University Complaint Investigation and Resolution Office, who also investigate complaints. The UCIRO is located at 22 Gerberding Hall.

Grading

Grades will be assigned approximately as follows:

• 40%: Assignments - Code
• 40%: Assignments - Reflections
• 20%: Effort, participation and altruism (EPA)

EPA (Effort, participation and altruism)

You can earn “points” for each of the following:

• Effort: Attending office hours, lectures, and sections. Keeping up with the discussion board. Demonstrating a good effort on practice quizzes.
• Participation: Asking questions in lecture and on the discussion board, voting on peer instruction questions, interacting with TAs and other students.
• Altruism: Helping others in lecture, during office hours, and on the discussion board.

EPA scores are kept internal to the staff (i.e. not disclosed to students).

Late Days

You have 3 free late days which will automatically be applied until they run out, following which each late day will incur a 10% penalty on the assignment that was due. Each homework will allow up to 2 late days, after which turn-ins will be given a zero.

Regrade Policy

Reflecting on feedback is one of the most valuable ways you can learn from your mistakes, and we encourage you to do so. If you have a question about a grade you received or if you feel the grade you received is incorrect, please email an instructor for an appointment to discuss the assignment and your grade in detail.

It is also possible for the graders to make mistakes. If that happens we certainly would like to correct the error. Please note the following:

When you request a regrade, we may look at the entire assessment, homework or reflection. Therefore, it is possible for your grade to go either up or down through this process.

• Coding Assignments: Regrade requests for homework assignments must be submitted within one week of when the grade was returned to you. You must do two things in order to request a regrade of a homework (failure to do these two things may result in the regrade not happening):
  • Reply to the code review comment that is prompting your request of the regrade. You can find your code review comments in your GitLab repository for that assignment.
  • Send a private message on Ed to the instructors that you are requesting a regrade.
  • Include a link to the repository in your message and a written summary describing why your work should be reexamined.
• Exams and Written Assignments: We will use Gradescope to grade exams and manage regrade requests.
  • Via Gradescope, you should submit any requests separately for each problem with an explanation of why you want this problem regraded.
  • The time limit for such regrade requests will be detailed in the email you receive from Gradescope.

Academic Conduct

Academic integrity is an important value that we adhere to in this class. For more details on how this will be implemented in this class, please see the Academic Conduct page, but in summary:

• Instructors are expected to respect student privacy, and treat students fairly.
• You are expected to be honest and forthcoming in your communications.
• Your work should be appropriate for a school environment.
• You may not copy your code directly from another student or any other source on the internet.
• You will be asked, in each reflection, to acknowledge any help you received from another person or internet resource. Additionally it is always good practice to also cite your sources with a comment in your code as well.
  • Students are expected not to share code/solutions with the broader public, and not to plagiarize or cheat, as described in the Allen school conduct guidelines.

Other relevant classes to know about

There are a number of classes on campus that teach related concepts which you may wish to consider in addition to this one. As of Spring 2020, here are the ones we are aware of:

• CSE 154: Web Programming: Sp 21 This course covers languages, tools, and techniques for developing interactive and dynamic web pages. Topics include page styling, design, and layout; client and server side scripting; web security; and interacting with data sources such as databases.
• HCDE 310: Interactive Systems Design & Technology This course is a project based course that teaches how to prototype applications on the web using Python that solve human problems or enable new activities. Includes information about APIs and how people interact with them. It differs from CSE 340 in its choice of platform. Additionally, it doesn’t cover the theory of UI programming, nor issues such as accessibility, undo, and so on.
• INFO 343: Client side web development This is a programming course, and there will be significant overlap between the courses, as INFO 343 also touches on event based programming, output, and accessibility. CSE 154: Web Programming also covers some related material. However, both are about programming on the web using JavaScript instead of on Android, using Java. In addition, CSE 340 covers more of the theory of UI programming and design, similar to HCID 520.
• CSE 440: Introduction to HCI; 441: Advanced HCI This is an advanced series of courses for undergraduate seniors. The focus of 440 is less on programming and more broadly on methods for designing, prototyping, and evaluating user interfaces to computing applications, while 441 is an open ended capstone course. These are excellent follow on courses to 340, for a student who wants to go deeper into how to make usable, enjoyable effective interfaces, and how to solve interesting problems with HCI. Related is CSE 510, the HCI course for the professional masters program.
• HCID 520: User Interface Software + Technology (Wi 17, Wi 16 Wi 19) This course teaches about user interfaces, including what they are, how they are built, and some inventions in user interface software and technology. There are many similarities between these classes. However HCID 520 is only open to MHCI+D students Masters students.
• HCID 521: Prototyping This class is for the MHCI+D students only and focuses on prototyping techniques, not implementation. It covers everything from paper prototyping to physical interfaces to 3D printing.

Indigenous Land Acknowledgement

The University of Washington acknowledges that we are on sacred land of the first peoples of Seattle, the Coast Salish people, past and present. We honor, with gratitude, the land which touches the shared waters of all tribes and bands within the Suquamish, Tulalip and Muckleshoot nations.