This course has been updated! We now recommend you take the CSS Animations and Transitions course.
Transcript from the "Drawing Attention" Lesson
[00:00:00]
>> [MUSIC]
[00:00:04]
>> Rachel Nabors: Now simple little animations, as I mentioned, they accentuate tasks and states. Now research has shown that humans are absolute suckers for movement. Which makes sense, because it meant life or death for our ancestors.
>> Rachel Nabors: So yeah, this was a research paper in 2010. Where basically the researcher found out that people, basically, they're really, their attention is captured by increasing the animacy of objects.
[00:00:38] Animacy here not being a word you'll find in dictionaries. But it means to increase the aliveness of an object, or how alive it appears to be. Now humans attention can be immediately grabbed by two things, one of them is color and the other is motion.
>> Rachel Nabors: This goes to reason that if you want someone to notice something, you should make it bright and jiggly, right?
[00:01:04] Well our ancestors, they were always on the lookout for sudden movements of prey and predator. So it would makes sense that bright colors indicate poison or food, and jiggly things equal a lion in the bush or something to eat. But you know, it could also be a great way to get people to click on your free screen savers ad.
[00:01:21] Wonderful, of course any good information can be abused. So how do we use it responsibly? Well there's another thing to keep in mind, all humans have something called a cone a vision. When you're ever looking at something for a long time, like a wall, if you stare at this for a long time, you'll notice that everything around the edges starts to gray out.
[00:01:43] That's because, when you're walking through space, your eyes are constantly moving in something called saccade movement. You're constantly looking at that thing over there and that thing there, and it's like your brain is refreshing its mental model of where everything is in reality. So that, look, when you start studying the human visual system, it gets pretty intense.
[00:02:02] You start realizing that what we perceive as vision, is really sort of like an emulation, like a game we're all living in. That it's a second world that you are moving in through, by interfacing your brain with your muscles and your inputs, and it gets really interesting. But to keep this model that we're living in going, our eyes are constantly moving around subconsciously, gathering information and updating the model.
[00:02:26] If you stare one one direction for too long it'll become apparent just how limited your human eye actually is. So in the center, the center of your vision is very detailed and very accurate. You can only really see the features on my face when you're looking at my face.
[00:02:42] When you're looking at the screen, you do not see the features on my face. You cannot tell if I have glasses on in some cases or not, or even perhaps what my expression is. Although there is evidence that indicates people are better perceiving perception, perceiving people's facial motions in their peripheral vision, in the outer cone of vision.
[00:03:03] One of the reasons that I've heard that the Mona Lisa looks like she's smiling when you look away from her, but then when you look at her she doesn't look like she's smiling, might be due to being better able to perceive the tonal values in our peripheral vision than we are with our central vision.
[00:03:20] So tonal values like human, what is it, luminance, yes, and motion, our peripheral vision is very sensitive to those things. However, we're more sensitive to color in the center of our vision. So it stands to reason that you should try, if you can kinda guesstimate where people will be looking at a page on a page, to use things that don't distract too much from their experience, unless it's super important.
[00:03:51] So for instance, all right, I gotta look at the screen now for this one. So here we have a little alert that shows up. And we might do that using a fade, because this isn't the center of vision. We don't need to move it around. We don't need to make it too bright, or too loud, or increase its visual weight.
[00:04:13] A fade is appropriate, changing its color or its density as it were, would probably be enough to get people's attention. However, if we're out there in the periphery, we might need to give something a little bounce. When I might need to move it around a little bit to capture people's attention.
[00:04:29] That might be why we see sidebars bouncing so much in those terrible old ads. Because if you make it bright and bouncy, nobody can help but notice it adds a distraction. So keep this in mind when you were animating your interface. For instance that side bar that I animated, it's kind of a lot of movement.
[00:04:48] But I'm assuming that people are intending for that to happen and thus are expecting it to happen. But if I wanted it to be more of an aside, less interrupting, I might just have faded that out, instead of bouncing it off like that.
>> Rachel Nabors: So it's important to remember that motion and opacity are to animation, what font sizes and weight are to typography.
[00:05:11] That is to say, you don't want to make everything 48 pixels tall, and bold, and italic with an underline, and all those good things. When everything vies for tension and users don't know what's to focus on. So you want to be judicious in your use of animations. And try to limit yourself to just what is necessary to get your point across.
[00:05:32] And if you want to do more than that, be able to justify it.