A saccade is nothing more than the movement of an eye between different points. Saccade is French for jerk (not the derogatory term, but the motion of jerking).
Users view websites using mostly saccades.
There are four main ways that the eye moves and takes in visual information:
- Saccades — rapid movements between fixation points
- Smooth pursuit — moving the eye to track a single, moving point. This is how you watch a jet flying through the sky without moving your head.
- Vergence movement – This is the way that the eye focuses on two different objects at different distances. This is what happens when you look through a window screen, first focusing on the screen, then focusing on what’s outside the screen.
- Vestibulo-ocular movements – Keeping the eye focused on a single point while you move your head. This is what you do when you maintain eye contact with someone, while you tilt your head to take a drink of coffee.
Nearly all eye movements on websites are saccadic, moving between two points. If your site has interactive elements like gifs, videos, or a motion background, then the user might transition to smooth pursuit to view those elements. Obviously, if the user is moving his or her head, vestibulo-ocular movement will occur, but this doesn’t affect how they process the information.
Saccadic movement is the primary method of information intake. Here’s what you should do as a result.
Fewer saccades mean that the user is likely to remember and retain the information.
Every time a user moves her eyes to another fixation point, this is a saccade. More saccades on a website mean more information to absorb and retain.
When a user looks at a website for the first time, the experience can be overwhelming if there’s too much to look at.
Reddit, for example, is hard to get into, because there are hundreds of possible things to fixate on.
After some time, you know exactly what you want to fixate on, and in what order. This is known as “muscle memory.” The more often you repeat a motor task (even moving your eyeballs), the easier it is to repeat that effort.
Once you use Reddit for a few weeks, you know what to look at first, second, third, and so on.
Muscle memory is the reason why some people object to Facebook’s constant adjustment of the layout.
Facebook has a lot of elements competing for your attention, but after a while you know where to look.
If you want users to focus on just a few things on your page, then you should require as few saccades as possible.
The website Cloudflare has the following homepage:
Apart from a top menu, there are just a few saccades required on this page. This makes it easier to:
- Absorb the information, and
- Respond to the CTA
Every clickable element on a page is a call to action. With just a few CTAs on this page, Cloudflare increases the likelihood that a user will select one.
The design style popularized by Microsoft and its products — tiles — requires many more saccades. Here’s Microsoft’s homepage.
Even though there are more saccades required to view this page, they are organized in a logical and coherent way. Thus, the saccadic movement is streamlined, making it easy for the user to identify and select what they want to click.
Dominant elements on a page will guide the user’s saccades.
Even though your page may require a lot of saccades, you can still direct the user to the things you want them to see.
The concept is dominance. Dominance is the idea of creating focal point through design. The design techniques used may include position, size, contrast, movement, color, or some other differentiating feature.
Stephen Bradley describes dominance as “the varying degree of emphasis in your design elements. You can create 3 levels of dominance in your work.”
Here’s a simple example:
Two squares. They are the same shape and same color. But one is dominant. Why? Because it’s bigger. Plus, it’s positioned higher.
Your saccadic movement on the two squares center on the first one, then the second one — in that order.
Here are some other examples of dominance.
On Facebook, what do you look at first? The header bar, right? What’s your first saccadic stop? Those little red numbers. Why? Because they are visually dominant. Sure, they’re small, but consider this:
- They are located at the top of the page.
- They are red, contrasting with a background of blue.
Coupled with muscle memory, dominance dictates the saccadic movement.
We use saccades to read text.
When a user reads text, they use saccadic movement.
Most people don’t fixate on each word (small saccades). That takes too long. Instead, they read the text using big, sweeping movements.
In reading, the point at which the user stops — a saccade — is called a “fixation point.” Most readers take in 7-9 characters per saccade. This means, technically, that they might not be “reading” every single letter in strict terms of fixation points. Nonetheless, they can comprehend it all.
Here’s the takeaway.
When you present a large amount of text to a user, you are asking them to engage in hundreds of saccades. This can be daunting, even off putting.
Unless you know that your user is prepared to embark on such an arduous journey, you should be cautious in how you present the text.
Now you know why the “wall of text” is a violation of user experience.
When presenting text on your website, here are some helpful guidelines:
- Shorter lines are better. They require fewer saccades, and invite the user to intake more of it.
- Centrally-positioned text is better.
- Bullet points are easy to read.
Contently completely gets it with their homepage. The central headline is two words, large, and centrally located.
The science of saccades is vast and varied.
But the concept is simple: Eye movements. As a designer, marketer, or conversion optimizer, you have control over how, when, and where the user looks on your page.
It’s all about the saccades. Positioning, dominance, text, size, color — all these things have a dramatic influence on conversions, shareability, readability, and overall engagement.