3/30/20 © Lauren Bricker, University of Washington
+ - 0:00:00
Notes for current slide
Notes for next slide

Introduction to Interaction Programming

Welcome to CSE 340 Spring 2020

Instructor: Lauren Bricker
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.

Slide 1 of 58

Today's goals

  • Course staff
  • How we will teach this course
  • Learning goals
  • Assignments & Grading
  • Relevance of HCI to all of Computer Science
Slide 2 of 58

Lauren Bricker (she/her)

bricker@cs.washington.edu
Faculty Lecturer
OH: Mon, Fri 11:30 am - 12:30 pm

Picture of Lauren

  • 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
Slide 3 of 58

David Chen (he/him)

hanfec@cs.washington.edu
OH:

  • Sun 2:30 - 3:30 pm
  • Fri 1:00 - 2:00 pm

David Chen

  • 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
Slide 4 of 58

Zach Cheung (he/him)

zachcheu@uw.edu
OH:

  • Tues 4:30 pm - 5:30 pm
  • Wed 9:30 am - 10:30 am

Zach Cheung

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!
Slide 5 of 58

Taylor Gotfrid (she/her)

gotfrid7@cs.washington.edu
OH:

  • Thurs 2:30 - 3:30 pm
  • Friday 1:00 - 2:00 pm

Taylor Gotfrid

  • 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
Slide 6 of 58

Brian Lee (he/him)

blee11@uw.edu
OH: Tues, Thurs 12:30 - 1:30 pm

Brian Lee

  • 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!
Slide 7 of 58

Jay Lin

jial8@uw.edu
OH:

  • Sun 2:30 - 3:30 pm
  • Wed 4:30 - 5:30 pm

Jay Lin

  • 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
Slide 8 of 58

Michelle Lin (she/her)

mlin88@cs.washington.edu
OH:

  • Wed 9:30 - 10:30 am
  • Sat 3:30 - 4:30 pm

Michelle Lin

  • 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! ^_^
Slide 9 of 58

Jasper Palmer (he/him)

jpalmer4@cs.washington.edu
OH:

  • Tue 9:30 - 10:30 am
  • Tue 4:30 - 5:20 pm

Jasper Palmer

  • 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
Slide 10 of 58

My Tran (Emhily) (she/her)

tranmy@cs.washington.edu
OH:

  • Wed 4:30 - 5:30 pm
  • Thurs 2:30 - 3:30 pm

My Tran

  • 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
Slide 11 of 58

Sophie Tian (she/her)

shuxut@cs.washington.edu
OH: Tue/Thurs 12:30 - 1:30 pm

Sophie Tian

  • 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.
Slide 12 of 58

Jeremy Zhang (he/him)

jkzhang@uw.edu
GitGrade Inventor

Jeremy Zhang

  • 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)
Slide 13 of 58

Let's get to know you!

Slide 14 of 58

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.

Slide 15 of 58

Today's goals

  • Course staff
  • How we will teach this course
  • Learning goals
  • Assignments & Grading
  • Relevance of HCI to all of Computer Science
Slide 16 of 58

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.

Slide 17 of 58

Getting help

  • Questions during class
  • Instructor Office Hours
  • TA Office Hours
  • Ed Message Board
Slide 18 of 58

Where to find what

The class is on the web, but we have used iframes to connect this to 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
  • You can also request appointments for further help
  • Assignments will be accepted and turned in GitGrade
  • GitGrade will make you a gitlab repo which you will use to receive starter code and commit your changes.
Slide 19 of 58

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 page for more details

Slide 20 of 58

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 so we can support you.

If you run into problems, or have preferences about these issues, please tell me!

Slide 21 of 58

Distance learning

So how's this Distance Learning thing going to work? With shared expections of the

  • students
  • instructor
  • TAs.
Slide 22 of 58

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)
Slide 23 of 58

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
Slide 24 of 58

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).
Slide 25 of 58

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.

Slide 26 of 58

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
Slide 27 of 58

Platform: Android

Most commonly used interface development platform for Java

Slide 28 of 58

Platform: Android

Most commonly used interface development platform for Java

  • Open source
  • Around 75% market share
  • Thousands of supported devices
Slide 29 of 58

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
Slide 30 of 58

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 EXtensible Markup Language (XML)

Slide 31 of 58

Android Versioning

Android Versioning and Distribution

We're going to target Nougat :)

That's 19% of devices. (Looking into upgrading to Oreo)

Slide 32 of 58

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
Slide 33 of 58

Today's goals

  • Course staff
  • How we will teach this course
  • Learning goals
  • Assignments & Grading
  • Relevance of HCI to all of Computer Science
Slide 34 of 58

This week's learning goals

  • 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
Slide 35 of 58

Course learning goals:

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.
Slide 36 of 58

Course learning goals:

Iterative Design

  • Basic understanding of Iterative Design
  • Why designers are valuable
  • Iterative design process
  • How designers get data from users
Slide 37 of 58

Today's goals

  • Course staff
  • How we will teach this course
  • Learning goals
  • Assignments & Grading
  • Relevance of HCI to all of Computer Science
Slide 38 of 58

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.
Slide 39 of 58

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

Slide 40 of 58

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
Slide 41 of 58

Field Trip

Assignments

Slide 42 of 58

Today's goals

  • Course staff
  • How we will teach this course
  • Learning goals
  • Assignments & Grading
  • Relevance of HCI to all of Computer Science
Slide 43 of 58

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!
Slide 44 of 58

Pre-work check

Slide 45 of 58

Couple with cordless telegraph apparatus

Robida's vision of a cordless telegraph (1906)

Slide 46 of 58

Two women using video phones

Commercial vision of a wireless private video phone (1929)

Slide 47 of 58

Vannevar Bush's imagined Memex--a desk with mechanical and digital innards

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)

Slide 48 of 58

A prototype of a wearable wristwatch/cellphone and Dick Tracy using it in a stamp based on the comic strip

A wrist-watch cellphone prototype (1947), which captured popular imagination as shown in this Dick Tracy stamp

Slide 49 of 58

A young man sitting at a complex machine covered in buttons--drawing on the screen with a pen

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.

Slide 50 of 58

Four screen shots of a vector-based diagram being created within Sketchpad

Sketchpad introduced direct manipulation, constraints, and chorded input.

Slide 51 of 58

Sketchpad Inspires Engelbart

Two images -- a man giving a live demo of a text based interface; and a wooden computer mouse.

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

December 9 1968 at the Fall Joint Computer Conference.

Slide 52 of 58

A desktop personal computer showing a WYSIWYG word processor and graphical window system A picture of a woman interacting with the Xerox Alto computer

Engelbart inspires many things, including

  • the Xerox Star
  • the first graphical personal computer
  • Smalltalk 80 the first UI Toolkit
Slide 53 of 58

HCI in the Future

"The Future" is alway relative...

Walter Cronkit in Short clip from the March 12 1967 episode of the CBS show

Slide 54 of 58

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?
Slide 55 of 58

HCI in the Future

Discussion: How is it changing us as individuals and a society?

Slide 56 of 58
  • Social networking has been implicated in revolutions and elections.
  • Interfaces designs have impacted health and safety.

HCI in the Future

Watch videos and discuss:

Slide 57 of 58

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

Slide 58 of 58

Today's goals

  • Course staff
  • How we will teach this course
  • Learning goals
  • Assignments & Grading
  • Relevance of HCI to all of Computer Science
Slide 2 of 58
Paused

Help

Keyboard shortcuts

↑, ←, Pg Up, k Go to previous slide
↓, →, Pg Dn, Space, j Go to next slide
Home Go to first slide
End Go to last slide
Number + Return Go to specific slide
b / m / f Toggle blackout / mirrored / fullscreen mode
c Clone slideshow
p Toggle presenter mode
s Start & Stop the presentation timer
t Reset the presentation timer
?, h Toggle this help
Esc Back to slideshow