But size isn’t the only thing that matters. We also tend to notice it because it’s higher than the other one. And that large size is what immediately attracts our attention (and the resulting saccades). Which of the following blocks appears to dominate the picture below? 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. “Images of human faces nearly always capture our attention.” Using saccades to guide your design 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.
#Eye tracking heat map how to
But the level of saccades doesn’t necessarily correspond to the difficulty of understanding how to navigate the page. But look closer.Įye tracking shows that there are many saccades needed to understand this page. 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. The fewer saccades required to make sense of a design, the more likely someone will retain and recall that information. Sites like Cloudflare, on the other hand, require far fewer saccades to “get the big picture.” 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. Websites with a lot of fixation points, like Reddit, are difficult to navigate and follow. “Saccades are an important part of the design of every aspect of your site.”Įvery time a user moves their eyes from one fixation point to another, it’s considered a saccade.