I’ve been reading everything I can about optimizing Web pages for both usability and ad traffic, and just recently came across the term “heat map”, referring to some method of tracking what area on a page people look at, I guess? Can you tell me what it’s all about and perhaps give me a clue about where I can find more information about how to apply heat map data to my own site design?
Aggregate heat maps are rather Orwellian, somehow, and also remind me of a rather disturbing scene in Stanley Kubrick’s brilliant A Clockwork Orange: researchers use pupil tracking equipment to identify and map exactly where people look when they’re presented with visual information. In this case, it’s a specific Web page, but it can really be used for just about anything.
I’m not much of an expert at this, however, but my colleague Anne Holland’s company Marketing Sherpa just this week released a fascinating — through somewhat expensive — research report on heat maps and what they tell us about Web site design and usability. Anne’s given me permission to replicate some of the content of this new research paper, the Google Eye Tracking Report…

Colored Regions
Each colored region of the page indicates the percentage of people who viewed that area. Each color represents a range of viewing activity. For example, areas that are colored red are viewed by between 80% and 100% of the participants.
These colored regions are constructed using the fixation points and reading lines from the individual page view images. This means that a subject will only be counted as having viewed within a region if their eyes stopped (fixated) or if they read within that region. If their eyes traveled through a region without stopping or reading, they are not counted towards the percentage of people who viewed that region.
If an area of the page is colored red it does not indicate that each participant stopped to look at every single point within that region. It simply means that 80-100% of teh people fixated or read somewhere within that region. For example, if the word “digital” appears in a red area, we cannot say that 80-100% of the people fixated or read that particular word.
A small legend is provided at the top of each heat map. The following is a summary of what the colors mean:
Color | Percentage viewed |
---|---|
Red | 80-100% |
Brown | 70-80% |
Yellow | 60-70% |
Green | 50-60% |
Light Green | 40-50% |
Blues | less than 40% |
This really just scratches the tip of the heat map research. If it’s critical that you understand how people travel through Web pages and what areas they focus upon so you can maximize the efficiency of your own Web site design, this research report is well worth the investment of $149.
Even better, by buying it through Ask Dave Taylor you also help support the work I’m doing on this site to help people better work with their technology, business, and the world around us!
Learn more about The Google Eye Tracking Report
A five star EXCELLENT post. If they gave Pulitzers for Posts, well… …you’d have a few.
Nice article, but if the picture was available too, it would be even better. Here is a good web page about heat maps too
http://www.maxi-pedia.com/heat+map
great post 🙂
PS – not to sound like a snob but even Dave Taylor (of all people) ought to know not to hotlink images XO
I was hoping to see the graphic by Marketing Sherpa and it’s broken 🙁 Then again, did “courtesy of Marketing Sherpa” mean you got their permission to hotlink?
*sulks off to go find own heat map image*
Hi Dave!
I wrote a couple of blog posts about heat maps last week, including how to measure clicks and the best way to present them. You can find them at:
http://blog.corunet.com/english/zero-budget-eye-tracking-clickmaps
http://blog.corunet.com/english/how-to-make-heat-maps
Informative… Thank you!