UI vs Standalone Animation

[00:00:01]
>> Sarah Drasner: All right, so how was the last exercise? Fun? Everybody is like, yeah! [LAUGH] It's gonna get more and more and more fun from here, so we did all the responsible work of learning optimization and the SVG DOM and all of this stuff. Now you know GreenSocks syntax and you're kind of like Superman.

[00:00:19]
[LAUGH] And so you can do all sorts of stuff. Now we're going to go even further and start to manipulate that timeline. All right, so now let's learn about UI/UX animation versus standalone. So we're going to talk about interaction a little bit, but also make some distinctions between what we're going to make if we're making UI/UX animation versus if we're making a standalone kind of animation.

[00:00:44]
So, I can get started. I have a repo full of sample icon system. And it's done in Vue.js. But if you're familiar with reactor, you're familiar with angular. It's not so dissimilar from those kind of concepts. That you won't be able to pick it up. So If you're interested in making SVG icons and learning how they can be styled along with text and you can make any size icons and stuff, you can come check this out.

[00:01:15]
So if I open up the kind of live demo version, here are all of the kind of regular icons the tldr here is that they're styled using a thing called currentColor, so any of the SVG icons in here, say, fill="currentColor". And if you say currentColor with a camel case like that, it will take whatever color the text around it is.

[00:01:41]
So if you're trying to style icons, make sure that you use fill current color or stroke current color, depending on what that icon is. There's also animated icons. So it shows how you would create an animated icon for an icon system as well. And I wrote a cookbook entry that's in the view cook book if you wanna dive in to some of those things.

[00:02:02]
That's a few more, that's like maybe a few more minutes into talking so I just point to that reference material if that's what you're interested in. So UI/UX animation and things like icons and things. There are pieces of the UI that move together in what we call UX choreography.

[00:02:25]
So if you have something like this, it's still an SVG animation. I'm gonna open it in CodePen cuz it's a little bit nicer. So it's still an SVG animation that's made and when I open it, it creates all of the icons and it closes and basically we're able to conserve space but they're all moving together in a way that kinda works for that site.

[00:02:50]
So it would be kinda branded along with that site, and that movement would kinda complement that site. We talked a little bit about that yesterday in the Design for Developers course, so, if you wanna know more about like branding, and color, and those kind of things, you can check out that course as well.

[00:03:07]
Now when we look at that pen in particular, you can already start to guess how it was made right? You probably know that I'm clicking something. I'm starting up a timeline. Everything happens and then when I click it again the timeline is reversed right? I'm not writing all of those things again.

[00:03:25]
I'm taking the same thing and I'm [SOUND] turning it on its head. So, we're gonna learn how to do that. So one thing that UI/UX Animation is really good at is helping with context switching. So rather than something just popping up in your face, something enters into the screen and having transitions between two different states is really good for a human brain because usually things don't just pop out of nowhere.

[00:03:52]
Usually that's a pretty bad sign if I just appeared in front of you. That's something out of a horror movie or something right. You don't want that, our brains don't work with booleans like that. That's something a computer understands and humans don't really see in real life. So if you can have things transition or kind of enter into a space.

[00:04:12]
Then humans are like, I got it. You came from over there. There's not really an over there, right. It's digital. And things are just absolutely positioned and things like that. But the concepts of over there and spatial maps help us feel like it's a more native environment for our brains.

[00:04:29]
A standalone animation is one that just lives by itself. It's not working with something else. So there are different considerations for a standalone animation than a UI/UX animation. In a UI/UX animation, the goal is not to be, whoa, I'm animated, everybody look at me. It's kind of to be more invisible.

[00:04:51]
If you think about Stripe's checkout flow, you're not going through the checkout flow going, it's so animated! What you're thinking is, things are being revealed to me as I need them, it's not to be overwhelming. Whereas a stand-alone animation, that's the whole thing. Your whole attention. That's like the zooming around Hogwarts on the broom, kind of site.

[00:05:14]
Where, really, the only job of that website is to get you excited about Hogwarts and Harry Potter. It's not to get you to a contact form. It's not to, you're not trying to do something other than be part of that animation. So there's different ways of thinking about each.

[00:05:30]
If you're working with a data visualization, that's like a standalone animation. The whole purpose is to get people to understand that data or understand how it transitions when different things in time occur. So that is a standalone kind of idea, whereas a UI/UX animation is a little more subtle.

[00:05:53]
>> Sarah Drasner: So if we have something like this contact form, we can write, that's embarrassing, it's like, already like, I know you. [LAUGH] So I can write my name. I can write my email, and then I say contact us today. And while I'm communicating with the server and other things are going on, I have something entertaining me, something is going on to keep me occupied and that actually took a little while.

[00:06:19]
If I had had nothing happened, if I hit that summit button and am just sitting there am not sure, first of all if it worked, like if it's actually communicating with the server. I'm not sure if, I just gave it my information, I don't know where that information went it's kind of weird and scary to give your information randomly to a website.

[00:06:38]
So if you have something that goes on in the background that occupies people. And that's a really good thing for them. They're like, okay, first of all, I know you got it. Second of all, I know you're working on it. And third of all, I know you care [LAUGH] and you're not just gonna take all my information and do bad things with it.

[00:06:55]
So it's nice to kind of give people that dopamine rush at the end and let them know, okay, we got your stuff. Everything's good. Wait for a second, okay? That's what would happen in real life. If you handed me your business card I wouldn't just stand there. [LAUGH] I know it sounds crazy, but humans actually think of computers as having the same kind of conversation.

[00:07:21]
The reason why Clippy was so ineffective, because if Clippy was a person it would be really rude. Like you're a writing letter and someones is like, hello. [LAUGH] That's not a good person. They did this studies where they had Clippy talk to you and be a little bit more, be like make fun of himself and be like, man, you should just write a letter to Microsoft and tell them how annoying I am.

[00:07:45]
And people started reporting that they loved Clippy because Clippy was a person who was likeable. So when you're dealing with these human, computer interfaces you can actually start to think of them as a conversation. If I handed you my business card I would expect that you'd say, hold on a second.

[00:08:03]
Lemme find a place in my wallet for this. And then I would get it out and then I would put it away. Okay, I've got it, thanks, I'll talk to you later. I wouldn't just like stand there and hold it, or drop it on the floor and look at it or whatever.

[00:08:18]
That's the same kind of concept