08/100 –Interaction Design: The Muscles of UX

Welcome to this week two. I'm so excited to meet you. The reason, because we've been learning about our body parts of our external system and we are connecting that back to our design systems for our career. More importantly, there are many complex topics which designers are not able to understand. So I took the analogy of taking the human body and explaining each and every concepts in a more easier and a simpler way. Okay. So the first week, what we saw is all about skeletal system. I think we saw about the information architecture, the user flow, the wireframe, the hierarchy, the framework, consistency, structure. Everything is, is more or less related to a skeletal part of our system. Okay. Which is also directly imparting to our body part. Second, I'm going to be taking a system called muscular. This is going to be very, very, very intensive. Okay. Muscular is actually something which our entire body is being made up of. Right. Our body is made up of three things. Bones, muscles, fat. Muscles are one of the very important thing. When I have to relate it to a concept of design, I need to take care of the topics for motion, feedback, interaction design, micro interactions, pat, load bearing features, performance, responsiveness, and all these aspects. Okay, so in this day eight, we are going to be seeing something called yes. So now we'll get directly into interaction design. What exactly is interaction design for all the designers? This is a very simple topic to understand. The way in which you interact is called interaction. And the designer who is creating that interaction for the users to make, to make a movement of the product or interact. This is called interaction design. This is what is mainly going to explain make your user intention coming in your mind and interacting with the product through the feedback. What he's also going to get. So this is like a loop mechanism, what a designer is normally designing for the product. Let's take an app, let's take a mobile web app or maybe let's check even the physical products. Okay. Everything has an interaction. This has an interaction and this has a button here. Right? So the interaction design is something which controls the feeling, the motion, the play, the pause button, the color, the feedback. Everything is interactable. This is a touch and feel in each and every application people see. This bridges the static wireframes to the lively experience. So in the last week we saw more of wireframe structure and everything. Right? So this week we will be also seeing some of the things getting moved into a live experience, how the muscles are getting built on top of our body. This is the core of the usability. In fact, this is exactly going to create your user to tell that whether this product is usable or not, they're going to like it or not and how we can able to improve it. This is a more and more user experience touch point which you are really thinking about design. Okay, what are the little history of it? This actually started in human computer interaction. Okay. This started in the human computer interaction in 1980s. So this was coined by Bill Morgridge from IDEO for interaction design. Okay. So this was started by Bill Morgridge from IDO for interaction systems and more importantly Don Norman when he was there in the cognitive labs of Apple. So he was also very, very active researcher towards building this user interaction and experience and metricating into a format like a basic norms, regulatory and all these things becomes very vital and important when it started coming into commercial products. So Don Norman is one of the key person and Bill Modrich from IDEO is one of the key persons to make this interaction design coming into the picture. So there was like very early graphical user interface. When you take something called the normal buttons, okay, the physical buttons or something like a normal mouse interaction, like a click wheel or maybe the normal mouse or maybe people has to use the hard round buttons. Right? So even when from the earlier graphical user interface, this particular interaction is there. Like in a sense, the interaction word itself is a normal terminology. So it's always related to design because of the way in which it is pressed or used or touched or felt over the time it has been taken into like, let's say voice, like, let's say touch sensitive touch, double layer touch. So we have a lot of capacitive touch. So we have a lot of technology towards integrating this interaction into a, like let's say modern devices today it's been used in all the places. So this is, this is what we know. So why this skill is very important for a designer. This is to convert all his UI into interactions. Very, very important. This builds a feedback for the users to also know whether they are getting really hit by the dopamine, they are using it properly or they're getting both. So how do they measure? How do the designers really measure? Why these designers are measuring is to always improve this to the next version or keep a better user interaction so that the customer keeps coming back to the device over and over and over again. Okay. So this improves the task completion rate and core product topics. Interviewers are mainly looking for how your interaction principles are strong. This is very important. And this is what we are going to also cover this. Okay. And it defines the feel of the brand. Yes, I'll Tell you the common mistake what designers do people think this is animations and graphics? No, this is a cognitive ability. Through this cognitive ability designers understand this is how the users interact. And then you add the tool or a software or the effect or the gradient or the motion to make it in more lively way. So tools implementation is not exactly interaction. Interaction comes from the cognitive thinking and ability what the designer decides for the user and then he puts it into the tools to make the users interact. Many times people get confused with visual transition. Sometimes user don't, sometimes the designers don't take care of the users errors, success date and everything over animating it making the UX very complex so that it doesn't load. Because in India still there are people who are using 2G 3G right? So we'll have to make it very simple so that they can also use forgetting the system response time and states. This is why many people get into a bigger confusion. So what exactly is the five things I can tell in this video? I can talk about the input buttons, like let's say the buttons which is used for geshas or maybe something like a start button, end button, something like giving inputs. So this is very very important when it comes to designing your interaction. In fact in the last week we saw more about creating buttons, components and everything you can get back and the context of this video is to give you the understanding what is interaction design. The second is feedback. Like let's say how does the user get this feedback? You can very well design the wireframes. You can very well design the wireframes in a way so that the user clicks this button and he can go and interact with the other option. And this gives him something like a notification or a pop up so that you can plan your feedback. Hey, you completed this transaction. Hey, money has been received. Hey, message has been received. Strike. So you get to see the notifications and then you give the feedback from the user. It can be vibration, it can be something like a sound effect, it can be something like a haptic. It all depends on the hardware and software and synchronization of your product, what you're using. You could be working in a wearable sector, you could be working in a mobile app, mobile app development. You could be working in web app. So based on your hardware, device and restriction, you tend to choose the medium of interaction. Third is navigation patterns. So how you're making your user swipe through, scroll through tabs. This is going to build a muscles to your system. Okay, let's take one example by Going to the online. Okay, let's go to some images. See, let's take one image. Okay, so now when it comes to finding out the navigation, like let's say user clicks this, User clicks this option and he goes and books the ticket. Now like let's say if this kind of a place is viewed in the feed page, if David is a user, he wants to go and purchase a travel plan, click it and automatically the book now option appears. So the feedback shows that when you click it, it will go for booking now. Right, so the navigation panel is very clearly designed for the users to understand. What is the next step available for you? I'm just taking some random example from the online, but you could do anything. Okay, I'll show other example. Maybe I'll put one. I can use this tool, okay, called Mobin. You can use any free resources with respect to your UI inspiration. Instead of using other tools, you can use this particular tool for better capture of the data. Okay, so you can create user flow and you can understand how the flow is getting created through this particular product. Okay, see, I'm just going to take this user flow and yeah, I can take this flow and I can say onboarding flow. Imagine. Okay, I'm just taking an example so it becomes very easy for the user. See, can all of you see when the Airbnb option clicks, continue option login and then it goes into the next option and they can also sign in with their Gmail Apple account and then they're setting up finishes, they give the birth date, email password and then they set it up and then agree to the terms and conditions the application opens. See, so this is how the navigation is being planned when it comes to creating swipe buttons or scroll buttons. Or maybe you can have one more buttons like giving step one, step two, step three, so that can be created well in your ui however you want to create your product for. Then there is something called system response. Like you can also show your interaction by telling, hey, this is how the time for loading happens. Yeah, it happens, right? Hey, this is what is going to do a transition. You can give the wireframes to the feedback of transition effects. Like let's say when you take Figma, okay, I can open Figma and show you on screen so that you're a little clear about how we can do. And there is something called micro interaction. So you can also very well understand from how. Once again, I can open the Figma screen and I can show you how it can be done. Okay, I'm just opening a new file. So to just give you an understanding how it can be done, right? I'll take a common frame, right? So now what I can do is go and build this asset. Okay, Maybe. Okay, like let's say I'm building this flow, Okay, maybe the user imagine. By now, right? So you tend to put different option. Maybe I'm just taking an example, right? Something like this. So the moment when a user clicks this Buy now. Maybe you can also take the user to a. A custom checkout page process where is having a. Okay, see. Pay now, right? So you can create the. Imagine, Right? So you can also link this navigation by also giving another option. Like there is always a shapes which is available in. Figma and you can press this option and you can hold shift in order to make a 90 degree, what do you call 90 degree rotation or orthogonal movement. Okay, you can create something like this and you can add this option and you can even create the radius around it. So it becomes very easy for the users to do it. Okay. Okay, so now we are just making this option by now. And then this particular arrow interaction shows that how it can be moved to the next screen. Okay? And this can be exactly copy pasted in the same screen at the same location so that my users are guided after the payment is after the pay now option is done. Then they have to move for more options like let's say whatever is their option. Confirm transaction. Okay, Confirm transaction and everything. So buy now, pay now confirm. So these are all the three options which is there in order to make the users better understand. You can click this option called prototype and you can give this option. Maybe you don't have to give like this, okay, you can just plan this for only this button. Okay, just create this. It's as simple as that. Go and click this option. You can say tap, okay, and you can navigate to this and you can create some kind of a smart animation so that it's. It's very easy for the users to know something is happening. Okay, like let's say maybe I can only give a small interaction for this option so that I can able to move to this next option. Like let's say push something like this. Okay, I can. I can give a tap for this. See I've created three interactions, small interactions, okay. And the moment when this confirmation confirm option is pressed, maybe I have to go for other screen imagine. Okay, I want to just make a push from the left hand side imagine. Okay, so now I'm going to be clicking this option, okay? And I am just dragging and dropping this option so that I can see the prototypes live. Can all of you see the moment if I click it it will go and do a normal transition. But when I click this option I get a push through, right? So the user is navigated with the arrow mark and then the animation. So this adds a better clarity towards the interaction happening for the user, right? I just gave you a small example, but this can be done for anything. It can be done for each and everything, whatever you are creating for your user, right? I'm just keeping the example so that it becomes little easier for you. I can also do it one more time and show you. Okay. Buy now, pay now, see and if I again click this, maybe I can change this interaction to this site because my push is in the opposite side, right? So I can also hold shift and I can move this option here, right? I can hold shift and icons to move this here. That would be really better. Look at this now the moment if I click it goes into the home screen. So this is how using small interactions you can also plan your users to show some state some animations or you can make some movement as well possible. We'll see more in the upcoming videos and days so it becomes easy. I hope everybody is now clear with the context. Right? You can do for any case study you can use pay now button just like I showed you. You can use older version that has no feedback to make it into retap twice so that it can be activated for your user. Because older versions doesn't have a feedback at all. You can use the re tap to twice so that the user will know that some kind of an interaction and movement is here. And you can add lot of micro interactions like let's say processing state small animation which you'll see in the upcoming videos. And you can also show for error state green tick, blue tick, whatever you want to give an interaction feedback for. So be creative in that part. You as a designer has to decide what interaction you want to give for your user and it reduce the failure transaction rate by up to 27 percentage in testing. Because you are very well planning the flow of your user, right? Or not. So you can do it for fintech, e commerce, SaaS, dashboard, anything possible. Because all these things involves a very complex structure of giving the. What do you call complex structure of getting the users feedback Next. What are the psychology behind this? Human brain expects feedback within 0.1 seconds. If the delay is happening then the user loses the interaction. He tends to go for the other app. As simple as that. Instant responses creates Dopamine reinforcement predictable motion reduces uncertainty so that the user isn't is clear he's not clueless. Right? We need to understand this perceived control is equal to confidence. Why? Because when you know, like when I use this remote. If this option is for changing the light. If this option is for switching off, there is a predictability available for me by the name and everything. Every time when I pick up the remote new. If I find new new buttons there, it will take a lot of time for my memory to also get used to it. Probably you'll throw this remote. You'll see I'll go and change the light manually. You're tending to make the user irritated, right? So delay more than one second, triggers frustration and drop off. As simple as that. Okay. You can use many tools, guys. You can use Protopy for creating it. You can use uizard. You can use. I would say, right? You can use UISART to create prototyping. You can use Creaty AI. That's also an amazing tool, Creative AI. Okay, you can use Framer AI. You can use Figma, Smart Animate and variables integrating in the last week and here you can use GPT prompts. You can use Lottie files so that it is like large amount of information is available like templates and assets which can be readily used. You can use Mobin just like that. What I told you now it's a very free tool. You can try to use it. It will be better for you. Okay, I'm just keeping it. Okay. So don't worry. The resources will also be shared to you in the description. So good micro interactions convert up to 20 to 30 percentage more lack of feedback improves. It's equal to 68% of the rag clicks which is unnecessary clicks tracked by hard jar. This is like a heat maps tool. Responsive ux is equal to 40 percentage higher trust scores loading feedback cuts abandoned by up to 35%. Top companies use AB split testing to find out concept one and concept two which performs good better. Right? So understand this fact. That's why we are discussing this topic very detailed. If you're someone who is looking forward to the job, always show thinking of interactions in motion. Not just explain or show some screens. Interview tasks focus on mainly of interaction logic how you created it. Add depth to your portfolio by creating good animation like let's say sound, let's say graphics like let's say vibration. So show some kind of a movement. It's like a muscles of your body and your design, right? So show that people get to see the relevance and importance of it. It bridges the UX strategy and UI execution. High demand for user interaction designers is available in all the industries, not just SaaS and healthcare. Right? You can read this article. You can read this book called Micro Interaction by Dan Software. Of course Design of Everything by Don Norman Nielsen Norman Group is very good for using a lot blogs they have created. You can. You can very well go and understand. Okay, there is another ID I IDF Interaction Design foundation by Don Norman. This is also great great tool because these people have created a lot of materials for you guys. You can go and listen. I would also highly recommend you to listen to my podcast channel where I've created lot of lot of content. Almost 10 to 15 podcast I've created corrected for interaction design. You can also watch my YouTube channel for other videos. Okay. For more deeper content as well. There is a reason why I'm asking you why. Because created more interaction design. So this is a one kind of ecosystem which I've created for all the designers so that they don't feel lost to they get everything on the YouTube channel and the podcast whatever I've created. So please utilize these materials and I'll be really really happy to do. Okay, so I wanted you guys to now pick up one checkout flow from Mobin. Add lot of loading screens error success rate for interaction. Create small micro interaction state. Change some some interaction change. Push in, push out and preview in any tool like Figma or Framer or Protopy. Record this between basic and static and interaction. Spin that screenshot in the chat box. The people whoever is pinning that screenshot and people who are typing out muscles they will get the free interaction design template pack. More importantly, I'll teach you all these topics and put it into a portfolio. Get it into a hiring process in an interview interview what you call in design interviews and how you can use this muscles concepts in all of your portfolios to get hired faster. Master with your portfolio and the resume or the case studies, whatever you have. Attend the Sunday workshop In this four hours I'll be completely breaking down these elements and you'll be able to get a far more better clarity over there. Tomorrow we'll see more about the micro interaction in the day nine and with that we are coming to the end of this session. Thank you guys. Take care. All the best. Bye bye.