Categories: data visualization, design

What are the visual rules that stimulate attention? This is one question behind View Finder Heatmap, a project inspired by the last 25 years of research in artificial vision and neurological studies on perception and cognition. The tool was built by Feng-GUI Lab, a group of artificial vision scientists and interactive designers according to Francesca Tomassini of Neural.it.

View Finder Heatmap generates a screenshot of a thermal map as an overlay on top of the requested website. Blue, green, and red colors inform the attention areas.

What can I find using the heatmap?

• Areas of the page/image that receives most of the attention
• Areas that are ignored. black - no heat
• Hotspots - highest points of attention.

I think this is a great way of using visualizations to quickly analyze an interface as opposed to using metrics. One downfall of the tool, it doesn’t connect user behavior to ‘attention areas’. For example, does an area with a high concentration of visual attention result in a user click or mouse movement? In addition, View Finder Heatmap does not observe web server logs like similar programs such as ClickHeat. However, I think this is a good tool that can supplement video recording and eye-tracking evaluation methods.

As an experiment, I was curious to see which photos on my flickr page receives the most attention.

My flickr page

Heatmap of my flickr page

Based on the results, it appears that many visitors heavily focus on the purple flower (both large and small versions), the flickr logo , and surprisingly my avatar.