Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Affordances help users know what to expect from a user interface. In this video, we'll better understand how an affordance is defined, and then we'll break affordances down into different types.
New Term:
- Affordances, as defined by James Gibson: the actions provided to the actor by the environment
- Affordances, as defined by Don Norman: “Affordances provide strong clues to the operations of things. Plates are for pushing. Knobs are for turning. Slots are for inserting things into. Balls are for throwing or bouncing. When affordances are taken advantage of, the user knows what to do just by looking: no picture, label, or instruction needed."
Types of Affordances:
- Explicit
- Pattern
- Hidden
- False
- Negative
Further Reading:
- The Design of Everyday Things - Donald A. Norman
- Interaction Design Basics - Alan Dix
- Designing Interactions - Bill Moggridge
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Now that you have a handle on mental
models, let's discuss affordances.
0:00
Affordances are clues in the UI that
trigger a connection to a mental model.
0:05
I realized that sounds abstract,
but bear with me for
0:11
a bit as it'll become clear
when I show examples.
0:15
The term originated in the 1970s
when psychologist James Gibson
0:19
defined affordances as the actions
provided to the actor by the environment.
0:23
Then in the late 1980s,
0:29
Don Norman expanded upon this terms
application to human computer interaction.
0:32
Affordances provides strong clues
to the operations of things.
0:38
Plates are for pushing, knobs or
for turning, slots or for
0:42
inserting things into, balls or
for throwing or bouncing.
0:47
When affordances are taken advantage of
the user knows what to do just by looking,
0:52
no picture, label, or instruction needed.
0:57
In those examples
the affordance is built off of
1:01
the mental models that exist
in the physical world.
1:04
However, there are also
affordances in digital products.
1:07
Affordances can even be invented,
but it's much easier to build
1:12
off of something existing since people
already have a shared understanding.
1:17
Building off existing affordances
makes an experience intuitive.
1:22
Let's look at some examples.
1:27
Affordances can be defined
in a few categories,
1:30
explicit, pattern, hidden,
false, and negative.
1:36
Explicit affordances are straightforward,
1:43
whether that's in terms of the design or
the text itself.
1:46
Text-wise, an input could be clearly
labelled with the text phone number.
1:49
Design-wise, it could be a button that
appears to press down on click or
1:55
a toggle that operates
as a real world switch.
2:01
This style is skeuomorphic design where UI
elements are made to look photorealistic.
2:06
Early versions of Apple's
mobile operating system
2:14
used skeuomorphism heavily
across its user interface.
2:17
This style of UI design mimicked
real world affordances.
2:22
UI elements, such as buttons,
contained highlights and
2:26
shadows to seem like three
dimensional buttons.
2:30
Icons were hyper realistic.
2:33
Around 2013 skeuomorphic design
transitioned to flat design.
2:36
Pattern affordances refer to
UI patterns and components.
2:42
An example is the tab bar,
2:46
which is a popular form of navigation
at the bottom of mobile apps.
2:48
Hidden affordances are not
immediately visible.
2:54
For example, a tool tip that
shows additional information
2:57
when hovering over an information icon.
3:01
It can also be an icon that when clicked
reveals a menu of additional actions.
3:04
Hidden affordances are a great
tool to simplify a complex UI and
3:11
reduce cognitive load.
3:15
However, use them with care
because hidden affordances
3:17
hide available actions from a user.
3:21
This can be a pitfall if it
isn't intuitive to discover, so
3:24
it's best to avoid using hidden
affordances for important interactions.
3:28
Negative affordances communicate
that an element is currently not
3:33
interactive or active.
3:38
This is seen in inactive tabs and
the disabled button state.
3:40
False affordances should be avoided.
3:45
This is when an affordance does
not match the interaction.
3:48
For example, a button that
looks active but is disabled.
3:52
A real world example of
this is the Norman door.
3:57
Named after UX expert Don Norman,
4:01
it describes any door that's confusing or
difficult to use.
4:04
You've probably encountered this problem,
you walk up to a door with a handle,
4:09
naturally you pull the handle but
it doesn't open.
4:14
Then you push the handle and it opens.
4:18
The affordance was telling
you to pull open the door
4:21
when really it needed to be pushed open.
4:24
All right, that wraps up affordances.
4:27
In the next video I'll talk about a few
psychological principles that inform
4:30
interaction design.
4:35
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up