Working with Heat Maps and Gaze Plots

Heat map Eye tracking Screen based projects

Learn what gaze plots and heat maps are and get a few presentation tips for how to use them to present the results in a packaging and web study.

Heat maps and gaze plots are data visualizations that can communicate important aspects of visual behavior clearly and with great power. And while they are easily generated by simply clicking on a tab, their proper and effective use requires an understanding of the goals of the eye tracking research as well as clarity regarding the finding one wishes to communicate.

Gaze plots

Gaze plots show the locationorder, and time spent looking at locations on the stimulus, whether web page, print advertisement, or video. So the primary function of the gaze plot is to reveal the time sequence of looking or where we look and when we look there. Time spent looking, most commonly expressed as fixation duration, is shown by the diameter of the fixation circles. The longer the look, the larger the circle.

Here’s an example of a gaze plot for a single eye tracking participant looking at a Pepperidge Farms Goldfish crackers box. The fixation circle with the number “1” at the center identifies the first look on this image. Subsequent fixations numbered 2-10 trace the location and order of the next 9 looks. But what exactly does this visualization show? How could we talk about it in a report or presentation?  See the following Presentation Tip below for an example of how a key finding could be communicated in the context of a hypothetical packaging study.


Tobii Studio gazeplot
Tobii Studio gazeplot

Presentation Tip

“This gaze plot depicts a looking pattern representative of viewers who noticed the brand logo early. They generally viewed the logo, product name, and primary graphic in that order. This group also had significantly longer first fixations suggesting heightened engagement and relevance. This finding was triangulated by higher unaided recall of these key elements. Viewers also reported higher levels of positivity and intent to purchase as compared to those who looked preferentially to package size and serving details instead of messaging elements. Taken together, these data suggest that heightening the visibility and visual salience of the logo and branding elements would result in an increase in consideration and, consequently, sales.”

As useful as gaze plots can be, they have their limitations. They are most impactful as static visualizations when only one or two participants’ data are shown as the display can become cluttered with more than a few overlaying the product image. See the next image for an example of what 30 individual gaze paths on the Goldfish package looks like. The exception to this guideline is when an animated gaze plot is exported as a video. In this case, including many or all participants can reveal different viewing patterns that could be predictive of performance outcomes such as task completion rate or time to complete, in user experience studies.


Heat maps

Heat maps show how looking is distributed over the stimulus. In contrast to the gaze plot, there is no information about the order of looking in a static heat map. Neither is the focus on individual fixations. Rather, heat maps are a visualization that can effectively reveal the focus of visual attention for dozens or even hundreds of participants at a time.

Heat maps have long been the poster child of eye tracking. Broadly used and equally as misused, this visualization is seldom the most meaningful output from an eye tracking study. And if improperly constructed and interpreted, heat maps can do more to distract and mislead than inform decision making.

Choosing the right basis for constructing a heat map is the critical first step. And to do it right, one must have in mind the study objective and the point to be made with the visualization.

Example: The study involves changing product description copy to increase understanding to improve rate of response to the call to action on a web page.

Since the redesign involves a manipulation intended to affect a cognitive process, namely effort, fixation duration is the appropriate eye tracking measure. In this case, we would create duration-based heat maps for the current and proposed designs showing visibly reduced heat in the redesign.

Tobii Studio heatmap

Presentation Tip

“These two heat maps show looking behavior to the page with current and proposed product description copy. They were generated on the basis of absolute fixation durations and both heat maps are scaled to 2.2 seconds maximum corresponding to deep red. The reduced and more broadly distributed heat over the proposed copy suggests reduced cognitive load, increased understandability, and deeper penetration into the copy.

This finding was bolstered by higher intelligibility scale ratings and lower confusion ratings. Furthermore, pupil dilation was significantly reduced for proposed and there were no facial codes for frustration, as opposed to 66% incidence on the current. Together, these findings allow us to state with confidence based on multiple data streams that the proposed copy achieves the objective of increasing understandability and intelligibility with the associated effect of increasing click through to registration for our service.”