Social Engineering with Animation

[00:00:00]
>> Sarah Drasner: So, Viget did an experiment that despite some individual variation, novel loaders had a higher wait time and lower abandon rate than generic ones. If you know Val Head, she has a whole book where she goes into all of these details of these kind of things, so if like to nerd out about this kind of information, you should go buy her book, because it's super, super good.

[00:00:21]
So she talks about this in that book, too. This is kind of a custom loader that you'd find, if you wrote loader GIF on the Internet, you would go find that GIF. People waited for 14 seconds for this GIF, just indefinitely. This is not a fancy animation. This is not that crazy.

[00:00:39]
They just took their logo and have some dots. But people were willing to wait twice as long, and so they had a lower abandon rate just by caring like this much about the animation. When you think about the kinds of animations that you have on your site, you can think about accents and eases the same way that you'd think about accents and pallets.

[00:01:01]
So, if you have an all green site, and a bright red button as an accent, you can do the same kind of things with your animation. You can have all sign eases and then only in the part where you tell them I got your information you do a bounce.

[00:01:15]
So, having a different kind of ease or a different kind of event occur can help people get like a dopamine rush and say, something was different. This is really good. So if we're working with SVG as like an aid to our website, we could have it just like a regular SVG as an image.

[00:01:34]
So you don't actually even have to do much at all. We could just have this be an animated SVG, and then it just kind of scales for mobile, that's it. It's just like a normal image. You don't have to do all those fancy, crazy, sprite things. You might be like, I don't want to work with SVG because then I have to make a crazy thing, you don't have to, you can just have it be just like a normal, kind of, but animated image.