Feng-Gui’s Predictive Heatmaps Let Graphic Designers See Things Through Others’ Eyes

Heatmapping tool Feng-GUI helps graphic design and conversion optimization professionals gain that much-needed distance from their work. The tool lets you upload an image and the software returns an attention heatmap overlaid on the image—even without any people having seen the image!

This is called predictive heatmapping. So how does it work and what good is it to you? The answers to that plus some real case studies, after the jump.

What is an attention heatmap?

An attention heatmap is a combination of two elements: eye-gazing, and predicted attention.

Eye-gazing simulates the sequence of extremely rapid and involuntary eye movements (“saccades”) that happen as your eye scans a scene. This is overlaid on a heatmap of the attention represented by different colors which predicts where the brain will focus. Hotter areas indicate a more intense focus, while cooler areas show a lower level of awareness and importance.

What factors are considered in generating a predictive heatmap?

As Feng-GUI’s neat “how we do it” page explains, their algorithms are based on recurring themes detected via eye-tracking. These are things like color contrast, orientation of an object, etc.

How can it be used?

The description continues:

“It can be used to refine landing page designs for existing or new pages, and to improve conversion rates. It can identify which page elements are being looked at and which are being ignored. This allows the designer to focus attention on the correct parts of the page and increase the likelihood of conversion. Attention heat maps can be created several times during the design or re-design process to ensure that the refinements are having the intended effect.

“A ‘busy’ eye-gaze path and scattered heatmap with many hotspots is usually an indication that visual priorities of the page are not clear, and will likely result in confusion and a higher bounce rate for your landing page. Relatively simple eye gaze paths and a small number of clear hot spots (centered on the desired conversion-related areas) are a good indication that the page will be more effective.”

Another way these can be used is in improving the effectiveness of print ads. My friends in the Community Law club at McGill Law are putting on an event dealing with depression in law students. Here’s their ad:

And here’s the heatmap:

Notice how little attention goes to the upper right call to action? When I first saw this posted on a bulletin board, I didn’t notice it at all. I thought it was strange someone would just post a random fact, so I looked around and only then did I notice the call to action.

A better ad would have probably made the call to action larger and placed it somewhere below the main copy.

Indeed, this bottom-left to forward-right layout, which I’ll call the forward slash layout ( / ), is very confusing to Western readers, because we’re accustomed to reading from left to right and top to bottom. As my fellow fans of Gord Hotchkiss and Enquiro B2b SEM and usability know, study after study has confirmed this pattern.

Now let’s see these heatmaps in practical web action. Let’s see what we can use them for!

Some sample heatmaps

Suppose you’re SpyFu. And you’re curious to find out your competitors’ conversion rates—for example, AdGooroo. Here’s AdGooroo’s landing page.

What jumps out at you? Personally, the toolbox in the middle grabbed and held my attention, which is bad news for the copy. Feng-GUI seems to agree:

So if you’re SpyFu, you might think that you’re laughing all the way to the bank. The problem is SpyFu’s landing page…

… isn’t so hot either.

The main call to action above the fold looks like some support link because of its placement near the login link, and the areas of the page that are emphasized are secondary (Live Help) and a fake button (Top Secret) that isn’t actually clickable!

For people considering media buys, and what creative to use, I have the [untested] belief that Feng-GUI can predict the best creative. How?

Have the graphic artists mock up a screenshot with your various banners in place. Then put each screenshot through Feng-GUI to see what draws the most eyes, and you might have found the ad that will draw the greatest CTR for you.

As an aside, I’d like to point out that the faces in the heatmap aren’t highlighted, yet eye-tracking reveals that faces tend to draw our eyes. Feng-GUI has an option to let it know there are faces in the image, and it does slightly better with this feature enabled. But nonetheless, the resulting heatmap isn’t great. So be aware that the tool isn’t 100% accurate; Feng-GUI itself only claims to accurately assess 75% of what actual eye-tracking would capture.

Ironically, Feng-GUI doesn’t seem to have used its predictive mapping on its own site. When I first tried buying credits for Feng-GUI, I went crazy trying to find the “buy now” button. Beside the fact that “buy now” is not in the main navigation, it’s not obvious on the products page either. Looks like I’m not alone in my frustration—I used the tool on the page and ended up with this result:

The order button is one of those small, unimposing white jumplinks at the top of the page. Exactly in that negligible row of links above the active window that gets no attention. And because Feng-GUI couldn’t be bothered to add a simple buy now button with Paypal, you need to email them to request to buy. Only then will they send you a Paypal money request.

By the way, there is a competing predictive heatmapping tool, Attention Wizard, currently in beta. I’m not spending time reviewing their tool because it currently only allows you to generate one heatmap a day.