Heat Map Tests - Hight Converting Landing Page - 7&7 DigitalSo… Heat Maps.

No – this has nothing to do with the weather or any maps of countries, really.

Ever wondered how users browse your website? Which fold do they spend the most time on? What button is clicked the most? Which part of your landing page is ignored the most?

Wonder no more. This is where heat maps come in.

Here’s an example from PT Engine, a 7&7-approved heat map tool and web analytics we personally use:

Heat Map Example - 7&7 Digital

Heat maps, such as the example above, are visual representations of customer behavior – typically the record of people’s clicks, mouse activities, and scrolls. This record is then quantified and displayed visually.

Heat maps have long been developed in mid-90s but is still one of the loved conversion optimization tool of marketers today.

How does heat maps work?

Mapping programs creates an accurate inference on the data available by taking a good sample based from a percentage of your users.

This offers a new visual perception on how you view your consumer’s behavior on your website or landing page.

7&7 has personally put heat maps to the test on multiple cases across multiple clients.

Here are 9 quick tests the team has put together to help you grasp more of heat map’s capabilities and flexibility, and hopefully you can use on your customer behavior testing.

The 9 Heat Map Tests Revealing Audience Behavior

1. Header Test

Let’s start with the header.

Your website header could be consuming too much space on your website or landing page.

Not a good news. This is something you would not want. Too much header space could mean more attention on your header and less for your website content and offers. More time on your header also implies that users are confused with the structure of your navigation.

Scroll, move, and click/tap heat map tests can detect user activity if they fair well on your website header as below:


Heat Map Test - 7&7 Digital

Avoid complicating your header navigation to mitigate distractions. Only simplify it as much as possible.

If your website’s scroll rate is low, consider resizing the size of your header so your above fold content will move up more.

2. Fold Test

The first elements on your website will determine if your visitors will stay or close off your brand.

Studies have found that 55% of users spend less than 15 seconds on a website. This is a very small window of opportunity if you want to engage and communicate your key messages.

Heat maps can show the average fold position on all devices, whether mobile or desktops. This allows you to identify the above fold area needing improvements to engage and convince audience to stay.

If you have other home page segments that gets better engagement, move them below the fold. Add anchor links on the above fold that redirects to your lower page contents.

A headline is one of the most critical elements on your website. Double check your audiences’ behavior if they move their cursor, click, or tap your headline. Test variations of headline copies to find which users responds best to.

NOTE: Want to set up the perfect landing page for your website but not sure where to start? We can help! Contact us for a FREE Consultation and we’ll start setting up all the pages you need.  
Heat Map Testing

3. Distraction Test

Unknowingly distracting your users from reaching your goal on your website is so easy. One ad can quickly navigate their attention from buying your product to another irrelevant thing.

Luckily, you can determine user’s distraction level through heat maps. A telltale sign that your website lacks optimization is when the cursor activity is spread all over the page instead of the core key messages and CTAs.

Another way to know is when high activity is detected on small areas of the page. This means users are not particularly interested on any content of the page.

Remove any irrelevant content with low engagement.

Consider creating a poll to identify which content is irrelevant. Start by asking “What is missing on this page?” or “What could be the possible reason as to why you decided not to sign up?”. Questions as such can reveal your audience’s intentions.

A page redesign may be of need (including, but not limited to: content, headline, CTA, etc…) to address your poll answers.

Get More Conversion. See Also:

4. Depth Test

Are you sure your audience is reaching all the contents on your page?

You’d be surprised to find out how common it is for visitors not to subconsciously ignore additional contents that are not readily visible. Pages with too much white space under the above fold usually fall victims. It misleads your audience into thinking they have seen your complete page.

Scroll heat map can detect this viewing imbalance and know which folds are most effective.

Minimize the white space under your above fold.

Similarly, remove all design elements that could lead users into thinking they’ve seen all your content.

Add anchor links to high activity content or a Johnson Box above the fold with a bullet list of the page’s key content. Visual aids like arrows may also be handy in directing users to the lower part of your page.

5. Device Test

There are more devices to consider other than one desktop.

Your site is being visited in ways more than one. Tablets, netbooks, and phones alter your web design to which suits its screen size.

Crucial headlines and content located above the fold of your desktop preview may end up below the fold on mobile. Your 12-font-size could look sparse and unreadable on larger or smaller screens.

All these can affect your user’s experience, depending on which device they use and how responsive your website is to these devices. There’s really no guarantee unless you test it.

Start funding responsive designs to control what your page looks despite the screen sizes.

Utilize your heat map findings to further optimize responsive designs and drive high-engagement and clicks. Follow new sets of heat map reports after testing your updated responsive design.

NOTE: Want to set up the perfect landing page for your website but not sure where to start? We can help! Contact us for a FREE Consultation and we’ll start setting up all the pages you need.  
Heat Map Testing

6. Link Test

Not all your visitors know the parts of your website linked to another page.

List these click opportunities. They may pose potential dead-ends and could lead to users leaving your site in frustration.

Click and tap heat maps can detect which parts your users are clicking.

Link elements to their appropriate pages or consider an in-page modal boxes to reduce distractions and bounce rates.

7. Information Test

Your home page may lack information in convincing your audience to convert. Maybe your design is purposely not highlighting this important information.

Either way, you can test this through heat maps.

If your test shows high percentage in scrolling without any click activity or a high density of moves, taps, or clicks on small areas alone, chances are: users are missing your information.

Remove low engagement elements to expand your high engagement content.

You can also set up a poll to know what’s missing on your website. Update your content complementing these findings and begin split testing new heat map reports and conversion rates.

8. Engagement Test

Wonder why you’ve been waiting for a week but your top-notch content is not generating any conversion at all?

Heat maps can unearth your user’s engagement on which they respond best and not-so-well to.

Heat Map Test - Engagement Test - 7&7 Digital

Try tweaking your design like changing your CTA button to a bright shade of yellow.

Alternatively, you can also relocate your CTAs or contact forms on the center of the page for easier access.

Ask users what’s missing on your page and how it to improve your content. Use this research to cook updated content for your home page. Monitor the changes through a new heat map comparison report.

Get More Conversion. See Also:

9. Banner Test

Our brains are wired to ignore advertisements, especially with the over-saturation of brands on the internet today.

Some of your users developed “banner blindness”. Banner blindness is when your users subconsciously or consciously ignore banners – simply because they look like ads.

Move and click/tap heat map tests specify if your banners are ignored.

Redesign your banner layouts into something that looks less of an advertisement.

Visitors looking for fast information may tend to ignore ads as well as ad-looking banners. Alternatively, you can try placing your banner message along your content flow, split test, and monitor the changes.


So it’s final. Heat maps look really cool – and they work equally as great too. It’s basically the closest thing us marketers could come up with on reading our audience’s minds (mouse clicks, scroll and cursor movements, rather).

It’s an amazing tool. But even so, heat maps are only guidelines to show which part of your landing page needs optimization.

You can’t just run a heat map scan and leave it hanging. Find your analytics data and start optimizing your website/landing pages from there ?

NOTE: Want to set up the perfect landing page for your website but not sure where to start? We can help! Contact us for a FREE Consultation and we’ll start setting up all the pages you need.  
Heat Map Testing

What are your goals?


Where do you advertise?

What's your monthly PPC ad spend?

Do you want leads or sales?

What's your website?

What's your name?

What's your email?

What's your number?

Showcase of Our Work