Eye-Tracking Technology and Analytics

The Motivation

During his research at Stanford, Greg worked on eye tracking to
drive the UI with a view towards helping the disabled. But
unfortunately, the business wasn't there.

He realized that there is a large segment of companies that
analyze web traffic. While these companies bear some fruit, much
of the tree goes unpicked since their tools only operate at the
page level by measuring click-throughs.

One thing led to another which led to his applying eye tracking
to web analysis--and commercial interest. Or, as Greg put it,
"eye-tracking for the masses." The tools that Greg
introduced answer the question: What's happening at the pixel
level? What are you looking at on the screen?

State of the Art in Eye Tracking

The technology for tracking the motion of the eye has improved
a lot. You no longer have to wear obtrusive goggles; instead
top-quality cameras in the infra-red and near infra-red are now
embedded in the monitor. The camera's accuracy is about one degree
of arc or about a centimeter on the screen.

The cameras are still sensitive to ambient light and the
environment, but this is becoming less and less of an issue.

Greg anticipates that within ten years, all monitors will come
with eye tracking hardware so the disabled will ultimately
benefit.

Heat Maps

How does Eyetools work?

Using the eye-tracking hardware, one can follow the user's
gaze across the screen and visualize that movement with trails on
the page.

However, it is more useful to look at trends. How does a group
look at a page? To answer this question, the Eyetools software
aggregates the data to produce a heat map where warmer colors such
as yellows and reds shows where people were looking the most.

These heat maps make it easy for designers to test multiple
prototypes and quickly figure out which elements of each prototype
are effective.

The maps also show where people are looking so designers can put
key messages in those spots. Conversely, dead spots can also be
identified. One trick Greg's team played on their testers was to
place gibberish in the dead zones. Not surprisingly, the nonsense
words went unnoticed. Eyetools eats their own dog food on their own
web site. Using their own software, they ensure that their web site
gets the message across that the company is about eye tracking
tools and that they are fast.

One other unexpected benefit of the heat maps is that they also
help to garner executive support in a redesign process.

Testing

Greg found that they could get reliable data with small sample
sizes (10-20 people). This makes it cheaper than other testing
methods.

They found that their testing methods, which use unbiased
people who do not work for their clients, produced more reliable
data than their client's internal tests. It is fairly easy to see
why this is so: involved people look at the pages differently from
the outside people. The insiders know what they are looking for,
whereas the outside people are skimming for new information.

Testing by normal methods also introduces bias. As soon as you
talk to the tester, you alter his experience. You might be able to
get the tester to see what you want him to see, rather than what
he would have seen for himself.

So how much does it cost?

Eyetools can do studies for as little as $1,000. However, a
normal study involving 15 people will take about 20 hours and cost
about $3,000. They also provide larger contracts ($30,000-$50,000)
for the big guys that includes consulting.

It's also easy to use Eyetools. You give them a web page to
analyze. They obtain the test subjects in the demographic you
select, perform the tests, and and send your data to you.

Lessons Learned

An audience member asked what sort of design patterns they have
learned. Greg said that they have discovered more anti-patterns
than patterns. For example, breaking lists into multiple columns
can often result in the viewing of fewer items. And it isn't true
that people don't scroll.

When placing ads within stories, it is more effective to place
them later in the story than in the first paragraph or two. The
reason is that the user concentrates heavily on the first
paragraph and ignores the surrounding images. Later in the story,
the user begins to skim and has a better chance of seeing the ad.

None of the news sites have yet figured out an effective
"below the fold" design for their front page so more
work is needed to entice their readers to scroll down.

Greg directed us to the Marketing Sherpa resource which
describes how to create your launch page.

Epilogue

One of the more interesting applications of Eyetools that Greg
has seen was an analysis of how people viewed police lineups.

They also reviewed the CSS Zen Garden (see
www.csszengarden.com), an absolutely fascinating web site that
shows how different Cascading Style Sheet (CSS) files can affect
the same content. They collected a lot of data that Greg wants to
publish when he has some time.

Finally, Greg impressed us with a chart listing a few dozen
customers including Yahoo!, Google, Disney, Dell, Microsoft, and
ChiatDay.

Greg is the CTO of Eyetools. He can be reached via email at
contact@eyetools.com. You can read more at eyetools.com and
blog.eyetools.net. Eyetools is hiring designers and programmers
(Java, front-end, back-end, database, SOAP, SOA).

Maybe they'll send me a heat map of this article.

Bill Wohler programs user interfaces in Java/Swing on Linux.
He can be reached via email at wohler@newt.com or you can visit
his web site at www.newt.com/wohler.