Eye Tracking: How the Eye Scans Your Web Pages

Share the Article

Eye tracking determines the eye movements when a visitor first sees your website. Researchers have determined that these are the most common patterns of where the eye first goes to on a web page and then where it moves. This happens in a second as soon as the viewer clicks on your page. The graphs below shows the most common theories (for additional website design tips and tricks see article “The Psychology of Color“).

In this first graph, the circle represents where the eye first goes and then it tracks the way the eye scans the rest of the page and the arrow is where the eye ends up last on their first view.

eye tracking map

This graph from Google shows how the eye travels. The colors are “heat spots” — i.e. the most intense and darkest color in this image is where the eye is drawn to the fastest and has the strongest pull. The lightest shade of color represents the worst “real estate” of the page.

eye tracking

The next graph shows the visitor’s eye beginning at the top left of the page, then scanning across the top, where the navigation links are usually placed on websites then the eyes move down. This is basically the way an eye moves as you read a book: left to right, down, left to right, down, etc. The pattern looks like an “F.”

The bottom graph is the same pattern you would use when writing the letter “Z.”

Eyetrack 3

eye track map 4