How do you know if your website content isn’t working? Your visitors aren’t going to tell you, so what can you do? The answer lies in an easy-to-use and effective tool called heatmaps.
When it comes to websites, great design and great content go hand in hand. As acclaimed web designer Jeffrey Zeldman once said, “design in the absence of content is not design; it’s decoration.”
Both design and content are needed to build a solid foundation for your website. On one end, you have design, a main driver of a customer’s trust of your website — 94 percent of consumers say that web design is a major reason they rejected or mistrusted a website.
On the other end you have content. While that beautiful, well-designed website entices visitors to engage with the site, it’s the content that convinces them to buy.
That being said, how would you know if visitors weren’t engaging and interacting with your content?
Sure, you may be using Google Analytics to evaluate if your calls-to-action are working or if your blog is being read, but is it really enough to analyze your CTAs?
Are you really getting the full picture of your visitors and how they really use your website from landing page to exit page?
Here’s a fun fact: Content on your website, whether it’s a blog post or product description, has just six seconds to draw in a visitor to click on a call-to-action or continue reading. If your best content is buried down the page, are visitors even reaching it?
We have the secret weapon to help find the answer and understand what your visitors really think about your website content – heatmaps.
A quick look at heatmaps
If you’re new to the world of heatmaps, here’s a quick overview: a heatmap is a visual representation of visitor interactions as they navigate through your website while on their phone, tablet or computer.
The more clicks, taps, moves or scrolls a section of the website receives from your visitors results in a “warmer” color, indicated by red and orange. The higher the popularity, the more intense the red.
Less popular areas are indicated by a “cooler” color, such as light or dark blue. The lower the popularity, the darker the shade of blue.
To evaluate the success of your website content, you primarily need two common types of heatmaps:
- Scroll heat maps show how far visitors scrolled down a page, including what percentage of visitors reached a specific point of the page. When evaluating whether your website content is getting read, scroll heatmaps are a good place to start.
- Click heatmaps show where visitors clicked their cursors (desktop devices) or tapped their fingers (on mobile and tablet devices).
Most heatmaps, especially an interactive heatmapping tool like Lucky Orange, provide the option to filter data to narrow results to show just specific visitors, behaviors, traffic sources, device type or geographical location (to name a few options).
This can especially helpful to identify behavior patterns or better understand how visitors from different sources navigate through your website.
For example, you can filter heatmap data to show just the clicks from visitors who came from out of state. You could then analyze their behaviors to learn where they clicked, how they moved across a webpage and if they purchased on the first or fourth visit.
Now that you have more analytics information, how do you use it?
If you discover that out of state traffic is more interested in your shipping page and converts on the second or third visit, you may want to consider building a landing page that offers free shipping just for your out of state visitors.
Now with the essentials out of the way, it’s on to the heatmap test.
Putting your content to the test
Before we dive into the test itself, let’s break it down by goals and the questions you want to answer:
|Goal||Questions to answer|
|Evaluate how far visitors scroll on a blog post or webpage||Is my CTA and most powerful content buried too deep in the page? Are visitors scrolling far enough down to see it?|
|Identify where visitors engage most on your website||Where on a webpage are visitors engaging? Is some of the content being missed?|
|Understand which content visitors prefer||Is my content generating a response or is it missing the mark? Are there areas I could improve?|
No. 1. Evaluating how far visitors scroll
A scroll heatmap is the best method to evaluate if your content at the top of a webpage is able to convince visitors to keep scrolling to the bottom of the page, whether your CTA is placed too low on the page or if long-form blog content isn’t keeping your audience’s attention.
Using the scroll heatmap, the darker the color red, the higher the percentage of visitors who viewed that portion of the webpage:
If your CTA is shown in a lighter pink or even white color, you know that most visitors aren’t making it down the page to see it.
As we mentioned earlier, you can filter scroll heatmap data. For scroll heatmaps, a good filter to consider using is device type, such as mobile or desktop.
While the average mobile user may be more accustomed to scrolling down a webpage, your mobile users may scroll more (or less) than desktop users and require a different content strategy to maximize conversions.
No. 2. Identifying where visitors engage most on your website
While scroll heatmaps can show if content is placed too low to be seen, click heatmaps identify exactly where visitors are engaging on a website.
This is a real example of click heatmaps in action on MyBaitShop.com, a Shopify store and Lucky Orange user:
Looking at the click heatmap, a few things jump out:
- Visitors are more interested in buying than selling
- Vintage/old lures are preferred over new lures
- Visitors enjoy the option to search by brand
- Visitors also enjoy searching for specific terms instead of just browsing
If you were the manager of MyBaitShop.com, how would you use this information?
You could update the content to reflect these preferences, such as making vintage lures a content priority to bring in new customers.
Looking at the drop-down menu, you could see what products are preferred by customers.
Not only could you use this information to expand MyBaitShop.com’s inventory of products, but it could also be the base for a new content strategy focused around those clicking behaviors.
Another thing to consider is regional differences.
In this situation, different regions have different varieties of fish which then require different lures. If you filtered data from MyBaitShop.com for specific geographical locations, you could isolate behavior specific to those places.
If northern states prefer a certain fishing lure over southern states, it may be fodder for a better content strategy that could involve campaign-specific landing pages.
Note: These are just examples using MyBaitShop.com. This Shopify store increased conversions by 450% in 103 days by using heatmaps, recordings and polls. Read more.
No. 3. Understanding which content visitors prefer
As we saw with MyBaitShop.com, click heatmaps can open the digital door to where visitors are clicking and what areas of a webpage they may be interacting with more than other areas.
When it comes to understanding which content visitors prefer takes it one step further.
On a blog post, for example, we can evaluate whether long-form content is read by using scroll heatmaps, but there’s so much more to content than just length.
Let’s look at our recent blog post, “5 (easy) actionable ways to improve your website conversions today.” It’s a relatively short piece promoting a webinar.
At first, you can see a few areas where people have clicked or tapped within the body of the article and on other current articles, listed to the right. However, as you watch, you can see that our CTA is easily the most popular link within the post:
Looking at the link copy, “Click here to register for the webinar,” the heatmap shows that “register for the webinar” is attracting more engagement than “click here.”
For future webinars, we may want to consider using different CTAs and follow-up by comparing heatmap results to see which CTA performed the best.
Click heatmaps can also help bloggers identify which blog posts and headlines drew more attention than others.
Of course, writing great content doesn’t come by chance. Web Canopy Studio has great tips to help make your content, whether it’s for a webpage or a blog, rock your visitors’ socks off.
Tips to make your content rock
Now that you know how to use heatmaps, how can you use them to make your content better than ever? What can you learn from your audience that will help you write stronger content, position your CTAs better and convert more visitors?
Here are four specific things to watch for as you analyze your data that can really help you up your content game:
No. 1. Look for clusters of clicks on words/images that are not links
When reviewing your heatmaps, specifically the click map, look for groups of clicks in different areas of the page beyond just CTAs and header navigation.
These are signs that people are interested in this content or are confused. It means they are interested in what that means; positively or negatively.
Explore what happens if that click opens a popup with more information or sends them to a descriptive page that walks them through your product or service.
Using heatmaps to show you areas of opportunity will allow you to take a next-level step in site optimization.
No. 2. Tag webpages for deeper analytics insight
Think about your content and the conversion path on your website.
What is the most important conversion a prospect could make? A demo request? Free trial? Contact sales?
For those important conversions, add a behavior tag on Lucky Orange. Behavior tags let you “tag” specific webpages, such as a shopping cart or checkout page, and dive into the heatmaps, recordings and analytics of that tag.
From heatmaps, you can use behavior tags to look at data just surrounding a specific behavior tag or several behavior tags.
For example, you could filter heatmap data using the behavior tag “added to cart” and “thank you for your purchase” to analyze how customers who completed their purchased behaved. You could then compare the heatmap results to visitors who triggered “added to cart” but not “thank you for your purchase,” indicating visitors who abandoned their carts.
Using behavior tags, you can also filter through recordings, which can be accessed from the heatmap or the recordings tab. While heatmap data can indicate the collective behavior of visitors, recordings dive into individual sessions to watch as a visitor moved from homepage to product page to shopping cart to check out.
You can look for things like:
- What page did they land on?
- What are they clicking?
- What are they reading?
You’ll want to look specifically for any roadblocks people have when they go through your site, or if the process could be smoother. See if there are one or two steps every person takes before that conversion.
With this information, brainstorm on what you can do to get more people to do those steps.
No. 3. Look for sharp drop offs in engagement on the scroll map
When people scroll down your page, they are naturally inclined to do one of two things:
- click into more information if they are interested, or
- they will leave the page if they aren’t in the right place
You want to identify areas on your site caused that choice to be made, whether that is a positive or negative decision.
If you see a gradual drop off of readers as they scroll down a page, don’t panic. According to Chartbeat, just 50% of readers see 1500 pixels down the page on content pages. On homepages and section fronts, 50% of readers make it to just 1000 pixels.
What we want to look for in this situation are steep drop offs that signal one of the situations described above.
If, for example, you explore your scroll map and find out that you jump from 80% of the traffic viewing this section to 40% of the traffic viewing the next section, that is a sign that you need to look at what’s happening.
It’s either the content above the drop off
- was SO GOOD that people clicked the CTA right away (which you can confirm by the click map); or
- was SO BAD people left the page immediately
Unfortunately, the latter is the more likely the case.
If your scroll maps show a similar drop off, consider removing or revising that second, lower section altogether.
This is important because many times people will keep their most important CTAs at the bottom of the page.
If you put important CTAs below the area where people are leaving the page, you’re excluding the majority of your visitors from even having the opportunity to convert. What happens if you move your CTA to where most of your traffic can see it?
No. 4. Look for mouseover movements around specific paragraphs or headlines
This is like the secret sauce to identify how people feel about content on the site. You can learn so much by watching where people subconsciously hover their mouse over things they read or highlight important words or phrases that really jump out to them.
As you look at heatmaps for cumulative data, you can see possible words or phrases that are resonating with your audience, which could indicate that your visitors are really interested in a particular type of content.
Recordings, again, really complement heatmaps. You can watch mouse paths to see which areas of a webpage or article are drawing the most attention.
You can then use that information to elaborate on the topic. Consider building topic clusters around this kind of content or creating videos to walk prospects through the concepts you’re highlighting.
Note: Mouse-over movements are only available for desktop visitors. For mobile visitors, we would suggest looking at recordings for taps and scrolling behavior.
Your heatmaps (and more sales) are waiting
The more you learn about how your content is resonating with your customers, the more you can learn what they want to read and how you can make better use of CTAs to drive more sales.
As good as your content is now, think of it great it could be with just a little more visitor insight.