Ep 302| Meaningfull Interactions - Law of Common Fate How its helps

Motion based elements improve your recall of their and your users by up to 30 percentage animated interfaces sees up to 65 percentage user interaction rate. Guys, this is a report by UX Design. So what does this mean? People do recollect when it's given in a small kind of an animation or a motion based pictures or moving gifs or arrow marks or anything. So, so what is this topic, Jaktish? Actually we are talking about higher engagement user rate. It can be achieved through various means. But today we are going to discuss something called Law of common fate. This is one of the primitive law of gestalt and this is predominantly used for aesthetic purpose. But we are going to see a very, very important functionality element of it. Because when you're activating the movement inside your brain for the people who are viewing this, you activate their visual cortex and you get their attention. Using this one simple tactic you can able to create lot of insane engagement for your user by the interaction what you're creating. Okay, so in this podcast I'm going to tell you what is that why it is important and what happens neurologically inside your brain for the user while they're perceiving this user interaction element and how you can able to create lot of meaningful interaction by this practically applying it. We are going to see some case studies as well. So take a lot of notes. Let's jump in. Welcome guys. Welcome, welcome, welcome. Thank you for staying tuning here in Design for Change. We have become wrapped up celebrity in Spotify guys at the end of the year. Thank you so much for this overwhelming support and we have reached 45 countries across the globe and we've been rated 4.9 in Apple and Spotify. Thank you so much guys and we are seriously happy for this support and please do spread this word to others whoever wants to learn design and whoever wants to get a lot of perspective and get their pain points cleared out of their design journey. Because this is actually free of cost and before it goes into a subscription you can just avail this benefit.

Okay?

So thank you so much guys. With that point we will be going into this topic today we are going to discuss something called Law of Common Fit.

Okay.

And the practical advantage why it is a very, very important element for the user. Okay, See Common fit explains elements which is moving in the same direction are perceived as related. It's a very simple example. Like let's say if 10 birds are moving in one direction and if one bird moves in opposite direction, what is this? Automatically our eyes will go towards the birds which is going in that Direction, right? So you create a color difference or you create a motion difference, or you create a shape difference, or you create an animation difference. Whatever you want able to create. But ultimately our eyes will move towards a particular direction which is perceived as related. See, this is mainly used for creating more attention to the user. Particularly when you're telling storyboards or creating motion or making a more interactive enhancement. This functionality is pretty much useful. Okay, so why this matters a lot, Jagdish? First, it improves the user's focus when it's moved or grouped together. Second, it creates insane engagement. I told you right already. Motion based elements improve recall by up to 30 percentage and it makes the user engage for a lot of time. It creates a very good storytelling and interactivity. Third, clarity. This is the most important element, guys. See, it majorly simplifies the user flow and navigation and it suggests a relationship between different, different elements. This is the most most important thing. Okay, so I'll tell you three mechanics and techniques for it. You can achieve using motions in user interface element. See, if you wanted to see a full YouTube live breakdown, guys, you can go to my YouTube channel live where I open the screen and I've shared how we can create a small animation to create these. Okay, so you can use this animation to group many elements. You can take this carousel example, guys. In E commerce website automatically the side arrow moves right to show you that there is a next T shirt available. There is a next product available. Even if you go to any education any websites like let's say E commerce websites and mobile app automatically it shows that we do have other more products next to it. When you go to the song album playlist automatically it goes to the next Addamark, right? There will be some small micro interaction or the animation which will happen on the right side. You will know that okay, this needs to move right or maybe left. So you can either make the user move in any direction.

Okay.

The second mechanics is interactive storytelling. See, you align your entire narrative flow. Particularly when you're creating a portfolio or a big project or something like a timeline. You can create something like stage one, two, three, the moment when people are scrolling it. You can able to create stage one, it's completed. You can create like a status bar on the top. You can use many breadcrumbs. Also what happens, people get to know what is really happening on the top from stage one to stage two and stage three and stage four and everything. Because instead of communicating as a one big element, if you break it down like this, people try to associate A small interaction and a story to it.

Okay.

The third important element is navigational enhancement. Okay, so this is actually when you animate a breadcrumb or a dropdown to make the user guide. Particularly when you're using this drop down expanding together to indicate a particular group. Or if you want to ungroup it, you can deliberately use this. Breadcrumbs, guys. Because breadcrumbs means when you're having 10 different type of interaction. Like let's say if you want to go into settings, inside the settings, you wanted to go into menu. Inside the menu, you wanted to go into sound. If you wanted to go into volume, if you want to go into increase. So there are totally 5, 6 interaction. I told you. Now imagine if I am just giving you it in one shot. You will not understand. But if I create an arrow mark to show. Okay, after menu, after settings, menu is there. After menu, sound is there. After sound, volume is there. After volume up is there. See? Automatically you will get this flow. And when you create an arrow mark automatically, people understand. This is a forward moving, it's not reverse moving. Right. If you reverse the direction, what happens? People will understand. Okay. Okay. First I have to click sound, then I have to go to menu, which is not correct.

Right.

Ideally, when we go for a setting option, this is how it is. So this is called breadcrumbs. When you type out in Google, you will understand, guys. But when you want this visual to be seen, I would highly recommend to go to my YouTube live and watch it out. Okay, so I'll explain these three mechanism and techniques. Motion ui, interactive storytelling, enhancing your navigation. This is the three things. Fine. Okay, so what happens neurologically? Jagdish, I told you. It activates directly people's visual cortex. And people retain up to 30 percentage. Guys, a cognitive behavioral journal has said that.

Okay.

And movement activates a different kind of attention to the people. And this will make the user really remember for a lot of time. I'll give you small case studies, guys, you can take Instagram stories. The elements which is there, which will be synchronized to create that same continuity and narrative. You can take the Uber app. Animated pathways will make the user will guide towards a particular ride. Traffic lights, all the coordinated movements. Have you seen the light changes into a different direction to enhance clarity? Escalators. Have you seen the escalators? The arrow mark moving down and up. So these are all the physical products which will able to give you some clarity. Guys, when you take logo design, Adidas logo, FedEx logo. Even in the FedEx, the arrow mark is hidden between E and X. If you see that direction, it makes you feel that this is moving in the forward direction. That means the logistic moves in a forward direction. That's the logo. When the meaning which the FedEx wants to imply, Adidas wants to imply that the stripe moves in the speed and progression, it's in the upward direction. So certain logos are being built with a super clarity because people has to intuitively, subconsciously feel it and perceive it.

Okay?

And if you want to use in graphic design, you can use arrow marks, you can use complex information to showcase a particular arrow mark and a diagram. You can use pathways you can use particularly if you're using in video editing apps, Motion path aligns this text and visual for a seamless storytelling. Okay, so this is a very, very simple log, guys, but let me give you a practical activity to do it. If you're not able to do it practically and make mistakes, you won't be able to learn. And to be honest, guys, when I did this activity in the class, many people when they attempted first, they were wrong, okay? Because I told you design is all about making mistakes and learning. It's not about a theoretical way of learning. It's not an engineering course.

Okay?

You need to get this clarity. That is the very reason I'm going to give you an activity now. Because if you're very serious, you will take action. Guys, simple. Try to create a very small animation like a drop down or a checkbox or a carousel or stories or anything which can be related together. You create an arrow mark to relate it, or you create a small animation to delete it, or you create a small motion graphic to delete it, that's totally up to you. But my objective is to help you learn this principle of common fate through a particular coordinated motion. If you can able to send this screenshot of this small work to our email which is given connectdesignforchange.com you will receive a special gift, guys. You will receive two PDF copies which is going to help you learn 100 AI tools and 250 AI prompts, which is going to level up your game as a designer. And the third gift, you'll be getting a one to one call if you're a selected vendor.

Okay?

So this is a gift which I'm going to give you as a return, but not for gift. It's truly for your career to take action and learn forward.

Okay?

I hope this law of common fate is super exciting for you to learn. And I'll also make, I'll also expect you to implement practically in all of your user interface and application so that it becomes a game changer in your design game. Okay, I wish you all the best guys. Take care. All the best. See you in another episode. If you feel this podcast useful, give me a best star rating at Apple and Spotify and get further episode notified. See you. Bye bye. All the best.