Jump Cuts

In notebook:
FrontEndMasters Motion Design with CSS
Created at:
2016-11-28
Updated:
2016-11-28
Tags:
css animation
Connecting the Dots

Jump Cut

From film, when the camera cuts directly to a different perspective. 

Common for showing conversations in movies. Talks about the 1/80 rule: never move the camera out more than 80ยบ when showing a conversation. 
Actors looking in the direction of the next scene. 

Jump cuts in UI

Dropdowns. You click a button and the dropdown list of items appears. This is a typical example of jump cuts. 
The brain actually takes a before image and an after image and extrapolates between the two shots. This takes cognitive effort. This is called in-betweening in traditional animations. 

"From animation, drawing all the poses "in between" two important poses."

This is usually done by cheaper, less skilled workforce in cell animation. 
She says usually this job (in-betweening) is outsourced to China.

In-betweening in UI is easy for "us" but might require more effort someone less accustomed to computers.("what just happened?") Or boring for younger generations. 

If there's an animation between these two states, it's much easier for the user to understand the UI. 
If there's an animation, the UI does not interrupt what they're thinking about.  

Animation allow the suer to continue thinking about the task domeain, with no need to shift contexts to the interface domain. By elminating sudden visual changes, animation lessens the change that the user is surprised

Scott E. Hudson and John. T. Stasko (1993)

Animation is even more important in touch interfaces. On small screens you don't get away from jump cuts. On desktop users learned to deal with jump cuts. But not so on mobile.

Apple was the first to couple together touch interfaces and animated UI so strongly. 

Talks about the "visual cortex" which is the brain's GPU. If there's an animation the visual cortex is not used. Animation is a shortcut for the visual cortex.

Jank destroys the precious illusion of life.

The illusion of 1:1 connection to your commands and the computers response. This why performance matters so much. As soon as there's jank, people need to rely and use the visual cortex (GPU) which destroys concentration.