Design better experiences Get started free
InVision Enterprise Learn more
The world's smartest companies use InVision

The world's smartest companies use InVision Enterprise Edition

UI/UX

Designing with eye tracking in mind

by

on

View all posts

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.

“Saccades are an important part of the design of every aspect of your site.”

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.

image00

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

image02

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.

image01

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.

“Images of human faces nearly always capture our attention.”

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?

image04

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?

image03

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.

image06

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:

image05

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

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.

image08

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.

image07

Key takeaways

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.

image09

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.

image11

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.

CTA for those not in hs to DO UI kit
CTA for those not in hs to DO UI kit
Author

Neil Patel, Co-founder of Crazy Egg
I'm an entrepreneur who likes to blog. I have started two SaaS analytics companies, @CrazyEgg and KISSmetrics with @hnshah. I love all things business.

Join over 2 million designers

Who get our content first.

No sales pitches, no games, and one-click unsubscribe.

Over 2 million designers
get our newsletter
every week

Find out why

Get awesome design content in your inbox every week

Just like over 2 million of your fellow designers do.

Plus get 3 free downloads, just for signing up.

Give it a try—it only takes a click to unsubscribe.

Thanks for signing up!

You should have a thank you gift in your inbox now—and you'll hear from us again soon!

Prototype better experiences with InVision

Just like over 2 million of your fellow designers do.

I agree to InVision's Terms of Service.

Want a free t-shirt?

Join the 2 million+ designers who get our newsletter weekly for your chance to win!

We hate spam as much as you do, and you can unsubscribe anytime.

Double your chances to win!

Tweet and automatically get a second entry

Tweet Now

No Thanks

Stay in touch!

We share news, freebies, and more on Twitter.