Have you ever wondered why you walk up to some doors and you just don't know whether to push or to pull them? (laughter) While with other doors it just seems natural how to open them. That's because of how they were designed. So the next time you go to a store, look at the doors. If the doors have handles on both sides, that's confusing. It's so confusing that you need to put a sign here to tell people how to use it. But if one side of the door has a bar on it and the other side has a grip that goes vertically, you automatically know what to do. And that's because your body just knows, like humans are wired to grab things and fiddle with them and play with them and see how they work. It's just in our DNA. We've been doing it since we were cavemen, like taking stones and making them into sharp things and then chopping trees down with it. So this vertical bar is natural to grip. So you just see it and you grab it, while the horizontal bar, your first instinct will be to place your hands ...
on it and then from there it makes more sense to put your body weight into it. It's not really that natural to try and grab the bar and pull it backwards. Okay, so why all of this talk about doors? Why do we care about that? It's because these doors, because this is an affordance and they're really important for interaction design. Affordances are action possibilities that are latent in the environment, which is a fancy way of saying that objects in your environment, based on what they look like, you get an idea of what you can do with them. So if you see a blank wall, not really anything you can do with it. If there were some handles on that wall, maybe placed within reaching distance towards the ceiling you might start climbing. So that's affordances. Affordances are things that afford you an action. For example, on a sound mixer the knobs look like they can be turned. The buttons look like they can be pushed and the glides look like they can be moved along tracks. So affordances don't require conscious attention or thought. You don't really think about, ooh, what are the affordances in this device. And a lot of times you might not even recognize when your behavior is based on an affordance. So because they arise out of this instinct, out of this intrinsic relationship that we have physically to the world around us. So we can take this knowledge of affordances. I mean the physical world is obvious, right? There is a chair here, looks kinda like I can lift it or sit on it, right? But in the digital world, you don't really have that. Because they're not physical objects. They're images, they're representations of reality. A button on a web page isn't an actual button. It doesn't move, it can't really be pressed. It doesn't really give you tactile feedback. But we still understand that we can press it based on the appearance that the button has. So it looks like a button so we interact with it. Does that sound familiar to anything that we might have talked about already? It kind of looks like something and then based on our experience we figure out that we can use it. Yeah. So designing good affordances depends greatly on understanding a person's mental model. Here you see a lot of affordances here. You see these little up and down arrows. You see the preview screens of the slides over there. You see here this little thing that looks like it has a texture and which kind of indicates that you can pull it around or touch it at least. So when you're designing digital affordances you borrow characteristics from the physical world. You use shadows, you use textures, you use perspective or blur for distance. For example, in this old example, coming back to when people didn't understand what buttons on a screen were. We used shadow and perspective and lighting to make it look as if this is a button that you can press. Actually lift it up from its background. And then people are like, oh, okay this is something that I can probably press. Or textures. There was some science done. I forgot who did it. But it basically showed that when people use a mouse, they use it almost like an extension of your finger. So if you see something on a screen that looks like you can touch it because it has something like a ribbed pattern here, you're gonna automatically gravitate towards it and try to touch it. Just like you'd seen interesting texture in real life and be like, ooh what's that made of. So that's how you can use textures and affordances to make it clearer what you can use and what you can't use. Another example is a blur. This is from the iPhone's home screen when you use force touch. It opens up this layer and everything beneath it blurs and it gives this suggestion that this is laying on top of the other things. So even though it's a two dimensional screen, the mind state that you take when you're designing is that all of these things are sort of like layers on top of each other, that are like moving. Google did a great job of, I mean a lot of good designers already do this instinctively, but Google did a fantastic job of verbalizing this idea of layers that move and merge and fly with their material design framework. That's one really good aspect of the material design framework. So the key takeaway is that when you're designing digital products, you wanna make things look like you can interact with them.
Bonus Materials with RSVP
Top 5 Mistakes New Interaction Designers Make
Bonus Materials with Purchase
UX Interview Starter Questions
Best Resources to Become a Better Interaction Designer
Bonus Video: How To Get Better As An Interaction Designer
Bonus Video: How To Get Better As An Interaction Designer - HD
Bonus Video: How To Get Better As An Interaction Designer - Low
Bonus Video: Interaction Design Career Advice
Bonus Video: Interaction Design Career Advice - HD
Bonus Video: Interaction Design Career Advice - Low