Lessons
Class Introduction
11:34 2What is Interaction Design?
05:21 3Goal Directed Design
11:44 4Context
07:26 5Mental Models
19:02 6Affordances
07:52 7Micro Interactions
25:02 8What are Heuristics?
03:12Make it Clear Where You Can Take Action
17:36 10Help the User Understand What's Going On
14:41 11Stay on the Same Screen
19:30 12Invite Users To Do Things
06:12 13Use Semantic Motion to Aid Understanding
13:49 14Design Research
27:21 15Personas
20:53 16Scenarios & Frameworks
17:09 17Wireframing
21:51 18Interactive Prototypes
12:55Lesson Info
Affordances
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.
Class Materials
Bonus Materials with RSVP
Bonus Materials with Purchase
Bonus Video: How To Get Better As An Interaction Designer
Bonus Video: Interaction Design Career Advice
Ratings and Reviews
NeeLee
After viewing this course, I have a ton of ideas to bring back to my current projects, and how I can improve my past projects, as well as best prepare for the future. Jamal's extensive experience and real-world comparative examples, helped paint the picture on how to put this course content to good use in my day-to-day design activities. I appreciate Creative Live's layout of limiting 2 questions per segment. This allowed for more time for content and I'm able to write down my questions to address and connect with Jamal offline. I'm also grateful that Jamal/Creative Live organized the course segments in a timely way that the course went fast but stayed memorable and understandable. The bonus materials are such an invaluable source of information! Jamal conveys his knowledge and passion for interaction design easily. You can tell he genuinely cares about paying his experience forward, by how he expresses his design approach and how he really listens when he's asked a question. He takes his time to think before he speaks in order to address the questions clearly so everyone can benefit. Thank you Jamal and THANK YOU CREATIVE LIVE!
Veronica Reyes
I really enjoyed this class. I've had some previous experience and training with interaction design, so this in depth course helped to re-instate core concepts and techniques as well as introducing more examples, tools, scenarios and resources that all in all made me more confident and excited about interaction design. Creative Live organized a seamless event, had delicious food, snacks and refreshments throughout the day and were very nice. Thank you CL!
Daniel Bell
This course was so much fun to watch. Jamal is a very engaging speaker and went into great detail while still being direct and to the point. The bonus videos are great! They feel like a behind the scenes look and he really goes off script to give detailed answers to questions like how to design your portfolio site. Great class!
Student Work
Related Classes
UX Design