Click

Eye Tracking

Attention: open in a new window. E-mail

 

Believe it or not, there is an incredible amount of science tied to web site design. All though color and content are important the most important seems to be how our eyes track any given page.  The Good People at Eye Tracker have published information on exactly how we actually utilize our ability to scan, study and read. The remainder of this article is from their site. I would encourage you to Read more about the science of Eye Tracking there.

    The diagram below shows an average overall viewing sequence compiled from Eyetracking data on our test homepages.

Eye Tracking chart

    As the diagram indicates, the upper-left quadrant gets a fairly complete glance. Not only is it the viewing start point in this area, but viewers also tend to peruse the entire area before moving on.

    Next stop -- a cursory look at the lower part of the upper right hand quadrant, followed by the same in the upper part of the lower left-hand quadrant. The eyes seem to move back and forth again to outlying areas of these two quadrants. Finally, users scan the right-hand side of the page before leaving.

    The sequence is fairly logical when considering that Westerners read from left to right. It also is consistent with traditional teachings of readers to scan printed pages in a Z-shaped pattern.

    Another way to think about these sections is to break them into priority zones. Given the designs tested, the researchers determined that some regions within the page have more immediate prominence than others.

Eye tracker chart 2    Thought about in a more general way, we can see how the upper left is viewed more quickly, on average, then the next layer out, then the outer periphery.

    However, it is important to remember that viewing patterns are affected by what page elements exist in particular locations. Headline placement, images, and blurbs are strong factors in determining viewing patterns. Our homepage designs that contained the largest lead headlines closer to the center of the page received the most initial gazes in that area. Remember, the visualization above is the average of eight different page designs.

    To illustrate this point, let's review the specific pages themselves and take a closer look.

More observations:
    When analyzing viewing sequences on individual pages we observe:

  1. Readers most often view the top headlines (wherever they may be) and the site's flag (or logo).
  2. Visual elements such as blurbs can sometimes override this tendency.
  3. The visual flow tends to move out from the starting point of top headline and flag/logo combination to the periphery of the page.