---
layout: presentation
title: Introductory Slides--Week 1, Monday--
description: Introductory slides for Interaction Programming, CSE 340
class: middle, center, inverse
---
name: inverse
layout: true
class: center, middle, inverse
---
# Introduction to Interaction Programming
Welcome to CSE 340 {{site.quarter}}
Instructor: {{site.author.name}}
TAs: David Chen, Zach Cheung, Taylor Gotfrid, Brian Lee, Jay Lin,
Michelle Lin, Jasper Palmer, Sophie Tian, My Tran,
with help from GitGrade's Jeremy Zhang.
---
layout: false
# Today's goals
- **HCI: Designing the Future**
- Learning goals
- Course staff
- Syllabus
---
# HCI in the Future
Small Group Discussion: How is it changing us as individuals and a society?
???
- Social networking has been implicated in revolutions and elections.
- Interfaces designs have impacted health and safety.
---
# Return to discuss as a class
---
# Summary (somewhat tongue in cheek)
Welcome to the class!
All of HCI was already invented (sort of!)
HCI has a huge influence on individuals and society
HCI is really all of computer science
---
layout: false
# Today's goals
- HCI: Designing the Future
- **Learning goals**
- Course staff
- Syllabus
---
.left-column[
# This **week's** learning goals
]
.right-column[
- What is HCI? Past, present and future
- Get up to speed with Android basics
- Learn about basic abstractions for UI implementation
- Names for common interactors
]
---
.left-column[
# Course learning goals:
]
.right-column[
# Building Interfaces
- Deep understanding of **how to build user interfaces**
- Basic abstractions (layout, event handling, *etc.*)
- Implementing best practices: Undo, Accessibility, Feedback, Errors,
*etc.*
- Exploration of advanced UI concepts: Ubicomp, Sensing, AR, *etc.*
]
---
.left-column[
# Course learning goals:
]
.right-column[
# Iterative Design
- Basic understanding of **Iterative Design**
- Why designers are valuable
- Iterative design process
- How designers get data from users
]
---
layout: false
# Today's goals
- HCI: Designing the Future
- Learning goals
- **Course staff**
- How we will teach this course
- Learning goals
- Assignments & Grading
- Relevance of HCI to all of Computer Science
---
.left-column-staff[
## Lauren Bricker (she/her)
bricker@cs.washington.edu
Faculty Lecturer
OH: Mon, Fri 11:30 am - 12:30 pm

]
.right-column-staff[
- I am a UW CSE PhD Alum
- This is my 3rd year as Faculty in CSE
- I've taught 2nd grade - Masters students
- I also STARS and Startup support courses and do K-12 outreach
- I taught CSE 154 three times, consulted with it three times, and created CSE 390Z
- I was a part time instructor on CSE 340 in 20wi
- My older son is also a CSE Alum, my younger son is a current Husky in Chem E
- I'm an artist and maker
- I love to bicycle and begrudgingly run
- I'm an intermediate drummer
]
---
.left-column-staff[
## David Chen (he/him)
hanfec@cs.washington.edu
OH:
- Sun 2:30 - 3:30 pm
- Fri 1:00 - 2:00 pm

]
.right-column-staff[
- I grew up in China, and went to New Jersy for the last two years of the high school.
- It's my second time TAing 340, my suggestions: start doing the assgignment early.
- Foods I like:
- Chocolate, Salmon, Green tea
- Foods I hate:
- Tomatoes
]
---
.left-column-staff[
## Zach Cheung (he/him)
zachcheu@uw.edu
OH:
- Tues 4:30 pm - 5:30 pm
- Wed 9:30 am - 10:30 am

]
.right-column-staff[
Hello!
- I'm from Redmond, WA and will be remote from Redmond this quarter
- I'm a Junior at UW CSE and this is my 2nd time TAing 340
- Some things I'm looking forward to this quarter:
- Reading some books that I've put off
- Working on apps/projects with my friends remotely
- Getting to know you!
]
---
.left-column-staff[
## Taylor Gotfrid (she/her)
gotfrid7@cs.washington.edu
OH:
- Thurs 2:30 - 3:30 pm
- Friday 1:00 - 2:00 pm

]
.right-column-staff[
- 1st year PhD student in CSE working with Jennifer Mankoff
- My research interests are in accessibility and HCI
- My favorite video game is Stardew Valley
- I love tea
- I have a cat named Indie who you may potentially see during office hours
]
---
.left-column-staff[
## Brian Lee (he/him)
blee11@uw.edu
OH: Tues, Thurs 12:30 - 1:30 pm

]
.right-column-staff[
- I am a 2nd year student studying Informatics.
- I grew up in Seoul, moved to Anchorage when I was in 5th grade, moved to Seattle about 7 years ago.
- I have rewatched all 9 seasons of The Office 7 times (best record was a 2 weeks).
- I also love coffee, if you need any coffee shop suggestions, ask me!
]
---
.left-column-staff[
## Jay Lin
jial8@uw.edu
OH:
- Sun 2:30 - 3:30 pm
- Wed 4:30 - 5:30 pm

]
.right-column-staff[
- 2nd year undergrad student
- Ambassador for Husky ADAPT
- Took this class just last quarter :)
- Loves:
- Opossums (the American marsupial)
- Music (transcribing/composing)
- Single-player video games
]
---
.left-column-staff[
## Michelle Lin (she/her)
mlin88@cs.washington.edu
OH:
- Wed 9:30 - 10:30 am
- Sat 3:30 - 4:30 pm

]
.right-column-staff[
- I'm a 3rd year undergraduate student
- Director of Outreach for CSE Student Advisory Council
- Took this class last Spring!
- In my somewhat limited free time I enjoy:
- Playing flute
- Graphic design
- Fabrication (3D printing/laser cutting)
- Exercising (occasionally)
- Trying new things (I’ll try almost anything once)
- So excited to meet y'all! ^_^
]
---
.left-column-staff[
## Jasper Palmer (he/him)
jpalmer4@cs.washington.edu
OH:
- Tue 9:30 - 10:30 am
- Tue 4:30 - 5:20 pm

]
.right-column-staff[
- I am a second year undergraduate student!
- I spent my first year at UW studying Biochemistry
- I have played Ultimate Frisbee for 10 years
- I moved to Seattle when I was 4 from Michigan
]
---
.left-column-staff[
## My Tran (Emhily) (she/her)
tranmy@cs.washington.edu
OH:
- Wed 4:30 - 5:30 pm
- Thurs 2:30 - 3:30 pm

]
.right-column-staff[
- **Hi**, my first name is pronounced as "me"
- I'm a CS transfer student from Oregon, graduating Fall '20
- Originally "made in Vietnam" and love photography
- It's my second time TA-ing CSE 340
]
---
.left-column-staff[
## Sophie Tian (she/her)
shuxut@cs.washington.edu
OH: Tue/Thurs 12:30 - 1:30 pm

]
.right-column-staff[
- I am a 5th year master's student.
- I am a hopeless Star Trekkie.
- I grew up in Tongling and Nanjing in China. I attended Gallaudet University, a school for the Deaf and hard of hearing located in Washington, DC.
- After graduating from Gallaudet with a degree in IT, I moved to Seattle and entered UW CSE to pursue a BS and then MS in computer science.
]
---
.left-column-staff[
## Jeremy Zhang (he/him)
jkzhang@uw.edu
GitGrade Inventor

]
.right-column-staff[
- **Hello** from *UW Bothell*! (Studying Computer Science)
- A My Little Pony: Friendship is Magic enthusiast
- Casual Super Smash Bros Ultimate Player
- Previously threw an April Fools joke for CSE 154; turning course website into a playable fighting game (Spring 2019)
]
---
# Let's get to know you!
---
# Aside: Accessibility in this course
- Our goal is to make this course inclusive and accessible.
- If you use a screen reader, or just want to see it there is a link to the slide markdown for every slide (demo)
- There are live (but automated captions) on every slide deck.
- The answers to slides can be viewed by pressing P.
---
[//]: # (Outline Slide)
# Today's goals
- Course staff
- **How we will teach this course**
- Learning goals
- Assignments & Grading
- Relevance of HCI to all of Computer Science
---
# Class Structure
Lectures
- Readings before lectures to give you context about what we'll discuss (aiming for 20 minutes)
- Discussion of theory and practice
- Emphasis on active learning including exercises in lectures
- Class attendance is **STRONGLY encouraged**. Recordings won't give you the chance do in-class work
Labs
- Support for synthesizing the theory and the practice through programming and data analysis
~~Exams~~ Examlets: Four mini assessments to test your understanding on Weeks 3, 5, 7, 9
- Practice quizzes (for participation) on Weeks 2, 4, 6, 8, 10
- No midterm, no final
Please post (privately) on Ed if you are in a time zone that does not allow you
to partipate during class synchronously.
---
# Getting help
- Questions during class
- Instructor Office Hours
- TA Office Hours
- Ed Message Board
---
# Where to find what
The class is on the [web]({{site.baseurl}}/index),
but we have used iframes to connect this to
[Canvas]({{site.canvas}}). We try to interlink
everything as much as possible.
- Class discussions and all contact with instructors should happen
either in office hours or through [Ed]({{site.piazza}})
- You can also request appointments for further help
- Assignments will be accepted and turned in [GitGrade]({{site.gitgrade}})
- GitGrade will make you a [gitlab]({{site.gitlab}}) repo which you will use to receive
starter code and commit your changes.
---
# Expectations
- **Background**: Lots of programming expected
- **Sharing**:
- Documentation is required ("Jenny helped me figure out how to do
slow in/slow out animations")
- No direct copying, using your eyes or cut and paste
- Fundementally we want to understand as assess YOUR learning.
See our [Academic Conduct]({{site.baseurl}}/academic-conduct) page for more details
???
talk about this a little deeply. What does direct copying mean? Copy paste? Watching someone else
type it and then typing it into your code (that’s a no no too). Watching a video and typing in that code (also a no no).
---
# Expectations and Values
- **Accessibility**: This course is designed to be accessible
- **Inclusivity**: An important value in this class, and in HCI!
- **Academic Integrity**: A course value and requirement
- **Language**: I am Lauren, or Dr. Bricker
- **Respect**: This class is a compact between us based on respect
- **Healthy Environment**: Your health/mental health are important and we have tried to
structure the class to support you (e.g. up to 3 late days without questions asked).
If you need larger accommodations for any reason, consider working with
[DRS](https://depts.washington.edu/uwdrs/) so we can support you.
If you run into problems, or have preferences about these issues, please tell me!
---
# Distance learning
So how's this Distance Learning thing going to work? With shared expections of the
- students
- instructor
- TAs.
---
# Lecture and Section: Student Expectations
- You are not required to have your video turned on during lecture except for during group activities in breakout rooms.
- Please keep your mic muted unless you’re asking a question.
- To ask a question, please type “hand” in the chat in Zoom. The instructor 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 may be asked to unmute your mic and ask your question aloud.
- If you do type in the chat, ensure what you are typing is school appropriate and inclusive.
- There will be individual and group based activities which you are expected to
participate in. (Contact us if you are not able to participate in real time)
---
# Lecture: Instructor Expectations
- Will address the class via video before switching to slides/lecture content. Instructors
will keep their video on during the entirety of the lecture.
- Will not record student computer activity via Zoom during lecture
- The moderator instructor will notify the content instructor if there are questions
- If for some reason the screen sharing stops working, the moderator instructor will
notify the content instructor as soon as possible
---
# Lecture: TA Expectations
- Will have their camera on when asking a question or in a breakout room.
- Will mute a student if they forget to mute themselves .
- Will help organize breakout rooms for group activities.
- May be in breakout rooms with students during group activites.
- Will model student expectations in lecture (e.g., type “hand” to ask a question).
---
# Section: TA Expectations
There will be 3 and sometimes 4 TAs in each section. TAs will
- Take turns in presenting the material (depending on the week)
- Have their camera on throughout section.
- Mute a student if they forget to mute themselves.
- Will help organize breakout rooms for group activities.
- May be in breakout rooms with students during group activites.
- Will model student expectations in lecture (e.g., type “hand” to ask a question).
A TA who is not actively presenting during a section will act as a moderator.
---
# Development Environement
Java is our primary language
- Need 143 or equivalent
- Comfortable with Java; basic software engineering; some Data Structures
- Fast-paced introduction to git & Android Studio IDE
- Advanced Java use (e.g. anonymous inner classes)
- Must be comfortable with reading documentation (not just Stack Overflow)
- We will use trees, state machines, etc.
- Math computations (trig) for later assignments
---
# Platform: Android
Most commonly used
interface development platform for Java
--
- Open source
- Around 75% market share
- Thousands of supported devices
--
- Exposes Android SDK
- Framework for building apps on mobile devices
--
- Written in __Java__ and E__X__tensible __M__arkup __L__anguage (__XML__)
---
.left-column-half[
## Android Versioning

]
.right-column-half[
## We're going to target .red[Nougat] :)
That's .red[__19%__] of devices. (Looking into upgrading to Oreo)
]
---
# Android Versioning
- We encourage you to buy an android phone (no tablets) ~$150
- ~~Support will have 10 Android phones on loan for 24hrs or less~~
- Laptop will need sufficient memory/disk space to run
Android Studio & emulators
- Ask questions on Ed if you need more guidance
---
[//]: # (Outline Slide)
# Today's goals
- Course staff
- How we will teach this course
- **Learning goals**
- Assignments & Grading
- Relevance of HCI to all of Computer Science
---
.left-column[
# This **week's** learning goals
]
.right-column[
- What is HCI? Past, present and future
- Get up to speed with Android basics
- Learn about basic abstractions for UI implementation
- Names for common interactors
]
---
.left-column[
# Course learning goals:
]
.right-column[
# Building Interfaces
- Deep understanding of **how to build user interfaces**
- Basic abstractions (layout, event handling, *etc.*)
- Implementing best practices: Undo, Accessibility, Feedback, Errors,
*etc.*
- Exploration of advanced UI concepts: Ubicomp, Sensing, AR, *etc.*
]
---
.left-column[
# Course learning goals:
]
.right-column[
# Iterative Design
- Basic understanding of **Iterative Design**
- Why designers are valuable
- Iterative design process
- How designers get data from users
]
---
[//]: # (Outline Slide)
# Today's goals
- Course staff
- How we will teach this course
- Learning goals
- **Assignments & Grading**
- Relevance of HCI to all of Computer Science
---
# Assignment Structure
Assignments typically include closed piece and open-ended piece.
- Closed piece is graded by us
- Open ended piece will be evaluated by your peers, sometimes using traditional HCI methods. Peer evaluations are required and graded pass/fail
- You write a reflection for each assignment.
---
# A typical assignment takes about a week
- Introduce theory
- Introduce Assignment including core part (structured) and open ended part
- Expand theory, add practice
- Get practical help in lab
- Work over weekend
- `*`Peer evaluate
- Write reflection
- `*`Take practice quiz
- Take Examlet
`*` Starred items are required, but you pass them if you do them. They help your peers and/or us
with assessment and are important to your class participation grade as well
---
# Assignment Structure
Projects: Implementation of Interfaces
- Practical help with assignments in lab
- Code tested with unit tests
- Applications tested through user studies you run
- Some basics handled in code review
---
.left-column[
# Field Trip
]
.right-column[
# [Assignments]({{site.baseurl}}/assignments)
]
---
[//]: # (Outline Slide)
# Today's goals
- Course staff
- How we will teach this course
- Learning goals
- Assignments & Grading
- **Relevance of HCI to all of Computer Science**
---
# Human-Computer Interaction (HCI)
A science of the artificial
- Human
- Anyone impacted by the existence of the program
- end users
- Computer
- Artificial thing human is interacting with
- Interaction
- How the artificial stuff is actually used
- 48% of app code [Myers & Rosson, CHI'92]; probably more now!
---
# Pre-work check
---
.left-column-half[

]
.right-column-half[
Robida's vision of a cordless telegraph (1906)
]
---
.left-column-half[

]
.right-column-half[
Commercial vision of a wireless private video phone (1929)
]
---
.left-column-half[

]
.right-column-half[
.quote[The MEMEX 'is a desk that can instantly bring files and material on
any subject to the operators fingertips....' (Bush, 1945, 'As We May
Think', Atlantic Monthly)]
]
---
.left-column-half[

]
.right-column-half[
A wrist-watch cellphone prototype (1947), which captured popular imagination as shown in this Dick Tracy stamp
]
---
.left-column-half[

]
.right-column-half[
Ivan Sutherland. 1964. The sketchpad graphical communication system in action.
In Proceedings of the SHARE design automation workshop (DAC '64). ACM, New York, NY, USA, 6.329-6.346.
]
---
.left-column-half[

]
.right-column-half[
Sketchpad introduced direct manipulation, constraints, and chorded input.
]
---
# Sketchpad Inspires Engelbart
.left-column-half[

![:youtube Engelbart's *Mother of all Demos*. His presentation included windows;
hypertext; graphics; video conferencing; the computer mouse; word
processing; dynamic file linking; revision control; collaborative
real-time editing; all new inventions!, B6rKUf9DWRI]
]
.right-column-half[
Engelbart's *Mother of all Demos* His presentation included many all new inventions:
- windows
- hypertext
- graphics
- video conferencing
- the computer mouse
- word processing
- dynamic file linking
- revision control
- collaborative real-time editing
]
.footnote[
December 9 1968 at the
Fall Joint Computer Conference.
]
---
.left-column-half[


]
.right-column-half[Engelbart inspires many things, including
- the Xerox Star
- the first
graphical personal computer
- Smalltalk 80 the first UI Toolkit
]
---
# HCI in the Future
"The Future" is alway relative...
[](https://www.youtube.com/watch?v=V6DSu3IfRlo)
---
# HCI in the Future
How do we invent a preferable future? an inclusive future?
- What will the future look like?
- Who needs to help design the future for us to achieve this?
- Who needs to use technology in the future for us to achieve this?
---
# HCI in the Future
Discussion: How is it changing us as individuals and a society?
???
- Social networking has been implicated in revolutions and elections.
- Interfaces designs have impacted health and safety.
---
# HCI in the Future
Watch videos and discuss:
- [Victoria Belotti](https://www.youtube.com/watch?v=IK3rW1dSWoE)
- [Tovi Grossman](https://www.youtube.com/watch?v=DFPnwaoxSQU)
- [Jon Froehlich](https://www.youtube.com/watch?v=qRlIuWWdkHY) (UW)
- [Leysia Palen](https://www.youtube.com/watch?v=jmXjaMs2tUE)
- [Many more](http://www.id-book.com/talkingheads.php) if you want to keep exploring.
---
# Summary (somewhat tongue in cheek)
Welcome to the class!
All of HCI was already invented (sort of!)
HCI has a huge influence on individuals and society
HCI is really all of computer science