 I really appreciate that you stayed back, love you all for that. So this was yesterday evening, I just walked out of my office, I booked an Uber, like every day, and then the app showed me that the cab was six minutes away, so I patiently waited, and after a while I got a call from the driver. So the driver calls up and says, sir, I've reached your location, where are you? I said, oh you did? You reached the location? I'm standing right there at the gate, can you see me? I'm wearing a black T-shirt and a blue jeans, and then just I realized black T-shirt and blue jeans is probably the most common attire that you can see in the world today. So then I said, okay, sir, I'm raising my hand, can you see me? I have a black umbrella in my hand, I'm waving at you, and he said, yes, I see you. So he came all the way to me, he picked me up, I had a comfortable ride back home. So what did just happen? So I was there in the natural environment of the world, totally blended with everything else, similar people, similar cars, everything. Now there was one person of interest, he wanted something from me, or rather I wanted something from him, so he had to recognize me from a group of many other people who are very similar to me. So what did I do? I tried to be different, I tried to be prominent so that I can stand out so that the person or the driver in this case can see me come and pick me up. So did I use motion? Yes, I did. Did it solve my problem? Absolutely. So this is what I'm going to talk about. I'm Saptarishi Prakash, and I'm going to talk about motion in user interfaces of digital products. You know, I try to give it a fancy name by using choreography and all. So it's all the same, so don't worry about it. So a little bit about me, I'm a person with various kinds of interests, notably I'm a product designer. So I design products, I design digital products. I work for a company called Zeta, which is a direct eye company, and I'm a motion enthusiast, no wonder I'm here today. And I'm a passionate dribbler for people who do not know what dribble is. It's an online community where designers put their work, they share their work, and people get to see. It's a nice platform, do check out. I'm also an engineer, yes, and I'm a non-coder. I almost feel like a muggle in the middle of all the Harry potters. So how many of your coders are here? Can I see some raised hands? Whoa, how many of you are non-coders? Can I see your raised hands? I feel a little better. All right. So, so what did I exactly do with the Uber example? So I tried to gain attention of someone who was trying to see me, right? So gaining attention is something that we have been trying right from our childhood, isn't it? When you are in your nursery class, probably your parents would say, beta, you have to stand out from the rest of the people. You need to get the first rank, probably play some sport and win some quiz and competitions. Yes. So, seeking attention is naturally with us, within us. Okay. So I just read yesterday on the internet that a goldfish has an attention span of just six seconds. Really? I was happy that I do not design products for goldfish, but I do it for humans. Uh-huh. So humans any better? Could you make a guess? Well, I do not know. Let me not comment on the, um, attention span of humans. But one thing I can say for sure that the quality of attention that human beings give to something that is not directly profitable to him could be much less and that is very much valid for your digital products. So unless and until your user absolutely needs to use your feature and trust me, that's not going to be the case most of the times unless you have made something breakthrough and you're the only one in the segment who's playing. So have a look at this example. Assume this is your product. Left is what you're built. Of course, they know the text. Left is what you're built. And right is probably what the user sees because his attention is lower than usual. When you test your product, you see it this way. The one towards the left, but when a regular user sees it, he probably sees it this way. All that it gets to read is, okay, meal vouchers, fine, black and white text, black and white text, how it works. Okay. Another meal vouchers done. She probably closes your rap and you're done. All the meticulously written copy is gone to the gutter. No one has ever read. Now have a look at the version two of the same app. User starts with the same approach, reduced attention, keep scanning, scanning, scanning, not reading, only scanning. Then suddenly something different seems. It's not black and white. Something is moving. Oh, what is that? Let me have a look. He sees. Oh, something is moving. A nice cool animation. So what it could be. Let me just go above and read. Better. Yes. This is similar to the waving motion that I did to my driver. So in this case, your user is your Uber driver. You are the person building it and that animation is probably your hand. So I like to call this the blurry eye test. I mean, this is a very simple test. You know, you can just take out your phone, take out any app you like. Flipkart, Amazon, I don't know. Just blur your eyes a bit, deep focus, keep scrolling. You'll understand what is, what attention, I mean, what catches your attention and what doesn't really catch your attention. I don't know if it's the best approach to do it, but so far it has worked really well for me. So whenever I design something, I get the preview on my mobile. I blur my eyes. I scroll. I see is a particular element which is not seen even when I'm blurred my eyes. And do I really want the user to see it? Then I should probably make some changes. So this is one of the better tests which I feel for deciding the visual hierarchy of digital products. So that brings me to the next section, the types of motion. So I had gone through many, I did a lot of research in the internet before preparing for this talk. There were lots of different types which are found, but finally I thought I could categorize them into four different types of motion. First is transition. The word says it all. So when there is an initial state and when there is a final state, what happens in between is called transition. The real world is not hard cut. Like if I'm here, the very next moment, I cannot be there because that's not how it is. So why should it be like that in the digital product, right? Thinking. So that is where transition comes into play. If you see here, it's probably a list of cards. When the user taps on one of the cards, say the blue one, it expands, reveals some more information which could be in the form of text or image. And also it pushes the remaining cards behind so as to make space for it so that the user knows that okay, the other cards are also there, but this is in focus. And then when the user taps it back or clicks on the back, which is not shown here right now, goes back to the natural state, right? So nothing is confusing. The user understands the next type is feedback. Like feedback, again, the word is suggesting everything. Just like I'm talking to you, some of your nodding, some of your smiling, probably acknowledging to what I'm saying. So that's give me the motivation to speak. Okay, people are listening to me. So if none of you had given any sort of gestures, I probably think is this might really working? Are people able to hear me? So the same with digital product. Have a look at this transition. Probably the contrast is not making you understand. It's a list again. As you scroll, the tab at the top seamlessly hides. It goes for a simple motion and it hides. Then when you scroll it back, it comes back again. It's a very popular gesture. Can you guess which app has this? Many does. Any guess? Yes, Facebook does it. Now imagine the same thing happening without this transition. So there's no feedback. You would suddenly feel, okay, I attempted to scroll. Where did that thing go? It disappeared? Where can I find it again? But now that this is happening, you're absolutely sure, boy, that's there at the top. When I scroll, it probably will come back or I'll probably make an effort to bring it down. So that is feedback. Next is shifting focus. This is exactly same as what I did to my Uber driver. Waving. This is the UI waving to you. This is again a very common thing. It's used in many of the payment platforms because tapping is there are many chances of accidentally sub button being tapped. So a slider action is a better one. But now again, blur your eyes. Just imagine that thing which is moving there is not there. What is an average user likely to do? He'll probably tap because he doesn't read at the first place, right? So this thing kind of confirms that, okay, there are lots of other things. So I need to do this because it's showing that way. Now imagine what is the best thing that I could have done with my Uber incident? If I had the magic wand, I would just do, okay, God disappear every other human, disappear every other car so that I and the Uber driver only one present. I would just call my driver and say, boss, I'm the only one here, come and pick me up. But I don't have the liberty to do that, right? Just like the way I don't have the liberty to do the same in digital products. Certain things needs to be there, certain vital things. And there are out of those vital things, there are some more important things which needs more focus like this fight to confirm because this will probably trigger something, continue the payment and so on. And last but not least, my favorite ones, delights us. This doesn't really have any functional value. So many people would arguably say that, why do we need that? It is just a gimmick, difficult for the coders to code, agree, but we are emotional beings, aren't we? So we are not just practical robots who are using mobile devices and computers, but we fall in love with the things that we do and things which are delightful. So if I'm making a product for humans, why shouldn't I explore this area? And for all the people who think that delights us are not necessary, let me give you an example of this. A small example, but a big problem. A few months back, while I was working for housing.com as a product manager, we were coming up with a buying guide. A buying guide is nothing but a comprehensive guide with a lot of written text so that a buyer can read and understand the various jargons and terms which are associated with home buying. Okay, so it was mostly textual. A lot of it was pulled from the government data. A lot of it was pulled from the developers data and so on. So this is what I got. This was about the developer payment plans. I mean, people are not everyone is very rich to pay the entire amount of a house. So they pay it in installments and there are different ways of doing it. Don't go through the text, they are dummy. So this is how it looked. And I was told, bhai sabta kuch karde is code. This isn't looking good, show us some magic. Okay, so we were like, this was one of the sections which had the maximum amount of text. So we thought, is it necessary to read each and every word and understand what is happening? Yes. So if I do not show all the text and show just a part of it and probably describe it using something, will the complete work be done? No. Maybe a part of the work will be done. But is that sufficient? Yes, probably yes. If a person is so damn interested in buying a house, he will for sure go and read the in and out of all these laws. But can I do something to it so that the text reduces and a good part of the work is done? So I attempted and did something like this. So in this, we have a building because most of the payments are related to the construction state. And the construction states are determined by the number of floors constructed. And here in the bottom, we had a horizontal slider which had the different stages. So we just assumed that it's a five-story building and as the user swipes, the building grows, which kind of gives a sensation that the building is being constructed and we also show him the amount which he's supposed to pay. Work was done, probably. Was it delightful? Definitely. That brings me to another important thing. It's called After Effects. Many of you have heard about it. Many of you are probably scared about it because it's very expensive, because it's very cumbersome and it has a steeper learning curve. I agree to you to a good extent, but let me tell you something. You all must have heard about the 80-20 rule. I think one of the speakers had already spoken about this. So it's like 80% of the value is created by 20% of the employees and so on. I'll give you another interesting rule. It's called the 95-5 rule. After Effects falls into that. After Effects has lots and lots of things, but if you know 5% of it or around 5% of it, you will be able to do almost 95% of the things that is relevant to you as a product designer. Trust me on this. This is how an average interface of After Effects looks. I'm sorry. This is how the interface looks. Very cumbersome. Lots of things. You do not know what is happening. Looks very tough. You'd probably directly close it. But I just want you to focus on one thing, this. So here, these things are called keyframes, those small dots. The keyframes are nothing but pit stops which has information about the time and the different properties that it is storing. The properties could be, I mean, this is element. In this case, it is mouth. You see a girl there. It's the mouth of the girl. And these are the properties. So I have changed the position and the scale of the mouth. These are the values, how the values are changing. And this is T equal to T1. That is the place where the animation starts. T equal to T2 when it ends. So it's like, if I say, let the mouth be small now, then after one second, make the mouth big. So After Effects will do the transition and it'll show me something like this. Yeah, this is exactly what After Effects does. Trust me, this is the 5% of After Effects I was talking about. And I said it. All that you need to do is get comfortable with the interface, nothing else. A few tips and tricks here and there which normal Google search will do. Now there are lots of animatable properties, but I'm going to talk about just four things today. They are positions, scale, rotation, opacity. There are two reasons why I'm speaking about these alone. It's because you will be able to do almost 90% just a random number, almost 90% of all the animations that you can ever think of using these four properties. And also these four properties are very much browser friendly. There wouldn't be an extra load on your browser. Okay, let's have a look at this. This is a timeline. At T equal to zero seconds, I have a position. I have a rotation values given and I have a wheel. Then at T equal to one second, I change the X position. I change the rotation values. And now when I go back and play, you get to see this. Done, you have animated in After Effects. Wanna see it once again? As simple as that, right? Now, what is more interesting about this is, this is exactly how it works in CSS. Just that you define these states, initial and final stage in forms of code, but everything else, the fundamentals remain same. Have a look at this. Instead of a timeline where we define time or frames, in CSS, we determined that using percentages. So for a simple animation like this, an initial and a final stage is enough. So zero and 100%. So at 0%, this is kind of the lines of the code. I told you I'm not a coder, so bit of it. So left is 230 pixels, transform is zero degrees. Then at 100%, it changes. And then that is another value that you need to give for how, what duration you want it to animate. Then you play, you get to see the same thing. Okay, so that is another reason why more and more motion designers use After Effects instead of any other animating tool because it is very easy to convert into code. Now, have a look at this. You might have seen the wheel moving and you would say, dude, that's not how a real wheel moves. You know, it looks very computerized, like a abrupt stop, abrupt start. Agree, have a look at this. Is this any better? Little better than the previous one, right? So what is happening here? It's again moving from T equal to zero to T equal to one second, but it's not following a linear path. The velocity is not linear here. It starts fast and stops slow. That is called easy ease. Now, I'm not getting to the details of what an easy ease key frame is because that's beyond the scope of this talk, but here have a, this is how you can compare the two. Both are ending at the same time, but the top one is far more interesting and realistic because we try and mimic the real world. If in a real world, a wheel rotates and stops this way, in the animated world as well, it should be the same, right? So that brings up another interesting thing. Perhaps the one single element which makes any animation wow is spicing it up. And one of the most important thing is timing, the animation duration. How long should an animation be? So ideally here are some values which are found online. It should be within 400 milliseconds if it's a large complex animation and full screen transitions and so on. Okay, keep in mind that this is only for UI elements. If you're animating something like a wheel or a car, something which mimics a physical world, then of course the value should be different. This is only for UI elements which the user would perhaps go and interact later. 300 milliseconds for objects entering the screen, around 200 for objects leaving the screen. But having said all this, even after executing, you feel that things are not really up to the mark, probably they're slower or faster. Please go ahead and modify them and try and keep it within 50 seconds because again, you know, attention span. User would get really boring. I mean, you'll find it really boring and sluggish if the animation takes a lot of time to execute. And the second thing is timing functions. This is what determines the difference between the first wheel and the second wheel. You know, the ease out thing that I showed you. So here, this is the rate of change of animation over time. If it's linear, it'll be a straight boring thing same speed throughout, but that's what how real world is. So we try and tweak it a bit. This is how average animation curve in After Effects looks like. I mean, don't get scared by how it looks. These are just different elements. So analyze each of them differently and it's as simple as it is. To show you the graphs of the wheel, this is how it is. Linear versus ease out. Linear and ease out, right? Okay, got it. But now you guys have in your mind, how do you code it? That's again, simple, because you just need to include one more thing, the easing property in your CSS code to get that. And that is nothing but cubic busier. There are some presets which are set like ease out, but they are nothing but, you know, grouping and naming the cubic busier expression into something else. I guess you got a code as you know it a lot better than I do. But I'd like to tell you about this thing called cubic-busier.com. No, I'm not getting paid to say that. This is actually a wonderful place. So here, this is a screenshot of the website. You can go ahead and play with the curves, you know, and compare it with the different things which they already have in the library versus linear. You can directly play and see how the things are moving, decide, and then copy the expression directly from there. A very easy and handy tool. Trust me, this is gonna make a lot of difference to the things that you animate in your websites or apps. Now have a look at this. This is a practical application of what I just showed you. These are some of the excerpts from the CSS file. And this animates four cards, which just floats into your screen. Something like this. Looks good. Looks smooth. Well, this particular thing was done in After Effects. This is just for the sake of showing you. But trust me, this can be done exactly the same way in CSS. And I have seen it happening. I've seen my colleague doing it, okay? So this is cool. And when you place this in appropriate positions, in appropriate places, you end up making great products. Delightful. So that's all I had for today. Thank you. Patience. Hi, right off. So how often do you use the expressions in After Effects? You know, you can code actual data into After Effects. Yes, you can. So there are certain expressions which you can directly put into the keyframes. Now I'm getting into the details of it. So there's a place where you can write code which can simulate some things. Say you can make something shake or you can give something the bouncing effect where they're just like in physics. You decide what the amplitude would be, what would be the damping factor. You put all those values and you get the desired feature, which can also be manually done. So if you wanna make something bounce, you can always bring it forward and then again bring it back. But if you have a code, it's a breeze. Hi. Hi. Sorry, I'm still a little, what do you say? Slightly from yesterday's topic of performance, right? But can you talk a little about how can you use animations to enhance the perceived performance? For example, I make a backend request and it's gonna take some time to give me data. Till then, can I use animations to at least make it look like my product is fast? Yes, you can. I think, I'm not sure. Correct me if I'm wrong. Are you talking about the transitions? Yes. Of course, you can create a transition state which kind of creates an illusion which will make the user feel that something has happened before it has actually happened. Yes, that's possible. Are you doing it anywhere in beta? Haven't done it yet, but it's a good idea. I'll consider doing it. Any more questions? Hi. Yeah, nice talk. I had a question that once you do the animation in After Effects, how do you hand off the file to your dev? Well, there are many ways of doing it. One is you sit with your dev, explaining what all these values are, I said. From where it is translating, how much it is rotating, and your developer directly codes it, help him with the cubic busiers. You can directly get those values from After Effects, or you can use the source that I have told you. That is one way of doing it. Second way of doing it, if you want to reduce your effort, nowadays there are lots of tools which are available which can compress a video to a great extent. Great extent, you can't believe. You make a good looking video. You can compress it to the range of 200 kbs, which wouldn't even probably matter for the loading time of the website. That is another way. And with lots of smart coders like you doing cool stuff, they're making a lot of plugins. So there are plugins available, After Effects plugins, using which you can directly get a SVG animation file directly from After Effects. I tried it, it wasn't perfect, but it can handle all the four, the animated properties I talked about, not the complex ones. I think what you're talking is about a prototype where you get the look and feel of what it is. After Effects is not a prototyping tool, it's an animating tool. For prototyping, there are better tools available like Principle. Principle is a lot easier to pick up. I mean, within a span of 30 minutes, you can start, read about Principle, and also come up with your first prototype. It is that simple. So Principle is perfect if you want to see how it feels when you actually interact with your product and how it functions. But a lot of complex stuff, it's difficult because it's not optimized to make a video file or get all those values so that you can code. But in After Effects, having said that, in After Effects, you can always create a video for any kind of interactions, but that will just be visible, not interactable. As you mentioned, After Effects and all these tools for animation, you have given a lot of solution for web. And if I want to ask about mobile, for example, if there is a designer telling me that this is an animation, which I need to do on mobile, I have the framework, for example, core animation, I use key frame animation and all these things. So my challenge is, I feel that when I'm doing the animation, sometimes designer don't tell me that how it is going to, what are the properties or what are the timings on each tablet or all the different kind of devices. That is my one question, that how I can talk to the designer so that he can help me. And the second is, is there any tools like you showed on CSS and all these things that we can use in mobile where they can tell me, I can know that what is the time and duration, transformation, property, rotation, whatever it is. I think if I've understood you correctly, you're talking about, is there any way to figure out all these properties from say the design file, the video, or the GIF your designer has given me? I do not know if it is there, but if he's an in-house designer, I think the easiest thing to do is to sit with him and get all those values. Because if you see something is translating and rotating, you know that there are two things changing or if you see the opacity reducing, you know the things which are changing. So all that you need to get from your designer are the exact values from what time to what time, what should be the easing curves and what are the values. I'm not sure if it exists, or rather let me say I do not know. Is there anyone in the audience who knows if any such tool exists, say where the input is a GIF or a video and you get all the properties out? Okay, so I'll try and find out. It's an interesting thing. I'm sure somebody would have attempted to make that at least. So yeah, that will make our life really easy, right? Any last questions? Time intensive, isn't time needed to build it? Yes. Speed hacks, there are a few things. You know, the reason animation takes time that there are two things again. One is the composition. Once you know what you are gonna build. Okay, I'm not talking about UI right now. I'm talking about some cool movie like the cards floating in that I've showed you. The thing in which a designer would perhaps spend the most of his time. First is deciding the composition. Will there be four cards? How would they come? Would there be an offset of timing between them or how quickly or how slowly they will come and so on? And the second one is getting all these times those bezier curves, right? Okay, so the first thing, I don't think there's a hack because it's about movie making. So you get a concept. If you can execute it well and good. The second part, yes. I have told you some standards already. The times, if you keep the motions within that time span, you need not have to spend time on experimenting what the right time is. Or perhaps the cubic bezier curves that I have said, if you can use one of the existing one, the presets, which would be a decent job, but might not be exactly the way you want, but it'll still look good. So in that way, you can save time again. So if you ask about hack, one thing I can tell you, an ease in ease out is probably the most comfortable to the eyes. It starts low, gets a little bit of faster, and then again ends slow. And the curve looks something like an S. So if you go to this website, this is an S actually, ease in and ease out if you see the one at the bottom there. So you can further plain exaggerate this curve also and get the cubic bezier values. This should work for most of your cases. I mean, this will look good. Great presentation, I should say. And in fact, the slides were very informative and well done. Just wanted to know, do you have links to the slides? I want to go through them. Links to the slides, are you guys going to share it somewhere? Okay, they're going to share it, I guess, right? Okay. Okay. I'm sorry, we're out of time. That was the last question. If you could please allow that. That's good for the audience. I'm done. So there are different plugins which you can have in the After Effects files. For example, there's a plugin called Squall. What it does is basically when you install Squall and have your animation built up, there's a small window in which it generates code for every layer of asset for that particular Bezier curve that he has drawn in After Effects. So you have the exact code of what is there. Similarly, there are others available for Android and for web as well, like CSS Bezier. S-Q-U-A-L, Squall. And for SVG animation, the plugin that I used was Body Movin, P-O-D-Y-M-O-V-I-N. It's not perfect, but it does what it says. You can try it out. Thanks, Aptarshi. Thank you.