Day 59- The Principle of Common Fate- 100 Days 100 Skill Booster Sessions

Foreign? Yes. Welcome guys. Welcome to this day 59 of the skill booster session. In fact, we have left one topic in the last week. What we saw about the aesthetics which was law of common fate. Okay? So with that we are concluding this aesthetic topic. The reason, the very reason being why we are teaching this aesthetic is many times we are struggling with how to place the elements, how to play with the elements, and how to create a meaning and a rhythm out of it. And many designers are out there having the problem towards it. Okay? So that's the very reason we are doing it. Just one second, Just a second. I'll be also pasting in our common groups. Just a second, just one minute. Okay. Okay. Welcome guys. Yes. So first of all, the reason why we are teaching you this is. Is particularly to help you get aesthetics like let's say how to. How to understand and make the other people also understand with respect to what you're trying to say. Okay? So this is the inherent part of a designer which we to learn the skill. It is not optional, right? So that is why we are bringing the seven different laws into one one day separately. You need to. You need to understand why we are doing this. Okay? I could have taken one day also to help you learn this aesthetics law in just one go. I will just show you some examples and that's it. But each and every law, when it's been consciously given, you will be able to understand what it is. Your awareness will grow towards implementing it practically. Or else you will just like that, leave it. That is the whole objective, why we are taking it very, very single day. Okay? So please switch on your camera. Guys. Let's go live. Let's. Let's start it. Let's start it. Just a second. I'll be sharing my screen as well so that you guys can understand faster. Okay? Yes. So today we are in the day 59. Yesterday we saw about the industry gap and LinkedIn metrics. And day 57, we actually repeat this proximity, but we actually saw the symmetry on that day. Okay, so let's see. What is this principle of common fate? Okay, See the name itself suggest it's actually a common fate, right? What does mean by common fate? Come on, tell me. Type out in the chat, what does mean by common fate? According to you, type out what is common first. Before. Before typing Fate. Fate we all know. Okay. Common. Common is like pretty similar for many instances, right? Fate is like. Let's say. Let us understand when we see this law, you will get to know why these two words are combined into each Other and please type out in the chat whatever I am asking because this topic is again very easy to explain, difficult to grasp and implement it on real time. Okay, so what is this concept? So common fit explains that elements moving in the same direction are perceived as related. See, here we talk about direction. See, there is a huge difference between law of continuity, the flow and common fate. Okay? So we tend to create a different meaning out of it. And then we drive the user in this engagement. This is very important. Okay, Second, this is the main component for guiding the user's attention. In fact, this is only used for this. I don't know whether you guys have played many games which shows like the crows and these birds will be flying in one direction. Have you seen that? It will all fly in one direction. If you want to change it, it will automatically change into another direction. So what happens is subconsciously our brain will try to move towards this place which is actually redirecting to one place. Like let's say if it's an arrow or let's say if it's a. It's a bird pointing towards one direction. Okay, so your. Your. What happens is when you. When we were able to give something which is not moving, we will look at it, we will not do anything. But if that point is moving towards a particular direction, what happens? Our eyes started automatically moving there. You can't resist it. It happens naturally. Okay, and also when you make it even more specific, like let's say when you draw arrow or when you draw a particular point in a direction where there are another two dots like this and another two dots in like this and all of the things are moving together, nobody can resist. You will only see that this is a phenomena. Okay, this is actually called law of common fate. Okay, Jagdish, what is the application of it? I explained it. This is the whole concept, simple. I explained you in two minutes. But it will take a lot of time for you to understand practically how we can able to implement it. Okay, so let me tell you how we can implement this part. Because with this, how can you make the user engaged? How can you make the user not get confused at certain times? Let's say if you're building an interface, let's say if you're building some kind of an experience for any users for a particular functionality where he may get little lost, there are too much of options. There are too much of call to actions. There are too much of options which is making them to get confused at that time. You can use this common fate to redirect into a particular direction. Direction. Please remember this word. Direction. Okay. Common. Fate is all about direction. Common. Common. You can remember this word. Common and fate. Okay, so with that context, we'll jump into the next topic. Just a second. Are you guys in line with me? Just type out in the chat if you are in line with what I'm saying. Type out of the chat one. Come on guys, switch on your camera. Type out in the chat one and just let me know if you guys are getting it. The point here is you will have to get it before we go into the next topic or else you won't be able to connect the dots. Yeah, I'll show you case study examples. Don't worry about that part. I'll. I just wanted to confirm with you. That's great. That's great. Excellent. Excellent, guys. Okay, fine. So this is mainly used for user attention. I said it's used for creating motion based storytelling and enhancing interactivity. How many of you know this motion based storytelling? We have something called stop motion animation. Have you guys seen it? They'll take many snaps and then they'll start to run this screens. It will look like an animation, right? How basically how animation films are done. It's all created in a separate frames in storyboard and it's all connected together. So you can create a sense of direction using this particular law of common fit. And also it enhances your interactivity. Being a product designer, you need to be very aware of this. So why this matters a lot? I already told you. You can literally create a focus for your user using this particular principle. It directs the user attention and it's grouped the movements together. It improves your interactivity and storytelling clarity. Mainly this improves the navigation, nothing else. The relationship between the moving elements is actually what we call as clarity. Okay, so what are all the techniques and tools to implement it? First of all, there are many motions in user interaction elements. Okay. Like let's say when you take animations to group related elements. Like let's say if you're drawing some kind of patterns like an arrow when you group those elements and when you try to move that into a particular direction, you tend to make the people perceive as if it is in this particular direction directly. So user need not have to get confused. You don't have to even consciously tell the user this is the thing he will automatically understand. See, your job is done. So that is why you have to use these elements carefully at the point of application. Okay, Example, if I give you like let's say sliding corrosions in E Commerce like have you seen in E commerce many automatic. This, what you call this shopping cart will move aside. Like let's say if I take. I'll give you a small example first of all, to make you understand what is this law of common fate. Okay, you guys may be a little bit. Okay, so can you see this one? Can you see this picture? This picture is not called law of common fate. Okay? This is in a different, different direction. We can't really perceive a. A character out of it. Little confusing compared to it. But can you see something here? Can you see something here? Actually this is called law of common fate. You need to understand this, okay? Because the flights are all running in the same direction. Okay, the point here is. Just a second, wait, hold on, hold on. Yeah. Okay, so this is one good example. I would say the reason being many times in the confusion, in the confusion of many interactions and interface and everything, we may actually lose this, what you call flow for the user. In those cases you can able to apply this. Okay, let me copy this source. It's not correct to leave the source. Just a second, guys. Okay. Yes. So this is a simple example of it. So what are the wrong example of it? I'll show you again. See, this is the wrong example. It's not having a proper direction. Okay, this is a proper direction. You can see this is a proper direction. Only this, this particular bird is not having a. This also has a little bit sense. But if you take this line, this one bird is off. But these three birds are continuously flying together. So the direction is automatically established by grouping certain elements in the particular direction. Okay, Remember, direction don't get confused with law of. What you call law of continuity. Okay, look at this. How about this? Look at this. Okay, so it is very vital to understand everything is in one direction. Like let's say you can take this example as everything is one particular direction, but the other one was in a different one. It makes our eyes really drifted towards this particular instant. It's a pretty common thing which is there among the aesthetics law. Okay, and how we can able to practically use it. Like let's say we'll see carousel animations, okay? Like let's say if you take. Let's put sliding carousel animation, okay, so you must have seen many applications or websites and other things, right? Like let's say if you take this one picture. So the moment when you open this direction, open this particular album or a playlist in Spotify or maybe in anywhere, have you seen automatically the next arrow moves. Like let's say in three seconds or five seconds? How many of you have felt that? How many of you feel that? This is a way to give the user a direction, a sense of direction, automatically the user will know. Acha, this is exactly called. This is how the navigation should happen. You don't have to consciously tell anything. People automatically understand this point. Just a second and I'll give you another more example. Just a second. Yes, a very simple example. Here there is no picture, but can you see some direction happening here? It directly tells the user, hey, go and click here to slide it. See? So why is this mainly used now? You should understand we have to give a sense of purpose and a direction for our user. Or our user will be completely confused what to do. Or maybe he will be clicking here, he'll be trying to scroll down, he'll be trying to flip this side, that side. But the moment when you give direction, people tend to go in that one. So this is the actual behavioral aspect of why humans behave and interact in a certain way. It is very simple. Okay, but when you take practically in the user interface application, there are a lot more things also which you can do apart from just giving sense of direction. You can also group certain elements. You can also make them in a micro interaction way. You can give a very small animation, a very subtle animation. You can, which particularly communicates in one direction. I'll. I'll. I'll show you maybe a small interaction animation. You can able to get some basic out of it. Just a second, guys. Why it's not happening like this way? Just give me a second. Okay? Just a second. I'm just opening the FIGMA screen. Like basically you can able to understand. Just a second. I'll share the screen again. Okay? Yeah, let's say this is actually in the FIGMA basic frame I'm building, guys. Okay, when you, when you press F, you can able to draw one frame here. Okay? Whatever size you want, you can draw you want. You can able to take one standard mobile size, whatever you want, okay? So when you press R, you will get rectangle, okay? So if you hold shift, it will automatically scale like a square. Okay? If you don't, if you don't hold the shift, you can able to resize it to whatever custom size you want. Okay? Very simple. So now what I'm doing is I'm trying to create one box here, okay? So I'm trying to put one color. Let's say I will put one small color here. Okay, let's create this color. So here the moment. If you put T, you Will automatically get text here. Okay, like let's say move to next. Let's say you're creating this kind of an animation. Okay, you can also go to the file. You can also bring this into before. Like let's say. Yeah, you can move this layer same like in Photoshop in the left hand side. If you can see there are many layers available. Okay, you can move it manually. Whatever you want, you can lock it. You can view and view whatever you want. You can able to do it. Okay. Yes. So you can change this text because this is looking not complement with the background. Okay, maybe this is good. I can make it a little bold. It's okay, fine. So here some kind of a option is there? Okay, so what happens like let's say when you want you can able to even make the radius little curve. Okay, fine. So now going to introduce one element here. Okay, let's take one, let's take one element. Let's see from the asset if something was there. Okay, let's go to this Material 3 design system. Okay, let's take one arrow or something which is little interesting. Take this check boxes. You can just drag and drop. It's all common elements which is available already. Okay, maybe I don't know if I can able to change the color of this. Yeah, it's possible. Okay. Okay, fine. So now this particular box is like let's say move to next. We are just giving a tick mark for this. Okay. If we wanted to create a sense of direction to it. Like let's say if your entire UI is filled with this element. If you put Control D automatically you can able to duplicate this. Okay, if you can able to put Control D. If you're using Adobe xt, you can press Windows R. Okay, what happens is Windows G you can able to group these elements into X axis and Y axis in a easier way. Okay. It will automatically scale in the same direction and you can even space it out. I think in Figma it is little different option. I am not sure what is that. Okay, so like let's say if you have multiple option like this. Okay, so now like let's say your particular UI has this much of feature for people to interact. So what happens when the people has to go back. Okay, the people has to go back to a particular option. Like let's say this option is the correct one. Okay. This particular like let's say out of this fifth, sixth option is the correct one. Okay, first interaction what you can give is you can give a little different colors. Okay, this is the first way to tell that this is a different one. The rest of the groups are very different. Subconsciously people will feel it. But the moment when you actually create a direction like this. Okay, maybe I'll first try to. I'll try to first duplicate this entire frame, guys. Okay, you can press alt also. If you press alt. And yeah, in. In Mac it is like option. Okay. If it's in Windows, it's an alt option. Like let's say you can able to duplicate this frame. Okay, so here what I'm trying to do is if this one option, the user wants to perceive differently. That is your intended communication, being a designer. Okay, so what you can able to do is you can just create one small color for this. A different color. Okay. And you can create a little. A very subtle color. Not a big difference. Okay, and what happens in. In Figma, you can able to create one simple animation. You can go to this prototype. Okay, you can just click this arrow and you can redirect it. The moment when you redirect it automatically, you will be getting some action. How to what to do with this? Okay, I wanted to navigate or open or set variable multiple things you can do. But just. I'm clicking on click and I'll just create what you call. Just a second, guys. Okay, I'll create the smart animation. Let it be there on click finally. Okay, so I'll create ease in and ease out. That means it eases in and eases out. Okay, I'll keep some more time because it is little fun to watch. Okay, and what happens when you're animating? You'll have to loop back the thing also properly to you back. Okay, so I can able to go to frame again. I can click here, see each and every screen. There'll be an option here to link it with another screen. This is how you create frames I and you connect with the wire. This is called wire frames. So basically when you connect the frames so it creates a sense of story for it. That is how you show your prototype little bit to the user. Whatever you trying to say. Okay, so now I have created a small animation. Look at here. A very, very small basic animation. If you click here and then if you go and press this play button, you can able to watch this. Like let's say this is all common option. Look at this. Can you see a small subtle change here? So what happens when people are grouping lot of elements and they're able to see it? So they'll see this particular option is going this direction. So the user wants to go back. He can able to swipe or press on anything. You add another element, it becomes even more interesting. But this itself will make the user feel. This is very different from this one. Either you give that by a deliberate shape or an arrow, or a symbol, or a dot, or an interaction, or a micro interaction or an animation. That is totally up to you. But the point here is you will have to create that common fate difference with this respect to the user with that particular screen. If you are not able to give that what happens, People will be little confused what to press here. Yeah, like, let's say maybe I can able to give one more option also look at this. I'm just giving you one other option. Okay. Just duplicating this one. Okay, like let's say instead of this, I'll go to design mode. Imagine. Imagine I'm having this screen. But I am trying to create a prototype which is another screen like this. But here I'm not changing anything. I'm saying go back. Okay, same again. I'm going to prototype, just creating this arrow mark here. It automatically goes back. And when you click this frame, you can also automatically go back to this one. Okay, I think this arrow is rooted wrongly. You can just manually do a dragging and dropping as it is like very simple. If you click it automatically, it will be available for you. Okay, so I just created a loopback animation here. Okay, fine. So now when I go to the prototype, like let's say this play button, you're able to see the screen. Okay, There is some name change happened. Can you see here? Go back, go back, go back. But is this really communicating what we wanted to do for the user? Maybe these names are little bit confusing. I will change this name bit. I don't know how come it is moving like this. You can try and deleting this all animation and you can do this. Okay, ease and I'll create. Let's see how this happens. Okay, look at this. Actually nothing happened. To be very honest, I did not loop back the animation. That is why it did not come. What we have to do is we have to click this interaction. I have to loop back the animation. Then only it makes sense. Okay, and when you now play, it automatically comes back. Yes, but here there is nothing happening. Because it is only a place of change of text. It is happening, but only the name will not communicate the user what he has to do. There needs to be a sense of direction. Where in the earlier, earlier animation what we saw was little different. Look, in this animation what we saw there was a very clear Sense of direction which this button was moving like let's say left or right. So this is how you create a common fate for your user by creating the sense of direction. Are you guys getting this? A very small example. I told you. But you can able to try more. You can able to try with more complex interactions or even micro interactions or even you can, you can create while you are creating a big documentary like let's say your case study or portfolio or anything. You can also deliberately build this kind of a cues. What this visual cues will do is will guide your user flow into a different direction. Okay. So that is the whole objective of doing this one. Okay guys, are you clear? Type out of the chat if you are in line with what you are. What I'm what We are going ahead. Come on guys. Go ahead, go ahead, go ahead fast. Type out of the chat one. If you are not able to explain mean. If you're not able to understand, please type out unclear. Maybe I can able to explain you again. Okay, you can go and mark your attendance as well. Guys, you guys are going to get points for the people. Whoever has joined. Welcome Surendra. Welcome Anju. Welcome Jain and Denny. Okay, type on the chat. Guys, whatever. Whatever doubts you have, we can go for the next section with that. Okay. Or else I'll go for the next bit of it. Welcome. Are you guys understanding? Please type out. Only one person is typing out. What about others? Okay, two person. Okay. What about others? Yes, that's great. That's great. Okay, let's continue this discussion. Okay, fine. So you can do multiple things, guys. You can create lot of complex things and you can also create this kind of a visual animations. You can. You can use that animation options to do whatever you want. You can have this bouncy effect. You can have this carousel effect. Whatever is your interaction based on that case, you choose the element wisely. Okay? Interactive storytelling. So first I told motion. Second storytelling. Align your movement with a narrative flow. Example. Like let's say interactive timelines in portfolio. How many of you are using this consciously? This is a beautiful way of creating an interactive timelines in your portfolio. Like let's say you can create a scroll bar. You can create a very good navigation system so that people can know, okay, like this is the actual thing. Like let's say phase one of my project. The moment. If you scroll down, it will go to phase two, it will go to phase three. Like see you can able to draw that kind of an attention just by creating a sense of direction in your portfolio. Very simple. Okay, you can do that. And also third, navigating enhancement. Animate the breadcrumbs or dropdowns to guide users. See what does mean by breadcrumbs. How many of you don't know what is mean by breadcrumbs? Just a second, I'll explain you what is mean with breadcrumbs? Okay. It's. It's pretty easy. Okay. When you're creating information architecture and all, it will be super useful Breadcrumbs. Okay. How many of you know actual breadcrumbs in the bread? So you remember that, right? Okay. Similarly like that, like let's say when you take this particular interaction, when you take global home, create clients, assign team, add people, edit role. So what happens? This much of options is there now the user can go and click anything if he wants to go back from one screen to another. Let's say if he wants to go back to add assigned team, he can just directly move his mouse and click it here. Or typically he has to move from back again, one more, back again, one more. He gets really confused. Right. So the time when you give this breadcrumbs the freedom for the user is very very high. So he can able to go and navigate at any point of time. And it also gives you a proper story how this particular UI has been arranged so people will get super super clarity while they are operating a complex UI system. Okay, so you need to understand this breadcrumbs, particularly when you're giving this breadcrumbs. Can you look at this arrow? This arrow is actually called law of common fate. If you, if you reverse this arrow, it will communicate a different meaning. You need to be very consciously aware of these things. Okay, so now let's get back to this example. Drop downs expanding together to indicate their group. Very simple. So now let's understand what are the neuroscience behind it. See why we are ultimately doing this is to make the people retain their memory motion based elements improve recall by up to 30 percentage wise. Cognitive behavioral journal says that engagement boot animated interfaces see a 65 percentage higher user interface rate. It is a report by UX Design Reports. See, that is why these animations are commonly used. But there are a lot of challenges when they are using animation. See, when we are working in medical product design, we are not allowed to use a lot of animation. In fact we are not allowed to use animation at all. The reason being it will not load in the very simple screens what the doctor has. This is not a fancy infotainment and entertainment system what we are designing. If you keep on giving lot of animations, the system will crash over the time. The main objective and the functionality of the device will not be served at that purpose. Rather your phone. How it gets hanged Typically, imagine if a ventilator gets hanged, it's a fatal situation, right? It will lead to even death. That is why you need to choose animations carefully. How it can able to run on your customers screens. Accordingly, you will have to match the requirement or else it will become unnecessary force fitting. Okay, what are the neurological insight? Movement activates the brain, visual cortex and attention network. I already told you intuitively. When you give the sense of direction automatically the movement activates the brain's visual cortex. When you are able to touch the visual cortex, you will be able to retain the memory much faster. How people can able to see the sense of direction by common fate. And they will never forget your interaction. They'll be more than happy to go and move forward. This is the whole objective of this class, guys. I hope it is very clear for you. Type out in the chat if you're clear. So this is what is the way to attend and to take the user into their attention. A journal by behavioral neuroscience said that. And you can take a lot of example case. I can keep on giving you like let's say the Instagram stories. The Uber app. You can say in Instagram stories when you take this elements moving in synchronous to create narrative stories. Can you see it automatically happens in your Instagram. These are like typical apps we are using. Okay, I'll talk about Uber apps. Animated path guides through the user during the rides. Okay, like let's say traffic lights. Coordinated movements of light changes enhances clarity. Escalators suggest sense of direction. Have you seen an escalator? Right side arrow up and down, green and red. So that's the sense of direction. If you take Adidas logo, the stripes imply that speed and progression. See, Adidas is commonly used for many laws of gestalt guys. Because these people have built it that way. That is why these logos are like massive. Very primitive. Very, very basic. Yeah, FedEx logo. I think in the day one I told you how this hidden arrow communicates a sense of common fate direction automatically interactive infographics arrows guides through complex data. Like let's say in graphic design. I already explained you with a case study video editing apps Motion path aligns text and visual for seamless storytelling. So many examples I can keep on giving you guys. But I wanted you guys to do one thing. Because if you're not doing this, you won't be able to learn it, don't hear it like a theory and go it's not going to be any use for you. Make a note of this guys make a note of it. Surender, Anju, Padmavati, Jayrendini just make a note of this okay? Create a mock animation of a drop down menu where related elements are moved together like let's say you can create a small mockup of animation for a drop down menu or you can create checkboxes or you can create any interaction See it doesn't matter which interaction you create but I needed you to apply this common fit and differentiate that option from the others where the users are simply understanding that's what I want okay, create a mock animation of a drop down or maybe I'll tell like this okay? Drop down Checkboxes, perusal stories, etc. Where related elements move together just like what I showed you in the figma. Ok so your main goal is to implement this principle of common fit through some coordinated motion it's not to create more complex ui that is not the objective here. Your objective is to create a very simple effect. Okay so now I am going to give you two or three minutes time Guys can you first go to the online and mark down what is the law of common fit which you find is relevant and apt for this context what we are discussing? Come on, go ahead I will give you two minutes time go to online, go to login, go to Google Chrome or whatever you want just go to online and find out and share me the snapshot in the chat box, in the zoom so that we can able to understand okay? This person has understood rightly or not. Come on, go ahead, go ahead, go ahead, go ahead fast. Go ahead fast. Guys please switch on your camera, come forward and also tell me that you are having any kind of a doubts will be able to explain you again not an issue okay, let's go to it come on any doubts is there? Do ask me, I'll help you not a problem it come on go ahead share me your screenshots then I can able to get what your examples are whether it's right or wrong and people who missed yesterday's hackathon Guys the recording is up please go and do watch it okay? Don't miss the fast, fast, fast. Come on guys show me, show me two minutes we are going to end this call at 6:38, okay? It okay yes Surendra Were you able to get it type out yes or no? Very able to find one example, small example, no need to confuse or complex Very much not a problem in both case. Okay. Yeah. People have shared. Mark me the example, Jain. And I'm not able to understand what and where you are saying. Law of common fit. No, this is not law of common fit. How it is common fate? Tell me the direction. I mean tell where are you marking? See, that's why I told you, right? People make mistakes. Where is the law of common fate here? Like can you just mark and show me? Or maybe you can open your mic and explain. No problem. Sriendhar, what about you, Anju? What about you, Jainandri? What about you, Padmavadi? Just show me the direction. See, at least I have to understand like where is this law of common fate you guys are marking? I can see that you sent me on screen. No, Padmavadi has marked and sent it just once again. That's great. Yeah, perfect. But the thing is there is no sense of direction here. Okay. See, I would not say this is a strong example, Padmavati. You have to find a strong example. I'll tell you how the strong example can be. Fine. This is actually called RAW of proximity. Okay, that's fine, no problem. But you can find out an arrow or a sense of direction which makes the user move in a particular direction. Like let's say out of this one box, whatever you highlighted. Okay, I'll just share the screen, guys. Wait, what Patnavi shared. That would be helpful for others as well. Okay. Yeah. So the moment when you are taking this one, okay. It's actually called law of proximity because it's all grouped together. Okay. But when you move this one element, like let's say this one particular element into a different size, automatically user's eyes will perceive that direction. That is called law of common faith. Okay, good that you have made a mistake. Because when you make mistake, only you will learn. Okay? Or else you will not. You will not learn. Okay, there is one more screenshot coming. Hold on. Who's that? No, that is not called law of common fate here. No. Jayanandani, you'll have to understand. You'll have to understand. Your understanding is still not correct. Try to. Try to be patient. Understand what I'm trying to say. See, when everything is moving in different direction, if only one bird moves in opposite direction, automatically our brain will perceive. This is the concept. There is nothing rocket science to understand here. Okay? But what I'm asking you to do is in the interactions in the screens or physical products or anything, try to find out one similarity like that where everything is pointed out in a different direction but one is Only in the opposite direction. Same like how I showed you. Same like how I showed you an example. Look, how do I project for you? Yeah. Listen to me very carefully, Jayanandani, okay? Because if you are missing the attention and focus, you will miss the direction. Okay, look at this. Everything is moving in one direction. No confusion here. Okay? Like let's say here this is all in a different different direction. But when you take the right hand side, it's all moving in a particular direction. Okay? When you are playing like this and automatically when you give another direction in the opposite one, automatically our eyes will tend towards that same. How in interactions, many people give a sense of arrow marker direction. So now look at the UIs. Now look at the interactions. What you're trying to play. See, I'm explaining you the concept so that you guys can able to get the benefit. You can see here everything is in one direction. But only one arrow mark is the opposite. Are you guys understanding? This is called law of it. You can see same example I just showed you. Now just. Just observe it and then patiently go and look at the interfaces. Automatically you will be getting the direction. Okay? See, even when you take this Gestalt principles, you can take all this is in one direction. Law of common fit. Very, very simple. Okay, got it. And with this you have to make sure how you are practically implementing with the user to create a meaning out of it. That is the whole point. Good guys. Excellent. Padmavadi. That's great. Perfect. But the thing is here there are not lot of moving elements here. See. But now the example is right. But the functionality is still not met. See why we are using this law of common fate? If lot of confusing arrow marks are there, you will have to guide your user with the opposite error mark. Here there is only one arrow mark. No, already user has a direction. Why would we confuse him? Again, all the birds are flying in one direction. Only one is in opposite. So that means we are making the user deliberately. See that one? Same like that in your interface. Lot of different elements are there. We are trying to make that. Why? Because we need to make the user guide in a proper direction before he gets confused. As simple as that. Maybe I can able to give you some more example. Maybe I can open open Pinterest. Okay. Is that okay? Fine. We got little time. Only before we conclude this. Okay. Anyway, I'll just share my screen. Hold on, guys. Okay, UI screens. Okay, let's go for. Let's go for an example. Like let's say if you can go and find out something Here. Okay, ah, this is fine, Not a big deal. How you can take this one? So here can you see something happening? Like let's say this is one box like let's say one picture what we are trying to say. But the next ones are hide behind. Okay, here there is no direction given but if I am able to play this as a gif or maybe in your mobile app automatically this one will little bit shake or maybe it will come and move like this. This is called a smart animation, right? I just showed you with the figma small direction sense you can make like the ease in, ease out effect. So that will make the user subconsciously perceive something is there next to it. I had to go and interact right now. This is a static picture but I'm not able to do it. Okay, ah, this is one example. Maybe, maybe you can take like very ah, there is one animation happening. Look at this. Excellent, excellent example. Watch again. Okay, can see here the arrow mark is moving but the thing is automatically it moves because the arrow is guiding the user to tell that hey, the next comes here. See sense of direction, law of common fate. Look at this arrow. Very simple example. Okay, ah, look at this one. This is another good example out of this. Okay, maybe here the arrow mark is not there. I would not say this is a strong example, but I would give you the sense of direction. The arrow or the sense of direction or maybe it has been achieved through a color or a shape or an animation or an interaction should be deliberately there. That is how we can able to make the user tell clearly. This is what you have to do. Okay, maybe this is also a good example. Guys, can you see here? Can you see some circle rotating like a spin wheel? Okay, so the direction is already there, right? In fact, if you have a lot of circles like here and there, but only one circle moves in a particular direction, then you tend to make a clarity for the user. Then the user will not get confused. Okay, so why we are using law of common fate is to make the user navigate in a very complex situations. Okay, you can see this example. Perfect example. You can see there is an option popping down from here. So automatically our eyes will move in this direction. See, you are ultimately giving a purpose for the user, right? I can see this one. Look at this automatically can you see one drop down here? Wait, this is one interaction. Can you see one round going from here to here? Can you see the dots? Same like that I told you for a portfolio Also you can able to create stage one of your project. Stage two, stage three While people are scrolling down. So they get a very clear sense of direction. This is a three stage project. See, you can apply anywhere. Practically speaking, you can literally apply anywhere. But just first know the concept clearly before we jump onto it. Okay, one more example has come. Where is the common fate here with mavadi pair letters and sound level up. I mean I did not see your markings in this. Level up and jump here. Okay. Maybe if this dots are moving in the smart animation or maybe even the small gif it moves. Maybe my understanding can be there. That's okay. No problem. Fine. I got you like you are. You are understanding the concepts. Perfect. Let others also try this and do it. Okay. So please guys, you try it out and try to create one small animation or any interaction. And just show me this comment fit and share it between WhatsApp. I'll be able to give you feedback. Okay? Yes guys, thank you so much. And with that we are coming to the end of the session. Guys. Take care. Bye. Bye. Have a great day. Okay. Any doubts? Is there Surinder Anju Patna Djanandani?