---
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, Winter 2020
Your staff: Jen Mankoff, Lauren Bricker (Instructor Friday), Adam Towers (Head TA/Course Developer), <br>David Chen, Zach Cheung, Sophie Tian, My Tran, with help from GitGrade's Jeremy Zhang.
---
layout: false
<!-- (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-half[
# Jennifer Mankoff
Pronouns: She/her
[Make4All Lab](http://make4all.org)
I use techonology to improving inclusion in
and accessibility of our digital future.
- Assistive and health technology
- Fabrication/Physical computing
- Improve inclusion and accessibility
]
.right-column-half[
]
---
.left-column[
]
.right-column[
More about me:
- This is my third Faculty position! (previously Berkeley & CMU)
- I also play the viola
- I have two teen-aged budding computer scientists. My daughter likes
to test out and critique my classes.
Please contact me through Piazza so that all course communication is
in one place. Office hours will be at my office (211 Gates) 1:30-2 on Wednesdays and Online (access through [Canvas Collaborations](https://canvas.uw.edu/courses/1369399/conferences)): 8:30-9:30 on Sundays
]
---
.left-column[
## Lauren Bricker
bricker@cs, Faculty Lecturer
]
.right-column[
- I am a UW CSE PhD Alum
- My older son is also a CSE Alum, my younger son is a current Husky in Chem E
- 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'm an artist and maker
- I love to bicycle and begrudgingly run
- I'm an intermediate drummer
]
---
.left-column[
## Adam Towers
ajtowers@uw.edu, Head TA, '21
]
.right-column[
- I'm a Junior in CSE, minoring in entrepreurship!
- I enjoy falling down mountains on skis or bikes
- I worked on Google Search last summer
- I play video games a bit too much
- from the Bay Area
]
---
## David Chen
hanfec@cs, Monday 1:30-3:30pm in Gates 150
---
## Zach Cheung
zachcheu@uw.edu, Tuesday 12:30-1:30pm and Friday 2:30-3:30pm in Gates 153
---
## My Tran (Emhily)
tranmy@cs.washington.edu, Mondays & Wednesdays 11:30am-12:30pm, Gates 152
.left-column[
]
.right-column[
- **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
- I've interned at Genemod since last summer
]
---
## Jeremy Zhang
jkzhang@cs.washington.edu, GitGrade
.left-column[
]
.right-column[
- **Hello**~ from *UW Tacoma*! (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)
]
---
## Sophie Tian
shuxut@cs.washington.edu, Tuesdays 9:30am-11:30am in Gates 152
.left-column[
]
.right-column[
- 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.
]
---
# 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
---
.left-column-half[
# Lecture Structure
Reading, Discussion and Exercises in lectures
Emphasis on active learning
Exams
- Midterm: 2/7
- Final Exam: March 19th
]
.right-column-half[
Class attendance
- **STRONGLY encouraged**
- Panopto recordings won't give you the chance do in-class work
- Class *engagement* and *performance* both influence grading
]
---
# Language: Java
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)
- We will use trees, state machines, etc.
---
# 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[__29%__] of devices, and growing
]
---
# 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; <br/>
we will provision these for lab as well
- Laptop will need sufficient memory/disk space to run <br/>
Android Studio & emulators
- Ask questions on Piazza if you need more guidance
---
# 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 [Piazza]({{site.piazza}})
- You can also request appointments for further help
- Assignments will be distributed using [gitlab]({{site.gitlab}}) and graded using gitgrade
---
# 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
???
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 Jen, or Dr. Mankoff. Lauren is 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!
---
[//]: # (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 about this that we will grade pass/fail with an eye toward how much you learned.
---
# 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 quiz
`*` 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!
---
.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.
<small> In Proceedings of the SHARE design automation workshop (DAC '64). ACM, New York, NY, USA, 6.329-6.346.</small>
]
---
.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
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) (here); [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