While various heatmap types are loudly trending among website optimization and CRO communities, easy to understand heatmap guidelines become necessary. What types of heatmaps are there, how to use them, and what are their use cases?
The way webpages are constructed, their visual style, and means of convertibility are constantly evolving according to ongoing trends, available technologies, and user behavior analysis. There used to be endless landing pages that you could scroll forever – now they’re almost gone. Did website creators get enough user feedback and website heatmap data to understand such scroll’s low retainment efficiency?
But how much resources can you spend analyzing factual user behavior patterns?
How can you evaluate a particular website design? And how can you see what’s working and what’s not?
How fast can you find out your return on investment (ROI) if you have to wait for several thousand users to visit your page?
Stick with us, and we’ll let you know all about different types of website heatmaps.
Using and combining different heatmaps will help you design and construct the webpage in the best way possible. After reading and implementing this, there is a high chance that your conversions will improve!
Table of Contents
What is a heatmap?
Any heatmap is a visual way to present the researched or predicted data of your interest. Meaning a heatmap itself is another form of data presentation, as are the charts, the data pies and diagrams.
A heatmap uses a hot-to-cold color pallet to show the high-to-low quantitative values of collected information. Here is how the heatmap representing the population density in France looks like.
The term “heatmap” was first trademarked in the early ’90s, when software designer Cormac Kinney created a tool to display real-time financial market information graphically. The tool gave obvious visual cues to the reader about the data density saving the traders many hours on analyzing paper charts and enabled them to take their decision upbeat with the market fluctuations.
Regarding website heatmaps, the software creates layers representing users’ behavioral frequency in colors which are then overlaid on the analyzed website.
Here’s another way to explain how a heatmap is created. The website is divided into a grid, and each grid is assigned a color depending on data unit quantity.
In the picture below, Imotions simply explain how different values are assigned to a particular grid of a stimulus in order to represent an eye tracking heatmap.
The purpose of website heatmaps
Why businesses and designers should use website heatmaps?
Say, you own a business or work for one that runs a webpage where you need active user engagement. Too much data and too much intuitive guessing of how visitors are engaging with the page is something that does not comply with your KPIs and ROI interest.
Heatmap tool will save you from:
- exercising trial-and-error methods;
- settling for the only information that visitors are NOT converting;
- using your gut feeling or consulting others on their experience and conclusions.
Various heatmaps allow you to:
– track factual webpage visitors behavior (clicks, scrolling pattern, etc.) on your own page
– realize what parts of the page they find most interesting and what objects visitors notice first.
– see what is and is not important and ignored for a user on your page;
– establish if people click on the call-to-action buttons;
– guess what causes distractions and friction;
– see when and from where do people abandon the page;
– make data-based changes to your design, structure;
– thus optimize the conversion rate and
– make optimal user experience (UX) decisions.
The heatmap shall represent the quantitative value of the analyzed data of your choice: your website users’ clicks, the spot of physical eye gaze and its duration, scrolling patterns, mouse movements, and more.
Using such data you need less and less guessing to determine whether important parts of your website should be moved or adjusted to attract the gaze, to draw more interest, and thus effectively result in conversions.
When optimized properly, the combination of page elements and the overall page design has the ability to convince visitors to perform the desired action on the page.
There are various types of website heatmaps and they can be used independently or in combinations.
Types of heatmaps
There are 5 main types of website heatmaps:
- Eye tracking heatmaps;
- AI-generated attention heatmaps;
- Click maps;
- Mouse tracking heatmaps;
- Scroll maps.
Eye tracking, clicking, scrolling, and mouse movement (or hovering) are data units observed and analyzed via actual visitor’s session on a webpage.
Meanwhile, an AI-generated attention heatmap algorithm is based on deep learning and relies on pre-collected eye tracking data to simulate human vision. The algorithm also considers many factors like the design color, shape, size, placement, etc. As a result, it can now mimic human vision with 90-94% accuracy.
Continue reading about the main types of heatmap tools, their usage tips, and scope of application.
To present all types of heatmaps as a visual aid, we generated heatmaps with Attention Insight, Hotjar and an actual eye tracking study of 40 participants.
We used the website of Robobend, a Danish robotics company and the client of a digital agency Nbranded.
Eye tracking heatmaps
Eye tracking is a process of measuring eye position and movement, determining where the person’s gaze is directed, how frequently the gaze settles on a particular item, and where it stays fixed.
What you need to know about regular eye tracking is a few related terms:
- the eye fixation volume: the map data shows how many times the particular page element was noticed;
- the eye fixation duration: the map shows how long visitors looked at a specific element on the page;
- areas of interest (AOIs): the map shows regions of a group of elements on your web page that attracted most users’ gaze and fixation.
Typically, eye tracking studies are conducted in labs using special tracking devices that accurately measure eye movement. Eye tracking studies can also be conducted via web-cams and are mostly based on an infra-red ray reflection method. What matters for you is the overall duration of eye movement that is analyzed.
| Tips and Tricks |
|---|
| For accurate findings, you’d have to recruit at least 39 users and record their behavior to generate heatmaps. |
| Eye tracking heatmaps can be used in both the digital world and in the real world (marketing and user research): shopper research, product packaging research, and UX research |
| Since eye tracking provides you information on where people are looking and what is most interesting to them, it eliminates the guesswork. |
| Eye tracking allows you to see things from the perspective of consumers. This information helps your business become truly customer-oriented |
The downside of eye tracking mostly comes down to practicality, doing the study is expensive and time-consuming. Eye tracking technologies need to be carried out in controlled, highly equipped, and expensive environments, otherwise, they lose their accuracy. And then you have to wait for days and weeks to get the analyzed data.
Here are a few nicest eye-tracking software tools of our choice:
AI-generated attention heatmaps
AI-generated attention heatmap is a visual representation of user attention data created by a software algorithm.
AI-generated attention heatmaps can also be known or found as predictive eye tracking heatmaps, attention heatmaps, or AI-based attention heatmaps.
Considering the cons of regular eye tracking and recent innovations of AI, a new technology of predictive eye tracking – an AI-based alternative to eye tracking studies emerged.
Heatmaps, generated by AI, just like eye tracking heatmaps, show which areas of the visual materials people are likely to view the most and the least.
Usually, it focuses on simulating the first 3-5 seconds of user attention on a website. This technology can predict precisely where people will look when engaged with the presented content with up to 95% accuracy.
The AI-generated heatmaps based on predictive eye tracking has many advantages compared to the usability and cost-effectiveness of the traditional eye tracking methods.
Predictive eye tracking is a way cheaper option that allows marketers to make fast data-driven choices. It allows you to analyze any website in just a minute, even if the website has low traffic.
Finally, since you don’t need to gather data yourself, you can validate your concepts prelaunch and also analyze your potential clients’ websites to gather valuable insights.
| Tips and Tricks |
|---|
| Cost reduction: AI heatmaps could cut down your A/B testing budget as you would be optimizing your designs based on data during the design stage. |
| Early dismissal: you can experiment on the go with 10-20 different design variations in the early design stage. A quick analysis with AI attention heatmaps helps you dismiss designs with the least potential. |
| Win your client: you can analyze your potential client's website and pitch your services by pinpointing his website's weak spots |
| Competition: compare your website with competitors. You would not need access to install a tracking code as with mouse tracking software. |
| To the left: people spend more time looking at the left side of your page. |
| Banner blindness: people tend to ignore sections of a page that look like advertising: avoid banner-like designs for your important information. |
On the downside, AI-driven heatmap tools sacrifice some accuracy as a trade-off for reduced cost and time. Besides, AI-generated attention heatmaps cannot be used to predict attention flow in a three-dimensional environment yet. Finally, it offers fewer data representation options than regular eye tracking.
While you shouldn’t entirely place your trust in algorithmically generated maps, they’re your best option if you have lower traffic or research budget and need instant results. Predictive tools will give you valuable visual data for usability research.
Quite a few companies offer excellent heat mapping tools, with a range of free trials, freemium, and paid options. Here are a few predictive eye tracking tools:
Click maps
Click map helps you see if your visitors click where you want them to on your landing pages. Click map will show you an overall aggregate of where visitors click their mouse on desktop devices and tap their finger on mobile devices (in this case, they are known as touch heatmaps).
Gathering clicking data on CTA buttons and navigation is only one use case of click heatmaps. You can also see clicks on objects that are not, in fact, clickable. If there’s an image or text that people think or expect to be a link, they’ll click on it. And you can see that on a click map.
If you discover something (image, sentence, e.g.) that people want to click on, but isn’t a link, then the best ways to go are i) make it into a link OR ii) redesign it to make it not look clickable.
| Tips and Tricks |
|---|
| Conversion rate 1:1: when the highest number of visitors' clicks should be on the CTA button, then that should be the only clickable element on the page. |
| Return on investment: Pay-Per-Click managers can use click maps to improve their advertising ROI by placing CTA buttons effectively. |
| Distraction identification: If you have a form on one of your landing pages along with a video, you can use click maps to identify if the video is distracting visitors from filling that form by comparing the number of clicks between the two. |
| Distraction removal: Identify and remove objects that cause friction and distract users from the key elements. |
| Navigational gaps: click maps may visually represent which web page elements are most popular and where the “blind gaps” are. See how your visitors use your website’s navigation and structure it accordingly to increase conversions. |
| Segment visitors: when running a click map on a redesigned website, see if the conversion rate is the same for the new and returning visitors. |
At least 2,000-3,000 page views per screen are recommended per device for accurate click map readings.
As an alternative, you can also see where people click with Google Analytics.
Here are few noteworthy click map tools of our choice:
Mouse tracking heatmaps
Mouse tracking heatmap indicates areas over which visitors hover their cursor the most. These heatmaps are also commonly known as hover maps.
The primary problem of mouse movement tracking is that you can’t always directly correlate visitors’ mouse movements to what they’re looking at.
There are various contradicting researches on the correlation between mouse movement and eye movement. Mr. Kerry Roden’s whitepaper shows the positive correlation of 64% of users pointing a mouse at the area of reading. But Dr. Anne Aula, Senior User Experience Researcher at Google presents data, showing that in circa 90% of cases, a cursor is parked on the click spot or the white space. At the same time, people continue reading around the page, looking at other things.
| Tips and Tricks |
|---|
| Important sections: identify which areas visitors hang around the most in and then place important content, primary CTA, necessary advertisements, and so on in those sections. |
| Movement patterns: keep in mind that visitors might hover around particular areas because they find it engaging and interesting OR because it is difficult and takes longer to understand. |
| Building an analytics stack: many companies start looking at heatmaps because they’re building a hard data source on how users behave on their website, say for investment reasons. |
| Mouse tracking reliability: users aren’t always looking at the exact spot where their cursor is. Therefore, keep in mind that the reliability of hover map data might be a little questionable and combine it with other heatmap types. |
Scroll maps
A scroll map is a visual representation of your visitors’ scrolling behavior. It will show the percentage of their Scroll Depth, allowing you to see how far down the page your visitors have scrolled. As a result, it indicates which sections majority of your users spend time in.
It’s absolutely normal that the longer the page, the fewer people make it all the way down. Having acknowledged this with a scroll map, you would easily prioritize content and place the must-have content on the top.
Famous CTA button example by August Ash showed that page visitors weren’t clicking the CTA button even though it was designed in a contrasting red color because they had to scroll down to find it.
| Tips and Tricks |
|---|
| CTA button placement: the button above the fold increases conversions. If you hide the button below the fold, many customers won’t scroll to find it. |
| Prioritization: place the most critical elements of the web page where visitors spend most of the time. |
| User device: compare mobile and desktop scroll maps of the same page to see if people are consuming more or less content depending on the device. |
| Limited applicability: you can only use it to determine scrolling patterns. Therefore the scroll map makes more extensive use when combined with other heatmap types. |
| Design psychology: analyzing the scroll map can help you decide how to use solid lines or color changes. Those are called ‘logical ends’ and tend to make people think that further information is less relevant. |
When and why to use heatmaps?
Now that you know all about heatmaps, their types, purpose, and benefits, it is time to identify which heatmap type is preferred in specific use cases. Use cases for heatmaps vary from testing concepts pre-launch to identifying which sections of your live website visitors hang around most and least.
Here are some hints on how to choose one or a combination of suitable heatmap tools:
| Use Case | Heatmap Type |
|---|---|
| Test low traffic websites. | AI-generated attention heatmaps |
| Test websites before you launch them and get fast feedback in the design process. | AI-generated attention heatmaps |
| Pitch your web design to a client. | AI-generated attention heatmaps |
| Calculate the ideal length of a sales, e-commerce webpage, blog post, etc. | Scroll maps |
| Identify where visitors are spending the most time and where they are losing interest. | Scroll maps, eye tracking and AI-generated attention heatmaps |
| Identify and remove objects that cause friction and distract users from key elements. | Click maps and mouse tracking heatmaps |
| See if clicking behavior changes and people interact more, less, differently on desktop versus mobile. | Scroll maps and click maps |
| Identify which sections visitors hang around the most and least. | Mouse tracking heatmaps |
| See clicks on non-links. | Click maps |
| Identify why users scroll down to a certain point and then abandon the page. | Scroll maps, eye tracking and AI-generated attention heatmaps |
After drawing conclusions based on your heatmap data, you can validate the findings using the A/B split testing method.
Let’s say you test the design with an AI-generated attention heatmap and identify the area (e.g., subheading) with the most users’ attention. As a result, you decide to relocate the primary CTA button closer to this element to benefit from its’ attention to increase conversions. You can cross-check if your hypothesis is valid by A/B testing it against the original version.
Most heatmap tools vendors provide personalized demos, whitepapers, free trials, and detailed usage instructions. Thus, it’s reasonably straightforward to get a taste of what their service has to offer and easy-grip on how to use it.
Conclusion
Now that you know the whole theory and many practical tips on using heatmap tools, we encourage you to take steps to accumulate your own experience in the field.
As a visual tool, heat maps help you make informed, data-based decisions for A/B testing, updating, or (re)designing your website. Use combinations of a few heatmap types to get a bigger picture.
The most important piece of work is understanding the data each heat map represents. Determine what you are trying to accomplish, then figure out which data is most relevant to help get you there. The whole lot of reasons to use heatmaps may be grouped into these categories:
- Designing a webpage for your client;
- Re-designing your webpage;
- Conversion optimization.
Keep in mind that heatmaps are limited in only one way: they do not show the correlation between the elements of your page and the visitors’ personality, which also strongly drives their decisions to convert.
FAQ
What is a website heatmap?
A website heatmap visualizes website users’ behavior, showing aggregate data of users’ attention patterns, factual clicking, scrolling, and mouse movement. Designers and UX specialists use heatmaps to make data-based decisions for conversion and revenue optimization.
How do I create a heatmap for my website?
To create a mouse tracking heatmap for your website, add a tracking code (a JavaScript snippet) to your website. For an AI-based heatmap tool like Attention Insight, create a study by uploading a URL or an image directly or use Chrome extension or plugins for Sketch, Adobe XD and Figma to generate a website heatmap in less than a minute.
What are heatmaps used for?
Heatmaps are used as analytics tools for tracking and predicting users’ behavior and visual attention flow. It enables comparing multiple designs, seeing which objects attract the most attention, improving marketing KPIs, and making data-based decisions on a website (re)design and conversion optimization.
How do you describe a heatmap?
Any heatmap is a visual way to present data of your interest. It uses a hot-to-cold color pallet to show the high-to-low quantitative values of collected data. A website heatmap is an image that represents users’ behavioral frequency and is overlaid on the analyzed website.
How do you analyze a heatmap?
To analyze a heatmap, first set your research goals and hypothesis, then compare the heatmap data with your assumptions. See if people pay attention to the key elements and essential parts of your page, where they’re getting distracted, and why they don’t convert.
6 Responses