Day 11/100 – Responsive & Adaptive Motion Design

60% of the mobile bounce rate happens if the motion of the mobile lacks. Adaptive designs increases 28% satisfaction decreases 33% confusion. More importantly, scaled motion can reduce the rework of the development time by up to even 40 percentage. So the point is all the designers are not able to get completely a clarity why responsive and adaptive design is important for a user experience as well as for the development time reduction as well as for the overall success of the product. This video is going to exactly cover you that part. Let's dive into the topic. So I want to tell you why this is a very important concept to understand. Responsive design is actually adapting across all the screen. Like let's say when you're building a button, when you're building a form or when you're building a screens, it has to be working seamlessly across all the motion. Like let's say if you're clicking that button, the animation, the moving option should work very seamless. More importantly, based on the loading time, based on the scalability or ease of the design, it has to be very flexible. Same like how in the muscle system how it is becoming very flexible when you're running. This week we are seeing about the muscular system, right? So you know how the muscles are wrapped around the body and when I'm flexing these muscles, when I'm flexing this body, the muscles also tend to flex in that way to give the stability for the body. Same like that. Your UI UX also has a stability when it is wrapped in the muscles. Like this anime. Like this responsive motion graphics and animation. Your responsive motion is not flexing for the user's interaction. Whatever is happening, you tend to crash out. The software tends to crash out, the loading time becomes high or the user quits the application. That is why the user interaction is very important to communicate to the user. Hey, this is still loading. Please wait. Hey, loading is over option is submitted. So user interaction design is becoming more and more vital. When you understand your user, where he can go wrong, how we can optimize it and how we can reduce the development time cycle. Also for the developer who is developing a product, so this is a very important part of the discussion. Mainly it maintains the usability in all the devices. It makes sure it runs freely naturally done so it balances all the performance, load and everything. So it all depends on how beautiful the designer does it. I would highly recommend you can use this. Apple HIV introduced to motion scaling Material Design System Google Carbon Material Design System IBM Design System so these people have all created design systems in a Very, very seamless way can be well optimized for all web formats and development built platforms. More importantly, as a designer, when you're designing any kind of an animation or interaction or responsive buttons like this, it might take a lot of time. And more importantly, you also don't have the validated tested data how it will respond at the user end. See, don't assume that when you're building a screens in Figma or something, it's going to be very useful. It's going to be the same for the user. No, While you are putting it in the mobile phone, the hardware and the synchronization of the software takes a lot of graphics or the data loading time to make sure that the buttons are correctly displayed. You might be expecting it will come in 0.5 seconds, but the user end it will go beyond 1 second so the user will feel frustrated. So that is why you need to use the well components, well aligned components which is according to the design system. Yeah, you can create new but that requires a lot of testing and then you can able to use it. So designers have to be very flexible in terms of using this. See guys, as you as you must have understood this maintains a consistent user experience, improves motion, less perception on the devices, adapts to the speed and accessibility. This is one of the key skills which all UX interviews are expecting. So make your product exactly following this factor because each and every product development teams expect a stability in their product when it is used by millions of users. So it makes the user also feel that even if thousands of people are using the Flipkart or Amazon website, it should still not crash. Particularly during the offer time big billionaire and all these things the platform tend to crash. So under the constraint also your product has to work very very important. See the point is many mistakes which designers does it? They fix the motion speed across all the screens. Sometimes the speed is not at all required, sometimes the animation is important, Sometimes the communication itself is more than sufficient. So please ignore the please make sure that all of the devices are having the proper responsiveness for the animations what you're creating. More importantly, many people forget the other seamlessness the devices. See nowadays it's very easy to create seamless design across all the mobile tab, web app, everything. There are a lot of AI tools which can do it okay, but previously designer used to do manually step by step to check in all the devices how responsive it is. Same animation for mobile and desktop. No responsive tap or who are feedback people don't give that kind of an interaction at all they just like that keep the user little frustrated. So forgetting to reduce the motion preferences. So based on your screen refreshment rate, you'll have to also change this. So these are all the common mistakes which designers does. Okay, Jagdish, what is exactly the core components? See, there are five components when it comes to creating a responsive motion adaptive interaction. First you need to understand whether your mobile is needing a faster or slower adaptive rate. It all depends. Sometimes you need to communicate it little slowly, slowly, slowly. Sometimes it needs to be little faster for certain faster transactions or maybe user flows it is required. So you will have to decide that the second adaptive easing curves by platform. Like let's say when a particular graphics has been running nowadays in prototyping tools like Figma and you can take tools like Lotte Files or Protopy, you can adjust your adaptiveness towards having that animation or motion graphics in a more easier way. Also it depends on the way in which you build it for iOS, Android and other web platforms so that it becomes more seamless across the entire product. Let's say that product might have its application in iOS, in Android, in web app, in tablet. It has to be seamless across all the platform and it has to be scalable motion assets like let's say SVG files or whatever files you're creating. And also it has to be reduced to motion accessibility toggle like let's say a minimal motion is always recommended because very complex motion tends to get a problem responsive input, gesture and states. So whatever inputs your users are getting, whatever input your users are responding, it has to be also given in a state or like an instance so that it behaves in a particular component in that way. So timing, adaptive scalable reduced motion and responsive input gestures are very important part when it comes to designing it. Let's see one example. Okay, I've created some example for you. I've downloaded this option like a general framer general frame from the Figma screen and I'm using this simple design system which is already available for me. Okay, like let's say I'm taking a simple design system inside Figma and I'm going and taking some proven buttons which is already available for me. Okay, And I'm using those options. Imagine, okay, I can also drag and drop it. But the moment when you click this button you also see there are a lot of options available here. Can all of you see here? Like let's say what are the state you want? You can create that primary what are the size you want when it comes to hover what are the. What is the state you want to change over? You wanted small button. You want a label to be summit. Okay, you want any start icon, something end icon. If you don't want end, you can cross it color. You want to have a light background. It's okay. Now insert the instance. See. Can all of you see here? So this component is now color coded with all these details when you design, when you import it from a design system. This is all well proven in all the web applications, mobile app, everything. That is why it is always recommended to use the design system which is well proven with all these instances. So the loading time is very seamless because these are tested and prove. That is the main advantage of using the well proven design system. But let me take an example of manual. Okay, design system. Now you guys can try it out because there are a lot of buttons, components, cards, inputs, everything is available. You guys can go and try it out, whatever you want. See, you can also try with lot of card options which is available. You can try it out. You can also try a lot of options which is like a review title, like a testimony card. So whatever you want, you guys can easily try it out. It will come. But let me show you manually how to do it. Okay, See I'm just taking an option with respect to making a small rectangle and I'm making a rectangle inside a filled container. Okay. So now if my user is pressing this option called apply or maybe here, my screen has to load and show. Hey, this takes little time, right? Imagine I could have created this whole button in a particular way. Like let's say I can also create a full button like this, right? Imagine I can remove this. Why it is happening like this? Okay, duplication was happening. Yeah. So now instead of me telling like this, instead of me putting like this, what I'm going to do is I can press the shift command and I can make it like a full button here, rounded corner. Imagine. Okay, see I'm actually making the graphics little heavier. I'm not making it easier, I'm making it heavier. I think probably I'll have to remove the auto layout. Yeah, okay. Yeah, I'm just keeping it little loaded. Imagine when you're building a graphics like this. Okay, so now when you're building the same animation for the full screen, like let's say in the next screen you want to show the loading option full to your user. It's actually very heavy. Imagine if I could able to do it with one more screen like this. Okay, I'm duplicating the same screen. Okay, probably I'll keep it here. And I'm trying to build a full motion animation like this. Imagine. Okay, so now I can also click a prototyping option here. I can click this option called Prototype. Okay, I can click this option to here. Imagine Navigate to like let's say on tap. I'm navigating to this and I'm keeping this option called Smart Animate. Smart animators. Let us see how the animation goes up when the loading screen happens. Keep the timing to maybe 400. Clear. Imagine we will delete. This is not required. Maybe I'll give it back to the same screen. That will be better. Okay, super. So now I can click this prototype option and I can drag the screen and I can put in the corner. I can see how it works. Clear. Listen to me now I've created the trigger and the interaction here. Look at this. See it is actually going very fast. Very fast. Means the data, the color codes, the pixels, the kind of information what is encoded here has to run through all of your screens. So it is actually a little time consuming process. Instead, Instead, why don't you think of putting a very minimal element? Okay, I'm just going and changing it. Imagine I'm going to this design option, okay? And then I'm changing this option to a little heavier, little lighter. Look, Imagine, okay, A small option like this. And I'm going to delete this option because I don't want this mainly now. Okay, so what I'm going to do is instead of me putting these buttons, I can just copy this. The beauty about figma is when you copy from each and every frame, you can also duplicate it. You can do it with components also. But I'm just showing it manually so that you guys can also build it. Okay, so here I wanted to build a detailed screen over here. Imagine. Okay. See it looks little lighter compared to the earlier screen what we had, which is having a so heavy component. Right? So look at this. Now what I'm going to do is I'm going to be giving a prototype option to link this guy to this guy. Okay, I'm going to give this and I'm going to give this option called Ease in, Ease out with a slower loading time. Let it take 600 millisecond. Okay. And then I want to give a back. No, not required. I think back option is still there only. Okay, let us see here. So it is actually two speed. Maybe we will take a little slower. We'll do it from the beginning, not a problem. Okay, so Here, I'll go for 300 itself. I'll put. Okay, 600 is a decent speed. Okay, I'm doing it. And I'm also, I can also change all of this animation at once. Can all of you see there is an option called custom bezier. You can put it gentle or quick. You can also make a custom spring like option. So previously Figma did not have this option of giving a multiple layer of prototyping like in the sense how you can move your interactions. Now the precise control is there. Why? Because people are also demanding that level of precise control and the nature to demand the feedback. Okay. Because we are doing most of our complex applications, complex interactions in every day to day life in mobile phone. Even we are doing a banking transaction, even we are ordering one lakh rupees product. Here we are doing even thousands and thousands of interactions every single day and week. So all of the complexity is being loaded in these mobile phones and the devices. So the user interaction designers have a big responsibility to give that feedback to the user in a very effective way. If a button clicks, how does it happen and how does it load with a minimal speed? And if the button doesn't click, what kind of a feedback the user has to get? So each and every application company, each and every product and services designers are thinking very carefully how I can make my user interactions better, how I can make my users really think that this can make a very easier job for them or else what happens, they won't be able to get a better output over here. Okay, so I hope you guys are getting this clarity. So now I'm going to be giving a 600 option and let me think how it's gonna work. Yes, it's gonna work, I guess. Okay. See it goes very, very smooth. It goes like a smooth. I can even add it more smaller. Yeah, we have increased the number. Let's see. See in fact I can also reduce this other effect by changing the ease and ease out to just ease and ease out. And I can also change this number to probably 1300. Cool. Look at this. Now see now I have not created a bigger thick blue color as an interaction to fill the box. I'm just indicating a small thick line. Thereby my graphics is getting little reduced. I'm not using any gradients, I'm not using any fancy colors. I'm not creating a thicker lines or more icons and visual SVGs or representations. Why? Because these are all will take a lot of time while your user is getting loading. So what is your main objective in this screen? We'll have to show your user. Hey user, click this option called Apply. I'm loading. As simple as that, right? So as minimal as communication, if you keep it will be faster for the users to get the interaction quickly. That is why when you're designing a product, first you need to predetermine what kind of an interaction you want to create. Based on that thought process, you can design a very simple interaction which can be scalable across all the devices and which can be faster response across all the multiple devices. And the beauty is you can also share this development code to your to your developers and immediately test it out. That would be a great choice. Okay, you can try this how it was work like okay, hey, it looks good. Super, right? So you can very well check it out. How does the prototyping and other option work? And there is another tool which I'll show you which is called Create Protopy P R O T O P I E okay, this is another beautiful tool. So the difference between the figma and protopy is you don't have to create multiple screens. You can plan the animations like here for prototyping. In fact, this is a master of good for prototyping and everything. So you can, you can also import any kind of screens you want. And here you can go and build your own methods of system. What you want. Like let's say you want to build iOS kit. You can just drag and drop it. See it's ready. If you want you can build any kind of a action sheet. All the templates are preloadedly available here. Okay, you can use this indicators like let's say can all of you see here. So the beauty is you don't have to build multiple screens here, you just have to build the trigger here. You just have to click here and you can add a trigger. See, whatever trigger you want, you can able to add here and you can keep on building it. When my user clicks it, what kind of a trigger should happen? That's it. So you don't have to build multiple wireframes. This is a difference between the other tools in this. And also you can use lot of icons. See, there are a lot of pre templated libraries which is totally available for all the designer to start using it. Okay, the beauty about this tool is this is a locally downloaded tool mean totally downloaded software. So it will not take much of your browser MB so that you can seamlessly work when you're designing many products. See, you can also create this button, radio button, right? Can all of you see? So the point Is these are ready made buttons available. You can click this option called preview and you can see even you can toggle on, toggle off very easily. Can all of you see here it's very simple and can you see the loading option is coming here. So the point is here I've not planned any interaction. So the point is here you can go and change whatever color you want, whatever loading style you want, every precise level of prototyping you can change in this tool. In Figma, everything has to be done manually. Protopy is one of the very easy tools. So here the meaning of building this kind of a button is hey, my button has to move right hand side, it has to produce a color of blue and it has to show a little gradient over there so that my user is notified and given the feedback that the button is switched on. See this is a literally a five to ten minutes of work, but it is just done by few seconds. Why? Because these are all the tools which is available using the AI platforms. Protopy has imported all of this. Well, web optimized content very easily available in your library. You just have to drag and drop and use it. You can use this tool called lotto files. You can use this tool called Moment. You can also use this tool called Creaty AI. So these are all the tools will be very easy for you to start building prototypes. You can also use this tool called uisart. Okay, so these are all very very helpful tools and you can keep on exploring the libraries whatever you want. See there are a lot of options available. Tab bar, you can have banner, you can have buttons, you have crazy number of options to really check how to find out what kind of options you are acquiring in your system. And that is the beauty about this tool. Okay, yes. Now let's get back to the main topic. So the point here is many designers are not understanding this. I can keep on showing you any number of case studies. But one example what I can give you is the screen what I show. So it could be applied in banking app or it could be applied in an introduced device specific motion timing. You can do mobile tap also from 200 milliseconds to desktop to 350. So why? Because in mobile the people require a little faster rate. In desktop maybe slow is enough because in desktop lot of option is required. Maybe the user is having a bigger interface so he will be notified for the proper thing. In in mobile the user interaction is very short and people needed an instant feedback. So the delay time is more than 200 is not at all accepted. Okay. When you do all these things, the increase to course completion rate can go up to even 18 percentage and user gets definitely satisfied. See, the whole point of V doing all these things is to understand what exactly the user is going through and how I can able to improve his user experience. I'll show you an example. Recently I've used this tool to build a particular web page. I'm just showing you an example. Okay. I just gave a prompts and this tool built the full web page. The point is I can also go and preview this like this. Can all of you see? It will just load. See it is actually preview published and preview. But the moment if I click mobile preview, can you see the responsiveness inside? The mobile app is also coming. So AI tools are much better to do that kind of an activity nowadays. See for tablet. Can all of you see here? So previously designer used to spend hours and hours of time to do it. But nowadays using these responsive tools like Gamma app and also you can use this tool called Relium I.O. and all these things have made designers job very easy. So try using that. You will have to make sure end of the day that your user is using a very simple interaction. Your developer is handling a minimal load. Your device of the user is also having a minimal animations and graphics and loading time so that they get the better user experience. This is what is the importance of having muscles in your body which can be flexible. This is what is the importance of having a better user interaction and the responsiveness for your user and their application. Why Jagdish? It is very important. See guys. Brain adapts only different. Different to different different sizes. Brain adapts differently to different sizes. Faster feedback reduces cognitive load. Smoother transition supports perspective perception flow. Adaptive rhythm improves trust and recall. Yeah, this is very important point. Okay. Motions must match the user expectation. I've been already telling this in the last one week. Okay. And you can use this tool called Framer AI Protopy, Lotte Chat GPT prompts to relu and and created AI and UI Zard and Figma. You can even connect Figma and you can start doing the design in ChatGPT. In the last video shown you about the Figma connector, you can even use browser development tools to make an animation check how it is coming in real time. Okay. When it comes to job interview and process, it will definitely add a huge depth in your portfolio. UX case studies. It shows how adaptive you are in thinking with respect to creating the user interface and interaction for your user. This adds a higher weightage it's critical for mobile first roles with respect to mobile development company strengthens your motion design credibility proof skills in global SaaS hiring very very important. More importantly I want to tell you the resources. Of course I already told many resources you can use Nielsen Norman Group Responsive feedback studies Framer Motion Academy while heads responsive animation book Apple HID system Google Material design system. Okay you can also use Google IBM Pega you can use Airbnb, you can use Atlanta I mean Atlassian Atlassian design system. So all these things are very very proven well designed systems available and can be imported directly to Figma as well. Okay you can use it. I would give you a small activity guys create a motion for two different screens same like how I created and adjust the ease of interaction and see the difference. Test with the reducen reduced motion mode and see how the user feels. Give it to some of the user and check it out. You will comparatively see the difference and this is how you document your projects and also show it to the recruiter. I would highly recommend you to type responsive in the responsive in the chat box so that I can able to send you adoption motion template kit. Also along with my team is going to send you some gift with all the packages of all the bonuses and AI tools which can be much useful for you to start building your design components and systems. Very easy. More importantly there is a link available for Sunday workshop also where you can register for a Sunday upcoming workshop and start putting all this action into a portfolio and making it as a job ready process how we can land 3x salaries in just 3 months. This would be a great session for you to open up your moment where I will also cover about your portfolio, job strategy, AI tools, workflow integration, salary negotiation techniques and a complete clarity in your design step process. I have a 10,000 rupees worth of bonuses also in this workshop so click the link below to register. I'll see you on Sunday 10pM thank you so much guys. Take care. Bye bye.