Transcription
Welcome everyone. So today I'm going to talk about emotional and functional UI animations in react. And my name is Elisabeth Oliveira. I'm from Portugal, Lisbon. I was born in Mozambique, half Portuguese, half Mozambican. And I'm a senior product designer. Currently I'm working for the Elastic UI team. It's a design system in use at Elastic. And today the agenda is I'm going to talk, first explain what is the UI animation, then why is UI animation important, how can we create animations in react. And in this part I'm going to show a few examples with code and then just final thoughts. Sorry. So what is the UI animation? It's basically the process of adding motion to UI elements. Also it helps reduce cognitive load and the cognitive load is the amount of effort that users experience when they want to do something. Also the UI animation adds personality and charm to an interface and also it helps overcome language and culture barriers and interaction design. And UI animations, they can be functional or emotional. Functional UI animations is basically the ones that can improve the UI by providing visual feedback. It improves usability, provides feedback on user actions or also can provide feedback when the states of application changes. And the emotional UI animations is basically they can delight the user. It's a way so you can connect your brand and the user, if it's done properly, the users can have more memorable experiences. But why is UI animation important? First they can provide a more natural user experience by simulating the experience of interacting with a physical object in the real life. Also it can reduce stress by providing real time updates and feedback. And also it can make your UI more fun and engaging. And how can we create animations in react? Yeah, you can use just pure css with a framework or just style.css, Sass, LESS. For my demos I'm going to use Emotion. And also you can, for more complex animations, you can use animation library. And for the demos that I'm going to show afterwards, I'm using Frame or Motion. So let's see the examples. This is like my blog website. And at the end of the talk, maybe in the afternoon, I can share this post. It's not yet published. But the idea is I'm going to show the animations here. So this first example is a functional animation. And it's a functional animation because it provides a user feedback. Let's imagine that I could have a button like this. No styles, anything. And on over, without any user feedback, it will be strange. You wouldn't know that you could click. Only the cursor is changing. And in this one, I have a better user feedback. So when I hover the button, it gets darker. And the button goes a little bit, it slides up. So this is a good example of a functional animation. And it's really easy to achieve that. I'm just using css. And basically on over, I have this transform translate y. That is basically saying that I want the button to go one pixel up. And then I have this transform with this duration of 250 milliseconds and a timing function of easy out and no delay. And now I can show a different example. In this one, there is a button that shows a line on click. And you can see, imagine this could be a nav bar. Without any animation, it will be weird. Because maybe you wouldn't see, like, when clicking or on over, speaking, nothing would happen. Actually, in my computer, this is pink. And there is a swing like purple, but it's pink. So when you click, this is the animation. We have this line that expand. And to do this, also I'm using... So I have this demo component where I'm passing the exact state for each item. And then I have this button line. And in the button line, I'm using an svg here. And this svg is basically the line. And then I have this css animation where I have this expand animation that happens in 0.3 seconds. And it has this timing function called ease in. So basically, the expand... I'm using these keyframes from Emotion. But you could do the same with normal css. And I'm basically animating from to. So the width of that svg. So it starts... When I don't click, it goes from... When I click, it goes from 0 and to 100%. So it's also very easy to achieve. And it's good user feedback. Just user notes. Right now, I'm on this page about... And then this is a more complex animation. So for this example that I call a bell ringing in a header, I'm using Framer Motion. And when I click, so the bell rings. And I'm using this button. But in a real world application, this state to animate it can come from, I don't know, api from your database. So basically, you receive a notification. And the animation should trigger. So I'm using Framer Motion. And this animation is a little bit more complex. So basically, with Framer Motion, you have these components, basically almost like styled components. So in this case, I'm wrapping the icon with the span. So what I do is motion.span. And then I have multiple variants. In this case, I have two animation variants. One called active and the other called inactive. So in my active state, I'm basically what I want to animate is to rotate, transform rotate. So in my inactive state, I just want to say that I want to rotate zero. And in my active state, I want to rotate all these array of different degrees, zero, 30 degrees, minus 10, 28. And I just give random numbers because in the real world, a bell, it rings randomly. So it's what I'm trying to mimic. So I have these two variants. And the active states, as you can see, I'm going to call that array of degrees. But in this case, if you notice, this animation is very frenetic. And we cannot forget that we have some users that can have some disorder and things like nausea and vertigo. It's called vestibular disorders. So in OS X and other operating systems, you can have this and that is part of the accessibility. You can click to reduce motion. So when you reduce motion, and if I click, nothing happens. Because right now, the user has that option enabled. But if I disable the option, it's animating again. So with Framer Motion, even with pure css, you have a media query called preferReduceMotion. And you should use it to check if the user has that option enabled or not. So if the user has the reduce motion enabled, you shouldn't animate. So I check what I do is I use this useReduceMotion hook that comes from Framer Motion. And if the user has the option enabled, no rotation happens. If it is disabled, it goes through that array. And this is very important to do. And then the next example, it's a functional but at the same time, emotional animation. And this one I got inspiration from Josh Kamau's website. I think when I first time I went to his website, and I saw his blog with this cute heart, I wanted to find out what he did to achieve that. So I tried to do something similar. So in this example, I have two components. The first one is basically where I have two states, the user likes. And the other is the total likes. So the total likes is this one. Currently it's 117. And the user likes 1, 2, 3, 4, 5. And when I reach 5, I don't allow users to click anymore. So I'm passing those two states to the, I'm calling this component love button. And I'm using Framer Motion. And there are multiple things happening here. The first one is onOver. It gets the eyes change and it gets bigger. So basically to do that, I'm using this react onMouseEnter and onMouseLeave. And I have this state isOver. And when the mouse entered, I set the isOver state to true. And then I can just with svg change the eyes. If isOver, I show one pet with some eyes. If it's not over, I show this arc eyes. And then there's another animation. So when you click, you can see these emojis here. So to do that, I have this array of emojis. And then I loop through that array of emojis. And then I check. So I just want to allow that five likes. So if the first like, when it's the first like and this is the first emoji in the array, it gets visible. And then it animates with one of the variants, the visible variant. That is basically showing that emoji going to the top. So this is the visible animation. So basically, I'm using, again, a translateY and some opacity. So in this case, it goes from 0 to 16 and then from 16 to 32 like this. And then I have some opacity. It goes from 0 to 0.8. And then it disappears, 0 again. And then there's another animation that is basically the button is getting filled out with this pink color. And to do that, basically, when I designed this, so I'm using a mask. And the mask has this heart shape. And in the mask, there is a square. And the square is pink. So right now, that square there is pink. It's on the bottom. And when I start clicking, that square is starting going up, up, up, up. So every time I click, I'm just basically translating that square. So the 0 position actually is 42 pixels. It's here. It's 0. It's here. So I want to make that square go to the 42 pixel. So when it's 0, right now, it's in 42. When I click again, it goes to 32, 24, 16, 8, and 0. So this was the example of an emotional UI animation. And then this is the last example that I'm going to show. And this is a search bar with a planet that animates. And I used this animation with one project that I did with Sara Vieira a few years ago. It's basically, is there a Hoover in? And the idea of the project was to check in any city of the world if you could have Uber. So because the website was so empty, we only have input there to search for the city. I had this idea, let's just put a planet representing the world and the planet could animate. So the idea is when you start writing, it animates a little bit. If you click, it spins. And also, you have the eyes and the mouth that animates with a set timeout. So to do this animation, once again, I'm using Framer Motion, also using Use Reduce Motion. So if I click again, the animation doesn't happen. It doesn't spin because I think it's too much. So in this case, I give this option for improve the accessibility for some users. So to do that, I have this component demo. And in that component, I have three states, isSearching, isSearchComplete. So basically, when isSearching, the idea is it goes from 0, 5, 0. It's also rotation. Minus 0. And when isSearchComplete, it just rotates completely. And when it's not searching, it just rotates 0. And I'm using the Use effect just to check the states that comes from the parent component. So if it's searching, I have this another state called PlanetAnimation. And so if it's searching, I set the variant to searching or isSearchComplete or isNotSearching. And then that's basically what happened. And then for the eyes and mouth, I don't need to use any variants. So basically, I'm just animating the scale Y. So basically, it goes from 1. This is example of the mouth. So the mouth is completely open. Then it closes to 0.1, and then 1 again. I'm saying that I want to repeat this animation multiple times, infinity times. The direction is 0.3. Let's imagine if it was 4. It will take some time. So let's put 0.3. And we lowered this component, the 3 seconds delay, and then every 5 seconds, the animation happens again. And so this is the example. And I have 1 minute. And this is the final thoughts of the animations that I showed. So you should use that functional animations like the one that I showed with the button, the bell ringing, and that knob bar as a way to provide user feedback. So when you have these type of animations, the idea is you don't need to do too much. Just use micro interactions, very simple ones, just to indicate on over a button that the button is clickable, or try to do something that represents the real world. So when you have a lot of elements in one page, don't try to do and have a lot of animations. Imagine if I had the planet, the heart, and a lot of things happening at the same time. It would be too much. But when your UI doesn't have too many elements, like in that case of the is there Ubering, you just have an input text or an input search. In that case, you can maybe have something happening, a frenetic animation that represents your brand, for example. And when you have those frenetic animations like the bell ringing or something that is too much, don't forget to check if the user has the reduce motion enabled. You can do that with a media query with pure css. Or if you use a library like Framer Motion, you have that hook. Don't forget about this. This is very important for accessibility. And that was the talk. Thank you, everyone. Thank you, Eva, ever so much. Would you like to join me for a short Q&A? Let's reset that table. Someone moved it. Excellent. Thank you, ever so much. I found that really interesting and insightful. Now, we have some questions on Slido. And for those of you who have joined this room since the little intro, in this track, we're going to be asking questions using the same Slido link as before. So that's sli.do in your browser. And you can use code 0212, that's the date, in order to get into the event. There are a couple of tracks. Make sure you choose the mnemonic track in order to ask questions in this track. And ideally, if you can pop the name of the speaker in with your question, that would be great. Those of you who submitted questions and didn't, I've done it for you. So don't worry. But on an ongoing basis, that would be very handy. So with that in mind, we actually have a few questions that were posed during your talk. So the first one is, do you have any thoughts on documenting animations in pattern libraries or design systems? Yes. I think this is something that we're trying to do now with Elastic UI. At Elastic UI, I'm saying, when I introduced, I said it's a design system. But actually, it's not a real design system right now. It's just a library. Because we're missing a few things. We're missing some design guidelines. We also don't have animations guidelines. And I think it's really important. Because when you don't create those guidelines, then your application will start having a lot of different ways of doing things. So imagine that maybe you implement one button, and it comes already. Because it's a design system. It already has animation. But then in an app, if they have to implement a custom button or a custom fly out or popover or something, they can use any type of animation. And then we'll start getting weird, I think, too many different things. Yeah, absolutely. Like any component in a design system. One question, which has actually been asked a couple of times in slightly different ways, is that preferred reduced motion is not prefers no motion. But how do we know when it's too much? That's it. That's something also. At Elastic UI, we have one rule that we do that for all the animations and all transitions. So basically, we have one function that we wrap. We're using also a motion. And we use that to wrap all the animations. And basically, the animation doesn't happen. Sometimes I think that probably these micro animations, like buttons, it doesn't make difference. I think maybe we don't need to do that. But some of these things we keep learning. And probably in the future, maybe we can do some user testing. We have someone specialized in accessibility that maybe we can talk and maybe can try to find out is the buttons really necessary to have this? Or just, I don't know, models, fly outs, maybe those big components that appear from slide in, slide out, these type of animations. Maybe only those components need. But actually, I think every design system have their own rules. If I was taking my own decisions, but it's a team decision, maybe I wouldn't wrap these micro interactions. Excellent. And I suppose with anything to do with accessibility, not just animations, user testing is really at the key of understanding best practice. Yes. Excellent. Is it a better idea to use libraries like Frame in Motion or just basic or vanilla css? My rule is I always try to use first css. Only when I'm struggling and I start seeing, like, this is getting complex, I have to inject this class and to do this and that. And I'm also a designer, so my javascript skills are not that good. And sometimes when I start to overcomplicate, just to use css, that's when I know it's better to use the library. Because they are already taking care of some coding parts and that's when I take that decision. Makes absolute sense. Are there any, this might be a little, like, deep in knowledge, but to your knowledge, are there any css properties that you find are better not to animate for either performance or accessibility reasons? We had a lot of issues actually with transform. Those type of transform wise and transform animation, sometimes the performance is not good. Especially when it's inside flex components and other components. We had some issues in some applications like Kibana. So maybe, I don't know, maybe I noticed that in Sharker UI, I was actually using Sharker UI for the demos. They only have, like, these over animations with changing the background color. They don't do this button going up and using this transform. So once again, I think when we're implementing and if you start having a lot of issues with those transform animations and transitions, maybe you should consider removing. And also, what are you supporting? We're not currently supporting anymore IE11. We always do some tests and we don't have any problem with the type of animations we're using. So I think once again, it's testing and see what works the best. Cool. I think you answered this during your talk, but just for clarity, how can our lovely audience today access the article with all the information that you used in your demo? So you can go to my website that has this name, MilkyMew. And the name MilkyMew, it's because I had this cat. The Elizabeth Olivet, my real name, was already taken. So I'm going to buy this domain called MilkyMew. And it stays until today. I think at the time I had, I don't know, 18 years old when I did that. Yeah, but you can go there. I'm going to publish maybe at 5 p.m., I think. Yeah. I did wonder where your username came from. I really like that story. We probably have time for just one or two more. Should we refrain from having animations for negative emotions or how would you suggest handling this? Yes. Actually, I have this project, react Hawaii, where I have components that are like illustrations and they have different moods. So when it's like an error state, you can change the mood of the planet or the ice cream that is the illustration to a sad face. So I think, yes, when you have a 404 error page or instead of just showing 404 page not found, maybe you can page not found and have like an illustration that is crying. It's negative, but at the same time, it can be cute and maybe... Or whimsical. Yeah. Yeah. Okay. So I think we're just about at time and I feel like the questions that are still being posed are similar to questions we've already covered. So I'm going to take this opportunity to, on behalf of our whole audience, organizers and myself, say a huge, huge thank you for delivering such an excellent talk. Let's give a massive round of applause. Thank you. Thank you.
