 A lot of this time is theoretical. In terms of how psychology has an impact on design, anyone. To some extent we can create layouts, we can create spacing, we can have colors, we can have white space. But when you design which is a certain point, it tends to touch a subconscious level. At that time the users they form assumptions and they have impressions based on them. They are not necessarily conscious decisions. They are at a subconscious level and they don't have a Gutenberg theory. Anyone else? Based off him. So, Arnav said if you are rapidly using the macOS system, it irritates you. So if I give you an iOS tab on Android platform, perfectly comfortable with it. How many of you like the bottom tabs on Google Plus? So Google Plus has introduced tabs to the bottom. This is an iOS design pattern. They are experimenting with it on Android. 80% of the feedback they received was negative. Why you bring an iOS pattern to Android? It's a psychological impact. It doesn't have a real usability impact. In fact it's easier to use because the tabs are easier to access. But it doesn't fit with the rest of the system. So coming back to the Gutenberg theory. So Gutenberg theory states that if you draw a Z, the alphabet Z. So from the starting four points where you touch the vertices. That is how you just look at any screen. They start at the top left. Then they go to the top right. The bottom left and then the bottom right. Now again, this is not something they consciously do. It happens at a very subconscious, primary level. Color theory. Everyone knows color theory? The theory that colors certain emotions behind them. Red is excitement, blue is reliability. Again, not a conscious decision. A subconscious one. UX metrics. How do you say your app has a good UX? So if your app needs your expectations from. Anyone else? Does it keep coming back to it? Anyone else? Is there anyone who has a Google's heart system? You have a system called H-E-A-R-T. It basically measures UX in terms of happiness. So when a user uses the app, it's not just about function. It's about making the user actually happy to use something. It's about engagement. Like someone says, it keeps coming back. So about adoption. What makes an app stand out from its competitors? If two apps are doing exactly the same thing. But one has a phenomenal way of doing it. One has a very basic way of doing it. Adoption factors. Retention. What if your screenshots are going to be player amazing? Your description is amazing. But when I download it and I use it the first time, I don't come back. Retaining is also one metric for UX. For example, if I'm going to create an email. In email. What revolution brought about the floating action button and material design? You have to create an email. Every time you open the app, it will reach all the way to the top of the screen and click the email button. Now with phones like in XS6 coming out, it's really tough actually for a really simple task. Again, the floating action button was introduced just to improve UX. Now, another thing that users subconsciously do is deform a mental model of an app. They don't know they're doing this. But as they use the app and as they have interactions with it and as animations play and as colors present, they form a mental model in which they have a certain idea of where things are in an app. How things will react if touched. What things act in certain ways? For example, if you have a list of cards. Now on Google, Google Plus, you have a list of cards. You also have the same kind of cards in the notification zone. One of them swipes and one of them doesn't. The user is expecting both to swipe because they're the same type of thing in the same app. Priority in the user's mental model. How many of you have been actually been interrupted by an alert dialog or the interstitial ads that come up? You know, you all love ads. I mean, as a developer, as users, priority. If you have something in a mental model right on the top, for example, the alert dialog, when you fire up Google Maps, it tells you to turn on GPS. It's right at the top. This is the highest priority item. Hierarchy. You have the navigation role. Now, if you read the multi-designed guidelines, you see it's at the highest level even above the action bar now. Again, this is something commonly used in the mental model because if you have screens within an app and think about it not as from an app, if you have sheets of paper and you have something that is higher than all of them, it's from one that you go to another, not from from the smaller ones that you go to the bigger ones. Pre-lawly pop, the navigation role was below the full world. And that didn't work psychologically because it didn't make sense going from a lower level to a higher level and then back to a lower level. It doesn't work. Structure. Again, this comes this comes under navigation hierarchy and expectations, which is how I work with cards in Google+. Can you tell me now, mental model is a form of an app? Any app you remember using, which you know needs your expectations and you think it has a phenomenal UX for one answer? Okay, what do you like in Gmail? Have you ever predicted something and it has happened? Okay, what makes you predict so I could delete? It's a subconscious level, right? So, Cortana wants to listen. Slide, delete. Can I keep app examples flowing? Apps which have views which have met your expectations and which you think have a good UX, but you can't pinpoint why. He said Gmail because it has 5 to 6 predicted. Anyone else? Okay, what about a delete of so much? Okay. Okay, you like to delete for Reddit? Anyone else? Timely is good UX. Now, let's go closer to that topic that I'm going to give you an example. There's three axes in material design. Now, before material design, when we had hollow and droid design styles, they also run along the X and Y axes. Now, this, it worked for many years, but then when apps got more complex and there's more navigation, there's more hierarchy within them, it doesn't work because you have different hierarchies, different priorities. You need a more complex structure and all you have to do is the Z axis, which basically, yeah, this is something like this. The Z axis works on a 3D scale and it introduces a material design world where we've got the Z axis along with it. So, basically on our phones with on our hands, we have a material design world that world doesn't have this height, it doesn't have this length and breadth, it has height and objects can lay along the Z axis and they can have different thicknesses, they can have different elevations in the world and it worked, it made apps more complex in a good way, not in a bad way. For example, if you have the navigation drawl, even in hollow, it used to have a small shadow on the right side of it. It felt right, nobody knew why that time. Google is recommending in the guidelines, there's a nine patch, just throw it next to the drawl. It was right there in the guidelines. People followed it blindly, but they didn't think why are they doing it. There was a hint of it back then and there were levels in the rest of the content. So, you actually made it concrete. Now, again coming back to a subconscious level, what do these axes actually imply? The X and Y axis, let's take tabs. Tabs in Google Play, tabs in Newstand, they're all on the X axis. Right? Any other pattern you've seen lies along the X axis? Okay, u-pages. I'm not talking about views that lie along the X axis. We have u-pages and tabs as an example. So, excuse me. Slide, right? So, elements tend to be ordered on the X axis. They usually have, they present to the user the image that they're at the same level of priority. The same works for Y axis, but the Y axis also works in terms of as you swipe, either it becomes older or it goes to a higher level. But the Z axis actually makes it complex, because the closer you are to the user, the more higher priority it is. That's why when the floating action button gets the highest elevation of the entire Android system, because it's the most important axis to come with. So, animations, animations have been around for a long time. Right? Does anyone remember when web animations came into play? Early 2000s. CSS 3 has made it a lot more, but web and JavaScript animations were there since a lot longer. Animations have been around for a long time and if you bring animations to the Android platform, then to improve the sense of hierarchy that the user has in the way they move, the speed they move at, the way they move and they stop, and they move again. But that all doesn't work with material design. Let's take a quick example to see what I mean. I mean, we have seen this on there was this animation making around on Google plus a while back. Anyone come across it? Yeah? So, you have a floating action button there. You have a toolbar. Does it work with material design? Someone thinks it's funny. Can you tell me, does this animation work with material design? Would you use it? So, you are saying no, but then why? It looks pretty and got a lot of plus ones. Does it make sense? In the world of material design, yeah, okay, someone mentioned about action colors. Is that the reason wouldn't use it? I mean, you could just in the color and use it. Would you use this animation? Yeah? So, you know, think about it this way. Material design, the world exists in two elements, paper and ink. Can paper actually contract, come a random shape and then again go and form a square. Elements are paper and text and icons are ink. So, can paper actually do this? You can do simple morphing. You can do this level of complex morphing and actually go and bounce on top. No, it doesn't fit into material design. Again, you have a floating action button. It looks really amazing in the animation. Most users would be delighted by it. But it messes around on the subconscious level in which yellow color paper which composes floating action button comes into ink, cripples the ink. Again, it doesn't work in material design. Why it may be delightful? It doesn't work because there are subconscious complications. Now, what then what exactly makes you can't just say that, you know, if paper stays paper, it makes material animation. There are two more things. There are other physics in the material design world. Now, when my Google design team introduced the material design world, it was not just about paper and ink. It also had physics in it. Now, can I get a new wife? What was the point of adding physics to material design? It feels nice and used to it and sense of it. Basically, what happens when a user opens an app or a new design language, there is a learning curve which they take to actually get familiarized with it. The design elements in the learning in that language are similar to the real world which you interact with every day. It makes things a lot more simple. Learning curve is reduced a lot and everything is easier to adapt to. So, if three animations are on the same floating action button, the one which works and which doesn't. If you tell me what, you can't just say third one, first one. Which doesn't work? Who said segment totally doesn't work? You know everything. These are motion and video objects. Interesting. What if the motion was not there? What if it was in a view phaser? Swiping the view phaser and then this icon is swiping here. Would it work then? Is it? You have a sheet of paper and you have ink on it. Can ink slide off the paper? Is it working? No. I'm choosing between the first and the third. Which of these don't work? Material design program allows that. But it doesn't allow ink just going away out. Ink going and coming is fine. But it can't slide out of its constraints. Ink can't take different shape. That's how icons are made. So, first and third one both work. This is where the delight factor comes into play. Both these animations are perfect for use. In fact, apps use both versions. Very few people actually go through the pain of creating that. Because it's a process of going in after effects, creating a frame animation, getting 60 PNGs and then very easy Java will be a little bit complicated. So, this is where the delight comes into play. Both animations work. What happens is you will see that I'm morphing the first time. You're going to want to know how it's done. You're going to know exactly that the pencil changes to a tick mark. So, it tends to press it a couple of times. And if something delights the users in an app, if, for example, someone here loved the timely implementation of changing the time. Some people, any one else, anything that's delighted you in an app, I like timely's background. It's really amazing. Yeah, people love that. I remember people were furious when Google said that no, it's not allowed. You have to put the navigation bar above the toolbar. People were actually furious and they were rebelling that, you know, because you just want to see the animation or the sales one, right? And see, another thing is, as a developer, you cannot just say that it's an app by Google, and if I copy them, the design is perfect. Because the spec sheet is what is right. That may not always transform into perfect applications by Google, because there are a lot of different teams working on it. And these teams like to experiment with things. Like, for example, I mentioned the bot in tabs in Google+. They don't work. They're absolutely against monthly design guidelines. They're against like two experiments. You cannot use Google apps as a benchmark. If they do it, I can do it. For a long time, Hangouts, how many of you use Hangouts? How many of you remember, for a long time, it was half hollow and half material? And what a disaster that was. You cannot use Google apps as a benchmark for that. So, okay. He mentioned the hamburger to Arrow Animation. He mentioned the Henry. Anything else that actually delighted you? It could have been done simpler, but people took the pains to do it in a more delightful way. Any memories? Okay. WhatsApp's attached button. Yeah, that caused an amazing evaluation of the efficiency. What? Okay, what does Evernote do? It morphs into a toolbar, right? It morphs into a toolbar. Evernote does that? Inbox does it too, right? The same thing. So, Evernote actually, the reason I confused it was the floating action button. The paper morphed into a toolbar at the bottom with three options in it. And also, people love the language. Any other apps? Some of the loves to experiment way outside constraints. How many of you have used Nick Butcher's Plaid application? So, a few? Yeah. He's pronounced Plaid. I mean, he's British. Nick Butcher's Plaid application. Then he used it. How many of you know who Nick Butcher is? He was in the Google Plus post the other day wherein he takes a search icon and when it's clicked, he morphs the entire X3G into a search line with the text field at the bottom. Now, he was mentioning in a podcast that it took him three whole days to do that whole, you know, take the whole process from creating an after-the-peg camera to a Java animation for better performance. Now, it wasn't much of a difference because it's like a basic 300 millisecond animation, but it's very delightful to the extent where someone went and made a library out of it. An entire Android library just for that one view. So, it's to text field. Does this animation work? Yes, no? Would you implement this animation? I think I have to ask that before I ask yes or no. Would you implement it? I'm talking exactly like this, no modification. Would you? Okay, just take, for example, the few pages swiping. Would you implement that? We have many yeses and you won't know. Why? I'm just talking about the swiping animation. Would you put it in your app? Yeah, so that's, some people have got it right. Paper does not bounce. See, this is the bouncing interpolated variant. It's a little overshoot, and it comes back to the original position. It's a very small thing, but doesn't conform to guidelines. And what are, like, on the side, an app goes outside the constraint. The Xn variant is painfully visible. It doesn't provide a good psychological impression on the user. What about the circular reveal? What about that? Perfect, right? Everything about this perfect? There are four important, it's okay, I like Tumblr too. There are four important things that come up, important factors that come to mind when creating animations of material design. First of them is the oration. Animations can either be too short and then there are early distractions. Or they can be so long to the point where you keep your phone outside and you do something else and the animation is over. Now, give me random animation times which you would use, as well as the implemented animations in their app, right? View pages, Xn animations, Java animations. What animations do you use? 100, 300 milliseconds. 500 milliseconds. 800. I can download an app on a 4G connection in that much time. Anyone else? How many of you have implemented animations 300? Okay. I'm taking a step back and then now what do your animations have used? 300? Yeah, so everything goes 300, 400, 500, if something feels right. But then since API level 3, Google has provided three default values for animation long, animation short, and animation medium. There's API level 3, but then half people don't know about them. Why go to the extent of trying testing something that feels right? I can already add it into the API. Doesn't make sense. Now, let's look at one quick animation. I found some material out. It's really well done. Is the timing right? The drop should be really much faster. I mean, it takes too long. It doesn't feel right. How much milliseconds drop would you apply on this? If you were implementing this animation, what duration would you do for the drop? This is the point where you say you've just described the three operations, and I'm going to use the short one. How are the medium ones? But use the default. Origin points. Now, on material design, obviously you have fading and fading in and fading out. But things tend to seem more natural when they come from a certain origin. How many of you watch the material design real shown on IO? Material design real shown at Google IO 2014. You can reduce material design. Really? You didn't watch Google IO? It's an interesting event, check it out sometimes. You have an action over there in the corner, and then you have a card that appears because of your action. Again, this is a delight factor. I can certainly fade in the card when the thing is clicked. But if you actually make it grow out, it makes the user know that it's coming from there. It's directly related to the action. It has a sense of structure around it. It's not just appearing randomly out of nowhere because somewhere else was clicked. It's coming from a point of origin. Another quick example. Have you seen this animation? Have you seen this animation? Someone said error, right? Someone said error, right? Yes, red switches look wrong. There's another point of origin. The point of origin of the animation. How many of you use the clock app on red? It has the crossfade in the background. You know, when the time of the day changes, the background color changes, the crossfade that matches the time of the day. You could have used the crossfade animation where it would have worked perfectly. Wouldn't it? How many of you have dialed a number on an Android phone? Simple questions. Everyone? I'm still not getting anonymous ears. For those of you who have not answered, the phones of a modern playing can be curious. When you dialed a number on an Android phone, you have a blue color coming out from the contact where you clicked. It makes a certain sense because you can't have the red color coming from the center. It doesn't make sense. It doesn't make sense. But if you have it from where the touch action originated, it tells the user that this is the contact I clicked. Even if a few milliseconds later, the user realizes that I was looking somewhere else, but the animation started from there. You realize you dialed the wrong number by mistake. Right? I'm not getting anonymous answers here. You feel that this is an original opinion on this? It wouldn't work because the point of origin animation is really important. Telling you what triggered it and how it's going to react. I'm not going to use Google Play games. No, no Google Play games users. We have like four or five. So when you take an avatar, let's take a step back to the real world. Things where you're going from play, this is not involving Bangalore traffic. But if you're going from place A to place B, would you go in a linear fashion? Absolutely straight. Again, Bangalore traffic does not factor in over here. That's just a nightmare. Would you go linearly from point A to point B? As the curve lies, really, I mean, through buildings and everything, you're in, right? You're never going to take a straight path from point A to point B. Things in the real world, and even if you do, when I was walking to the other side of the stage, I would not take an exact straight path. Like in all, I would vary a little even if you send the meters off. When objects are moving from point A to point B on the other side of the stage, when objects are moving from point A to point B on the screen in material design, having them move straight across the screen doesn't seem natural because I don't know how objects work. But having them move around a parabolic path, something like this, if you have your Android phones out, fire a Google Play game and click on the avatar over there. It was a really beautiful animation. The avatar moves from one part of the screen to the next screen and follows the parabolic path. Now again, this is about to come and transform me to material design. Animation on a straight path will work. If you wanted to fit the rest of the system, wanted to feel constrained with the material design world, and you want to make it seem natural to the user where they have a slow learning curve, a fast learning curve, this is what you need to do. How many of you have heard of interpolation? Why? Again, I come back, how many of you have implemented animation in your app? Have you seen the Java class for adding interpolation? Have you seen the Java class for adding interpolation? And if you tried it, and you have not tried it, it will be one honest person over here. He is going to try interpolation. So interpolation in mathematical terms is about creating a new set of values within a given set of ones. How does this apply to animation? Now if pure driving, come back to the real world, this is where material design finds all its rules. Pure driving a curve from point A to point B, at a constant speed, throughout the journey. At the same time, if you see, you are watching a movie, and you see an actor coming in, is he going to slow down and start the screen and then speed up and then again slow down towards the end? No, he comes in linearly and then slows down. What about someone walking off the screen? Does this slow down as it is the end? No, they start, accelerate and then go off linearly. Let's look at how that applies to animation. Now, that's how linear animations look and that's how monthly linear animations should look. Does it not feel more natural to have its speed and then go this is what interpolation is, basically you have certain values. Animations are made up of keyframes, you know that, right? Keyframes are certain states within the animation itself. If you just shuffle those around a little and make it accelerate and accelerate at certain points, it makes it seem less linear and less robotic in nature and more natural in tandem with the real world. Again, I don't see people agreeing with this. Do you like to do the red one? Do you like to do the green one? Anything else? Are you sure? What about this? The screens are not slow, not smooth because it's disappearing over there. So you want it to slow down towards the ending. So you mean if I was exiting this hall, if Karthik puts off again, I think I'd have to. If I was exiting this hall, would I slow down near the door? I mean, I'm not hoping someone calls me back but would I slow down? I won't slow down, right? This is how views work in material design. I'm not going to slow down as they enter in the frame because they have no reason to, they're going away out. This is seen as it is. What about... Now, just because it's red doesn't mean it's wrong. What about this as a wrong? I think this is your place. Can you see the slight curves over here at the bottom? It's not a straight line. That slight curve is where this slows down towards the end. This is totally wrong because views do not go to the end and then slow down. If you see that the phone is lagging, which is a really important thing. We do not want to have phone... One of the worst user experience for a phone will drive a little bit. Would you implement a design like that? You would. Would you? Green is preferred because the green is the right animations. And red is wrong. I talked about color psychology in the beginning. Yeah, they are different. There are four different animations over here. Okay? How many of you have worked with Lollipops API? How many of you are still working on Zingerbread API? Is there a lot of fun? Lollipop APIs? Are you out of activity transition? They were there earlier also. There were two deconstructs, right? I mean, you had Zingerbread design, the activity would just move away and the other one would come. And they were a little better in KitKat, but not really good. But now coming to Lollipop, when you have everything in a paper and ink world, can things just appear like this? Can you have a transition that does not work? What is the default animation Lollipop? Anyone know? You open apps all day, right? It slides up in the bottom. Anything else you have noticed? Okay, it looks like there are high levels in the Lollipop. Why? And it has not configured any animation. The default one comes up in the bottom and looks slightly higher because the one in the background fades a little bit. So in that phase, and this comes out with the shadow on top, it makes it look like there is a higher level in the hierarchy and the previous one is sinking behind. Now, this may not be very significant, but you have noticed it, right? Because the new one is at a higher level in the hierarchy. It's more important. And the old one is gone. It's in the past. Can activity change without an animation? If you go to override and provide another value on override pending activity transition, would it work? It would work in Java. Would it work in design? Can you have a sheet of paper with ink on it to randomly transition to any one without any form of visual resistance between the two? Yes? No? What about shared elements? How many of you actually implemented them? None? One? Really? Two? How many of you have seen them in action? The rest of you have not seen them or do you not know what they are? I'm not getting any answers. Right? So if you would rather not code it? Yeah. Yeah. So you guys realize even if you don't answer, you cannot go and watch Star Wars tonight, right? It's not launch in India. You have to be here for the next sometime. That's another interesting thing happening outside. Shared element transitions provide every one of the guestiles principles. This is something called visual continuity. If you just see an action, for example, as I mentioned, there is a button coming in on the menu and then going to the scooter to discard the button. Imagine there is not there, and the user for 300 to 400 milliseconds looking at some unrelated animation. Like I mentioned before, there is an activity transition where one is feeding and the other is sliding up, but is it related to the items on the screen? If you have a shared element, something is actually changing position with respect to new places on screen. Google Play. Is there any news Google Play, I hope? Or are there some rebels using Amazon App Store? From Google Play, when you click on the item in the grid, the icon comes out and becomes a little larger and the things are fading. Now, it's a sense of continuity because otherwise you would be looking at a screen coming up from the bottom and the entire bottom space would be wasted. The user would look away. When the icon actually fades, the user is so busy looking and they don't realize the rest of the content is loaded around it. The contrast is a little bad, but yeah, you have a whole list of roles. Phone app. When you use the phone app, you see when you click on the item that comes up a little bit, shadows around. This is kind of what it is, the only thing is it becomes a new activity. The entire road transitions to a new screen. Otherwise this is a busy continuity, right? It's not just a random thing coming up from the bottom. It's directly related to the previous one. Okay. How many of you have seen the code in the video? The multi-design, infamous one? I think it's what made me before in love with material design. Has anyone not watched this before? Everyone watched it, right? Now, okay, shared elements aside, you notice anything in the fab when it transitions to a new screen? Okay. How many things that I talked about today do you notice in that? Someone's a parabola curve. Interpolation. Do you see it slowing down towards the end? It slows down as it becomes part of the slider. What else? Okay, mopping. What else? Start from the point of origin. Okay, what else? Nothing else, you notice? We take straight there. This is the capital of material design animation. Everything that is right about animation is implemented in this few milliseconds. What else do you notice? We are fading, we have interpolation. Does it? This is really important fact. Does it change? I mean, the floating action button is at a higher level. It just slides down. Floating action, which is at even higher elevation, that slides over it. When the fab transitions from one place to the other, it maintains this z-axis. Because what does the floating action button signify? The most important part of the screen, right? So when it becomes a now-playing section, it's not a fab anymore. But it still maintains the fab elevation because like I said, it's the most important part of the screen. Sure, I don't know how it looks pretty, but yeah, now-playing is important. As I said in the patroling, in Google Play games, if you notice, you have the avatar transitioning. Parabola curve is perfect. But there's no shadows over there. So you have two sheets of paper. You have a circle, which is moving from one to the other. There's no shadow. Theoretically, can the paper do that? It's elevating above sheet one. There's no shadow. Then it is the parabolic curve for the new one. Right? Take away from this. You need to ask yourself when designing. One more point. How much time do I have? Five minutes? Okay. I have one minute to describe this. This is very important. I think it's looking at the watch. Please say it's beautiful. Is it? Come on if you don't like it. You don't like it? Okay. Is it useful? I mean, how pointy is it to animate an icon? Even if it's not long, it's animating an icon. And it goes on animating. This is not design. This is art. What about this? You have a relatively long thing happening. The thing is transforming. Is it pointless? All the while you're doing this, the fingerprint in the background is authenticating a fingerprint. If you're trying to see an animation, it's not pointless because it's not blocking the user from interacting. It's doing something in the background. So if you find the right balance between good animation which is actually useful, but not to the extent where you really imagine it, imagination take over and becomes totally pointless, with hampering the entire user experience. So... Let's keep all this. Feel free to get in touch with me.