Day 75- Foundational Interaction Design Principles- 100 Days 100 Skill Booster Sessions

Happy to tell you that we are consistently doing this for 75th day. So take an advantage. Okay, Sorry, sorry, sorry. Just a second guys, just a second. I'm just pasting this link again. Okay, so Jagdish, you booked a one to one call. Okay, let's. Let's meet today. Not a problem. Okay, sure, fine, fine. No issue. No issue. That is fine. Yeah, thanks. Okay. Okay. Just a second, just a second. I'm just putting out in the other people as well so that they can also join. Okay. Okay, fine. Guys, very good morning. Welcome to the day 75 of the skill booster session. I wanted you to take your notepad and pen and we, we will going to learn through some activity. Okay? So this particular topic will not be understood when you, when you just listen to the theory part, whatever I'm telling you. Okay? I wanted you guys to just pay close attention first switch on your camera. I request you to all switch on your camera, pay close attention and take out your notepad and pens fast. Because the more you are able to observe this, the more practical exercise I'm going to do give you guys. If you, if you are able to follow that then and only you're going to learn this. This, this is little tricky topic and a lot of people might have learned this particular skills before. But it's okay. The more and more you practice it, the consciousness towards that will develop a lot. Okay? Yes guys, I want everybody try to be in mute guys. Okay? Yeah. Thank you. Thank you. Great. Okay, so I request you to just switch on your camera and also we can just go for the session now. Okay, listen to me very carefully. Okay, so we are going to cover something called interaction design principles. Okay, so how many of you have heard about this terminologies? Check this. I don't know this terminology or maybe Jagdish have heard about this. What is this? Can somebody tell me what is this? Affordance signifies discoverability. Have you guys heard about it? Totally. No. Okay, just give me a yes no in the chat box so that I can able to understand what's your. Okay. Okay. No. Oh no, no. Okay, okay, okay, fine, fine. No, no. It's a very good answer because it would be much better better for you guys to observe it in a fresh level. Okay, good. So first of all let us understand these are all like interaction design foundational principles. Okay. So when you are creating some interactions for the users or when you're creating physical products or digital products, it doesn't matter. So these are all the basic, basic foundational things. Okay, so let Me first introduce you to three terminologies. Tomorrow we'll see some three terminologies. Guys, this is a, this is like a bible for you guys. Okay? People, Christianity, they follow this Bible, right? And Hindu, they follow this Bhagavad Gita and I would say Muslim culture, they have this Quran. I'm telling you guys, for a designer, this is a religious book for you. Okay? So this is like ultimate fundamentals. Like you cannot really skip this. I don't know, you may be learning this UX loss and you may be learning this what you call Jacob Nielsen law and all these things, right? This is even more primitive than that. Okay. In fact it was, it was actually first taken out by Don Norman and then he has put in his books and then he has also practiced it consciously with many industries and then he has created a big ripples around it. This is not just a topic. This is a fundamental foundational of design where people have not thought it before. People have not taken this before and then they have given it as a syllabus. Okay? And, and it's, it's, it's. You guys are so lucky. But we have, we have been reading this Don Norman and then we have been taking certain, certain sessions over there. So the consciousness towards that particular topics will be very high for you. See, you cannot only design physical products or digital products separately. You need to understand how the human interaction really happens there. If you're connecting the dots, the interaction between the human and the computer will actually make the full product development cycle completed. Or else you will not understand why we are doing this. You will not understand what is the purpose we are creating this and how to connect the dots and how to really make it usable for the people in order to deliver the effective most functionality. Okay? So that is the major concept behind this. Focus on practical application in both physical and what you call digital product design. First of all, let's talk about affordance. Okay, so now I'll stop sharing my screen. Guys, can you just go and pick any one product near your place? Guys, Jagdish, Karthik, Akshita, Jayanandani, Sharath, Sri Balaju. Please switch on your camera. I wanted you guys to take out any product and just show me take any product. I'll give you 15 seconds. Okay? Don't take very obvious product Sharad, take something else. Take very non obvious objects. I mean you can, you can move out, you can just look around what you have. I wanted you guys to take around some, some, some little unconventional objects like let's say this is little unconventional, right? Something like this you can take. Don't take this what you call pen mouse which you already know. Okay. Yes. Sri Balaji. Yes. Jagdish, Jayanandini, Akshita, Vishwaish. Come on. Yeah, yeah. Giridhar, what you took. Okay, that's interesting. So Giridhar took this. What do you call? What is that? Nail cutter. Interesting. Good book. Okay, that's good. Okay, you're showing the book itself. J. This is where this topic is there. Okay. P. Just can you show me your product? Guys? See if you show the product only we can able to help out your learning process from there. Okay. Screwdriver. Interesting. Interesting. Super example. Sharath is taking screw. What is that? Okay, maybe I'll try to. Maybe I'll try to bring one person. That would be better, I believe. Okay. Okay. Show me Sharath. What you got? Phone charger. Excellent. Akshida. It's screw only. Screw. Okay. Screw. Good. Guys. So what did you feel when you take that product? Tell me what did you feel when you take that product? I'm asking everybody, not just Sharath or others. I'm just asking what did you feel when you take that product? See guys, if you show me the product I can able to tell you like how I can able to explain you faster. Okay. Others, the example may be little irrelevant and you want to get the concept. That's why I wanted you guys to come in the camera and show me first. Do it. Do it. It's going to be a very short call. Okay, come and show me. What are that? Scissors. Okay, I'll make you co host. Guys. Maybe if your camera is little. Not problem. Okay. I'm sorry. I'm sorry. Sometimes the camera might be a little tricky, guys. Okay. Because we have only restricted people for this camera option. Okay? Yeah. I've given you co host for all the people. Okay. Scissors. Okay, that's great. Can you just hold the product and show me in the photo? Because I have to explain you from that perspective, right? Ah yes, Sharath. Very clear. Ramraj. Very clear. And who else? Who else? Who else? Pish. What product you have taken? You can hold the scissor. Okay, so I have a problem in the camera. Okay fine. So everybody has taken a product, right? Listen to me guys, very carefully. See by some means you have actually taken this particular product. I will not say you take any product. This product, some way you took some product. Okay. So how did you take that? What made you to take that in particular direction? Can you just tell me like let's say Sharath has. I'll take Sharath example. Okay. Sharath has took the screw like this. Why didn't Sharath take like this? Can you take the water droplet like this? No, you can take only water droplet like this, right? Why can you just recollect? I'm just asking you to pause a little bit and think. When you looked at that product near your table or somewhere, you put some conscious decision to go and pick it up, right? What made you to take that particular product in that direction? Can you just give me the example or narrate it? Yeah. So when we. If someone asked or if you there is a there should be need for taking that, then only we will go and grab it otherwise. Okay, that's great. Super. Sharat went very primitive. Very good. I'm not saying no for his super answer. Okay. Need is there, Sharat. Fine. Good. And what makes you go and pick that particular product in that particular orientation? Try, try, try. I. I wanted you guys to tell the answer. I mean, it's not like I'm telling you the answer. What make you to like? Let's say okay, need is there. As Sharath is saying, comfort. Okay. Jagdish is saying comfort. Interesting. What is comfort now? Its color and different from other guys. You can switch on your switch. You can open your mic and also talk. Okay. It looked me interested so I picked. Okay, Karthik, this is a good answer. So it made you interested, attracted. But you could have taken by something else also. No. You could have picked by your leg also. You could have picked by your mouth also. Okay. You could have picked by your hand. You could have picked by your finger. You could have picked by anything. But why did you take it in that particular what you call interaction? Tell me. We're talking about interaction. Okay. That's why this example. I'm trying to relate it. Okay. So Jayrenjan is saying it's color and different from other products around me. That's good. Attraction. I understand color is there. But why did you pick it in that interactive way? Tell me. Come on guys, give it a thought. Due to its usability. I use the screw there. In so many things. So, so many. In so many things to repair. So your voice got cut here in so many. Due to its usability. Ah, okay. Due to its usability. So first you said something, Ramraj. You were about to tell the correct answer but again you deviated. You said so many times. Your voice got cut. You're in mute. Okay. Anyway you can type out in the chat box. But yeah, Ramraj, Is little bit closer. What about others? Just think about it. See you could have, you could have. You could have picked your table also. No, let's say if you have a table in front of you the moment if I asked you, you could have picked your TV also. No. But why did you take that product? Tell me guys, think about it. If you're not thinking, you will not connect the answer. What I'm saying it's very easy for me to tell the definition but it's little difficult for you to what you call connect your earlier interactive knowledge. Okay. Come on Ramraj, I can hear you. You can tell in voice also. Okay. So many times I used to daily in activities. Okay, somewhat little closer. Ram Raj is saying every single day I have tried to take this. I know how people have interacted it. I have seen that. That's why I'm able to do it. How many of you are resonating with this? Have you seen anybody picking screwdriver in the mouth? So Sharath has picked up in the hand obviously because everybody has taken in the hand, right? So more near it's more comfortable to pick and less weight. Okay, so you're saying it is comfortable and less in weight. Okay, good. So wipe you picked sister Jain and because it's very comfortable. Okay, that's great guys. Show me your products. See if. If I'm not able to see the product I won't be able to relate the examples. Okay, people who are showing me the products, I can able to quickly tell them what Giridhar showed. Giridar showed nail cutter, right? Very good example. Let me bring Giridhar into the screen. Giridhar. So I wanted to ask you, you picked the nail cutter, right? How do you know nail cutter worked like let's say the first time in the world you are seeing the nail cutter. Imagine you have not seen this. Okay. Nobody has taught you, nobody has told you. But they're saying it's a nail cutter. Somebody has told you this. Think in the mind, how will you naturally go and pick that object? Can you express that moment? Where will you find how the nails will be cut? How do I handle? How do I. Whether it's a pressing or crushing, we don't know yet. So can you just describe that moment? So basically we will just try and error, right? Because yeah, we try out things and only. Yeah, good, good. Practically correct. Super, super. Then. Then also like yeah. When looking at the design of it, like, like what I said like we can try and find right trail and error. That's good. I totally Understand I'm saying more. See trial and error is okay, you decided somebody is not telling you. You have not seen this. See imagine guys, if you're buying any product in the shop. I'm just saying. I'm not saying nail cutter or something. Imagine if you got any product from the shop recently in the last one month and it doesn't come with any user manual or anything. Okay, and you bought it. How many of you wrongly interacted with any product recently? Can you just tell me and broke it? Can you just recollect one example? Jagdish? I don't know this is how it should be done but I tried to broke it. I did not open in the right direction. It leaked. Probably you don't know how to cut let's say a milk packet or maybe you did not cut it the right portion. What happened? The milk fell down. How many of you have did that? How many of you have made some mistake recently in any product? Yes, not only Giridhar, I'm telling many people have did that because see, if you take a product and intuitively you find how to interact with it that is called Affordance. How do you afford to take that? See this remote is there. Okay, the remote is designed in a way I can able to go and afford it. Let's say if the remote is this much thick do you think I will be able to hold the remote and press the button? I won't be able to keep my finger or something? Like the way in which you try to intuitively afford it. Afford is different. Like not the cost affordance. Okay, think about it. Come to the interactive world. How do you afford? The product is called Affordance. Like, let's say one example screwdriver. Who's that? Screwdriver example Screwdriver example. Who took the screwdriver? Like let's say if there is a problem in this particular socket box. Okay, now I have to repair it. Imagine. Do you think can I open it? The screwdriver in the hand? It's not possible to open in the hand, right? We need a tool for that. So that tool is the actual thing to open it. But is that particular screw having the provision to receive the screwdriver? Yes, that is called affording. If the product is able to afford it through the human interaction, that is called affordance. It's same applicable for digital product. Also imagine if you keep your mobile phone button on the top right hand corner. On the bottom one corner. And many times we use one hand applications, right? We don't use two hands. Have you ever seen people going and trying to touch it here? That's poor interaction. That's called poor affordance. Okay, so it is not intuitive. Apple has actually solved it in 2014, 15 itself. They were the first one to solve the smartphone touch issue. Okay? They had something called a double tap. The moment when you double tap, the entire screen comes down and it is reached in your half of the finger itself, the entire screen will come down. I don't know. Still some mobile phone really has that kind of a feature. But it was actually a breakthrough interactive. Because I already told you in the last mission, also in 1990s when Steve Jobs has put. Don Norman has a cognitive design head in the interaction design in the Apple laboratory. He was very much understanding this is going to revolutionize the world. The interaction and design principles. What Don Norman is talking about is going to revolutionize the world whether it's a physical or digital production. See, have you seen the click wheel in Apple iPod in 1999, in 2000, people who are in that particular age who are using that ipod and other things, they will know that it's a complete interaction. And people wanted to afford it. Right? People wanted to afford it. Imagine if it is not affordance, like let's say if it's not conveyed properly, if the interaction is poorly designed. See, when you design a product, guys, when you design a button or call to action, it should invite the user to interact. You should. It should not ripple, it should not be ambiguous. Like it should not be very confusing, right? So that is called affordance. Okay, Are you guys getting it or should I give more examples? Okay, I will tell you one more thing. Can you now take one physical product and digital products you can take in online also. No problem. I don't want, I don't want. Okay, but physical products you can take from your home. And give me one example, Jagdish, how affordable it is in terms of digital as well as physical. I'll give you three minutes time. Try to take it fast, fast, fast. Let's do it. Let. Let's bring out one example. Then it makes a lot of sense. Okay? Any one example. If you understand this, the next principle becomes very easy. Guys, come on. Earpods. What? Earpods. Earpods. That's interesting. Okay, can you take one poor affordance example that you. You took one good example. Can you take the poor example? Ramraj, let's try to understand in this way around it. One minute. Just bring one bad example. Okay, just one second guys. One second. It great. Okay, so chat box is filled with Lot of answers. Okay, that's great. Shampoo bottle. That's interesting. Okay. Toothpick. Interesting. Rajam Pet Karthik. Excellent. Can you tell me one poor example? I wanted you guys to see? The more you will learn affordance and signifier. This terminology. When you understand bad examples. Can you try it out? Tumblr. Excellent. Punish. Excellent, excellent. Super example. See, toothpick is also. I would say it's a good example. See. Imagine if the toothpick is like a pencil. Will you be able to use it? There is a particular dimension, right? See, Imagine how in our mind we will make the user to think about before interacting with this product. Can you take on digital example please? That would be. That would be better. Can you guys try to take one digital example? Can you guys try it out? Okay, come on. Digital example. Can you take it? Old model TV remote. It has a lot of buttons. Okay, that's good. A lot of buttons is. Is not exactly affordance. Lot of buttons is something else. Okay, maybe you can tell some poor examples of maybe physical product, additional product. That's okay, fine guys, I'll tell you one. One classical example for you guys. Okay, I'm just taking out this. Can you see the screen? How many of you have seen this? When you create an interaction like this door, people will automatically push it. Am I right or not? Look at the left hand side. The moment when you design a handle like this, what people will do, People will mostly try to pull, pull and push. See, instead of you telling hey user, please pull. Hey user, please push. People will never do that because we will always get confusion. In fact, this is called Norman doors, okay? It's one of the paradoxical principles in design. Also same is applicable for digital product also. Okay, think about it like when you give any confusing interactions, you cannot expect your user to really interact in a in a certain way. So instead can you just design a handle without a handle itself? Have you seen in many doors there is no handle at all? So how come users will pull it? That is only one way for the option for the user only he has to push it. Very simple. Do you think somebody else will pull because there is no affordance to pull it? Are you guys getting it or not? There is no affordance to pull it. Look at this. There is no affordance to pull it, but on contrary there is a affordance to push it. Can you guys understand what is mean by affordance? Can you guys understand? Why did you pick scissors? Why did you pick screwdriver? Why did you pick mouse or whatever? Many people have typed out many answers, right? So this is called affordance. And you can, you can. You can look at this part. Okay, you can look at this part. See the way in which someone can use an object. A foot plate affords only pushing. A flat plate of force only pushing bar handle affords pulling. It's a very, very classical example I would say. Okay, so now let's come to the digital example slowly. But I will also talk about something else guys. Okay, 70% of the user prefers interfer interfaces matching mental models. What is mean by mental models? How many of you don't know what is mean by mental models? Mental model. What does mean by mental model? Very important. If you have to understand this, you need to understand what is mental model first. Then and only you are going to get super clarity in this. Okay. Mental model. What is mean by mental model? Okay, people are typing out something else. Don't know. I don't know. Okay, fine. See, mental model means like let's say physically we used to design something. Physically we used to interact with this product, right? That's. That's one aspect. But mentally your mind will tell. Hey, this products needs to be only hold like this way. So you better hold it this way. That's called mentally thinking. So what, what what people are suggesting is being a designer, you should understand how the people mental model really works. If you can't tap that mental model properly, you won't be able to empathize and design for them. Like let's say if you're designing a call to action button. Okay. If you're designing any particular button in order to just swipe it, then and only the phone will switch on. Okay? If you are not creating an interaction or affordance in a way which can be swiped, then how come you will expect your user to swipe it? Either you can use some kind of small micro interactions or maybe you have to show some kind of arrow mark which is showcasing how the interaction should happen. Or like let's say if you wanted to just switch it on like this, push away. Okay. Like let's say there are many regulators which is available like this push. Right? Imagine in your mobile app also you're creating something like a regulator. Okay. You're trying to control one equipment through your mobile imagine. Okay, so there you don't want something like a press minus button to conclude. Okay, you want some kind of a small interaction to happen. Like let's say your user is using the physical product for a very long time. You are converting that into a digital interaction. Now your company has asked to do that project and you have to still simulate the same knob button in your button in your digital screen. Okay, now you're designing a button and now people can put their finger interaction and then they can rotate. So it is your responsibility to understand what makes a user rotate this, what makes the user really rotate it. So you have to understand. Okay, for a button I should create some depth. For a button I should add some shade. Hello, Tim. Ah, thank you. Upanish. I just activated it. Thank you so much. Thank you, thank you. Okay, for a button to be seen as a button, I need to give a shade. For a button to be seen as a depth, I need to give some depth. Okay, you can add some border option, you can add some shade option in the figma. There are many options to do it. Okay, in order to see it like a button, I should add some knob. Okay, and now the user will be able to now interact like a button. See, this is how you design digitally. How many of you understood this example properly? Now I'm just taking one basic primitive example, guys. But when you go into the real world of design, every damn thing is interaction. If you're not conceptualizing this, being a designer, you will not get any basics, guys. You will not you, you won't be able to talk to any recruiters or anybody why this particular interaction and button is designed in this particular way and why people will click it and why people will not click it. Why it's a good affordance. Why? Why it's a bad affordance. Think about it. Okay, Universal model where our memory can know without learn. That's great, Ramraj. Perfect. Okay, so now I'll just give you some more quick examples before we jump into the next topic. Okay? Okay, can you, can you take this, guys, like let's say look at this. Enable disable physical affordance like digital. Okay, look at this knob. This is my favorite always. Because it is much easier for people to what you call understand this. Okay, physical knob. But imagine you can able to take a digital also. Are you aware of its importance? See remote interaction button, physical touch. Okay, so think about how user can able to interact mentally, not physically. When you activate their mental activities automatically physical activity will be successful. You may be thinking why our products and applications are not being used by many people. Because you have not understood the mental model of the user. That is why in the design process everybody has to first map the mental model of the user. You need to go and talk with them, interact with them. You have to see many products is very Commonly seen. So you may assume user will only use like this. Imagine you are bringing the product for the first time to the world. You cannot expect your user to interact in the same way how you think, okay? That is why you need to go and understand what is their mental model and then map it. And then you design the product for that mental model. It becomes automatically successful. Okay? So now this comes to the end of affordance. Now let's talk about something called discoverability. How many of you can can understand this? User can find available function enhancing satisfaction. What does mean by discoverability? Come on. If you have understood affordance, you will know what is the significance. You, you know what is discoverability? Come on. The name itself has a meaning, right? What is discoverability? Can you guys try? Can you guys try typing in the chat box? Can you guys try it in the chat box? Discoverability. Okay. Can you try? Can you try? That would be better. Discoverability. Come on. We are, we are having more responsibility as being a designer. Okay? Understanding the interface, discovering the things which is actually for punish. Excellent answer. Punish. Discovering or figuring out something excellent. Jainani. Making out or standing out different from others. Okay? Find out the real purpose of the excellent, guys. See, I told you, right? If you understand affordance, discoverability is much easier. See, you created a beautiful interaction. You being a designer, you solved the problem. Have you made the user discoverable? Is he finding out correctly or not? That is your responsibility to guide the user to go and take it. See, Imagine tap. How many of you have seen this tap lever? Okay? If you use this tap, this way it will be locked, right? If you use the tab straight away, it will automatically make the water flow, right? So it's your responsibility being a designer to design the tap lever. In a way people can go and afford it. Imagine if you put the tap lever in the top of the tank where people cannot go and climb it or they won't be even finding out that it will be difficult, right? That is why the levers are given at the bottom. Levers are not in the air, okay? Because people can go and discover it. Okay? This is a very physical product. We are able to see it. Imagine for digital product where the screens are very complex, where all of the interactions are completely crowded, crowded, crowded. Okay, now you should give the direction for the user. Hey, user, just go and find this here. Find a help option. Like let's say, hey, if you wanted to make the transaction, you can go and find the option for the transaction here. See, Banking application pay option will be there. Save option, invest Option will be there. See, you are making them discover that particular option. See, of course you cannot put all the 20 options in one screen. That's not possible being a designer. So you need to make them understand pay means what? Pay money has to go arrow mode. See how many banking applications, every single day we use this payment banking applications, right? So we used to say pay like. Let's say it will be arrow like this invest. It will be like money symbol, something like. So you make them discoverable. So inside pay I can able to also transact money. I can also pay for the bills. So it's your responsibility to make the people discover what they really want. See, if you're not making them discover ultimately your. Your super affordance, what you designed is failed. How many of you want to be a failure designers? How many of you want to be a failure designers? See guys, go back to your portfolio. Go back to your projects. Think consciously. Have you applied these principles or not? I'm sure you would have not applied it because our consciousness towards this concept is not there now. We have understood these concepts now our consciousness should grow high and we should now think about the mental model of the user. Okay, so today's exercise, guys, I'm telling you, take five good examples of affordance. Five bad examples of affordance. Find five good examples of discoverability. Find five bad examples of discoverability. Take a picture, take a picture. Screenshot, screenshot. And then share it in the group. I wanted you guys to share it in the WhatsApp group really, really fast. Okay, we are coming to the end of the session tomorrow. I'm going to teach you another two topics. But I wanted you guys to first soak in this knowledge because this is not very easy. You'll have to understand it is little difficult to get this particular point. Okay, see, I'll show you an example. Like let's say discoverability example. Okay, look at this. Maybe I'll take one good example. Wait. Okay, how do I, how do I put you? Yes. Like let's say if you're designing some kind of a remote like this. Okay, yeah, remote is affordable. You are able to take the interaction and find it. But can you tell the user where is the volume button? Can you make the user easily discover. Can you make the user really discover where is the channel button? Most are prominently used, right? Out of all the functions, we only make these two interactions most. Jagdish. I will design a remote in a way. I will only put volume button, channel button, rest. I will all put very small, beautiful way of Discovering it, people will never get confused. How many of you observed many remotes? Only the channel button and volume button will be big. Other button will be very very small. Very good example of a discoverability. Because you made the user discover it really really fast. How you are creating that button that is called affordance. Like let's say you go and press the button, you make the button interactive. You like, let's say blind people also can go and press the braille dot will be there in many remote. Have you observed like blind people will be able to do that is called affordance. But have you made it discoverable? So think about this two terminologies guys, okay. See the search bar? They're showing discoverability. So how you're making your user discover that? Or maybe you're creating puzzles around it. Your user is still not able to find out. Have you seen in many remotes? My father and mother. Sometimes they'll be like a. Where is this volume here? I don't know. You do it, they'll give it to me. That's a poor discoverability. The designer has terribly failed. It's not a problem of user guys. See, don't blame the user. It's your responsibility being a designer in your applications or products to really make that particular button discoverable. If you have not did that, it's your responsibility being a designer to do it. That is why you need to take that interaction. Understand the mental model. Okay, if a user needs to press red color, which is which is off button, what should I do? I need to differentiate from the other buttons, right? That is why it is put in red color. How many of you observe this Power button will be in red color. How many of you observe this? And nowadays a lot of remotes you can see in the Netflix prime that the button will be in the form of Netflix like let's say that color. How many of you observed that? That's called discoverability. Wonderful way of putting this example is actually showcasing that people will never search that button. Why? Because it's directly available. Amazon Prime, Netflix, YouTube, even kids guys like let's say 4, 5 age kids can able to identify and do it. That is the most successful product designer's job. If you guys are able to get it, you will be able to design your products. Far more better user users to can find available functions. Enhancing the satisfaction. Apps with a stronger discoverability retain 60% more user interaction. Design foundation says that I would also recommend you guys to go and find it out. Interactive Design foundation guys, this is a very good material. You can able to learn it. Okay, so what it suggest physical products like let's say hand tools. Have you seen door handles? Have you seen chairs? Shapes and heights are just sitting right. You cannot if the chair is very small, imagine like this chair is this much. Will you be able to go and sit it? You can't sit right? Our bum and everything is really big from that chair. So the chair needs to be in that shape. That's called affordance. I'm just taking a very blunt example so that you can able to understand it faster. Okay. Scissors. Many people have taken scissors. Okay, Bottle caps, twisting, grooving, indicate how to open. Imagine if the cap of the bottle is exactly the shape of the bottle and it is not even round or anything. You will be a little confused how to open this here. Whether can I open this way or whether should I open round way. You got confused, right? Because of the shape. So think about it. See the shame perception. The same shape perception will come to the user in the digital world. Also, if you are not taking care of this, you're ultimately confusing the user. If you guys wanted to really go into the depth of design, I'm telling you guys, this is the two principles which is going to shake your entire design thinking process in a whole new different way. And that is why I wanted you to pick five examples. Good example, bad example. Okay, Digital or physical, it's up to you. Bring it to the WhatsApp group. Okay, so now time is 6:41. Okay? You guys have to take time till 7:30 and do it fast, fast, fast. Go to online, collect some examples. It should be a very strong example. Don't give me poor examples. I wanted. Oh, this is what is affordance. Oh, this is what is discoverability. And for physical products, don't take online sources. Go and collect in your home. Go to the tab, go to the stove, go to the interaction, go to the, go to the fridge, go to the TV remote, whatever, leave remote. Because we have, we have taken remote example, right? So think about that example and take a picture in your phone. Send it fast. Okay? Will you guys be able to do it? Will you guys do it? I wanted you guys to do it now. Okay? After that you go and have your coffee because if you do it later, you won't be able to understand this. Okay, so now I'm waiting for you in this call. Okay? I'm not going to cut this call. I'm going to wait. Oh my God. Somebody has. Somebody should have told me to record this. I totally, totally forgot. Okay, fine. No Problem. Welcome to this day 70 what you call 75 guys. Okay, we've talked about affordance and discoverability. That's okay guys. Fine. Anyway, people who wanted to watch in YouTube live, you can watch it. But now time is 6:42. Okay, I'll wait for five minutes. Guys. I wanted you guys to pick first five good examples. Can we meet at 6:47? Okay, I'll be just in mute, but you guys have to really do it fast. Okay, fine. Meanwhile I'll be just for the recording sake, I'll be just talking about the definition. Okay, but you guys have to go and find the example. Okay, fine. Okay. This is for the people who want to watch it later. Excellent guys. So today in this session we have. We. We wanted to talk about affordance and discoverability. Okay, signifier. Will talk about it later. So we talked about why it is important. See, based on the physical and digital products, what we are designing every single day, we are actually creating this and understanding this primitive basics. So this primitive basics was first invented by Don Norman in the cognitive design lab in Behavioral lab at Apple. And the way in which he sensitized and discovered it, people have started consciously using it in design application. So that is one good reason we are now seeing this in this particular skill booster session. Okay, so while going through what is affordance? It helps the user intuitively understand how to interact with the product. Go and pick any product near your place. Like let's say the cap, okay, like let's say the mouse. So you are able to afford it, right? You are able to catch it, you are able to hold it. The sufficient grip is there. The sufficient form product is there, right? If you are not able to do it, that's called a poor affordance. Can you see this example? Door handle is there, you can able to only push. Sorry, pull. Okay. Here no handle is there. You cannot pull, you can only push. So you are designing a deliberate interaction where the people can only do a certain action. See, that's called affordance. You can take 70% of the user preference. User preference interfaces matching mental models. UX Insights 2023 says that. Okay, this is called actually affordance. I gave the activity for the students. They can able to go and find five examples of affordance. Good examples and bad examples. See, this is bad example, right? I mean I'm just telling you the intention of the functionality is clearly defined. But if it's used the other way around, if you're asking the user to push, I mean to pull, it is a poor interaction, right? How come People will pull. There is no affordance to do it right. Think about it. Discoverability second concept. Users can find available functions enhancing satisfaction. Okay, you designed a good interaction, you made it affordance. But have you made it discoverable? Think about it. If your discoverability is poor, if the user is not able to find out where the hell this volume button is there in the remote, you failed. Where the hell is this power button? Not even available. That is why the designers have now designed with the red color. Have you seen. Have you seen with the. With the YouTube symbol Prime button Netflix button. So people can able to easily discover that particular functionality and operate with it. You know what the moment when you do it apps with a strong discoverability in 60 more users. So think about it. Okay, I'm just giving you some examples. Like let's say handheld tools. Textured grips are just twisting or turning door handles. Helps pushing and pulling it already told you. Chest shapes and height. Suggest sitting scissors logo Suggest finger placement for cutting sometimes. Okay, bottle caps twisting. Imagine if the bottle cap is quiet. Just now I explained to our students, right? So think about it. Guys, I just want to explain you again because you will be able to understand something little common. Right? Good digital products. If you take some examples. Okay, play buttons. Imagine triangle pointing right. Suggest starting. Triangle pointing right. Suggest starting right. The play button right hand side. Left suggests reverse. In the. In the. In the Spotify app and other things you can find the right hand side and left hand side. It's a very good what you call sign affordance. YouTube's universal play button. I'm not showing this deliberately to the students because they'll get some clarity. I wanted them to go into an uncomfortable mode so that they can able to get some example. Okay, even if you want to get uncomfortable, you can pause this video. You can try to take a five examples of signifier of discoverability. Good example, bad example. Okay, so totally 20 examples you're taking and then you come back to this video. You'll be able to understand much better. Okay, wait. Anyway, for recording purpose, I'm just going fast. Scroll bar handle. Suggest dragging to the Navigate the content case study Google Docs with scaling scroll bars. Have you seen Google Docs with scaling scroll bars? See, these are like very, very classical way of telling this guys. Buttons raised edges mimic physical interactivity material design buttons. Okay, tap to pay Apple's pay intuitive interface NFC symbol Suggest placement for payment. Right? Like let's say the the wireless payment. What Apple has introduced and many cards and other player are also predominantly using that. Okay, Sliders, very good example. Shading and shapes such as drag interactions, iOS brightness control. Okay, like you can see, you can go to your notification button. Almost all the people have now copied that, but it's all available here. Okay, so this is the example for I would say affordance. Okay, now let us go and understand discoverability, indiscoverability. You can take Swiss army knife. How many of you know like let's say the foldable tools reveal multiple functions. So it is very much discoverable that this functionality is available in this particular scissor. Right. And the the designer who has designed the Swift knives and blades, he has very smartly designed in a way so that people can able to go and discover it. If you design it, very tricky. People will not be able to even understand what's happening. Okay, think about it. Victronics knife with a clear tool. Discoverability. Car dashboard. Knobs and touchscreen provide visible screen. Okay. Kitchen application knobs and dials indicate settings, furniture, storage. IKEA multifunctional furniture. Water dispenser. Smart biometric water dispenser. So enough of examples guys. Now I wanted you guys to go and find it out what is there with respect to your physical product and digital product. Okay, so drop down menus, you can say swipe navigation, hamburger menu tool tips, onboarding, highlights. I can keep on giving you a lot of examples guys, but I wanted you guys to go and try it out. Okay, cool. For both. I'm telling you guys, not for only one. Okay? People are there in the live call for both. I'm telling you Sharath, you are posting in the wrong group. You have to post it in the design for change common group. Okay, that is not the group. Please, please, please. Yesterday also I think you have mistakenly do it. Jagdish, can you add me into that group? Hey, you're already there here. You're already there. Wait. Oh, I mean, have you not joined copy link? Are you? Yo, I misdone that I guess. No, no, no, no, no, no. Sharath, you're already there. Can you just join this group? I've sent you in the WhatsApp. I haven't received anything yet. You're saying. Who is saying this? No, no, this is Jagdish again. Oh, okay. Jagdish. Actually you are there, Jagdish. Wait, let me also. Can you just give me one. Hi. In the WhatsApp. Oh yeah, one second. Okay. Oh, can you just check it out whether you have. Yeah, I've sent you the group link. Can you. Oh, I sent you only the admin link. Yeah, I guess so. Okay. Okay. Okay. Okay. Okay. No problem. Jagdish. So Tuesday hackathon call, you missed it, right? No problem. You can just go and watch the recording. It's available in your portal. And you can also watch the basic silver level courses and you can get on a call with me tomorrow. Okay. In one to one. Sure. Yeah sure. Let me know. Yeah, sure. Because I've missed that. I'm not in the group yet I guess, right? No, no, no. It's not like that. We have also sent you email and other things. You can also always check our emails because for important Saturday and Tuesday calls we always send you email. Yes, yes, yes. Yeah. Group also notification I put. I don't know, somehow it got missed. See while you're watching the first video in the learning management portal, this group link will be available there. Sure, I'll check. Because in the first video itself I've given people to go and join because I've kept it that way because people has to come there and know what exact, exact groups they have to join. And you have to pin that in the top design for change. Common group should be on the top because that is where the interaction and other thing happens. Okay. So don't miss out that part. Okay? Yes. Yes. Cool. Cool. And look at this. Now people are giving examples. The picture. Excellent Sharad. Affordance items. Okay. Show that affordance in. In your finger Sharad. That would be better. Okay. See that's why I wanted to just see guys how you guys are interacting. See you're telling watch right. So you can just show a picture like this Sharath. Like let's say you, you tell like this is how the watch should be worn. Affordance. Ask somebody to take a picture. Or maybe you can take this like let's say affordance. Good affordance. You can say bad affordance also by. By putting some examples on. Okay. Yeah. Correcting in one picture. Good Sharad. But if you, if you're able to do it like, like let's say one interaction and take a photo with that, that would be better. And you put affordance in WhatsApp 1, 2 affordance 3 affordance. Like this, you put 5 in the good affordance, 5 in the bad affordance. That would be better. Okay, can. Can you all try that? Because others will also know why you are sending this picture. Right? It's not like others will be completely understanding it. So let's, let's. Let's put this entire group with lot of pictures. Mark your affordance and mark your Discoverability. And then you can leave for the rest of the day. Guys. Okay. I believe you guys will do it. Okay? Yeah. So I believe you guys will do this activity. Pin that particular pictures in that. In the group itself. Put that in the. And also put like let's say 1, 2, 3, 4, 5. Okay. So that I'll be able to understand this. And if you are somewhere stuck, you're not able to find the examples, you can reach out to me. I'll. I'll help you. You can take online sources also. But tomorrow is something connecting the dots. I'll teach what is signifier. I'll teach what is constraint. You guys will be able to completely understand the whole dots. You will be still scratching your head. What is this interaction? Why certain people are having this poor interaction. All these things. This will be one shot clarified for you guys. Don't worry about that part. I'll take care. Okay. But first you will have to do the examples. Five examples. Five examples. Send it in the group. Then you go for the day. 7:30. Okay. Don't. Don't think I will do it. Afternoon. This. That. Try to do it fast and then leave. Fine. Guys, can I get a commitment? Ramraj Giridar, Karthik Jagdish. Sharath Sri Balaji. Anju Jain, Nandini Vishwesh Akshita. Can I? Can I? Yes. Guys, all the best. Have a great day. Tomorrow is going to be ultimate day, guys. Okay. We are going to learn lot more things. And tomorrow there is one project coming for you guys. Okay. I'll tell you what you can do in the project. And today night I'll let you know what we have to do for that. Okay? Just wait for the notification in the group. And some of our people who have not yet joined the group. Please ask them to join the group first. So that they'll be able to what you call get into our touch. Okay?