Cognitive Psychology: Affordances4:36 with Hope Armstrong
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.
- 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:
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 psychologists 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 transition 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 up