1
00:00:00,550 --> 00:00:05,900
Now that you have a handle on mental
models, let's discuss affordances.

2
00:00:05,900 --> 00:00:10,650
Affordances are clues in the UI that
trigger a connection to a mental model.

3
00:00:11,680 --> 00:00:15,050
I realized that sounds abstract,
but bear with me for

4
00:00:15,050 --> 00:00:17,990
a bit as it'll become clear
when I show examples.

5
00:00:19,030 --> 00:00:23,842
The term originated in the 1970s
when psychologist James Gibson

6
00:00:23,842 --> 00:00:28,450
defined affordances as the actions
provided to the actor by the environment.

7
00:00:29,710 --> 00:00:32,080
Then in the late 1980s,

8
00:00:32,080 --> 00:00:36,940
Don Norman expanded upon this terms
application to human computer interaction.

9
00:00:38,270 --> 00:00:42,820
Affordances provides strong clues
to the operations of things.

10
00:00:42,820 --> 00:00:47,050
Plates are for pushing, knobs or
for turning, slots or for

11
00:00:47,050 --> 00:00:52,080
inserting things into, balls or
for throwing or bouncing.

12
00:00:52,080 --> 00:00:57,110
When affordances are taken advantage of
the user knows what to do just by looking,

13
00:00:57,110 --> 00:00:59,630
no picture, label, or instruction needed.

14
00:01:01,405 --> 00:01:04,200
In those examples
the affordance is built off of

15
00:01:04,200 --> 00:01:06,650
the mental models that exist
in the physical world.

16
00:01:07,700 --> 00:01:11,170
However, there are also
affordances in digital products.

17
00:01:12,260 --> 00:01:17,080
Affordances can even be invented,
but it's much easier to build

18
00:01:17,080 --> 00:01:21,680
off of something existing since people
already have a shared understanding.

19
00:01:22,970 --> 00:01:27,760
Building off existing affordances
makes an experience intuitive.

20
00:01:27,760 --> 00:01:29,220
Let's look at some examples.

21
00:01:30,460 --> 00:01:36,005
Affordances can be defined
in a few categories,

22
00:01:36,005 --> 00:01:43,290
explicit, pattern, hidden,
false, and negative.

23
00:01:43,290 --> 00:01:46,480
Explicit affordances are straightforward,

24
00:01:46,480 --> 00:01:49,985
whether that's in terms of the design or
the text itself.

25
00:01:49,985 --> 00:01:55,690
Text-wise, an input could be clearly
labelled with the text phone number.

26
00:01:55,690 --> 00:02:01,071
Design-wise, it could be a button that
appears to press down on click or

27
00:02:01,071 --> 00:02:04,526
a toggle that operates
as a real world switch.

28
00:02:06,761 --> 00:02:13,100
This style is skeuomorphic design where UI
elements are made to look photorealistic.

29
00:02:14,170 --> 00:02:17,740
Early versions of Apple's
mobile operating system

30
00:02:17,740 --> 00:02:21,130
used skeuomorphism heavily
across its user interface.

31
00:02:22,290 --> 00:02:26,790
This style of UI design mimicked
real world affordances.

32
00:02:26,790 --> 00:02:30,140
UI elements, such as buttons,
contained highlights and

33
00:02:30,140 --> 00:02:33,880
shadows to seem like three
dimensional buttons.

34
00:02:33,880 --> 00:02:35,710
Icons were hyper realistic.

35
00:02:36,760 --> 00:02:41,110
Around 2013 skeuomorphic design
transitioned to flat design.

36
00:02:42,460 --> 00:02:46,690
Pattern affordances refer to
UI patterns and components.

37
00:02:46,690 --> 00:02:48,640
An example is the tab bar,

38
00:02:48,640 --> 00:02:52,510
which is a popular form of navigation
at the bottom of mobile apps.

39
00:02:54,380 --> 00:02:57,640
Hidden affordances are not
immediately visible.

40
00:02:57,640 --> 00:03:01,530
For example, a tool tip that
shows additional information

41
00:03:01,530 --> 00:03:04,850
when hovering over an information icon.

42
00:03:04,850 --> 00:03:10,060
It can also be an icon that when clicked
reveals a menu of additional actions.

43
00:03:11,130 --> 00:03:15,530
Hidden affordances are a great
tool to simplify a complex UI and

44
00:03:15,530 --> 00:03:17,760
reduce cognitive load.

45
00:03:17,760 --> 00:03:21,630
However, use them with care
because hidden affordances

46
00:03:21,630 --> 00:03:23,610
hide available actions from a user.

47
00:03:24,620 --> 00:03:28,790
This can be a pitfall if it
isn't intuitive to discover, so

48
00:03:28,790 --> 00:03:33,950
it's best to avoid using hidden
affordances for important interactions.

49
00:03:33,950 --> 00:03:38,100
Negative affordances communicate
that an element is currently not

50
00:03:38,100 --> 00:03:40,360
interactive or active.

51
00:03:40,360 --> 00:03:44,410
This is seen in inactive tabs and
the disabled button state.

52
00:03:45,480 --> 00:03:48,120
False affordances should be avoided.

53
00:03:48,120 --> 00:03:52,170
This is when an affordance does
not match the interaction.

54
00:03:52,170 --> 00:03:57,540
For example, a button that
looks active but is disabled.

55
00:03:57,540 --> 00:04:01,380
A real world example of
this is the Norman door.

56
00:04:01,380 --> 00:04:04,650
Named after UX expert Don Norman,

57
00:04:04,650 --> 00:04:09,090
it describes any door that's confusing or
difficult to use.

58
00:04:09,090 --> 00:04:14,540
You've probably encountered this problem,
you walk up to a door with a handle,

59
00:04:14,540 --> 00:04:18,280
naturally you pull the handle but
it doesn't open.

60
00:04:18,280 --> 00:04:21,020
Then you push the handle and it opens.

61
00:04:21,020 --> 00:04:24,080
The affordance was telling
you to pull open the door

62
00:04:24,080 --> 00:04:27,500
when really it needed to be pushed open.

63
00:04:27,500 --> 00:04:30,550
All right, that wraps up affordances.

64
00:04:30,550 --> 00:04:35,330
In the next video I'll talk about a few
psychological principles that inform

65
00:04:35,330 --> 00:04:36,360
interaction design.