Eye-Tracking Technology and Analytics

Greg Edwards introduced his company, Eyetools, at September's Emerging Technology SIG.

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.


by-nc-sa Best Viewed With YOUR Browser Valid HTML 4.01! Valid CSS! Powered by Debian GNU/Linux GetJava Download Button