name: inverse layout: true class: center, middle, inverse --- # Introduction to Interaction Programming Welcome to CSE 340 Spring 2020 Instructor: Lauren Bricker <br> TAs: David Chen, Zach Cheung, Taylor Gotfrid, Brian Lee, Jay Lin, <br> Michelle Lin, Jasper Palmer, Sophie Tian, My Tran, <br> 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-staff[ ## Lauren Bricker (she/her) bricker@cs.washington.edu<br> Faculty Lecturer<br> 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<br> 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<br> 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 <br> 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 <br> 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<br> 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 <br> 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 <br> 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 <br> 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<br> 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 <br> 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! <iframe src="https://embed.polleverywhere.com/free_text_polls/fyXGV5NwPUnzsZ4Bbpso2?controls=none&short_poll=true" width="800" height="600" frameBorder="0"></iframe> --- # 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](/courses/cse340/20sp/index), but we have used iframes to connect this to [Canvas](https://canvas.uw.edu/courses/1370612). 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](https://us.edstem.org/courses/381/discussion/) - You can also request appointments for further help - Assignments will be accepted and turned in [GitGrade](https://gitgrade.cs.washington.edu/student/summary/8723) - GitGrade will make you a [gitlab](https://gitlab.cs.washington.edu/cse340-20sp-students) 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](/courses/cse340/20sp/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 <br/> 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](/courses/cse340/20sp/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 <iframe src="https://embed.polleverywhere.com/multiple_choice_polls/Cbv53A5TsXjCnG5QCzHJc?controls=none&short_poll=true" width="800" height="600" frameBorder="0"></iframe> --- .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 "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
