Designing with eye tracking in mind

When we’re reading text or looking at a website, we don’t typically think about how our eyes and brain are piecing together a puzzle at that very moment. Images, navigation, words, and layout work together to orient (or disorient) us so we can quickly find what we need.

These eye movements, called saccades (from the French word for “jerk”—as in the type of movement), are an important part of the design of every aspect of your site, from navigation to icons.

Every time a user moves their eyes from one fixation point to another, it’s considered a saccade. Websites with a lot of fixation points, like Reddit, are difficult to navigate and follow. The eye has no idea what to focus on, so it tries to look at and absorb everything on the page with no real guide.

Sites like Cloudflare, on the other hand, require far fewer saccades to “get the big picture.”

The fewer saccades required to make sense of a design, the more likely someone will retain and recall that information.

So what happens in the case of this tiled design from Microsoft? At first glance, it seems to be exactly the type of thing we want to avoid: too many saccades. But look closer.

Eye tracking shows that there are many saccades needed to understand this page. But the level of saccades doesn’t necessarily correspond to the difficulty of understanding how to navigate the page. Here, Microsoft’s design is laid out in a logical and understandable way so the user instantly sees what they want and knows where to click.

Using saccades to guide your design

Now that we’ve gone over how saccades work, the question is: “How can we use this information to create a design that increases profits, conversion rates and customer acquisition?” Well, here are some ways to do just that.

Use dominance to guide user actions

Which of the following blocks appears to dominate the picture below?

The top one, right? Because it’s larger. And that large size is what immediately attracts our attention (and the resulting saccades). We also tend to notice it because it’s higher than the other one. But size isn’t the only thing that matters. When you first log in to Facebook, what is your eye immediately attracted to?

That red notification number. It’s small compared to other items on the page, but the fact that it’s red starkly contrasted against a blue background makes it more noticeable and practically forces our eyes to focus on it.

Facebook knows this well, and they also know that over time, repeated actions like a glance in the upper right corner to see notifications will eventually lead to muscle memory. So whether you have notifications, your eyes will instantly go there.

Key takeaways

• Our eyes are naturally drawn to contrasting colors as well as larger, higher positioned objects
• Over time, completing the same visual movements again and again leads to muscle memory, particularly when all other competing factors are taken into consideration. Our eyes typically follow the previous saccade pattern.

Our eyes use visual leading to dictate where we should look

A diaper manufacturer conducted a split test between 2 images of a baby. The first one, as you can see from the heat map below, shows the baby looking at the viewer.

Most of our attention goes to the baby’s face. Very little of it goes to the message. This surprised the testers, who then used an ad of the baby looking at the message:

Notice that the baby’s face still got attention—and so did what he’s looking at. This happens because we’re practically wired from birth to follow someone else’s gaze. Even from the time we’re babies, we’re always watching, perceiving, and taking in information about our surroundings.

Key takeaways

• Images of human faces nearly always capture our attention and focus more than products, logos, or text
• When used with other cues on a page, visual leading is a great way to take the user’s gaze where you want it to go

The F-shape pattern—evolved

Way back in 1999 when the web was still young, Nielsen Norman Group did a study about how we read on the web. The first of its kind, the study revealed that users tended to read in an F-shape pattern. As a designer, you’ve likely seen this graphic many times and kept its lessons in mind when creating your layouts.

With video, images, and other features now dominating our search results, would the same information hold true? According to Peter J. Meyers, who did an eye-tracking study on Google.com in 2011, the same pattern still held true. But what got much of our attention wasn’t the text, but the images from the videos.

Key takeaways

• The web has changed considerably since 1999, but our eyes haven’t. We still tend to take in and process information visually in an F-shaped pattern.
• With the rise of video in search engine results, our eyes are immediately drawn to the image as a visual cue that we’ve successfully found what we were looking for

All of this information on saccades and where our eyes focus naturally goes is great—for images. But saccades can also be used with text.

We use saccadic movement when we read

Each visual “stop” that happens is a saccade “fixation point.” Our eyes can take in approximately 7-9 characters per saccade. That means we only focus on characters rather than entire words.

That being said, although we may only focus on one word, we understand the surrounding words and the context in which they appear. What does this mean for your design? Well, when you present users with a wall of text, you’re asking them to engage in hundreds of saccades with countless fixation points along the way. And unless they’re heavily invested in reading what you have to say, they won’t do it. It’s visually tiresome.

Key takeaways

• Break up longer paragraphs with shorter, more concise sentences
• Bullet points make your text more visually digestible
• Large, centered, to-the-point headlines make it easy to “get the gist” of your page without scrolling around looking for answers

Here’s a screenshot of the Contently website, a great example of content positioning done right.

Notice how they have the large, prominent headline and visually clear buttons as to the action they want you to take first. “Learn more” stands out more than “Talk to Us.” It’s clear where they want your attention to go.

The bottom line

The fewer saccades involved in visually processing your website, the more information users can take in, understand, and act on. But traditional eye tracking can be expensive, not to mention cumbersome to set up. Fortunately, heat map tracking offers many of the same advantages:

• See precisely where user attention is directed (or what’s distracting them)
• Make design changes with confidence by giving users a path to focus on
• Guide users into taking the action you want, or reading your content

Want to try out heat map tracking and learn exactly what your users are focusing on? Just for the InVision community, we’re offering a free 90-day trial of Crazy Egg. Check out your heat map.