DON’T MISS OUT

Get updates on new articles, webinars and other opportunities:

What You Need to Know About Eye Movements and Your Website

by Neil Patel

Eye movements.

Have you ever thought about this? It’s not exactly the most popular topic in Internet marketing. But it is extremely important.

The most basic interaction that a user has with your website is looking at it. How a user looks at your website has a profound impact upon how effectively your site communicates to that user. The user’s eye movements influences readability, conversions, sharing, and so much more.

Here’s what you need to know about eye movements and your website.

Eye movements are called saccades.

First, let’s talk about terms. Eye movement is technically called a saccade.

saccade-definition

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:

  1. Saccades — rapid movements between fixation points

ezgif.com-resize

  1. 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.

smooth-eye-tracking

Image Source

  1. 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.

vergence-movement

Image Source

  1. 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.

vestibulo-ocular-movements

Image Source

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.

reddit-screenshot-9-2015

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.

my-page-format-has-changed

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:

cloudflare-home-page

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.

microsoft-homepage-screenshot

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.

How?

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:

simple-example-two-squares

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.

muscle-memory-on-a-facebook-page

Coupled with muscle memory, dominance dictates the saccadic movement.

We use saccades to read text.

When a user reads text, they use saccadic movement.

what-one-needs-to-read-text

Image Source

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.

fixation-point-sept-2015

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.

wall-o-text

Image Source

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.

content-solved-contently

Conclusion

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.

How should knowledge of saccades influence your design or conversion optimization approach?

3 Comments

DON’T MISS OUT

Get updates on new articles, webinars and other opportunities:

Neil Patel

Neil Patel is the co-founder of Crazy Egg and Hello Bar. He helps companies like Amazon, NBC, GM, HP and Viacom grow their revenue.

3 COMMENTS

Comment Policy

Please join the conversation! We like long and thoughtful communication.
Abrupt comments and gibberish will not be approved. Please, only use your real name, not your business name or keywords. We rarely allow links in your comment.
Finally, please use your favorite personal social media profile for the website field.

SPEAK YOUR MIND

Your email address will not be published.

  1. Andrew D. Roper says:
    December 6, 2015 at 9:23 pm

    Good article, and I have a few comments to add:
    Website interface design trends flat trend is a HOT website design in 2015. With the unique flat design styles, and not least to fancy-Metro UI of Windows 8 was Windows developer on the Windows version 9, Windows 7, it has created a tendency for the website design with a flat interface. That has proved the correctness of this style is simple yet beautiful, easy to use, fits many different display devices.
    Indeed, we need not cost too much effort to research and find out the problem. Take a look at the company, the leading group on the technology they’re going by the trend? Microsoft-software company leading Giants took out the Windows version 8 with a flat interface, make use of all the space on the screen and the device using the touch screen. Modern web designers, the professional Designer learn from the developers, the technology, let’s bring new things to experience, feel and welcoming.
    Technology always changes every day, every hour. Thus the website interface design also need the changes to fit in with modern technology. Today’s website design interface to master simple and convenient for the user to do so that users can find what I want quickly.

  2. Kundan Saha says:
    September 24, 2015 at 9:54 am

    I wanted to know if the approximate middle word in a sentence is always the saccade, like the case you’ve analyzed for the sentence “Around the fixation point, only FOUR to five letters are seen with 100% acuity”. If its always true, which is more likely as saccades are more involuntary or habitual, then where do you think the focus words should be placed while writing a blog title for best results? To write with SEO in mind, they should be placed in the first few words. But if one wants to write for catching more user’s attention, then ideally the focus word should be centrally placed in the title.

  3. Tommy Grobmyer says:
    September 21, 2015 at 3:02 pm

    I saw the title of this post and immediately felt the need to chime in.

    I could not agree more with this. It was actually one of the reasons I really started focusing on internet marketing.

    I was doing affiliate marketing for fun while I was in college. It was more of a hobby for side money and I was doing pretty well. Once day, thanks to fate, I stumbled into a 100 level film class. That day, the professor happened to be talking solely on eye-trace techniques for flow, rhythm, etc… and the influences of how to keep the audiences attention moving effortlessly between shot to shot based on items like, contrasting and other visual or audible triggers.

    Long story short, that was the day (about 10 years ago) when everything clicked. I made a few small changes to my landing pages I had at the time and had and immediately increase in conversions by about 30% or so.

    From there, I got a lot more creative and curious about cognitive sciences and psychology outside of the normal prerequisites. These are the types of articles that can really change someone’s path in life.

    I didn’t actually read the article yet, but I definitely will. I can only assume saccades is in there. (just scrolled up … awesome.) I’ll be back. Time for meeting! I can already tell this is going to be an awesome article.

    All the best,
    Tommy

Show Me My Heatmap

I love sites with - combine that with and it gives such a great set of data to inform /

Andrew Martin

@AndrewDoesSEO

What makes people leave your website?