Web Marketing: How to Evaluate Layouts with a Heat Map

Designing a business website is very similar to designing a store with product marketing in mind. In fact, your website really is a store — a virtual store on the Internet. Grocery store chains have spent millions of dollars in market research, watching and documenting how shoppers enter the store, turn right or left, and then graze their aisles. You need to know how a visitor enters your website and what his eyes look at.

Fortunately, you don’t have to pay thousands or even hundreds of dollars to know what your visitors look at first, when they enter your website, and where their eyes go next. You can use the free heat map tool at Feng-GUI to upload an image of your webpage. Feng-GUI then displays how most people might be looking at that particular page when they see it for the first time.

Notice how Feng-GUI displays the upper-right corner and the right column as viewed most often by the different weighting. Then the attention shifts to the middle of the page.

The following steps explain how to create a similar map of your own site:

Open your browser and visit the homepage of your website (or any subpage).

If you don’t have a website yet, you could use a heat map analysis of a competitor’s website to see what its visitors are interested in.

Take a screen shot of your homepage (press the Print Screen button on your keyboard).

Open Microsoft Paint or your favorite graphics editor and paste your screen shot into a new document.

Paint is available on most Windows machines; choose Start→All Programs→Accessories→Paint. When a new document opens, simply right-click and then choose Paste from the contextual menu that appears. Your homepage should now appear in Paint.

Save your screen shot by choosing File→Save As. Give your image a name and then choose .jpg from the Save as Type drop-down list.

Point your browser to Feng-GUI and scroll to the bottom of the homepage, where the free demo heat map utility is located. Click the Browse button to find and upload the JPEG file that you just created.

Click the Analyze button.

You see the most important areas of the page that your visitors’ eyes gravitate toward.

Ask yourself the following questions after running a heat map simulation, whether you use your competitor’s website or your own as the example:

Are these areas of the page where the attention of your visitors should go first?

What feature should you have in place where the majority of your visitors look first when they land on that page?

Is there anything visual about this page that is a huge turnoff and a reason why so many people might leave the site prematurely?

Category

Examples

How Long after Problem Noticed Do They Leave?

Reason for Leaving

Visual

Graphics don’t line up. Graphics aren’t consistent
with content. Too many graphics with not enough content. Too many
animated images.

Less than 5 seconds

Visitor believes content or product will be of lesser quality
and looks for something better.

Textual

Headline isn’t related to search results. Text is too
hard to read. Poor grammar and spelling. All text, no video.