• The inventors of eyetracking heatmaps, experts in eyetracking analysis

But What Does It All Mean? Understanding Eye-Tracking Results (Part 5)

Part V:  Time and the Heatmap

In my previous post, I mentioned that heatmaps do not have a time component. Several people have asked me to discuss this topic in a little more detail, so here we go.

Important point #1:

A heatmap represents which content was seen by a group of participants. A heatmap helps to answer the questions “Where did users look?” and “Where didn’t users look?”

Important point #2:

If you are analyzing a heatmap, you are momentarily saying “Ok, in this instant we don’t care how long people looked at things, we just want to know what they saw.”

A heatmap does not answer the questions:

•    How long did someone look at my page or page element?
•    Did users look away and look back?

To further clarify these points, here’s a general overview of how a heatmap is created (click illustrations for a larger view):

Expl_1_5

Step 1:  Collect data

A single participant views a web page. We record her eye movements as she browses. This gives us data which can be represented in a gaze replay animation.

Now imagine that the animation is composed of a stack of stills, just like a flip book. Each page of our eye tracking “flipbook” contains the X,Y, and Time coordinates of a single fixation.


Expl_2_3

Step 2: Collapse individual data sets along the t-dimension

Keep imaging our eyetracking data as a flipbook (3D data structure).  Now we will collapse the stack along the time axis.  In its most basic form, the calculation will take the area of a web page and note every location where the participant fixated.  By collapsing the time dimension, we remove it from all further calculations (poof!) 

This means that someone who fixated the center of a page for 100ms will end up with the same fixation summary as someone who stared at the center of the page for an extended period of time.

Expl_3_4

Of course, the algorithm for doing this computation is more complex than the example I just presented. Any heatmapping algorithm should take into account peripheral vision, microsaccades, blinks, fixation duration, “bad data”, ocular drift, dynamic page behavior, etc.   For now let’s continue with the simplified example.

Steps #1 and #2 are completed for, oh, say 15 people total. This gives us 15 individual fixation summary plots.

Expl_4_2

Step #3: Compute an average viewing value for each pixel of the webpage

Again the algorithm which handles this step is more complex than what is presented here, but the basic idea is…

For every pixel of a web page, the system asks “how many people saw this pixel?”  If 10 people saw the pixel out of a group of 15, then the algorithm says “66% percent of people saw this pixel… color it yellow on the plot.”

Expl_5_2

This averaging algorithm outputs a heatmap showing what percentage of participants saw each page element.  Handling the data in this way keeps any single individual from biasing heatmap percentages.  For example, imagine that 14 people only looked at the center of a page, and 1 person looked at the entire area of the page.  Even though 1 participant viewed a much larger area than anyone else (and probably spend a goodly amount of time doing it), she still only represents 6.7% of the 15 person group.  The resulting heatmap would then show that 100% of people fixated the center of the screen, and less than 10% looked elsewhere.

Other questions that have come up:

If you make a heatmap from only the first 10 seconds of viewing, doesn’t that add a time component to the heatmap?

The answer is no.  The method for computing a heatmap is the same no matter how large the time sample used. When you slice for specific time intervals, you are just selecting a specific group of fixations to include in the calculation. The resulting heatmap still has no time component.

Are heatmaps created from time slices more valid or informative than those created from full experiment sessions?

I suppose that depends on the kind of information you want to get from the plot.  If you want to see where people looked in the first 10 seconds, a time slice heatmap is appropriate. If you are trying to understand an order for page element viewing, a heatmap is probably the wrong analysis tool. If you want to see where people are looking over their entire experience with the page, a full session heatmap is the way to go.

This is the last planned installment of our “But what does it all mean?” series. However, the discussion is still open, so if anyone is interested in other topics, just let me know.

Article by Teresa Hernandez - Eyetools, Inc.
Illustrations by Boyd Richard - Eyetools, Inc.

Written by Teresa Hernandez

Other articles written by Eyetools

Basics of Eyetracking

Understanding Eye Tracking, Part 1:  Misinterpreting Data
Understanding Eye Tracking, Part 2:  What You Can Learn From Eyetracking Data
Understanding Eye Tracking, Part 3:  What Is a Heatmap Really
Understanding Eye Tracking, Part 4:  What Is a Scan Path
Understanding Eye Tracking, Part 5:  Time And Heatmaps

People can't click on what they don't see

Small Decreases In Viewing Can Decrease The Probability Of Being Clicked By More Than 50 Percent
Wasting Money On Content In Visual Dead Zones

Success stories

Eyetools Doubles Conversion Rate for Fortune 100 Client
How Eyetracking Helps Website Redesigns: An Eyetools Case Study

In the Press

Yahoo Search Assist Uses Eyetools Eyetracking To Optimize Design Based On Eyes And Where People Look
Eyetools In Wall Street Journal: Benefits Of Heatmap Testing For Ibm Ogilvy Cisco
Eyetools In Adage About Ogilvy Using Our Eyetracking For Its Email Clients
The 3rd kind of conversion problem: the most exciting one

Examples

Common Email Layouts B2C Electronics Template
Eyetracking Circuit Citys Email Template
Branding Effectiveness Sports Illustrated And Footaction
Css Zen Garden An Eyetools Eyetracking Analysis
Is The Washington Post Wasting Money On The Bottom Half Of Their Homepage
The New Washington Post Homepage Design: An Eyetools Eyetracking Analysis
Blog Analysis And Optimization With Eyetracking
Eyetracking a Navigation Bar How Many Elements Are Read? Well, It Depends

Eyetools eyetracking and SEO / SEM

Eyetracking Google Search Results Eyetools Research: This One Should Help With Search Engine Optimization SEO/SEM Planning
Eyetracking Google Checkout Button Does Not Increase Viewing Significantly But...
Google Eyetracking Study Of Search Results On Sale
Version 2 Google Golden Triangle Eyetracking Search Report