Heatmap Presentation of Eye-tracking Data
by Destry Wion :: published 17 May 06
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.
Latest Ten Articles
- Finally Pro-MacBooked 6 April 07
Six months later than expected, and on the eve of the new Apple Leopards, I am nevertheless a happy owner of the MacBook Pro, and it feels good.
- What Makes a Good Web Accessibility Guide for the Business? 2 April 07
With pressure mounting on web developers and companies alike to provide quality eAccessibility products and services, it makes good business sense for companies to have their own eAccessibility guidelines to help ensure development objectives are being met in efficient and cost-effective ways. However, just knowing guidelines are needed is one thing, producing and integrating them into a development workflow is something else. What breadth and depth of information should they cover? How should they be written and structured for maximum understanding? What format provides the best utility? Seemingly, the preparation of eAccessibility guidelines is not a fundamental task, the considerations are many.
- Main Points Delivered at the First European eAccessibility Forum14 March 07
I’m not exactly punctual on this one, but making a long story short, here are the main points as I took them from the eAccessibility Forum held in Paris nearly 6 weeks ago…already.
- In Paris for the First European eAccessibility Forum27 January 07
It’s going to be a whirlwind trip on the train, but should be interesting nonetheless.
- Lose Readers by Moving Themes?14 January 07
We hear about free Weblog themes all the time, and see the same ones all over the Web, but it’s not often you read about someone moving a personal theme from one self-owned domain to another, or the implications of doing so.
- Book Reviews Coming to Wion18 November 06
Reading and writing is my kind of chocolate, and when it comes to book reviews, everybody wins. I hope you’ll find them helpful. Stay tuned.
- A Core Textpattern Technique Addressing Internationalization Interests14 November 06
This article presents a core Txp technique for managing internationalization efforts, and three methods of use are described: 1) multilingual publishing within site, 2) collaborative international publishing between individuals, and 3) an alternate approach to #2 that essentially takes a community slant.
- Textpattern Building Block Mechanics30 May 06
Here is the second article in a two-article series about Textpattern building blocks. If you missed the first article, Understanding Textpattern Building Blocks, you might check it out too.
- Heatmap Presentation of Eye-tracking Data17 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).
- IE Conditional Comments: Where Have They Been?19 April 06
Conditional comments have been with us for years and largely unknown, but with the coming of IE 7 they may be the swan song that’s about to go platinum.
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).
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.
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.