Heatmap Presentation of Eye-tracking Data

17 May 06

Isotopic heatmaps of eye-tracking sessions are easier too see and understand; hence, great slide material for stakeholder presentations (management, clients, and so forth).

The University of Washington, where I received my Masters in Technical Communication, has a state-of-the-art usability laboratory, Laboratory for Usability Testing and Evaluation (LUTE), which is not only available for student use, but industry use as well. The lab is fully equipped with everything you need for controlled studies of computer interfaces (Web sites, kiosks, software, and so forth), including a control room, testing stations, video equipment, and an ERICA eye-tracking system, among other things. I was lucky enough to take part in a couple of high-end, usability studies in LUTE when I was still in school, including a cooperative eye-tracking study with the University of Twente in The Netherlands.

Visual results of eye-tracking studies are generally presented as static images (or progressive video clips) of the interface in question that show the study participant’s collective gaze paths (as vector lines) and the duration and/or frequency of gaze at a given location (as polygonal shapes/sizes). Both types of information are informative and useful for improving Web interfaces.

The folks at etre, an usability consulting company in the U.K., have been using another presentational method to communicate study results—heatmaps. Heatmaps represent the collective sessions as an isotopic map having a gradient of hot to cold colors, much like what one would see through thermal optics (hence the reference to heatmap). The etre team conducted an “internal” eye-tracking study, Five days / five heatmaps, where heatmaps are described. Be sure to see the links under the Results section for the heatmap examples.

From what I can see, heatmaps offer a lot of value, particularly when study data is presented to project stakeholders—like management, marketing, and clients—and needs to be stupid simple; in other words, heatmaps will make great filler slides in PowerPoint presentations. What I particularly like is the mask-like opacity of the heatmap on top of the interface in question; this makes it considerably easier to distinguish hotspots in the map, as the opacity of the map tones down the background noise that would otherwise come from the interface elements themselves. The same reasoning goes for regions in a given map where no hotspots exist.

On the other hand, there is a glaring deficiency with heatmaps that usability researchers will immediately recognize; heat maps lose the vector paths of a study participant’s gaze. This is not critical, as the original vector paths are generally saved in the eye-tracking data and can be relayered into a given map, but the process does not appear to be automated; hence, the vector paths would either need programmed into the heatmap algorithm or the layering would need to be performed manually.

In any case, with or without vector paths, heatmaps are an interesting and viable option for presenting and visualizing eye-tracking data.

  1. Maniquí  ·  18 May 06

    Hi Destry,

    sorry for posting this here (delete it if you wish).

    What a beautiful redesign!
    I really love it: the colours, the layout, the images, the CMS ;)...

    Congratulations!

    Are you an admirer of Roger Johansson?

    Your layout and your CSS seems a bit inspired in Roger’s work.
    And please, take that not as a bad critic but as a flattery (dont know if that is the word I’m looking for).

  2. Destry  ·  18 May 06

    Hi Maniqui, thanks. I certainly read Roger’s work (as should we all), and no doubt his site is a wonderful example of good, stylish content publishing. In truth, I did get the idea to go with a “max-width” kind of thing like he’s doing, but that was just a piece of the puzzle…influences came from all over the place. I’m still tinkering.

  3. Maniquí  ·  20 May 06

    You should definitely show it in the Let’s see yours, then forum.

    I’m playing with the “max-width” idea too.

    Well, hope to see you often at forums.