What We Can Learn From Heat Map Studies to Improve Our Calls-to-Action

Posted by AnnSmarty

Most of those reading this probably already know about heat maps. But stay with me while I give a quick explanation to those who don’t.

 

A heat map is a visual graph delivered in a unique style. Rather than showing straight statistics, it works by using different colors to show things like…

 
    • Mouse movement: Where the mouse was moving (my means of mouse-tracking)
 
    • Click tracking: Where the actual click occurred
 
    • Scroll tracking: How far down the page the visitor scrolled
 
    • Eye tracking: Where the eye is most likely to focus upon first viewing an image.
 

What’s more, a heat map can be incredibly helpful when improving the clickability of your images.

 

It will let you know what people are looking at and what details they are missing. From there you can adjust, remove, and add whatever you need to increase the effectiveness of each image used

 

Three things we can learn from heat map studies

1. People prefer to view faces: A Nielsen Norman Group study showed that users ignore stock photos.

 

When viewers looked at a company’s page presenting photos and bios of the entire team, the test revealed that users spent 10% more time viewing the portrait photos than reading the biographies, even though the bios consumed 316% more space.

 

people-photos-fixations.jpg

The “headshot” phenomenon is confirmed by this study of LinkedIn profiles: This Heatmap Proves That Looks Are The Most Important Thing On Your LinkedIn Profile.

 

Heatmaps

In a study conducted by TheLadders, an eye tracking heat map showed that recruiters spend 19 percent of the total time they spend on your profile looking at your picture.

 

The same goes for Facebook profiles, where people seem to be most interested in the headshots:

 

facebook profile

The conclusion? Whether you like the idea of marketing your headshot or not, you have better chances to succeed online if you do. Your face shot can make your social media profiles more memorable and engaging, as well as trigger more clicks to your on-site calls-to-action.

 

2. A smile garners more attention: The study by Specs found that something as simple as a smile can have a huge impact on whether or not an image gains any real attention. Not only will it draw the eye, but it will be more memorable to the person viewing it.

 

A Smile Always Gets Attention

 

Being easily recognized is an important part of content marketing. How can you really make an impression? By posting your work alongside the same smiling photo (or a couple of photos where you are clearly recognizable). Your site visitors will learn to associate you with quality. Then, when they see your image posted with a piece of content, they will be sure to click on it every time.

 

You can use the same tactic on social media. A good picture makes your profile more appealing, and will help you gain more followers. So smile!

 

They Look Where You Look

3. People look where you look: Direct eye contact is effective. Eyes in the picture almost always draw attention. But eyes also guide attention.

 

This case study shows that eyes can guide the users’ attention to where you want them to be guided (e.g., glancing to the left will guide the viewer’s eyes to the left.)

 

But it’s not just the eyes. It’s also been found that emotions (plus eye direction and straightforward pointing to the on-page object) trigger the most conversions.

 

In this case study it has been found that the photo of the model who looked excited and was looking at (and pointing to) the CTA generated the best conversion rate.

 

smiling pointing

What we can take away from these studies

These studies show that our images might not be viewed in the way we intended them to be viewed.

 

When we post images, we have a tendency of focusing entirely on the quality of those pictures.

 

You could have a perfect, high-quality image of yourself smiling on your front page. But with a minor tweak (e.g., posting a photo of yourself looking at your CTA), you could dramatically improve your conversions.

test

Put this information to use for your brand

Start by strategically testing different facial expressions and positions.

 
    • Maybe begin by using slightly different images of yourself for your bio, About Us page, and social media profiles
 
    • Also consider using authentic testimonials with well-recognized pictures of social media influencers, as in the example shown below
 

First Site Guide

    • Use smiling faces in your banner ads or as CTA click triggers
 

banner ads

There is no perfect solution

With visual marketing, it is never straightforward.

 

Images put on different social networks or offered in front of different audiences can generate absolutely different levels of engagement from what they would on your own website.

 

This case study done by Curalate and introduced by Wired is a great example. The Curalate team analyzed millions of pictures to find the perfect combination of elements that made up the best possible Pinterest image.

 

What did their research find?

 
    1. Images without human faces performed better
 
    1. Shallow depth-of field wins (i.e., main image in the foreground, with the background blurred)
 
    1. People prefer moderate light and color
 

This study makes clear there is no one-size-fits-all when it comes to what will resonate with vast audiences across the web.

 

The key to discovering what works for your brand and target audiences is to test and re-test.

If you’re now excited to do some testing on your own site, there are some easy-to-use tools that can help.

Popular heatmap tools

Sumome Heatmaps (freemium): I use Sumome simply because I have Sumome already installed and it has heatmaps nicely built in (and they are free).

 

Sumome Heatmaps

Bannersnack (paid, but offers a free trial): Inherently this is banner-analyzing software. However, Bannersnack can also be used for designing and analyzing any on-site images you use for CTAs and/or design.

Bannersnack

First, create the visual using the handy online editor, grab the embed code, and put it on your site. (You can embed it on a landing page or within your article.) Give it some time to work,then go back to see how your audience interacted with your banner. With Bannersnack, you can see where exactly people clicked when engaging with that visual.

 

Then, if you like what you see, download the image and re-use it for social media advertising or other types of social media marketing you are doing.

 

Piwik Overlay Maps (free): Piwik’s click maps are not as nicely done as Sumome, but they are very useful nonetheless.

 

Piwik Overlay Maps

A page overlay displays the actual website and puts bubbles next to the links on the page that show how many visitors clicked the link.

 

It’s a nice way to compare on-page images (for example, navigation icons like those in my screenshot above).

 

Visual Attention Software (freemium): This is a new tool I only recently discovered that uses its own algorithm to simulate what people see during the first critical 3-5 seconds of viewing.

 

VAS

It’s science-based, so it’s not actually tracking anything. (It analyzes the image using its own patent-pending algorithm.)

Do you have a case study on using heating tracking to improve CTAs you would like to share? Let us know in the comments.

 
 

Sign up for The Moz Top 10, a semimonthly mailer updating you on the top ten hottest pieces of SEO news, tips, and rad links uncovered by the Moz team. Think of it as your exclusive digest of stuff you don’t have time to hunt down but want to read!

Leave a comment