Micro-interactions

[00:00:00]
>> Okay, so we're gonna jump into the fun part of this course now, we're gonna animate some stuff. Let's talk about micro-interactions. So micro-interactions are small animations whose purpose is to really delight the users and provide feedback for things. So some of the benefits of this aren't above and beyond just delighting our users, they can have a lot of positive impacts.

[00:00:21]
So we can actually alter our user sense of perceived performance. So users are actually willing to wait a longer time if they think something is going on. And this is where perceived performance can really be benefited by incorporating animations. Micro-interactions can also update users about the status of a task, so if you're doing a transaction, like you see here, it can inform users that hey, it's successful, or hey, it's processing.

[00:00:48]
These animations can be used to indicate state change, so if they're typing in a form, and there's something wrong or if the form is not correct, we can use those animations to indicate those state changes. We can use micro-interactions to draw attention, so this is like the typing indicator on an iPhone or in Slack.

[00:01:08]
A lot of social media applications will use these interactions to create habits, so when we click like, that cute little interaction that actually subconsciously will cause you to form a habit. But also sometimes they can just turn really boring tasks that you have to do, like signing up for an account or filling out a form, make them fun.

[00:01:31]
Just a couple of tips when you use animations in your component library. First of all, obviously, they have to be accessible. So make sure that anything that you are doing is able to be read by a screen reader. Also be intentional, like don't draw animations on absolutely everything, I know it's fun but be really intentional.

[00:01:51]
Animations draw the user's focus and so it should only be used in the most prominent parts of your application or your components. Also something that we typically struggle with, with CSS animations, as making them feel like they're part of the real world. When we're creating CSS animations are typically very linear, even with cubic Bezier functions, they can feel a little bit mechanical.

[00:02:14]
So React Spring is nice, so we'll see in a minute, it's a physics based library. So try to incorporate different elements of the real world to animate your items. And never make your users wait for an animation, like if you are showing a loading indicator and you think it's really snazzy, if their data is loaded, show it to them.

[00:02:34]
There's nothing worse than going to like a webpage and you see like this loading progress indicator, and you know the webpages loaded, they just wanted to show you their fancy animation. So please don't do that. [LAUGH]