Ep 298 | Law of Proximity - How Designers should consciously use it in 4 mechanics

73% of the users prefer visually organized interfaces with intuitive grouping. A report by Nielsen Norman Group has said that 68% of your faster task completion rate your users are doing it only when you group the content properly and organize it. A report by Usability Geek says that. What is this called? If you understand the law of proximity, being a designer, how you can able to consciously arrange and hierarchy and visualize your information, you can able to drive this insane engagement for your user to know about it. I'm recording this podcast, take a notes and open laptop parallelly with you so that you can able to do the live activity and see how this is going to be interesting. Okay, because hearing that, hearing this will not give you any kind of a clarity. Only just visualizing, at least in your mobile of certain images will get you clarity on what is mean by law of proximity. Using this one principle, you can able to at least 10x your design visual design into whole new different level which is making the user more functional, more meaningful, more accessible, more usable. And this will become a user centric design. Okay, let's jump on. Welcome guys. Welcome to this podcast. Thank you for staying tuning here. So today we're going to discuss something called law of proximity. Okay, See we've been discussing about aesthetics law recently in our podcast and YouTube live as well. Okay, so if you wanted to get a very, very deep case study about this proximity in design, where I opened my screen and I shared the case studies, at least 10 to 12 different case studies I've shared with the pictures and I marked it, you can go to my YouTube channel. The link is given below in the description. You can find that YouTube live and you can go to today's live and you can watch that. But this is the overall gist of what's happening. Okay, See first of all, proximity is a core concept in gestalt psychology. We've been talking about gestalt psychology in the earlier podcast also. But gestalt is all about understanding the aesthetics, why certain products are good and why certain products are bad. And this proximity is a objects which has been closely perceived together as a group. This is what is called proximity. Okay, See in design, the proximity establishes a very, very clear hierarchy and visualization relationship. What happens when you clearly hierarchy and visualize it in a proper relationship? It guides your user, it helps them make focus on a particular thing. It makes them accessible. Like let's say if you have nine dots similarly arranged in a pattern and if you have a nine dots scattered here and there, what people will prefer, normally they'll only prefer the group which has been already created. Right? So this means that the law of proximity is applied everywhere in the interfaces. You are making the user go and feel it in a far more different way. If you're not able to do it, user get confused. What is this? I'm not able to understand this interface at all. Okay. I'm not able to understand the relationship at all. And people will not consciously tell it, but they'll feel it inside. That is why law of proximity is very important. I would request you to go to your YouTube or maybe you can open your Google search and just type law of proximity. You will see one picture and that will make you clear. Okay, so proximity is a core concept in Gestalt psychology. Suggesting objects close perceived together in order to make a group. If it is not grouped, then it conveys a different mean. This is all about that. Okay, so it is very important when you are designing interface, when you are designing intuitive navigation and it reduces the cognitive load of the user. Guys, this is the main, main important thing. Okay? See why it is very, very important. First of all, you need to understand this helps in creating a very clean and structured user interface. It helps you organize a content which is more grouped and people will be very, very approachable for that. Imagine if you do it very, very cluttered. People will not get the connection. What you're trying to say. And particularly when you're designing complex dashboard. If you're designing any complex UI system and UI UX design system, like let's say the, the airport cockpit design or maybe the like let's say the, the nuclear power plant interface design. These are like very, very complex system, right? If you don't understand this proximity, then people will not perceive it like a group. Okay, wait for the case studies which I'm going to explain you quickly. You will understand even more better. Okay, so particularly proximity is help for that. I already told you. Proximity affects perceived usability by up to 30 percentage as users view the usually grouped items related together. Adobe UX Trends says that 73% of the user prefers visually organized interface with intuitive grouping. Of course we like clutter. We like grouped things, guys, not cluttered things. Right? We don't need the clutter. We need to be uncluttered. Very simple, clear. That is what we will also be drive towards using a mobile app or something. Okay, so 68% of the faster task completion when user interprets grouped content clearly. That is why you need to give the user a very, very clear instruction by communicating this dot. See, you can Use shapes to communicate this groups. You can use colors to communicate this group. You can use space to communicate the groups. It's however you want you can able to do. See guys, our brains are wired in a way to recognize those patterns and then only we will process it. If this is very, very differently placed, what happens? We will not conclude a meaning. We will not conclude a judgment. That is why the elements are grouped closely in order to make our brain automatically perceive that. This is called perceptual grouping. This is very, very important, guys. See, it will make your user retain the memory of your brand or logo or anything really, really long time. Have you seen this NBC logo? Have you seen this what you call the Unilever logo? Have you seen this FedEx logo? People will not forget that because the spacing and the grouping has been arranged to show that this is conveying a separate meaning. While explaining the case today. I'll give you an example, guys. Okay, so what happens? It helps your user to keep in their memory for a long time and automatically it will reduce the cognitive load. Okay, there are three concepts and mechanisms available, guys. First of all, when you take like. Let's say if you want to create a very good proximity for your interface, what you're designing, you can use these four mechanisms. Use padding and margins very carefully. It creates a very good consistency. What happens. Your user will have an enough spacing to understand. This is all same buttons. This is all same space button. This is all call to action button. See that grouping will come and create a very good visual hierarchy. See, when you are spacing out these buttons in a proper way, people will perceive. Okay, Acha. This button is all for the sharing information. Share like Comment. Have you seen Facebook feed? Have you seen LinkedIn feed? Have you seen any Instagram feed? The bottom will be all for like share comment. Imagine if you keep the like button on the top share button on the below. People get little confused, right? So you group it the third con. The third mechanism is leveraging the alignment. See, if you align your content in a horizontal or vertical way, it helps the user to scan that very very easily. What happens, he will be able to take a better decision. Fourth, avoid overcrowding. See, when you leave lot of white space and when you put some elements here and there randomly, it will confuse your user. So that is why your overcrowding needs to be there. See, there are some common mistakes also. See always you're ignoring the law of proximity. As many designers have seen. 99% of designers, they consciously ignore it because they don't know. At least now you're listening to this podcast, you should be able to implement it carefully. Okay. Second, overcrowding the elements keeping lot of things, people get confused. Third, inconsistent spacing. So understand this fact guys, because knowing this concept is not the point. You need to understand the technique using padding margins carefully, using the visual hierarchies, leveraging the space and avoiding this overcrowding. When you do this guys, you will see a user interface which is super clutter free. This skill cannot be learned by listening to a podcast. You should consciously go and implement these mechanisms. Whatever I told you now, in any one interface that try it out, maybe you just take one application like Spotify, or maybe you can take one application like Trello or anything. Just mark where you feel the law of proximity is. There at least find three examples of where the law of proximity has been consciously applied by this mobile apps. You can take this Google search item. All the hyperlinks will be grouped together, all the small text will be grouped together. All the icons will be grouped on the left. So it perceives the meaning to the user that this interface is actually having the separation. Like so people will consciously know. If I go and click here, it will open a hyperlink. If I go and click here, it is not a clickable icon. So you are already guiding the users intuitively, consciously that this is actually meant for this. This is the power of grouping, right? This is the power of law of proximity. If you understand this consciously and when you apply it, your user interface becomes stunning. Guys, have you seen Google search option? I told you an example. You can see the Trello board example. You can see the FedEx logo. The close proximity between the letters. Guys, it emphasizes a very, very clear meaning, continuity and flow. Unilever logo. See, the logo is made up of lot of elements like let's say the products, the food product, beauty product, everything they have. But it's all perceived like a U shape, the unilever U. See, it's been put in a proper distance so that you will perceive that as a relationship. That's called law of proximity. NBC logo, the peacock logo. You know that, right? The clusters of the peacock colorful arrangement shows that this is actually meant for keeping the unified language. It symbolizes the NBC's diversity and range of programming. Adidas. See the parallel bars shows like climbing a mountain, what happens? Actually this creates a meaning of challenges and goals, what athlete typically faces. Because athlete is having this issue of like let's say crossing these challenges, climbing the mountains. So that's why the Logo is also designed like that way. Spotify interface. Can you see all the play control buttons? Left, right, pass, stop and next and forward. It's all kept in the bottom same. Have you seen that's called grouping. Imagine when you keep the button on the top one pass button on the top play button on the bottom. It creates a big confusion. Apple's iOS notification, Google Drive, Facebook news feed, Amazon product page, Airbnb case study. You can take any example guys. Even if you take apart from logo. If you go for physical products, you can see remote control. Volume plus and minus will be in same group. Channel up and down will be in the same group. Have you seen car dashboard? AC control will be in one group plus to minus, hot to cold. If you see that volume button, it will be in 1:1 control. So cluttering is very, very essential for a human understanding. Even if you take kitchen, the stove and burner will be in the same control. Imagine the stove is in the burner is in a different place and the control is in different place. Have you seen the four stove burner? People get really confused. That's a poor example. I mean that's a poor design. Example is right. The example, the design is poor. So you need to create a burner and a control next to next so that the control becomes so easy because it's been grouped many examples guys, you can take Instagram stories, Netflix interface, lot of examples. I can keep on explaining you like at least 10 to 15 example guys. But the point is you need to understand why these people have created that. It's all about having that equal space and how people were able to perceive it. Okay, like let's say in Netflix, very, very complex interface, right? If you create that experience of browsing, helping your user to find out what they want quickly, they will be glued to your experience, what you're creating. Okay, so your activity after hearing all this podcast and everything is take one app, like let's say Trello or Slack or Jira Card or Spotify or Netflix. Take anyone favorite app. I'm telling you to digitally do it because we've been using digital product for a long time. If you're an ID designer or product designer, take physical product, you can take car, you can take remote, you can take anything. But mark down the law of proximity where it's been consciously applied. Mark down three places and take a snap and send it to the email which has been given in the description. ConnectTheRate gdesignforchange.com the people who are sending this conscious email to me. You are going to get an amazing gift which is worth of 5000 rupees. Guys. I'm going to share you some PDF guides and I'm going to show you one of the most most powerful webinar for you just as a gift. It's not available for public. This one webinar is worth of 30,000 rupees. Guys I'm going to show it to you because if you are very seriously listening to this podcast and then if you're very seriously taking the action and sitting out to me, you are getting really driven. Okay? I hope you will do this activity because design is not about learning, learning, learning. Design is all about making mistake, taking action and reflecting and then learning in that way. Okay, thank you so much for listening to this podcast guys and click the free gift to claim that. In fact we have a coming week workshop which is on November 24. We are going to have a special design verse workshop. You can able to participate in that and you can take an advantage to know our six step formula how we can able to reach in 90 days a proper design job of minimum 6 to 10 LPA being a designer. If you're already a designer in next 90 days, imagine how we can able to 3x your paycheck using the six step powerful formula what you have been doing. Okay? So come to that market masterclass and take an advantage and if you find this podcast useful give me your best. Already in Apple and Spotify and subscribe to get further notification. Guys, take care. All the best. Bye bye.