This is the CSE340-SP20 final website.
- Week 1: What’s in an Interface
- Week 2: Output to Me
- Week 3: Present to Me
- Week 4: Include Everyone
- Week 5: React to me
- Week 6: Beyond Touch: The Larger World
- Week 7: Design Principles
- Week 8: Understand Me
- Week 9: Undo Me
- Week 10: Assess Me
- Week 11: Final-ly
Week 1: What’s in an Interface
- Monday 3/30: Why take this course? What is HCI?
- Learning Goals Relevance of class to all of CS
-
Readings
- Watch the video and read section 4.1 The CS Field Guide to Human Computer Interaction Introduction
- Take the class survey
-
Slides Introduction to course
- Wednesday 4/1: What is a toolkit?
- Learning Goals Toolkit User Types; Basic structure of a user interfaces; How this looks in Android; Introduction of Doodle Assignment
- Readings
- Widget Toolkit
- Watch Engelbart, Cronkite and other videos from Introduction to course
Slides Interface Toolkits
Assigned AS1 Doodle
- Thursday, 4/2: Setting Up Doodle
- Learning Goals Android project structure; Our development environment (Git/GitGrade), Doode
Preparation for Lab
- Android Basics:
- Download Android Studio and install it
- Select the Tools->SDK Manager and make sure you have Android 7.0 or 7.1.1 (Nougat) installed. This is the version of the Android SDK we will use for this class.
- Follow this tutorial to create an Android Application.
- Continue with the tutorial to also run your app either on an emulator or on an Android Device.
- Git Setup: macOS, win (ignore pieces about Atom as we use Android Studio)
- Make sure you have git setup on your computer, follow above instructions
- If you have never used git before read through this and this (Android Studio ≈ Intellij)
- Ensure that you can clone from CSE GitLab, (we recommend cloning via SSH but you’ll need to generate a key)
- Supporting Material Java Refresher; Git; 331’s Git resource
- Java refresher code
- Java Refresher slides
Day Of
- Slides Getting Started With Android
- Slides GitGrade
- Slides Doodle
- Friday, 4/3: Drawing on the Screen
- Learning Goals How does Android support drawing on the screen; Drawing abstractions; clipping and other transformations
- Readings
- Using Android Resources
- Look at the following Android Documentation
- Drawing on the Canvas
- What is a Bounding Box?
- Description Minimum bounding box
- Exercise: Bounding box in coordinate geometry
- A beginners guide to implement Android Animations — Part 1 (2 part series)
Slides Drawing Components & Animation
Week 2: Output to Me
- Monday, 4/6: Drawing Interfaces; Animation
- Learning Goals Role of interactor in drawing on the screen, how to use animation to move interactors
- Readings and Watchings
- There is a lot in there and it is a bit of a preview for Friday, but make sure you watch from 6:00-7:00 Measure Layout Draw -
- Transformations in Android (video coming soon)
- Introduction to Animation
- Property Animation Overview
Slides: Drawing the interface
- Wednesday, 4/8: Properties of People I: Visual Perception
- Learning Goals Design implications of people’s visual capabilities
Readings and Watching
- 5 Visual-Design Principles in UX
- Visual Design Basics
- Gestalt Principles
- Theresa-Marie Rhyne - SIGGRAPH University Applying Color Theory to Digital Media and Visualization” - at least the first 11 minutes or so
Slides Properties of People I: Vision
- Thursday, 4/9: Debugging, Peer Evaluation, Doodle Help
- Learning Goals Support for Creative Work on Doodle; Discussion of and practice evaluating (toy example)
- Slides Debugging, Peer Evaluation and Animation
Resources:
Due (10pm) AS1 Doodle code
- Friday 4/10: Introduction to Layout
- Learning Goals Relating layout to the interactor hierarchy
- Readings
- Worksheet Layout 1
- Slides Layout
- Assigned AS2 Layout
- Assigned Quiz 1 (due Sunday): Canvas Practice quiz containing sample questions covering key concepts from Doodle, Properties of People I: Vision, and readings
Week 3: Present to Me
- Sunday, 4/12: Peer Evaluation
- Assigned AS1 Doodle peer reviews released (look for emails)
- Due Quiz 1
- Monday, 4/13: Layout II - more layout details
- Learning Goal How is layout accomplished? What is the difference between using XML vs creating Views and adding them to the parent?
-
Readings and Watchings
- Android ImageView ScaleType: a Visual Guide
- See readings from 4/10
-
Slides More on Layout in Android
- Tuesday, 4/14
-
Due Peer evaluation of Doodle
- Wednesday, 4/15: Layout: Implementation and Theory
- Learning Goals Under the hood: How is layout accomplished?
-
Readings and Watchings
- Watch or re-watch: Measure Layout Draw
- Read one of
Slides Layout in Android
Due Doodle Reflection
- Thursday, 4/16: Support on Layout
- Learning Goals Work through constraint based layout
-
Slides Layout
- Friday, 4/17: AMA, Examlet 1
- Examlet 1 Assess your knowledge on Android development and drawing on the canvas
Slides AMA, Examlet
Due AS2 Layout part 1-2 (for pixel tests)
Week 4: Include Everyone
- Monday, 4/20: Accessibility
- Learning Goals Learn about the history of accessibility, why it is important, and what problems exist
- Readings
-
Slides Accessibility
- Wednesday, 4/22: Guest Lecture (Venkatesh Potluri & Anne Ross): Android Accessibility
- Learning Goals Learn about how to make Android apps accessible
- Readings See Monday
- Slides
Assigned: AS3 Accessibility
- Thursday, 4/23: Finish Layout & Start Accessibility
- Learning Goals Use the Accessibility Checker
-
Slides Layout and Accessibility
- Friday, 4/24: Event Handling I: Where Events Come from
- Learning Goals Basics of event handling including event types and listeners (callbacks)
- Readings
Slides Event Handling I: Callbacks, Model View Controller, and Events
Supplemental Files person.zip
Assigned Quiz 2 (due Sunday): Sample questions covering key concepts from layout
Due AS2 Layout part 3-5 (code + reflection)
Week 5: React to me
- Sunday 4/26:
- Due Quiz 2
- Monday 4/27: Event Handling II: Where Events Go
- Learning Goals How events are dispatched to interactors, importance of interactor hierarchy
- Readings
-
Slides Event Handling II: Delivery of Events in the Interactor Hierarchy
Supplemental Files Counter.zip
- Wednesday, 4/29: Event Handling III: How Interactors use Events
- Learning Goals Learn how to handle input; How to properly implement a finite state machine in an interactor; Implementation Strategies for Interactors to Handle Events
-
Readings and Prework
- Custom View Components
- Download Counter.zip and read through it.
- Informational only: Original PPS paper
-
Slides Essential Behavior and the use of finite state machines to implement it
- Thursday, 4/30: Implementing Interactors
- Learning Goals Get comfortable with finite state machines’ implementation in interactors
-
Slides State Machines
Due: AS3 Accessibility
- Friday, 5/1: Examlet 2, Event Handling IV: Essential Geometry
- Learning Goals ColorPicker intro, Create a non-rectangular interactor, Essential Geometry and Essential Behavior
- Reading
Slides Summary of Toolkit Architecture
Examlet 2 Assess your knowledge on layout theory and practice in Android
Assigned AS4 Color Picker
Week 6: Beyond Touch: The Larger World
- Monday, 5/4: Context Awareness - Jen Mankoff, Guest Lecture
- Learning Goals Assumptions about phone use and examples of context aware applications
- Readings:
-
Slides The Sensing Phone
- Wednesday, 5/6: Physical Computing
- Learning Goals Learn a little about 3D Printing and extending phones for sensing
-
Readings and Watchings
- Lisa Harouni Ted Talk: A Primer on 3D Printing
- Powder Printing
- Liquid Printing
-
Slides Physical Computing
- Thursday, 5/7: Bundling + Color Picker help
- Learning Goals What’re bundles? What do they do? Let’s find out!
-
Slides How to use Bundle
- Friday, 5/8: Properties of People II: Motor Behavior
- Learning Goals Learn the theory driving good interactor design; Motor behavior basics and implications for design including Fitts’ law and Guiard’s theory of bimanual input
- Readings
Assigned Quiz 3 (due Wednesday 5/13): Sample questions covering key concepts from accessibility and color picker assignments
Week 7: Design Principles
- Monday, 5/11:Predicting and Evaluating Interactor Efficiency
- Learning Goals Apply design tips we’ve discussed to comparing the efficiency of different variations on interactors; Learn about wide variety of solutions for selection; Learn about Qualitative and Quantitative ways of testing theories
Assigned AS5 Menus
Due AS4 Color Picker code and reflection
- Wednesday, 5/13: Application Design Principals
-
Learning Goals Mental models, gulf of execution, gulf of evaluation
Readings:
- Mental Models
- The Two UX Gulfs: Evaluation and Execution (also a short article here)
- The Seven Stages of Action. At least watch these two videos
- The Seven Stages of actions
- It’s not you. Bad Doors are everywhere
Due Quiz 3
- Thursday, 5/14: Designing Menus
- Learning Goals Help with Menus Assignment; Revisiting key concepts
-
Slides Getting started with Menus
- Friday, 5/15: Examlet 3, Reasoning from Data
- Learning Goals Principals of and Problems with Behavior Change Readings
Examlet 3 Assess your knowledge on key concepts from accessibility and color picker
Week 8: Understand Me
- Monday, 5/18: Studying People
- Learning Goals Understand concepts in data pipeline in an applied fashion including what is our hypothesis, how this translates into study design and method, considerations when interacting with users, data collection cleaning and analysis, some statistical methods, and how we draw conclusions Readings
- Wednesday, 5/20: Using data to influence people
- Learning Goals Data analysis and how charts and statistics can be used and misused
-
Slides Analyzing Data
Assigned AS5 Menus part 5-6
- Thursday, 5/21: Sample Menu Data Analysis
- Learning Goals Evaluating Human Subjects Experiments
-
Slides Menus Data Analysis
Due AS5 Menus part 1-4
- Friday, 5/22: Undo
- Learning Goals Theory and implementation of Undo
-
Slides Undo
- Assigned AS6 Undo
-
Assigned Quiz 4 (due
SundayMonday): Covering important concepts from interactor implementation, accessibility and Fitts’ Law
Week 9: Undo Me
- Monday, 5/25
- Due Quiz 4
- Monday, 5/25: Memorial Day
- Due AS5 Menus part 5-6
- Wednesday, 5/27: Interaction Programming in Web Development
- Learning Goals See how Web Development follows many of the same Interaction Programming principles we’ve been learning all quarter! Readings
- Thursday, 5/28: Work on Undo
- Slides Getting started with Undo
- Friday, 5/29: Examlet 4, Machine Learning
- Learning Goals Using Machine Learning in Interactive Systems Readings and Watchings
-
Slides Mobile Machine Learning
Examlet 4 (Due by 10pm) Assess your knowledge on key concepts menus, application design principles, and properties of people II.
Week 10: Assess Me
- Monday, 6/1: Interaction Programming in Flutter
-
Learning Goals See how Flutter follows many of the same Interaction Programming principles we’ve been learning all quarter!
Readings
- What is Flutter? up to “try it”
- Optional additional: the “aggressive composability” Inside Flutter
Slides Interaction Programming in Flutter
- Wednesday, 6/3: Heuristic Evaluation
- Learning Goals Learn about a quick way to get feedback on the quality of your application, particularly good for focused tasks on screens. Readings:
Slides Heuristic Evaluation
Due Undo
- Thursday, 6/4: Heuristic Eval of Undo App
- Learning Goals Execute a Heuristic Eval (start in Lab)
-
Slides Heuristic Evaluation
Due (16-Mar): Heuristic Eval Reflection
- Friday 6/5:Guest Lecture: Implementing Secure & Private Mobile Apps
- Learning Goals Implementing Secure & Private Mobile Apps Readings
Assigned Quiz 6 (due Sunday): Sample questions covering key concepts from undo and heuristic evaluation
Week 11: Final-ly
- 6/8: Final Reflection Due (in lieu of Final Exam)
-
Due Undo final reflection
- Due Quiz 6