Eye tracking data is notoriously hard to represent visually. It’s dense, high dimensional, and can’t be compressed without losing important information. The industry standard graphic, a heatmap of the combined tracks of all participants in a study, does a good job representing the amount of attention each area of the page got. However, it has crippling disadvantages.
A heatmap only represents the distribution of interest on a page; it reveals nothing about the order in which participants looked at areas of the page. It represents all participants with a single graphic and gives no sense of the variability of the ways in which participants approached a page. Worst of all, it invites the reader to infer that all study participants had tracks more or less similar to that of the overall heatmap. This is completely wrong; in fact, it’s entirely possible that no single participant had a track remotely similar to that of the combined heatmap.
An eyetracking infographic that makes up for these disadvantages would make an excellent partner for a heatmap. Such an infographic would have three goals: it should tell a story – represent the order in which participants looked at areas on the screen – and this story should be as broadly representative as possible. One way or another, people examining eyetracking data are going to commit the fallacy of composition: they will assume that each individual participant’s track is similar to that of the study as a whole. This new infographic should strive to ensure that this assumption is correct, even though it is not logically valid.
The infographic we invented with these goals in mind is shown below, next to a heatmap generated from the same data. We’re calling it a transition graph, after the physics/CS concept.
To build these graphics, we first cluster the points together. Then, for each cluster, we draw an arrow to the cluster that study participants most frequently looked at after looking at the first cluster. Arrow width is proportional to this frequency.
Sometimes, these arrows form a clear path through the different parts of the image — the Apple Trailers page above is an example of this. In this case, the path is the most representative way to think about how users traverse the page. It isn’t necessarily true that all users looked at the page this way; however, this is the best single representation of the way they looked. Even if the arrows don’t form a clear path, the reader still gets a sense of how the areas of the site relate to each other over time. Eye tracking users who rely only on heatmaps neglect this aspect of the data at their own peril.
Below are transition graphs for three more GazeHawk studies, along with the accompanying heatmaps. We’d really like to hear from the community, particularly data visualization specialists, on what you think about this visualization.
How would you like to see this? How would you represent this?