Motion Design with CSS Jump Cuts and In-Betweening

[00:00:00]
>> [MUSIC]

[00:00:03]
>> Rachel Nabors: So let's talk a little bit more about those state full transitions. Now Silicon Valley has been carefully studying and using motion design in operating system UIs since the early 90s. First, before we talk about why, we need to understand a concept called the jump cut. You might have heard me use this expression.

[00:00:23] Now this is from film, it describes when the camera cuts directly to a different perspective. For instance, a different angle or a different screen. No fade, no movement, moving the camera is called a pan. It's common in dramas, it's common for showing conversations, I've got something from the public domain here.

[00:00:42] Notice how we've got this establishing shot of the two people and now we've jumped cut to his face, right? We're looking at his face, he looks to the side and now when we jump cut to her face, we're assuming cuz we had that little early on directors figured that they learned a couple of tricks.

[00:00:57] One was that if you jump cut in the direction that a person, an actor on screen is looking, human brains have now intuited that that is where the camera is now pointing a few seconds later. There are a couple of other rules like the 180 rule which is that you never move the camera outside 180 degrees of shooting.

[00:01:18] Some people do break that for effect. But you have to be a cinematic genius to be able to break that rule without consequence. But for the rest of us, breaking the 180 rule would cause a lot of confusion in our audiences. But specifically that having actors looking towards the location of the next shot and having these establishing shots to show the relation of the actors in relation to each other.

[00:01:41] These were little things that directors used to train audiences. You think that back when talkies first landed in cinemas that people were following along easily? No, they went through a training period too. And you can see this in very early silent films, the motion, there were a lot less cuts, there were a lot more pans.

[00:02:02] We've been stepping up how we use these cuts as people have matured, as our brains have become supple and understood how it works. So now we have this whole visual shorthand that we're learning since the age we can watch cartoons, and we're not even aware we're using anymore.

[00:02:19] So jump cuts, yes, let's take a look at how jump cuts work in our user interface. This is from codrops, now this is a drop down and when you click on the button, it's a little pale here, but you can see that the whole drop down, it just kind of appears, got some monkeys, you got bears and squirrels.

[00:02:37] It's jump cut, open, close, open, close, state one, state two, state one, state two. So the human mind is pretty darn clever when this happens. We're clever enough to figure this out when we're watching movies. We're clever enough to figure it out when it happens to our user interfaces.

[00:02:54] So what you're brain is doing behind the scene is it's taking a before-image and an after-image. And it's extrapolating between these two shots to create something a little bit like this. That takes cognitive effort though, it does. This effort in traditional animation is called in-betweening and in-betweening in traditional animation is only done by the most entry level or inexpensive of animators.

[00:03:21] People that you would perhaps, ship this off overseas to do. Steven Gordon, we saw him do the walk cycle earlier, he's a key frame animator. In an animation he would be drawing the walking cat and the sitting cat, the before and after states. And then they would send those frames off to some people in Korea or maybe in China, a lot of animation happening in China now where the dollar will get a lot more man hours then it will in United States.

[00:03:46] And nobody wants to be an in-betweener, drawing all the cats in between. It's a dead end job, you cannot pay people in the United States enough money to do this. So all those little grey cats, those are the in-betweens. And when you have a jumpcut UI, your brain is in-betweening all of that.

[00:04:06] And we are all in our mental prime. This, we look at this and it's easy for us. But we look at computers every day. So our brains are optimized for this. You could say that we run every UI in our brain on our mental GPU. They are all optimized for us.

[00:04:24] But for really young and older users whose brains are perhaps a little less nimble and a little less adapted to working in a strictly digital environment and staring at a screen for more than four hours a day. Yes, we do stare at screens for quite a bit of our waking life, do we not?

[00:04:40] We do you have a few things we take for granted and this is one of them. So there's no in-betweening done. It's all on their brains to do this. It's all on their brains to make this assumption. That can get a little tiresome. It can lead to a lot of hearing of what just happened when people are using an interface.

[00:05:01] In fact, if you were standing in on some user testing, who here does user testing and they actually like show up and watch people over the shoulders? I see a couple of hands. Good on you, good on you. You might hear this what just happened from time to time.

[00:05:14] That's a good time to think, could I have animated that to make it a little more obvious? If there's no direct, immediate design decision you could have made to have made it more obvious you might consider how animation might have made that work better. So here's what happens when we've actually animated the effect.

[00:05:30] Now everyone is happy, they can see clearly what's happening.
>> Rachel Nabors: Researchers learned back in the 90s that animating the transition between those two states actually lets the user take a shortcut through their visual cortex. So it handles the change in user interface without disrupting their main task. You can think of a human brain a little bit like a computer.

[00:06:00] You have a main thread and then you have a GPU, a graphics processing unit in your visual cortex. You can feed people a lot of information through their visual cortex without interrupting what they're actually thinking about. This is why you can drive and talk to a person in your seat at the same time.

[00:06:19] Here's a quote from a really great paper that was released in 1993, I love this one. [COUGH] Animation allows the user to continue thinking about the task domain with no need to shift context to the interface domain. By eliminating sudden visual changes, animation lessens the chance that the user is surprised.

[00:06:39] So there were a bunch of papers published about this in the early 90s and then they all disappeared, probably as the researchers were bought up and their work became classified by you guessed it,
>> Rachel Nabors: Companies that build operating systems and later on, apps. In fact, nowhere is motion in UI and animation in UI for that matter more apparent than in touch interfaces.

[00:07:07] Can you imagine using your smart phone with no animations? Like it's just a tap and a jump cut for everything you do. Can you imagine that, would you like using your phone? Would you have bought your phone compared to one that has an animated interface, one that could anticipate gestures and move things around under your fingertips in response to your actions?

[00:07:29] On such a small screen, you can't get away with jump cuts like you can on a desktop. Desktops have users trained, we spent years learning how to disassociate keyboard and mouse inputs from what we see on the screen. I remember doing that training in elementary school. Kids don't have to do it with touch screens because they touch things on a screen and the things react to them.

[00:07:50] That's very important. So Apple invested so much in animation and touch and coupling them tightly together. Apple was not the first company to come up with a touchscreen. But it was the first company to couple these two things so closely and so well together that people definitely preferred this interface to the competition's.

[00:08:20]
>> Rachel Nabors: Animation was a big part of the iPhone's success. So the visual cortex, this is a much better visual representation. It works like your computer's GPU, it's dedicated to processing graphical information while the rest of the machine can get on with doing what it needs to do. It's a little shortcut you can take.

[00:08:40] I use this image because this image is like a shortcut too. And this is one of the reasons why jank is so dangerous. And a little rough performance like if that gesture on your phone, the screen is dragging behind where you're trying to pull it with your finger and it's just not quite making it.

[00:09:03] It destroys that illusion of life, that illusion of one to one interconnection between your interaction and the screen's response. And this is why performance with animation is such a big deal because if you don't get those very smooth and sinuous animations down, it bounces people right back onto their main thread.

[00:09:26] So you might wanna use animation to get people going through their visual cortex. But if you're animation is janky, if it stutters, if it shudders, if there are breaks between point A and Point B, it pops them right back onto the main thread. And you're losing all that perceived speed boost and all of that cognitive load ease, you're dumping it right out and you're burning battery power while you're doing it.