Where the eye already is

The viewer has one fovea and it is slow

Sharp vision covers about two degrees of your visual field: roughly a thumbnail at arm’s length. Everything else is peripheral: good at detecting motion and contrast, bad at detail, useless for reading.

Moving the sharp part somewhere else is a saccade. A saccade takes 20 to 40 milliseconds to execute, and there is a latency of 150 to 250ms before it starts, during which the brain decides where to go. Vision is largely suppressed during the movement itself.

At 24 frames per second, that is a total of four to seven frames between something appearing and the viewer actually seeing it. On a piece of animation that lasts two seconds, you have just spent a quarter of it on eye travel.

This is the entire subject. Everything below follows from it.

Eye-trace: put the next thing where the eye is

The technique comes from film editing, where it is called eye-trace, and it applies exactly to motion graphics.

If an element exits screen-right on frame 40 and the next element enters screen-left on frame 42, the viewer misses the entrance. They were looking right. They will catch the new element somewhere around frame 48, having missed its first six frames, which, if those frames contained the ease-in you spent an hour on, is a poor return.

The fix costs nothing. Either bring the new element in near where the last one left, or hold a beat (six to ten frames) so there is time to travel. Hitchcock’s version of this was that the cut should land where the audience is already looking.

The same rule governs transitions between scenes in a title sequence, between slides in a deck that animates, and between screens in an app.

What pulls the eye, in order

When several things compete, the periphery resolves it roughly like this:

1. Motion, especially onset of motion. A thing that starts moving beats a thing already moving.
2. Faces, and anything face-like. Reliable to the point of being a nuisance.
3. High luminance contrast: a bright thing on a dark field, more than a saturated thing on a grey one.
4. Text, once it is fixated, because reading captures attention and holds it.

This ordering is why a small animated element in a corner destroys a piece: it wins against the large static thing you wanted read.

It is also the argument against animating two things at once. If both move, one wins by accident rather than by your decision, and you cannot predict which.

The reading problem

Text and motion compete for the same resource. A person reading is fixating and re-fixating along a line; they are not available to watch anything move. So the standard sequencing for anything with words:

1. Motion brings the text in.
2. Motion stops completely.
3. The text is held, still, for the reading time.
4. Motion takes it out.

The held section is not dead time; it is the only part where the text does its job. The most common fault in amateur motion graphics is that the animation runs for the whole duration and the reading time was never budgeted.

Testing it without eye-tracking equipment

You do not need a lab.

• Point as you watch. Play the piece at full speed and physically point at where you are looking. You will catch your own misses.
• Ask one fresh person, once. Play it once, then ask what it said. You only get one first viewing per person, so spend it deliberately.
• The single-frame test. Scrub to any frame and ask: if a viewer arrived at exactly this moment, where would they look, and is that where the meaning is?
• Watch it small. Shrink the preview to phone size on your desk. Most competing-element problems become obvious when everything is within the fovea at once, and then you know the full-size version is worse, not better.

The limitation

All of this describes a first viewing by somebody who does not know what is coming. You, having built it, are the worst possible judge: you know where the logo appears, so your eye is already there and the piece plays perfectly for an audience of one.

There is no technique that restores a naive viewing to the person who made the thing. The only real instrument is somebody else’s first look, and you get one of those per person. Use them on the version you think is finished, not on the rough cut.