Combine the eye and the brain and you have a magnificent machine. In just seconds, a human can analyze a webpage and determine (at least for them) what is the most important part of the page. Why is this important? When choosing a web design for affiliate marketing, it is very important! What your visitors see when they come to your site can make the difference between making an affiliate sale or having the visitor click away from your site.
Going from a basic website design, most people who talk about hot spots or heat maps show a chart like this:
As an affiliate marketer, you want your most important part of your page to be in the hot spots. If you are wanting to capture emails for a list, you might want to put a signup form in Hotspot #1. If you have affiliate ads, place them in Hotspot #2.
But not all layouts follow this simple example. You may need to play with your design to find the perfect one so that you have a perfect web design for affiliate marketing.
There are websites that can analyze your website for you to illustrate where the human eye is most likely to focus. Feng GUI is a great site to use to see how your site measures up. I ran a scan on my site just before writing this post. Here’s what the heatmap looks like:
The Attention Heatmap displays the most attractive elements of the image in the form of “hot” and “cold” spots. The Attention Heatmap report is a predicted eye tracking report which show how areas of the original image attracts the attention.
As you can see, the red dates for the posts were where the eye focused the most, followed by the ad on the bottom right. So I thought about what I really want people to see when they come to my site.
Before I did anything though, I wanted to see where the eyes went and how long they were there. The Gaze Plot report visualizes the scan paths and order between elements inside the image. This one is for the first 5 seconds someone views my homepage (click on it to enlarge):
As you can see, the first two things someone sees are the dates for the first two posts. Based on these two reports, I completely redesigned my site. Here’s the heat map on the new design:
So as you can see, we have shifted away from the red dates that previously attracted the eyes. Now they go first to the Orange label for the Tips and Tricks section. Anything that is red/orange gets the most attention.
Here’s the Gaze Plot:
From this, you can see that the first thing people see is the Tips and Tricks label. Then they are seeing the ad over on the bottom right. Overall, this site design is much better, but I still wanted the affiliate ad to have more focus. Adding a red ad might improve things:
This is better. There is a lot more attention on the affiliate ad. But what if I made it even more red? Here’s another ad in its place:
Now we have a red heat map right on my ad. This is perfect! When do people see this ad? The Gaze Plot should tell us:
This is great! The first thing people see is the ad. The second thing is the Tips and Tricks label. So let’s change that color to blue (as well as the label right under the ad) and see what that looks like:
Interestingly, the change in color for the section titles from red/orange to blue had no real affect on the heat map. And the Gaze Plot is also similar:
Okay, so overall, I am happy with the changes. My affiliate ad is the first thing people notice, and the view is for quite some time (relatively speaking). This is a significant improvement over the first web design where people were focusing on the post dates more than anything else.
So, the take away from this walkthrough is this:
Web Design for Affiliate Marketing
- requires careful thought about the layout of the site
- requires purposeful use of the colors red and orange
- should really be analyzed using a tool such as Feng-GUI
Hope you enjoyed this walk through. Let me know what you think of my new design in the comment section…