Eyetools Measures How People Read Web Pages

Link: Welcome to Eyetools.

Found this company in a MarketingSherpa case study.  They bring people into their lab and ask them to look at
web pages while an eye tracking camera maps how they look at various
web pages. 

While it is hard to generalize what they have found, there are some general rules of thumb for designers:

  • While it’s generally true that people read from the top left,
    how they read from there varies depending on the page’s graphic
    elements.  They used the analogy of a feather in the wind, if the
    feather were to always start at the top left.  The feather moves
    depending on the wind and the eye follows; on a web page the "wind" is
    the graphic layout.
  • White space is good for the eyes, and makes it easy to
    organize what they are seeing, but if you have a white "line" across
    the entire screen (in other words you can read from the left edge all
    the way to the right and not be interrupted) then you have what they
    call a "scroll inhibitor."  Basically the eye thinks the page is "over"
    and you won’t scroll down below it.
  • If you have a list of things to display more of the list
    will be seen if you put it in a single column.  If you break it into
    two or three columns users will generally "see" less.
  • Images like small graphics or icons will draw the eye to the
    information next to it.  This is a great way to make sure someone reads
    what you want them to.  Pictures of peoples’ faces also work well, but
    they tend to hog the attention so the information next to them might
    not be seen.

Pretty useful stuff.

Found this company in a MarketingSherpa case study.  They bring people into their lab and ask them to look at web pages while an eye tracking camera maps how they look at various web pages. 

While it is hard to generalize what they have found, there are some general rules of thumb for designers:

  • While it’s generally true that people read from the top left, how they read from there varies depending on the page’s graphic elements.  They used the analogy of a feather in the wind, if the feather were to always start at the top left.  The feather moves depending on the wind and the eye follows; on a web page the "wind" is the graphic layout.
  • White space is good for the eyes, and makes it easy to organize what they are seeing, but if you have a white "line" across the entire screen (in other words you can read from the left edge all the way to the right and not be interrupted) then you have what they call a "scroll inhibitor."  Basically the eye thinks the page is "over" and you won’t scroll down below it.
  • If you have a list of things to display more of the list will be seen if you put it in a single column.  If you break it into two or three columns users will generally "see" less.
  • Images like small graphics or icons will draw the eye to the information next to it.  This is a great way to make sure someone reads what you want them to.  Pictures of peoples’ faces also work well, but they tend to hog the attention so the information next to them might not be seen.

Pretty useful stuff.


Discover more from Befuddled

Subscribe to get the latest posts sent to your email.

Leave a comment