Editor’s note: This post was originally published on 7/18/17 and has been updated for accuracy and comprehension.
The benefits of heatmapping include being able to gather information about how website visitors are behaving, which allows you to make necessary changes that better suit the way they naturally navigate it.
You need to find out what website visitors are doing when they come to your site.
That way, you can make changes to better suit your audience based on the data you collect about how they actually navigate your website.
If you don’t have a way to track visitor actions, you’re probably just taking guesses about what visitors do on your website.
Without a heatmapping tool, you have no real way of knowing.
Full Disclosure:
We use Hotjar as part of our inbound marketing and growth-driven design strategy for every client. It gives us cold, hard data about what’s working and what’s not so we make educated, informed decisions about our clients’ websites that get results.
We threw in a few before and after screenshots from our own clients, too, so you can see exactly how beneficial heatmapping for websites can be.
First things first. Let’s dive into a few insights that heatmapping offers.
Website visitors will often click on items on the page that aren’t linked to anything. Wouldn’t it be nice to know if an element is attracting attention? If you know what they’re trying to click on, you can add a link to relevant content there.
If you’ve constructed a landing page that’s not getting great conversions, heatmapping can show you what elements on the page are distracting visitors from the call-to-action.
Heatmapping can also reveal the elements to which users are attracted so you can move important information to that location.
Your website pages will appear differently, depending on the device used and screen size.
Heatmapping will show you where you need to tweak your responsive design to drive engagement and clicks.
Here’s an inside view of how we use heatmaps to boost our client’s results.
This is our client’s original website prior to working with Flight Media.
Client homepage before working with Flight Media on a redesign
In the screenshot below, which shows the redesigned site, the heatmap captures how users are engaging with the navigation and hero image on the homepage.
The heatmap was created a year after the new site was launched. The data collected was for 2,000 page views. The heatmap shows that “Get a quote” got the most clicks, so we kept it in the navigation.
We also added a “Contact us” button in the navigation to capitalize on the consumer’s desire to get a quote and presented another opportunity to connect with prospects.
Homepage heatmap after using heatmapping
After running heatmapping tests for a while, we discovered the footer was getting lots of traction in a few areas.
Footer heatmap
Since users are clicking on “Team” in the footer, we decided to add it to the primary navigation.
In addition, the footer data also contributed to the decision to add the “Contact us” button in the main navigation (see the previous screenshot).
Users are also clicking on “Videos” in the footer, so we added a video to the homepage on a later design update. In this final image (below), you can see that “Get a quote” is still getting lots of engagement, like on the previous heatmap.
Having two opportunities to capture quotes increases the volume of prospects getting in touch with the client.
Homepage heatmap
Since users were interested in footer items like “Team” and “Contact,” we decided to make these items more prominent by adding them to the hero image.
Users can now learn more about the team (through the “Learn More” CTA) or get in touch with the client (through the “Contact Us” CTA). We also made changes to the hero imagery.
The updated images are more personal (and they are NOT stock photography).
This was one of our client’s original website.
Original website before working with Flight Media
After running heatmapping tests, we discovered that the website and original design didn’t elicit a lot of engagement.
The hero image, which is an important piece of real estate, wasn’t getting any clicks – visitors weren’t interacting with it – because it lacked a call to action.
The screenshot below shows the new homepage, complete with a call to action that is getting more engagement. In addition, we changed the labels in the navigation so that they are more conventional, meaning visitors would quickly know what to do.
Heatmap of new homepage
For example, in the original design, there was a label “knowledge center,” which got minimal clicks.
In the new design, we gave this label a new name, “Resources.” Users heavily engaged with this label, increasing clicks by 1,050%.
Here is a heatmap of another client’s original website.
It tells us that the user wants to know more about what this company does because they’re clicking on the “Services” item.
Original website before working with Flight Media
The screenshot below is a heatmap of the client’s redesigned homepage.
Since “Services” was a heavily clicked item in the navigation, we provided the user with another opportunity to learn more about the client’s services in the hero image of the redesign.
Redesigned website page
The hero image should showcase what users are most interested in, and it should relate to the objective of the website.
In addition, one of the main goals for this website was to get more people in touch with the client, so that’s why we emphasized “Contact” calls-to-action (CTAs) on the upper part of the homepage.
And there are two “Contact us” CTAs on the homepage to give users options for “acting.”
Here’s a heatmap of this client’s original website page.
Original website page before Flight Media’s help
The white line indicates the fold, or the point where a visitor would need to scroll down to continue viewing the page.
As you can see, nearly 75% of people stopped right there. And this trend was consistent with all the pages on this client’s website.
As a result, we worked with the client to shift key information so it was easily accessible for website visitors.
Here’s the new page.
New web page designed after heatmapping data analysis
We did this for all the pages and have restarted the heatmap so we can reassess the new page design in the future.
Here is a heatmap of another client’s resources page.
Heatmapping of website resources page
By looking at the heatmapping data of this page, we determined that the navigation was too “busy.” There were so many options for users; we had a hunch it was distracting.
As you can see in the next picture, we streamlined the page to put the resources together, giving it a much cleaner look and making it more user friendly for visitors.
Dropdown menu from resources navigation
We also revamped the primary resources page and place the actual resources in the order of what people were clicking on most.
Revamped resources page after heatmapping data analysis
Another bit of data we gathered from heatmapping this client’s website was on their Get a Quote page.
A lot of people were clicking on the icon to download a questionnaire.
Heatmapping showing traffic to download questionnaire
After tracking 2,000 views, we gated the questionnaire so people could only get the download after providing their email address.
This provides a way for our client to add to their email list and grow their prospecting efforts.
As with the other clients, we restarted the heatmapping after making changes so we can reanalyze after a few months.
If you don’t know what your website visitors are doing on your site, how can you make changes to affect engagement, conversions, and sales?
Heatmapping for websites, using tools like Hotjar, provides you with the insights you need to update your website – and give your audience what it wants.
