HCID520 User Interface Software & Technology

A fundamental skill in designing new user experiences is the ability to rapidly prototype ideas and later deploy them in applications. This course is designed to provide a rapid immersion to best practices, tools and applications for prototyping in the realm of human-computer interaction and design for product development.

This course will introduce foundational skills in medium to high-fidelity user interface prototyping and development, including the underlying software architectures used to implement user interfaces, the historical development of these architectures, and modern toolkits that use these architectures. Each week will include both a lecture session and a "studio" session in which students will complete hands-on prototyping and development exercises.

There are no pre-requisites for the course. Many prototyping exercises involve web development using HTML, CSS, and JavaScript within standard web browsers. The course will include introductions to these technologies; however, students are encouraged to begin learning basic JavaScript programming ahead of time.

Learning Goals

On the successful completion of this course, students should be able to:
  1. Apply appropriate considerations to guide prototype development and decision making.
  2. Describe a range of scenarios and examples for how prototypes are used in the design process.
  3. Demonstrate a basic understanding of prototyping tools and techniques across UI platforms.
  4. Understand the fundamental software architectures used to implement user interfaces.
  5. Understand tools and steps to create high-fidelity prototypes to demonstrate and test an idea.

Schedule

Week 1

Tu 1/3 User Interfaces: Past, Present & Future
  • REQUIRED A Research Center for Augmenting Human Intellect ("The Mother of All Demos"). Douglas Engelbart, Bill English. 1968. video
  • Optional Media for Thinking the Unthinkable. Bret Victor. 2013. html
  • Optional Knowledge Navigator Vision Video. Apple Computer. 1987. video
  • Optional Starfire Vision Video. Sun Microsystems. 1992. video
  • Optional Productivity Future Vision Video. Microsoft. 2011. video
  • Optional Productivity Future Vision Video. Microsoft. 2015. video
Th 1/5 UI Toolkits, Exercise: Widget Design
  • REQUIRED Past, Present and Future of User Interface Software Tools. Brad Myers, Scott E. Hudson, and Randy Pausch. ACM TOCHI 2000. pdf
  • Optional Papier-Mache: Toolkit Support for Tangible Input. Scott R. Klemmer, Jack Li, James Lin, James A. Landay. Proc. ACM CHI 2004. pdf
  • Optional Protovis: A Graphical Toolkit for Visualization. Michael Bostock, Jeffrey Heer. IEEE TVCG 2009. pdf
  • Optional Providing Integrated Toolkit-level Support for Ambiguity in Recognition-based Interfaces. Jennifer Mankoff, Scott E. Hudson, Gregory D. Abowd. Proc. ACM CHI 2000. pdf

Week 2

Tu 1/10 Prototyping
  • REQUIRED What do Prototypes Prototype? Stephanie Houde and Charles Hill. Handbook of Human-Computer Interaction, 1997. pdf
  • Optional Getting the Right Design and the Design Right: Testing Many Is Better Than One. Maryam Tohidi, William Buxton, Ronald Baecker, Abigail Sellen. ACM CHI 2006. pdf
  • Optional Parallel Prototyping Leads to Better Design Results, More Divergence, and Increased Self-Efficacy. Steven P. Dow, Alana Glassco, Jonathan Kass, Melissa Schwarz, Daniel L. Schwartz, Scott R. Klemmer. ACM Transactions on Computer-Human Interaction, 11(4), 2010. pdf
  • Optional Prototyping is the Shorthand of Innovation. Tom Kelley. Design Management Journal, 12(3), 2001. pdf
Th 1/12 Exercise: Prototyping Tools
  • REQUIRED Sign up for an InVision account. Watch the InVision 101 tutorial videos and familiarize yourself with the basics of the application. Come to class ready with a rapid prototyping tool (e.g., sketching + digital camera, Keynote, PowerPoint, OmniGraffle, Sketch, Balsamiq, Illustrator, Photoshop, etc). You will upload "screens", mocked up with the rapid prototyping tool, to InVision.

Week 3

Tu 1/17 Information Architecture & Layout
  • REQUIRED Defining Information Architecture. Chapter 1, Information Architecture for the World Wide Web. Louis Rosenfeld & Peter Morville. html
  • REQUIRED Responsive Web Design. Ethan Marcotte. A List Apart, No. 306. html
  • Optional The Infinite Grid. Chris Armstrong. A List Apart, No. 363. html
Th 1/19 Exercise: Responsive Design
  • REQUIRED A Complete Guide to Flexbox. Chris Coyier. css-tricks.com. html
  • REQUIRED Flexbox Tower Defense Game. html
  • Optional CSS Zen Garden: The Beauty of CSS Design. html
  • Optional HTML & CSS for Beginners. Codecademy. html
  • Optional CSS Beginner Tutorial. HTML Dog. html

Week 4

Tu 1/24 Animation & Graphics
  • REQUIRED Animation: From Cartoons to the User Interface. Bay-Wei Chang, David Ungar. Proc. ACM UIST 1993. pdf
  • REQUIRED Easing Functions Cheat Sheet. html
  • Optional Easing Functions. Robert Penner. html
  • Optional D3.js (Use the Force!). Michael Bostock. html
  • Optional Bringing Physics to the Surface. Andrew D. Wilson, Shahram Izadi, Otmar Hilliges, Armando Garcia-Mendoza, David Kirk. Proc. ACM UIST 2008. pdf
  • Optional Animation Support in a User Interface Toolkit: Flexible, Robust, and Reusable Abstractions. Scott E. Hudson, John T. Stasko. Proc. ACM UIST 1993. pdf
  • Optional Effective Sounds in Complex Systems: The ARKola Simulation. William W. Gaver, Randall B. Smith, Tim O'Shea. Proc. ACM CHI 1991. pdf
Th 1/26 Exercise: Generative Art
  • REQUIRED Hello p5.js. html
  • REQUIRED Get Started with p5.js. html
  • Optional p5.js Overview. html
  • Optional HCID 520 Art Editor html
  • Optional Casey Reas. (Art inspiration!) html
  • Optional Scott Snibbe. (Art inspiration!) html
  • Optional Aaron Koblin. (Art inspiration!) html
  • Optional Let's Call It A Draw(ing Surface), from Dive Into HTML5. Mark Pilgrim. html

Week 5

Tu 1/31 Pointing & Text Entry
  • REQUIRED User Technology: From Pointing to Pondering. Stuart K. Card, Thomas P. Moran. ACM Conference on the History of Personal Workstations 1986. pdf
  • Optional A General-Purpose Target-Aware Pointing Enhancement using Pixel-Level Analysis of Graphical Interfaces. Morgan Dixon, James Fogarty, Jacob O. Wobbrock. Proc. ACM CHI 2012. pdf
  • Optional EdgeWrite: A Stylus-Based Text Entry Method Designed for High Accuracy and Stability of Motion. Jacob O. Wobbrock, Brad A. Myers, John A. Kembel. Proc. ACM UIST 2003. pdf
  • Optional A Morphological Analysis of the Design Space of Input Devices. Stuart K. Card, Jock D. Mackinlay, George G. Robertson. ACM Transactions on Information Systems, 9(2), 1991. pdf
Th 2/2 Exercise: Interactive Art
  • REQUIRED Handling Events. Marijn Haverbeke. Chapter 14, Eloquent JavaScript. html
  • REQUIRED Interactivity 1 Example. p5js.org html
  • REQUIRED Interactivity 2 Example. p5js.org html

Week 6

Tu 2/7 Touch & Gesture
  • REQUIRED User-Defined Gestures for Surface Computing. Jacob O. Wobbrock, Meredith Ringel Morris, Andrew D. Wilson. Proc. ACM CHI 2009. pdf
  • REQUIRED Touch versus In-Air Gestures. Daniel Wigdor, Dennis Wixon. Chapter 15: Brave NUI World: Designing Natural User Interfaces for Touch and Gesture, 2011. pdf
  • Optional A Brief Rant on the Future of Interaction Design. Bret Victor. 2011. html
  • Optional How the iPhone Works. How Stuff Works. html
  • Optional Multi-Touch Systems that I Have Known and Loved. Bill Buxton. html
Th 2/9 Exercise: Gesture Design
  • Optional Protractor: A Fast and Accurate Gesture Recognizer. Yang Li. Proc. ACM CHI 2010. pdf

Week 7

Tu 2/14 Sensor-Based Interaction
  • REQUIRED Sensing Techniques for Mobile Interaction. Ken Hinckley, Jeff Pierce, Mike Sinclair, Eric Horvitz. Proc. ACM UIST 2000. pdf
  • REQUIRED Designing SpeechActs: Issues in Speech User Interfaces. Nicole Yankelovich, Gina-Anne Levow, Matt Marx. Proc. ACM CHI 1995. pdf
  • Optional HydroSense: Infrastructure-Mediated Single-Point Sensing of Whole-Home Water Activity. Jon E. Froehlich, Eric Larson, Tim Campbell, Conor Haggerty, James Fogarty, Shwetak N. Patel. Proc. UbiComp 2009. pdf
  • Optional Emerging Input Technologies for Always-Available Mobile Interaction. Dan Morris, T. Scott Saponas, Desney Tan. Foundations and Trends in Human–Computer Interaction, 4(4), 2010. pdf
Th 2/16 Exercise: Fun with Sensors

Week 8

Tu 2/21 Accessibility
  • REQUIRED Ability-Based Design: Concept, Principles and Examples. Jacob O. Wobbrock, Shaun Kane, Krzysztof Z. Gajos, Susumu Harada, Jon Froehlich. ACM Transactions on Accessible Computing 2011. pdf
  • Optional SPRWeb: Preserving Subjective Responses to Website Colour Schemes through Automatic Recolouring. David R. Flatla, Katharina Reinecke, Carl Gutwin, Krzysztof Z. Gajos. Proc. ACM CHI 2013. pdf
  • Optional Input Finger Detection for Nonvisual Touch Screen Text Entry in Perkinput. Shiri Azenkot, Jacob O. Wobbrock, Sanjana Prasain, S. and Richard E. Ladner. Proc. Graphics Interface 2012. pdf
  • Optional Improving the Performance of Motor-Impaired Users with Automatically-Generated, Ability-Based Interfaces. Krzysztof Z. Gajos, Jacob O. Wobbrock, Daniel S. Weld. Proc. ACM CHI 2008. pdf
Th 2/23 Exercise: Accessibility Anti-Patterns

Week 9

Tu 2/28 Social Computing
  • REQUIRED Social Translucence: An Approach to Designing Systems that Support Social Processes. Tom Erickson, Wendy Kellogg. ACM TOCHI 2000. pdf
  • Optional Beyond Being There. Jim Hollan, Scott Stornetta. Proc. ACM CHI 1992. pdf
  • Optional Games with a Purpose. Luis von Ahn. IEEE Computer 2006. pdf
  • Optional Soylent: A Word Processor with a Crowd Inside. Michael Bernstein, Greg Little, Robert C. Miller, Bjoern Hartmann, Mark S. Ackerman, David R. Karger, David Crowell, Katrina Panovich. Proc. ACM UIST 2010. pdf
  • Optional The Anatomy of a Large-Scale Social Search Engine. Damon Horowitz and Sepandar D. Kamvar. Proc. WWW 2010. pdf
Th 3/2 Networks & The Web, Exercise: Crowdsourcing
  • REQUIRED Surfing the Web & A Simple API. Chapters 1 & 2, RESTful Web APIs. Leonard Richardson, Mike Amundsen, Sam Ruby. html
  • Optional Ajax: A New Approach to Web Applications. Jesse James Garrett. 2005. html

Week 10

Tu 3/8 Course Review
Th 3/10 Final Exam

Logistics

All assignments and discussion questions should be accessed and submitted using the UW Canvas site for the course (accessible by enrolled students only).

Grading

Course grading is based on a point system, with 100 total possible points, according to the following break-down by activity. Final grading will take the distribution of scores into account and is not based on an a priori points-to-grade mapping.

  • Class Participation (13 points)
    • Discussion questions (1 point each week)
    • Active participation for in-class discussion (3 points)
  • Exercises (72 points)
    • There are 9 exercises (8 points each)
  • Final Exam (15 points)

Class Participation

It is important that you read the readings and participate in course discussions. If you need to miss a class session, please inform the course staff ahead of time. It is expected that you will read all papers marked as "required". You are not required to fully read papers marked "optional", but you should at minimum read the abstracts and briefly skim the content. We will assume that you have read the required papers ahead of time and are ready to discuss the week's topic.

You must submit a discussion question by 8am the morning of a lecture day. You are allowed one "pass", which you can use at any point in the quarter. Exercise critical thought with the goal of prompting an engaging, fruitful conversation — not just showcasing your intelligence! Good discussion questions often stem from one or more of the following:

  • Critiques (positive or negative) of arguments made in the papers
  • Analysis of implications or future work directions
  • Questioning foundational assumptions
  • Clarification of unclear statements or definitions
  • Comparison of competing approaches within a domain or across readings

Policies

Late Policy: We will deduct 1 point for each day (including weekends and holidays) an exercise is late.

Plagiarism Policy: Assignments should consist primarily of original work. Building on others' work - including 3rd party libraries, public source code examples, and design ideas - is acceptable and in most cases encouraged. However, failure to cite such sources will result in score deductions proportional to the severity of the oversight.