Web Marketing: How to Evaluate Layouts with a Heat Map - dummies

Web Marketing: How to Evaluate Layouts with a Heat Map

By John Arnold, Michael Becker, Marty Dickinson, Ian Lurie, Elizabeth Marsten

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:

  1. 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.

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

  3. 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.

  4. 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.

  5. 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.

  6. 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.
    Up to 10 seconds Visitor becomes skeptical that solution is genuine.
    Functional Page loads too slowly. Links don’t work. Searches
    don’t display results. Too many animated images.
    Up to 30 seconds Visitor leaves for fear of pop-ups, viruses, and loss of
    Social Lack of social media icons pointing to LinkedIn, Facebook,
    Twitter, Google+, RSS, YouTube channel.
    Up to 1 minute Visitor sees your website as out of date and notes that
    you’re not wanting to progress with new ways to communicate
    with your customers.

The visual component of your website is the first thing visitors see and is the most common reason why visitors leave in less than five seconds.

You can use Google Analytics to monitor the path that your visitors take when they arrive on your website.