Design for Interaction
Week 2 [2/20/25]
1
Agenda
💡 Topic of the Week: Friction
👆 Critique/Activity: Call-to-Action
💬 Discussion/Lecture: Designing Friction
➿ Activity: Conditional Design
🎓 Tutorial: Figma hover states
👁️ Introduce Assignment: Look & Feel
2
💡 Today’s Topic�Friction
3
In today’s class, I want to focus on the relationship of what makes a design “intuitive” — the relationship between fluidity and friction.
4
Let’s start by seeing how well you’ve been able to communicate ideas�based on specific prompts.
5
👆 Critique/Activity�Call-to-Action
6
How did this project go?
7
Up next, let’s talk about this�idea of friction.
8
💬 Discussion/Lecture�Designing Friction
9
Loss of friction
Proposal for friction
In summary: make things “intuitive.”
In summary: make things. . . inaccessible?
10
We have this idea of where UI/UX has ended up. I have two questions:
11
Question 1
Why is there a loss of friction in design?
12
In user experience design,�we are often tasked with�creating designs that produce�extremely predictable outcomes.
13
This is something developers in particular have to account for.
For example, let’s try making a Google account.
14
Question 2
Why should we resist the norm?
15
There was a fun trend a few years ago of�absolutely terrible volume sliders.
16
There is an element of fun�that has been lost as digital interfaces have become ubiquitous.
17
Is that OK?
I guess. . .
18
At least for me,
fun, much like art, is what
makes things human.
19
Fun is an important reminder that
what we’re experiencing is not magic,
is not inevitable, and was also
created by humans.
20
Here’s what I mean:
21
Bertolt Brecht was a theater maker active before and during WWII. He made weird theater that played with the fourth wall.
22
Brecht’s approach to theater used what he called the “alientation effect,” which brought audiences deeper into the work by reminding them of their reality and physicality.
23
The value of this effect is political.
In transforms the “fake” theatrical space into something real, where things can actually happen and have meaning.
24
There was a while when we similarly had to convince people that digital devices were in fact real and had meaning.
Don’t take that for granted.
25
Now that we “get” digital devices, that element of metaphorical materiality has been erased, and so has the fun with it.
26
I think friction is a proposal�to bring that materiality back.
27
We want to make our users aware of what they’re doing so that�we can instill deeper meaning.
28
We want to make�our users aware of�what they’re doing�so that they can be transported into a�new world.
29
We want to make�our users aware of�what they’re doing so that they can become active participants in modern technology.
30
There’s practical (aka lucrative)�reasons for friction, too.
31
Friction is a way of standing out.
32
Friction is a way of getting people to remember you (and think you’re cool).
33
Friction is a way of getting people to find delight in unexpected places.
34
Friction is a way of telling stories, where the format of the story is just as important as the story itself.
35
Friction is something unique to interaction design. You can only get a feel for it in hands-on environments.
36
So, let’s do a quick hands-on exercise.
In groups of two, find me two websites:
37
1
A frictionless website
2
A website with as much friction as possible
38
You have 15 minutes.
Add your websites to this document.
Check out this page for links to web design inspiration.
39
Break?
40
Part of friction is being OK with unexpected results.
41
Friction doesn’t always mean that we want to make things inaccessible. Accessibility is more about equity than creativity.
42
Another way to think about friction is in the context of open-ended results instead of expecting a specific outcome — the friction of interpretation.
43
➿ Activity�Conditional Design
44
OK, so this isn’t a planned exercise, but if we have time I think it could be fun to revisit those horrible volume concepts.
45
If we have time, I want you to create your own�absolutely terrible volume sliders.
46
🎓 Tutorial�Hover states
47
48
Next week
👁️ Assignment: Look & Feel
🎮 Playing/Viewing: The Beginner’s Guide
49
That’s it for today!
See you next week!
50