Create a computer simulated visitor eye-tracking heatmaps of your web page, photo, banner ad and billboard

feng-gui_logo11

Feng-Gui is a web service that offers visitors eye-tracking heatmaps of your website/web pages, simulated by a computer algorithm. It simulates what your website visitors see on your page over a period of 5 seconds. Then it maps that out on your website screenshot showing flow of attention over areas that got the eyeballs in color regions red, yellow and green. Red meaning the more time people’s eyes are over that area, while green being the least and yellow the mid level. There’s nothing wrong with green, atleast people are paying few milli seconds of attention on it. They call this the attention heatmap.

To get started, you can use the free attention heatmap on their home page. Make sure you have a screen shot of the website that is less than 500kb. You can create one here. Upload it and you get the heatmap. Below is the heatmap of Yahoo homepage created for free.

8dfd3387-192c-4062-8567-1e89babf5880

It has the paid version starting at 10 images for $25. If you really want to use the heatmaps on your website without the watermark, paid version is the only option available. In addition to web pages, the paid version also has the different view types to perform analysis – photo, billboard and advertisement, Each has its own algorithm for the different view types. You can choose what units of measurement you want to use, centimeters or meters, though the difference is not obvious when I tested. The interface is shown, below,

feng-gui-interface

Let’s take a look at different view types starting from website.

Here’s how the Amazon.com looks like when eye-tracking simulation is performed, the view type is selected¬† as website,

d00a9f90-34d3-4f41-8df7-c93661ca986d_heatmap

 

Here’s how the eyes move (simulated not performed) over a pic of Margaret Thatcher, (you should select photo as the view type),

margaret-thatchermargaret-thatcher_heatmap

I prefer the heatmaps color overlay be more transparent, as this would let see the photo.

A billboard of “More than just a pretty face” movie, eyeballs simulation would look like, (of course the view type is selected as billboard)

bf73e3e5-155e-427c-809e-1a2cd85aafea_heatmap

bf73e3e5-155e-427c-809e-1a2cd85aafea_original

Now, advertisements. We’ll see the Google homepage with ads and then a banner ad. The view type selected to perform the analysis is advertisement.

364b709d-4760-454c-ade2-80308cf97195_heatmap

33abb75c-5654-409c-a232-62ff0920818a_heatmap

In addition to heatmaps, it has the Gaze plot, opacity map and areas of interest reports. Gaze plot report shows the path the eyes move quickly from one point to another. Feng-gui calls it the scan path. A Gaze plot report would look like,

33abb75c-5654-409c-a232-62ff0920818a_gazeplot

Opacity map report illuminates where the eye moves and brightens that area while the other areas would be toned down opaque. The transparent area are the one which attracts more attention. An opacity map report would look like,

margaret-thatcher_opacity

bf73e3e5-155e-427c-809e-1a2cd85aafea_opacity

And finally the areas of interest report. This report breaks down the entire region into percentage a area gets attention. For some reason the Area of interest(aoi) is not showing up on the amazon homepage, so I am showing you the one they have it on their site. The area that attracts more eyeballs have a greater percentage like shown below,

reports400x3006

Closing,

Eye-tracking your visitors in real needs to have an hardware attached to their eyes, that tracks the eye movement as well as where the eyes look on a screen. The simulated algorithm Feng-gui offers is near accurate not needing a group of human eye balls to conclude a result on a heatmap. The paid version of 10 images for $25 is quite a bit expensive costing $2.5 for an image. Hope they would reduce it down a bit. As well as the heatmaps overlay should be more transparent enough to actually see what the real photo or image looks like. Otherwise you can’t just share the heatmap without the original image. Free preview looks good enough for most purposes. Finally you have to take a screenshot of a website or anything and have it in the jpg, png. bmp or gif form. They should let you just enter the URL and show the result.

Leave a Reply

Your email address will not be published. Required fields are marked *