CSE 440 Winter 2021: Lecture Links and Additional Readings



Lecture 01: Introduction, What is HCI?

Regarding our UI Hall of Fame and Shame, I thought this was funny :) https://uxdesign.cc/the-worst-volume-control-ui-in-the-world-60713dc86950

We don't have an official textbook for this course but the following I've heard are good overview textbooks on HCI:
- Human-Computer Interaction, 3rd Edition
- Interaction Design: Beyond Human-Computer Interaction, 5th Edition



Lecture 02: Design Process

Much of what we discussed regarding rapid ideation, design diamond, and design process is covered in the book, Sketching User Experiences, by Bill Buxton. Bill is a well-known senior researcher in HCI.

The Wikipedia page for Spiral Model is pretty informative. There's a link on the page to the original paper where it was introduced as well. If you're curious, on the right-hand side, there are links to other models of software engineering, including Waterfall.

Just for fun, here's that Juicero article by Bloomberg.



Lecture 03: Ideation and Critique

There were quite a lot of articles and links cited in the slides today, some of which I'll post again below, in addition to some new readings:

On the process of ideation:

Kanya (Pao) Siangliulue, Kenneth C. Arnold, Krzysztof Z. Gajos, and Steven P. Dow. Toward collaborative ideation at scale: Leveraging ideas from others to generate more creative and diverse ideas. In Proceedings of CSCW'15, 2015. http://iis.seas.harvard.edu/papers/2015/siangliulue15ideation.pdf

Dow et al. Parallel Prototyping Leads to Better Design Results, More Divergence, and Increased Self-Efficacy. ACM Transactions on Human-Computer Interaction (2010) vol. 17 (4). http://sing.stanford.edu/cs303-sp11/papers/ParallelPrototyping2010-final.pdf

On collaborative ideation and participatory design:

Doug Dietz’s TEDx talk on empathizing and working with children to design a new MRI machine.

On diverse teams: https://hbr.org/2016/11/why-diverse-teams-are-smarter

On the topic of diverse teams, one thing I didn't bring up in class is that while having more diverse teams is better than homogeneous teams, it's certainly not a panacea. It's not feasible to have every kind of identity represented on your team, and in addition, it can be hard for minority members of the team who may feel pressured to represent everyone with their background (which is impossible). Teams still need to do the necessary user research.

This following chapter of the book Design Justice by Sasha Constanza-Chock has an overview of the importance of (and lack of) diversity in professional design, but also points out that it's just a first step. The chapter then describes and also points out the potential pitfalls of some user research methods such as User Personas and Participatory Design, cautioning that while designers may mean well, some of these strategies can be extractive as opposed to empowering for communities. The rest of the book is great too (and all online)!
https://design-justice.pubpub.org/pub/cfohnud7/release/2

On "lead users", https://hbr.org/1999/09/creating-breakthroughs-at-3m which is elaborated on in Eric Von Hippel's book, Democratizing Innovation.



Lecture 04: Design Principles

For more reading on design principles, I recommend Don Norman's book that I showed in class - The Design of Everyday Things. It popularized the notion of affordances in UX design and is written for a general audience.

Also thought I would mention this book that recently came out: "How Artifacts Afford The Power and Politics of Everyday Things" by Jenny Davis. It's a more academic book but has a really interesting critique and update of affordance theory to incorporate power and politics. https://mitpress.mit.edu/books/how-artifacts-afford



Lecture 05: Design Principles II

In today's lecture, I mentioned the book "The Psychology of Human-Computer Interaction" by Stu Card, Thomas Moran, and Allen Newell published back in 1983. Along with "The Design of Everyday Things" mentioned last lecture, it is one of the earlier books associated with HCI, which as you can see has a lot of roots in psychology and cognitive science. ("The Design of Everyday Things" was actually titled "The Psychology of Everyday Things" in its first edition). The book goes into several more cognitive models than the ones that I pointed to in class, including GOMS.

I also thought I would mention in case you're curious. I didn't go into depth to explain the intuitive reasoning behind Fitt's Law. It makes sense when you think about the hand movement as a closed loop control with progressively smaller corrections towards the target. These notes from a class I previously taught explain further with equations and a diagram.



Lecture 06: User Research

Here is a sheet on needfinding from design instructors at Stanford that may be useful for you. It has some of the things I mentioned in class but also some more tips regarding types of interview styles (like the 5-why): https://hci.stanford.edu/courses/dsummer/handouts/NeedFinding.pdf



Lecture 07: User Research II

Here's a reading on Design Empathy if you're curious about more cases. Where I've personally found design empathy helpful is as a way to break my own assumptions about something by experiencing it more viscerally, in a way that things like interviews and surveys may not make click. An example of this in my domain (social media and social computing) is the Red Feed Blue Feed by WSJ, where you could see what a social media feed by people on different sides of the political spectrum might see. For me, seeing this gave me new insight on interventions that seek to bring people closer together in a polarized environment by "bursting their bubble".

I didn't get a chance to mention it in class but I wanted to point out an example of Tip #4 - "watch for workarounds" in my research. In one of my research projects, we were trying to help people who deal with online harassment, such as suddenly getting a ton of harassing emails or getting harassed on Twitter because someone posted about them. Sometimes people would report getting like 100s of hateful messages a day.

We found from interviews that the most prevalent strategy people used to deal with the harassment was to give their password to a friend, and have that friend come in and clean things up for them. And so we actually took that strategy (which is essentially a hack---it’s not how you’re supposed to use passwords and leads to some privacy concerns as a result) and then built a system that actually supports that behavior. Here's more details on our project.

I'll also point out that a book I mentioned before---"How Artifacts Afford: The Power and Politics of Everyday Things"---has a discussion of shopping carts in its introduction interestingly enough! The introduction is released free online. It goes into the history of the shopping cart briefly, and talks about the politics behind its introduction and why the shopping cart is the way it is today.



Lecture 08: Task Analysis

Here is a nice 2-part series of blog posts on building task flows by Laura Klein, a UX designer and author of several books on UX. Task flows are another way to conduct task analysis, somewhat like the hierarchical task breakdown that we talked about. This is a bit more low-level than what we discussed in class but could be useful for you as a way to think through steps in a storyboard later on. https://www.usersknow.com/blog/2020/6/4/how-to-build-a-task-flow

Returning to the IDEO video and this idea of design thinking and the design process that they popularized, here are some posts that talk more about how to use design thinking and tips on methods. I really like some of the writing by Christina Wodtke at Stanford on how she uses and integrates design thinking: Link 1. And some tips about how to better execute some of the methods we've described: Link 2. As well as her critique on how design thinking and design empathy can hide a lot of complexity: Link 3.

There is so much good writing and discussion of the IDEO flavor of design thinking these days given how much it has been popularized. Christina's last blog post above hints at some of the ways it can be inappropriately applied as well as ways it obfuscates important complexity. How this can be useful for you in your future practice is as reminders of these limits of these approaches and to carry them out thoughtfully instead of reflexively to maximize success. Here's a piece by Maggie Gram, a fantastic history lesson on IDEO and cautionary tale of the use of design thinking in the city of Gainesville, FL: On Design Thinking. Another blog post by Caitlin Chase on the limits of design empathy and a call for more participatory approaches, drawing on the work by Sasha Costanza-Chock in Design Justice, which I've already pointed you to in previous readings: Beyond Empathy in Design. In addition, Lily Irani, a professor at UCSD, has some work situating design thinking in a historical context and argues for how it was a Silicon Valley reaction against global economies and hierarchies of labor: link.



Lecture 09: Sketching

In today's UI Hall of Fame and Shame, I mentioned dark patterns. There's a lot of really interesting literature on different kinds of dark patterns! Alexis Hiniker at the UW iSchool does some research on dark patterns: https://www.alexishiniker.com/

This research paper has a nice overview of different dark patterns and also discusses ethical responsibility of designers.

My absolute favorite is the work by Natasha Dow Schull, a professor at NYU who is an anthropologist that has done ethnography research looking at the design of slot machines in casinos and gambling addicts. Her book "Addiction by Design" on this topic is fascinating and has so much relevance to the gamification of lots of our online experiences to keep us engaged. There are several videos of talks she's given on this work online.



Lecture 10: Storyboarding

For the hall of fame and shame, I focused on the Google homepage. Here's a blog post that details of the evolution of the homepage since 1999.

Lecture 10 was about storyboarding! Here's a nice short blog post on "star people", including a template for creating star people. I shared some screenshots from this set of notes on storyboarding by Amal Dar Aziz: Link. The paper I mentioned in class about important considerations for storyboarding derived from interviewing designers and conducting workshops:
Khai N. Truong, Gillian R. Hayes, and Gregory D. Abowd. 2006. Storyboarding: an empirical determination of best practices and effective guidelines. In Proceedings of the 6th conference on Designing Interactive systems (DIS '06). Association for Computing Machinery, New York, NY, USA, 12–21.
https://dl.acm.org/doi/10.1145/1142405.1142410



Lecture 11: Societal Implications

Related to our UI Hall of Fame and Shame, here are some articles on RobinHood and customer experience, from Forbes and the New York Times. There's also some discussion about UX of Robinhood in this Hacker News page.

More on negative societal impacts of design:
Here's a nice blog post by Casey Fiesler, a professor at UCBoulder, who does research on ethics and using speculative fiction: Link to blog.

The article in the NYTimes on Facebook's decision to not remove societally harmful content because of a reduction in engagement metrics: Link.

The Gender Shades project that demonstrates biases in gender recognition technology.

The blogpost I mentioned about StackOverflow and their values: Link.



Lecture 12: Paper Prototyping

For our UI HOFS, we focused on voice assistants/ VUIs. There are a number of resources online regarding how to better design VUIs to account for some of the shortcomings of this UI. Here are a few blog posts on the topic: 1, 2, 3.

Lecture 12 was about paper prototyping! I actually really like this post made by Marvel on paper prototyping: Link. And I wanted to link to the full video of that paper prototyping session I showed in class with the animal coloring website: Link.



Lecture 13: Interface Evaluation

UI HOFS this lecture was about infinite scrolling and other features related to reducing design friction. There's also been pushback under the name of "slow design" or "reflective design"---design features to get people to slow down and think more carefully about what they're doing. Here are some articles on the downsides of optimizing for speed and convenience in design all the time: 1, 2.

In lecture, we talked about how to do interface evaluation and user testing. We also talked about ethics in human subjects experiments. I encourage you to read more about the history of the Tuskegee Study. Article about the Tuskegee Study: Link. The long-term negative consequences of this appalling study are still being felt today. Here is an example from literally yesterday: Link. Here is the Belmont Report that came about partly because of the study: Link.



Lecture 14: Heuristic Evaluation

Lots of lists of design principles for heuristic evaluation in today's set of links! You already know Nielsen's 10 heuristics. Here is more info on Norman's 6 design principles: Link
Bruce Tognazzini’s 16 First Principles: Link
Ben Shneiderman’s 8 Golden Rules: Link
Susan Weinschenk and Dean Barker’s meta-classification of 20 heuristics: Link

A nice blog post summarizing some of what we discussed in class on the process of heuristic evaluation and pointing to even more lists of design principles: Link



Lecture 15: Interface Implementation

Some links related to the IoT UI HOFS: Some articles on the downsides of IoT and the anonymous "IoS" person: 1, 2, 3.

Toolkits! We talked about the example of animation design patterns and how they can be surfaced via toolkits. I love the work of Rubaiat Habib Kazi on different kinds of animation toolkits: Link. I showed a video of one of his toolkits in lecture: Link. One of his fun more recent projects extends rough sketching like we learned for idea iteration mode towards quickly generating and bridging to CAD models: Link. In the space of interactive visualizations, UW's Interactive Data Lab works on toolkits like Voyager, Vega-Lite, Vega, as well as the lower-level JavaScript library D3.js: Link.

Design Patterns: One ubiquitous design pattern in web design is the grid layout. Here's some discussion of CSS Grid and its path to being incorporated into CSS and recognized in every major browser a few years ago: Link. I also mentioned how design patterns are common in software engineer and OOP: Link. Speaking of software design patterns, here's a paper where Prof. Jeff Heer of UW IDL writes about design patterns in information visualization. This is what eventually led to the design of tools like d3: Link.



Lecture 16: Communication and Visual Design

In Lecture 16, we talked about both tips for communicating one's design (in terms of pitches and posters) as well as some suggestions for improving visual design (for both posters and digital mockups). On pitches and preparing your final presentation - one place that actually has a lot of good examples of pitches is Shark Tank! If you haven't heard of Shark Tank, it's a TV show where companies give short pitches on their product to potential investors. You can see lots of examples of short pitches and presentations. For example, here is one on "BrightWheel": Link. Notice how the presenter establishes a connection with the audience to motivate the problem and also discusses their user research. Then, they move into a demo showcasing their digital prototype, walking through the app from the perspective of different users and their goals (and brings in a personal angle too).

On posters, here's an interesting video discussing applying UX principles to scientific posters. Some of the things discussed could be relevant for your poster design (and also for your future research poster presentations, if you do any). Link.

On visual design, there are many, many resources online for learning more about C.R.A.P. and Gestalt principles. Here is a nice blog post that goes into more of the Gestalt principles than I was able to cover in class: Link. I also mentioned in class that I didn't have time to go into the science behind how our eyes see color. If you're curious, these notes from a previous class I co-taught has a lot more details on human vision: Link. Also for your curiosity, I mentioned leading in class but there is a lot more terminology regarding typography and the design of fonts: Link.