Day 10 - Motion & Performance Optimization

100 plus millisecond delay is equal to 1 percentage conversion loss. 47% of the user expect loading time to be less than two seconds. Motion, design, feedback and all these things boost the trust factor of a brand to up to 25 percentage. Optimized animation can save your battery of your performance of your hardware and Software by up to 30 percentage. Can I tell you something? If you're not optimizing your performance of your muscles in your body, do you think you can run faster? If you cannot optimize the performance of your graphics and animation and loading times inside your UI and ux, you won't be able to give a better user experience for your user. In this video we are going to talk about why it is very important and how as a designer you can go and fix it. Let's jump into this video. First of all, let me give you the concept of it. Okay? What exactly mean by this performance and motion principles, how we can optimize it? Okay, so we are in the data of this content creation and more importantly, this is an energy control of design motion. Smooth flow adds a better UI and UX experience for your customers. In fact, this reduces a very low friction during the feedback. Like let's say if a user is pressing a submit button. If the feedback is not at all coming, the user get frustrated. It converts visuals into dynamic experience. See, the main goal is to create a responsive experience with a proper delightful seamless flow. Then only the customer will make it feel like it's fluid application and it can be scalable across your products. See, I'll tell you why this concept is very important. Okay, the point is many people have started this from early Flash. Like let's say many people who are from the graphic design canva, sorry, Photoshop, illustrator and this CorelDraw and this Flash people will definitely understand the importance of it. Earlier the motion graphics was very very famous. Now it's getting into a different format. Okay, but the mobile UX demanded the same applications at the time of 2020 and 30, particularly in India. Okay. The smartphone usage became more prevalent in 2007 after the iPhone launched. The global level impact was there. But 60fps becomes a usability benchmark after 2015. 16 Many people started using the well proven design systems. Apple hig emerged and UX designers shifted from static to making it kinematic. Like let's say kinematic. So people like motion, people like graphics, people like animation. But the challenge is how do you make it seamless? Okay, that is why user expect that kind of an instant feedback smoothness. It reduces bound state boost retention critical for particularly SaaS based applications and more complex dashboards where the user experience is very, very important. Or else the user tend to forget. Why is he even operating this web page? I don't know. So for a brand to be built, the speed is very important. You know what, a designer always makes a big mistake putting super animations and making the delay happen. They don't understand the load. No loading indicators or states for a user. Many users are getting frustrated whether my payment got transacted or not. That is why you need to create the understanding for the user. Hey, your payment is getting transacted. Kindly wait for 60 seconds. Hey, your payment is an international transaction. Kindly expect even one hour to do transaction. You can close this application and go for the other app. Unless until you tell that how the user will be having the better experience, they will get frustrated. They will think whether the payment has gone or not. They don't have a patience, they suddenly close it and what if the payment fails? They lose the trust on the brand slowly. So ignoring this curve of the learning of the user is making you as a poor design thinker. Okay, it makes a poor optimization on all the lower end devices. Let's say if your device is not synchronized for a better graphics. Like let's say if your resolution is created for 1080 pixel but your basic end of the application is only having 360 pixel. Let's say if it's a medical device or maybe something like a basic primitive device like a kiosk machine, the banking, it doesn't work. The graphic crashes, loading time is high. That's why when you go for many ATM machines, when you go and put the card and if you press the button, it takes a lot of time. Some of the user makes a big problem, they withdraw the money and the money comes in and what happens is the messages keep popping and the user doesn't know, like let's say what's exactly happening. Hey, the payment has gone, but the payment is still not coming. Maybe the user, if he would have waited for five to 10 seconds, what happened is he would have got the responses. But the point is before that delay really happening, what happens is many people tend to don't. Okay, so many people don't have that timing, they don't have that patience. What happens? They end up taking the card away or maybe they cancel the transaction. Money would have been transferred, message would have been come, but the money dropped. The physical money would have not come. Maybe you stopped the process Then this guy takes a lot of time to call the customer. Okay? Then the customer says hey, no messages come. Then they have to contact the bank server. Then they have to talk to the ATM vendors who is having that. Then they have to check the internal transfer of the server's data. Then they'll find the money is not still transacted, but the user got a message. Then they'll put the refund. It takes huge confusion. Just a small thing. If the designer would have thought to put a loading button at a time, how much confusions can be avoided? This is how businesses can be optimized. That is why the performance in a muscle is very important for a body to lift more weights or run faster or anything. Same like that. Your muscle performance is very important when you're designing micro interactions and high loading page or slow loading page. This is why you doing a user research and understanding is very, very, very, very vital. Okay, I'm going to be showing you a very important tool called K2 Think. Okay? In fact this tool can determine a lot of heavy lifting for you. Listen to me carefully. This is one of the tools which was developed by UAE government. This is one of the most advanced reasoning tools. Fastest reasoning tools I would say. Now go and click this option to know about the loading time of a user. Typically for a banking app. Imagine okay, you can do it for anything. Can you please tell me what is the average loading time what a user really expects for E commerce industry, banking industry and and financial tech industry and edu tech industry. Because I'm just trying to make a better loading animation screens for my user. So I need this comparative study scrape through all the information from the online and research journals and papers and provide me the output in a tablet column format. See, I just talked my requirement. Okay, put enter. You can look at the speed of this engine now 0 seconds, 1 second fastest engine. Because the question is little complex, right? ChatGPT or any other tool cannot do it, right? Look at this. 2 to 3 seconds. For e commerce banking, 2 to 4 seconds. Fintech less than 2 seconds. The point is you need to understand this is a loading time which is available for 47% of the user abandoned this. 60% of the user expected to have this. More importantly, this is taken by Baymart Institute. This is taken by Accenture Financial Service Financial services for consumer survey. So this is not a story, this is a validated data. So based on this study, now you go and design the application and test it out how much loading time it is happening, how well it is performing. For iOS devices, Android devices. And then you do a usability testing with your user. See, then only you can able to optimize it better. Okay, Jagdish, what are all the core components I can take in consideration? First is timing. I think I've already told you, 2 to 200 to 400 milliseconds is ideal. Easing in and easing out effect has to be very natural. Making the animation density little low, keeping the hierarchy like let's say if you need to have a 4 priority, think about why not having 3, think about why not having 2 or 1. Think about whether hierarchy is needed or not. Or maybe a simple another interaction can help him. Right? So think of the possibilities in the whole new different angle so that you can reduce that optimization itself. Then try to optimize or optimize all of your preloading, lazy load and all these things in your mobile app. Okay, I've told you an example of food app. Or you can do it for E commerce, you can do it for banking, you can do it for anything. Make sure it is optimized for 60fps. If you're able to do that, you can get a better performance and your user will retain a lot. Okay, Jagdish, what exactly happens inside the brain? The brain tracks motion up to 60Hz faster. Beyond that, if it does, it will create too fast. User will not be able to enjoy the real experience. Slow is also bad. Too fast is also bad. Optimal is something which is very nice. Smooth feedback signals a control inside a brain to have a better understanding if zug, zug, zug, Something is happening. I think some error has happened. How come I got this answer? No, no, I'm not believing this. People will be little skeptical if too much delay is happening. They'll be like when I'll get this response here. But if you get a optimal saying, hey, step one, input is given. Step two, wait for three seconds. Step three, you got to output. Step four, open it. See, this is how you take the user journey step by step and make it into more easier way. Okay. Fourth, dopamine spikes from instant reaction. The delay increases cognitive stress, predictability builds trust and timing builds trust memory as well. That is a very important thing. I've showed you a tool called K2 thing. You can do it with ChatGPT, prompt framer, AI rive app for testing a real motion performance Lottie files. You can also download a lot of animations and GIF in a very optimized way. For it, you can also use this tool called Mobin. Okay, it's going to be very useful for you. In fact, it's same like lottie files. You can try it out. Okay Mobin you can use well optimized animations and flows, user flows. You can check it out. It's a very free resource. Okay and you can also use usability.com maze.com to test out your performance. Also for the user where he is taking a lot of time why it is taking a lot of time so that you can you can do a well optimization of your graphics and performance. Okay, so why it is very important for a designer. First of all, showing the metrics in a real time case study for your projects help you build a lot of trust. If you show the before and after in the demo video, people will understand this guy is a real time problem solver. Mention frame per rates and loading time in your portfolios, resumes, case studies, etc. Discuss the optimizations during the interview and this adds a lot of depth to your technical understanding of design and you can very well use these resources Google Material Design System IBM Carbon Design System Motion Material Motion Guide by Timing Logic Apple HIG Designing Interface Animation by Valhead Smashing Magazine Protopy is one of the amazing tool so all these things can be used very very easily. I want to give you an activity. Don't just watch this video on runoff. I wanted you guys to pick one screen with animation, measure the time for transition and loading. Try to copy paste it into figma and try to do it and see how it can be reduced with a lag like a same visual weight how you can give it and make it reduced. Test it with any kind of a tools like framer or rive or maybe usability.com with 5 to 10 users and compare the before and after. This becomes a one good case study for you to apply for the jobs even you don't need to Even complete a 2 years degree or 3 months course or anything. You can just document it properly. Throw this insights into ChatGPT and build a neat case study. Once you build a neat case study you can take it into tools like Gamma app to build a very good projects case study in a in a format of a web page. You can go to tools like lovable.com to create a beautiful website itself. So think about it how you can able to do this exercise and make it happen and type out motion in the in the chat box. Our team is able to send you the Motion efficiency worksheet for you to have a well optimized mobile application design for your projects and please do join my Sunday workshop where I'll teach you how to take these learnings and put it into a portfolio to start approaching for the market where you can get 3x salary out of it. Learning, learning, learning. Design is good. But the end of the day if you're not able to get job and results, ultimately everything will become based. So I will take you there on the Sunday workshop for a 44 hours 6 step process where I'll teach you how you can put the small small learnings and make it into a project and a portfolio where you can apply for getting 3x salary growth. Many engineers, many graphic designers are not knowing this who are making a career transition to design. They're making a very substandard design work. That is why their salary is not increased. They are not able to go to a core product design studio. They are stuck with laboring job in service design studios. Am I right or not? If you're someone, type me in the chat box. And you can also get my personalized support by attending this workshop where I'll open up a 15 minutes window to even register for my personalized support program. You can take that kind of a support and get ahead in your design career. So I wish you all the best guys. I want to see you in the next day for responsive motion pattern. Build your strength, not strain in design like a muscles. Thank you so much. Bye bye. All the best.