00:00:00.017 --> 00:00:06.197
Have you ever wondered why some products are so intuitive to use while others are just confusing?

00:00:06.797 --> 00:00:11.017
Imagine you're at a friend's house trying to turn off their TV and you reach

00:00:11.017 --> 00:00:15.057
for the remote and you're looking for the on-off button and you're confused

00:00:15.057 --> 00:00:19.777
until your friend says, oh, you're actually supposed to hold down the center

00:00:19.777 --> 00:00:21.577
button and hold it for a few seconds.

00:00:22.397 --> 00:00:28.757
Now compare that experience to using a remote where the on-off button is right

00:00:28.757 --> 00:00:29.997
where you expected it to be.

00:00:30.377 --> 00:00:35.297
For a classic example, have you ever pulled on a door handle only to realize

00:00:35.297 --> 00:00:37.517
that you're actually supposed to push it instead?

00:00:38.277 --> 00:00:45.497
These everyday experiences perfectly illustrate how mere objects can invite

00:00:45.497 --> 00:00:47.097
certain actions from us.

00:00:47.097 --> 00:00:54.217
In this episode, we'll talk all about affordance, the natural cues that invite us to interact.

00:00:54.457 --> 00:01:01.937
By understanding affordance, you'll learn how to create designs that just feel intuitive to use.

00:01:02.117 --> 00:01:06.337
It gets right to the question of why do some products, services,

00:01:06.877 --> 00:01:10.817
even apps on your phone, just feel right the first time you use them?

00:01:10.817 --> 00:01:16.917
And what's happening psychologically when a space or an object just feels instantly

00:01:16.917 --> 00:01:18.237
familiar and comfortable?

00:01:18.697 --> 00:01:24.837
Join us today as we uncover the answers to these questions, exploring real-world

00:01:24.837 --> 00:01:30.357
examples from remote controls to digital apps and Norman doors,

00:01:30.397 --> 00:01:34.517
and even that comfortable layout of your favorite cafe.

00:01:34.517 --> 00:01:39.417
By the end of this episode, you'll see the world around you with fresh eyes,

00:01:39.577 --> 00:01:44.557
empowered to design experiences that humans can effortlessly navigate.

00:01:45.662 --> 00:01:51.402
Affordance happens when objects in the world around us lend themselves to certain actions.

00:01:52.302 --> 00:01:56.702
The idea of affordance has its root in an area called ecological psychology.

00:01:57.162 --> 00:02:03.382
This area frames psychological and design concepts in terms of organisms and

00:02:03.382 --> 00:02:04.922
their relationship to environments.

00:02:05.862 --> 00:02:10.682
The idea of affordance was coined by ecological psychologist John J.

00:02:10.862 --> 00:02:17.002
Gibson. The concept was developed further and brought into the HCI world by

00:02:17.002 --> 00:02:23.022
Donald Norman, who again was one of the founding fathers of UX.

00:02:23.342 --> 00:02:29.222
In a natural environment that's not built by human beings, we sometimes come

00:02:29.222 --> 00:02:34.922
across elements of the environment that have affordances, that happen to be fit for humans.

00:02:34.922 --> 00:02:39.942
Think about a tree with a low-hanging, strong branch that you can climb on,

00:02:40.042 --> 00:02:44.842
or a body of water that is transparent and easy to walk into,

00:02:45.062 --> 00:02:49.442
and it's shallow enough to stand in, and since it's transparent,

00:02:49.442 --> 00:02:54.862
you can see whether or not there's danger or anything you should watch out for in the water.

00:02:54.862 --> 00:03:00.462
Or think about you're going for a hike and you see a rock or a tree stump that's

00:03:00.462 --> 00:03:03.142
flat enough to be comfortable to sit on.

00:03:03.442 --> 00:03:07.722
This all deals with affordance. So there's two levels of affordance,

00:03:08.222 --> 00:03:10.662
functional affordance and perceptual affordance.

00:03:11.002 --> 00:03:14.562
That means what it sounds like. The functional affordance means that you're

00:03:14.562 --> 00:03:20.842
able to do something with it and perceptual affordance means it looks like or

00:03:20.842 --> 00:03:22.982
seems like you're able to do something with it.

00:03:23.362 --> 00:03:28.202
So to give you an example in digital design where you can have one without the other.

00:03:29.026 --> 00:03:34.366
Imagine a decorative visual element on a screen that looks clickable but isn't.

00:03:34.486 --> 00:03:39.086
That would be an example of perceptual without functional affordance.

00:03:39.506 --> 00:03:45.546
Or imagine an app that has gestures that you can do, such as swiping or pinching,

00:03:45.646 --> 00:03:48.546
but there's nothing to tell you that you can do that.

00:03:48.806 --> 00:03:52.966
That would be functional affordance but without the perceptual affordance.

00:03:52.966 --> 00:03:58.506
Let's take a few minutes to consider an idea called prospect refuge theory,

00:03:58.786 --> 00:04:00.966
which arguably relates to affordance.

00:04:01.146 --> 00:04:09.286
And this describes a type of environment that affords itself to people feeling safe and comfortable.

00:04:09.586 --> 00:04:15.926
This was a theory that came from geographer Jay Appleton in a 1975 book,

00:04:16.266 --> 00:04:18.226
The Experience of Landscape.

00:04:19.186 --> 00:04:24.626
Okay, so in this concept of prospect refuge theory, prospect is the ability

00:04:24.626 --> 00:04:27.986
to see and survey a wide open space.

00:04:28.626 --> 00:04:33.106
Refuge is a sheltered place where you're shielded from danger.

00:04:33.646 --> 00:04:38.726
The idea is that elements in the environment can afford this feeling for us.

00:04:39.006 --> 00:04:44.106
Imagine standing at the edge of a quiet forest with a dense thicket of trees behind you.

00:04:44.766 --> 00:04:50.386
In front of you, a broad grassy area stretches out, gently sloping downward into a valley.

00:04:50.846 --> 00:04:57.626
Beside you is a large sturdy oak tree with wide branches creating a natural canopy of shade.

00:04:58.026 --> 00:05:04.286
You feel the ability to prospect or see and survey everything that's clearly in front of you.

00:05:04.426 --> 00:05:10.306
At the same time, you feel a sense of refuge and the ability to have shelter from the trees nearby.

00:05:11.400 --> 00:05:14.960
Now, that was an example from a nice, peaceful nature scene,

00:05:14.960 --> 00:05:20.460
but you can see people take advantage of prospect refuge all the time in real life.

00:05:20.740 --> 00:05:27.500
When a person enters a cafe and they sit in a corner with their back to the

00:05:27.500 --> 00:05:32.460
wall so that they can see the whole room and have a sense of control and they

00:05:32.460 --> 00:05:35.420
know that nobody can come up behind them,

00:05:35.820 --> 00:05:38.660
this might give them a sense of security.

00:05:38.660 --> 00:05:43.540
Not everybody feels the need to do this, but it could give somebody an extra sense of security.

00:05:44.060 --> 00:05:48.160
Or someone has a house on the hill where they can look out of their window and

00:05:48.160 --> 00:05:51.240
they can see the whole neighborhood while feeling secure.

00:05:51.600 --> 00:05:57.220
So this is one type of example of affordance where environmental features can

00:05:57.220 --> 00:06:00.080
afford something like prospect refuge.

00:06:00.720 --> 00:06:05.120
But in general, features of the environment can afford all types of things.

00:06:05.120 --> 00:06:08.300
So again tree stumps can afford sitting

00:06:08.300 --> 00:06:12.260
and snow and ice might afford sledding

00:06:12.260 --> 00:06:15.180
or sliding and of course since

00:06:15.180 --> 00:06:18.720
the world around us is not just created by nature it's

00:06:18.720 --> 00:06:22.060
created by humans too that means that humans can

00:06:22.060 --> 00:06:27.720
and do create a world around us that affords all kinds of things that make it

00:06:27.720 --> 00:06:33.140
easier for humans to do things in the field of human factors and design psychology

00:06:33.140 --> 00:06:39.140
seek to use our understanding of humans and provide affordance intentionally.

00:06:40.240 --> 00:06:45.080
So for some quick examples, chairs afford sitting, buttons afford pushing,

00:06:45.820 --> 00:06:49.680
handles afford grabbing, stairs afford climbing.

00:06:50.180 --> 00:06:56.020
Anything that lends itself to an action invites us to do that action more easily.

00:06:56.720 --> 00:07:00.060
So relating this to the digital realm where many of us work,

00:07:00.060 --> 00:07:02.480
A slider control, for example,

00:07:02.900 --> 00:07:12.060
affords our ability to set a value by sliding a piece of the widget from left to right along an axis.

00:07:12.900 --> 00:07:17.280
Hyperlinks, since we've learned them and gotten used to them, afford clicking.

00:07:17.820 --> 00:07:23.660
Drag and drop interfaces afford moving objects from one place to another.

00:07:24.580 --> 00:07:29.580
Switches afford our ability to toggle things on and off. And that's what they look like they do.

00:07:29.720 --> 00:07:33.920
They look like they switch on and off and they remind us of physical switches.

00:07:34.851 --> 00:07:39.431
And prospect and refuge elements arguably exist in the digital realm, too.

00:07:40.271 --> 00:07:44.671
Think about elements that give full visibility of a system, like a dashboard

00:07:44.671 --> 00:07:47.011
or a situation awareness display.

00:07:47.711 --> 00:07:51.311
Those would be examples of prospects that allow you to see things.

00:07:51.731 --> 00:07:57.891
And refuges can exist in user interfaces as well, in the form of privacy settings

00:07:57.891 --> 00:08:04.871
or protected user profiles, anything that gives us the ability to act and feel safe at the same time.

00:08:05.131 --> 00:08:10.451
Or going back to our more general idea of affordances, think about the products

00:08:10.451 --> 00:08:16.691
that have become big hits, partly because of their ability to afford some easy action.

00:08:17.051 --> 00:08:23.391
So for example, smartphone touchscreens afford our ability to do gestures that

00:08:23.391 --> 00:08:28.191
make it very easy to directly execute functionalities.

00:08:28.791 --> 00:08:35.371
With our gestures. The Nintendo Wii motion-sensitive controller affords our

00:08:35.371 --> 00:08:38.311
ability to do intuitive gameplay actions.

00:08:38.911 --> 00:08:43.451
Even ChatGPT is great partly because of an affordance.

00:08:43.591 --> 00:08:47.311
It gives us the easiest way that we know about to query for data,

00:08:47.631 --> 00:08:50.331
which is two-way natural conversation.

00:08:50.651 --> 00:08:57.251
In collaborative spaces, sticky notes afford our inclination to capture ideas

00:08:57.251 --> 00:09:01.111
one by one and to move them around and reorganize them.

00:09:01.391 --> 00:09:07.151
When desks in a classroom are grouped together, this affords collaborative activities

00:09:07.151 --> 00:09:11.911
rather than facing the front of the classroom that affords attending to a lecture.

00:09:12.211 --> 00:09:19.171
In learning environments, flashcards afford cycling through many different small examples of things.

00:09:19.811 --> 00:09:25.111
Scissors, glue, and scrap paper afford generative, creative activities.

00:09:25.551 --> 00:09:30.871
So when we think about it, there are countless ways we can use affordances to

00:09:30.871 --> 00:09:35.071
create experiences that feel natural and satisfying.

00:09:36.004 --> 00:09:40.484
Now, the concept of affordances is a bit richer than what we covered here today,

00:09:40.484 --> 00:09:43.704
and ideas have been added to it over time.

00:09:44.004 --> 00:09:50.124
For example, Don Norman in 2008 made some distinctions between what he called

00:09:50.124 --> 00:09:53.984
signifiers and affordances and even anti-affordances.

00:09:54.244 --> 00:09:58.284
But for today's discussion, we wanted to introduce the basics.

00:09:58.504 --> 00:10:04.304
So when we look at examples like filling out a form or furniture to be used

00:10:04.304 --> 00:10:10.224
or a cafe or an app, some things just feel right because they're aligned with

00:10:10.224 --> 00:10:12.064
our psychological expectations.

00:10:12.684 --> 00:10:18.504
The designs of these things leverage affordances that match both what we can

00:10:18.504 --> 00:10:20.504
do and what we expect to do.

00:10:21.024 --> 00:10:27.224
When things just feel instantly familiar, what's happening psychologically is

00:10:27.224 --> 00:10:34.164
that our unconscious sees and recognizes the affordances embedded in our designs.

00:10:34.724 --> 00:10:41.224
They signal to us that this environment naturally fits our needs and expectations.

00:10:41.644 --> 00:10:48.004
So as a design psychologist, you want to design your product or service such

00:10:48.004 --> 00:10:51.144
that people's tasks and goals fit right into them.

00:10:51.144 --> 00:10:57.504
And with just a few thoughtful design tweaks, we can create experiences that

00:10:57.504 --> 00:11:00.484
naturally lend themselves to what people need.