Heatmaps, what they are and why they are also useful for SEO
They are called heatmaps, and they are a quick and effective tool for understanding what users do on the pages of a Web site: where they click, how far they scroll, what they look at or ignore. Compared to other analytical tools, heatmaps can provide a more complete overview of how users actually behave and the areas where they interact best, thus allowing us to get a picture of the strengths of the page and, more importantly, the critical points where we can intervene with appropriate corrections. This is precisely why they are also a valuable support for SEO strategy and allow us to find out what types of content and images best capture the attention of the audience and where people have difficulty navigating.
What heatmaps are
Sometimes also called heat maps, heatmaps are a visual representation of a web page’s navigation data, which through a color scale immediately show how users interact with that page, where they click and where they don’t click, how far they have scrolled down a page, or what the results of eye-tracking tests are.
Thus, it is a tool to graphically visualize the actions users take within web pages, simplifying the visualization of complex data and its understanding at a glance: the basic idea is to allow those who own or manage a site to understand the performance of a specific page and to quickly approach information from complex datasets through the representation of values using color.
In this sense, the heatmap is precisely a graphical representation of data in which values are represented by colors: typically, user behavior is measured on a scale from red to blue, with the hottest color indicating the highest level of engagement and the coldest indicating areas with the lowest levels of engagement.
Heat maps are used in various forms of analytics, but they are most commonly used to show user behavior on Web pages or specific Web page templates, because due to the color coding they allow users to immediately understand which parts of the page receive the most attention, and thus provide information and insights on how to improve the structure or visibility of the site.
In fact, heatmaps can become essential for detecting what works or does not work on a site or specific product page and for intervening in optimizing web usability – the ease of use and thus of understanding and navigating the site and its pages-which in turn can enable increased conversions. In practical terms, by taking advantage of techniques such as A/B testing to experiment with the placement of certain buttons and elements on the site, heat maps make it possible to assess actual page performance and attempt to increase user engagement and retention by improving the user experience of interacting with the site.
The history of heat maps: when they were born and why
Although a very current tool, the practice of using heat maps originated in the 19th century, specifically in the manual shading of grayscale from a matrix of data.Thus, an early example of a heat map can be found in 1873, when French statistician Toussaint Loua used a shading matrix system to display social statistics in the districts of Paris, representing larger values with small gray or black squares and smaller values with lighter squares.
Later, other scholars showed the results of cluster analysis by permuting the rows and columns of a matrix to place similar values near each other based on clustering, while in the 1970s Robert Ling had the insight to join cluster trees to the rows and columns of the data matrix, using overloaded printer fonts to represent different shades of gray, one font width per pixel.
Then, in the 1990s, there were two important moments for this tool: in 1994 Leland Wilkinson developed SYSTAT, the first computer program capable of producing cluster heat maps with high-resolution color graphics, and around the same time Cormac Kinney (a software designer) trademarked the name “heat map” to describe a 2D display depicting financial market information, useful for giving stock traders a visual tool to facilitate reading financial data in real time.
For the record, in 2003 the company that acquired Kinney’s invention unwittingly let the trademark expire.
Today, heat maps can be created by hand, using Excel spreadsheets, or more simply through analysis tools such as Hotjar, probably the most popular tool for this purpose.
How heatmaps work
There are a number of tools for understanding what impact our content and its organization has on users, and for example Google Analytics is a treasure trove of data for understanding how people arrive at our site, how many and which pages they visit, and from which page they leave the navigation, but they do not allow us to go into detail about the actual interaction.
Instead, the concept on which the application of heatmaps to the Web is based is as follows: scrolls, movements and mouse clicks are analyzed and, through specific software, transformed into concentrations of color that allow us to see the density of use of the various sections of a page.
The areas with which the user interacts the most are those marked with warm colors, such as red and orange, while green and blue (or at any rate generally cool colors) identify the areas with the least interactions: so it really only takes a glance to understand and see which parts of a page receive the most attention and thus draw indications on how to improve the structure or visibility of the page.
By aggregating user behavior, heat maps facilitate data analysis, combining quantitative and qualitative data, and provide a snapshot of how the target audience interacts with a single site or product page, what they click, scroll or ignore, on the average “fold” portion (the part of the page that people see on the screen without scrolling as soon as they land there).
In this way, heat maps provide marketers, digital and data analysts, UX designers, social media specialists, and anyone working in digital marketing with in-depth information about people’s behavior on their site, helping them identify trends, find out what page limitations are blocking conversions, and, as a result, what actions they can take to increase engagement and sales.
What are the types of heatmaps
There are different types of heat maps, which essentially allow us to graphically display information about a specific parameter of user interaction. Depending on the type of analysis, working with such maps allows us to receive various information about user behavior and the type of content that attracts and retains the target audience and to better understand the interests and needs of our target audience.
Specifically, the main types of heatmaps are:
In particolare, le tipologie principali di heatmap sono:
- Click heatmaps, which chromatically identify areas of the page where users most frequently click or tap from mobile-all interactive user actions on elements such as internal links, navigation bar, logos, images, CTA buttons, and anything else that appears to be clickable. These heatmaps show an aggregate of where visitors click on desktop devices or tap on mobile devices (and are therefore also called touch heatmaps), color-coding the elements that were clicked and tapped on the most (red, orange, yellow).
- Scroll heatmaps, which track how far down the page users scroll and show the portions of the page where readers arrive before they leave the navigation. These heatmaps show the exact percentage of people scrolling down at any point on the page; visually, the redder the area, the more people read it. The information is useful for sites with textual or e-commerce content, both in a positive sense (if there is a prevalence of warm colors) and from an optimization perspective (if there is a prevalence of blue and cool tones, it is worth considering taking action on the content).
- Move heatmaps, which show the areas where users move the cursor within the page-and can serve to understand how people perceive content and what attracts them most, but also to uncover elements that distract them from the main focus of the page. They provide controversial and not fully reliable information, because we cannot always directly correlate a visitor’s mouse movements to what they are actually looking at: just because a user’s mouse has been on the title for 5 minutes does not mean the person is still reading the title, and more generally, users do not always look at the exact spot where their mouse is.
- Desktop & mobile heatmaps, which are used to compare the performance of a site from different devices: for example, content that is prominent on a desktop page might be much lower on a phone, and so it is crucial to see if the interaction differs and how.
- Eye-tracking heatmaps, an advanced visualization that provides more detailed information about user behavior and experience: conducted in special labs using webcams installed on devices (or providing users with gaze-tracking tools), this tool tracks the user’s eye movement when they are on the site and also indicates the duration of the viewing. If the analysis reveals, for example, that people tend to give more relevance to the left side of the site, that is where it will be appropriate to place a logo, banner, and other important information.
The benefits of heatmaps and the information they show
Beyond the reported critical issues, heatmaps (and in particular click and scroll heatmaps) offer a number of advantages, as they passively collect data on how users interact with post-click landing page elements, to delve deeper into issues related to user experience and customer journey on the post-click landing page, to base evaluations on actual user behavior data without having to rely solely on assumptions anymore.
As mentioned, everything then becomes visible in a few moments, at a glance and clearly for any type of observer: as a rule, blue indicates the areas with the lowest level of user activity based on various indicators, while red signals the “hot areas,” those where the highest level of user interaction is concentrated.
Applied to a website page, a heatmap then shows how users are reacting to the content and its different elements, thus giving us insight into what the audience is most interested in, both in terms of text and clickable elements; thanks to this visualization, for example, we might find that visitors are not clicking on the CTA button set, but are trying to click on an element that is not clickable.
Delving deeper into the analysis, then, we can assess the actual effectiveness of the page by checking how much (and what) information visitors interact with-that is, how much of the page they actually read, and thus which sections of content are interesting and useful-and what kind of action people take (e.g., which items do they click on? Are the areas of strategic interest in the most viewed part? Are any elements being ignored?).
And so, heatmaps are characterized in providing a visual guide to user behavior and supporting analysts to see the landing page through the eyes of the visitors, so that they can draw useful information to make the necessary changes to optimize the page itself to achieve the goals of increasing conversions.
With this tool, marketers can monitor user behavior, collect data that can be used to run A/B tests, optimize the page and increase conversions, and gain useful insights to make UX decisions about pages.
Heatmap data help answer some questions about user behavior and experience on the page, which serve to achieve a deeper understanding about visitor interaction and bring out any critical areas to change on the page because they are not working. Examples of questions include:
- How are visitors actually using the post-click landing page?
- How are they navigating the post-click landing page?
- What catches their attention and where do they tend to click?
- What element of the page are they ignoring?
- Do they click on the CTA button?
- How engaging is the copy?
- In what area of the page should crucial elements be placed that visitors should not ignore at all?
Heatmaps and SEO: how to use heat maps for optimization
What has already been written should have made us understand why heatmaps can (and often are) used to support a broader, all-encompassing SEO strategy: never before has it become clearer than in recent years that SEO is primarily about user experience before it is about following rules for robots. In fact, today we talk about search experience optimization more than search engine optimization, because it is SEO to take care of every stage of the search journey, from the first impression of a Web site in search results to the depth, ease, and relevance of the information people find on a Web site, because only by understanding the demands, interests, and characteristics of the target audience can you really optimize the site, that is, make it attractive to people, who want to stay longer on the pages and come back for more visits.
And so, to ensure that the strategy is effective and well set up, monitoring the behavior of site users and evaluating the UX they receive when using Web resources becomes critical, and so heatmaps provide effective information and data to achieve these goals, along with analysis of metrics such as bounce rate, time on site, pages viewed, conversation rate, which however do not tell in depth the true relationship of the person with the page.
In contrast, a heat map gives us a window into the common practices of users on a site and can help us determine a range of issues that affect SEO strategy, to then understand what corrective interventions to implement in search of solutions to improve the overall user experience and increase number and quality of visits and conversions.
What aspects of pages to analyze with heatmaps
Moving on to somewhat more practical advice, there are several useful SEO insights we get from using heatmaps.
First of all, with this tool and visual analysis we can better delve into the actual habits of visitors interacting with our pages, finding out which components receive the most attention, which content turns out to be most interesting for the target audience, which sections are instead ignored and scrolled through without even a glance, which menu choices and filters get the most clicks.
This information should help us in the work of making the site as user-friendly as possible and in finding potential obstacles that could reduce engagement and conversion rates, such as sections, buttons, or text that can distract the user or make their experience negative.
Another concrete aspect that can be improved thanks to heatmaps is the layout of the page, which we can tailor to the demands, needs and actual behavior of users, removing areas of friction and moving the elements that are most relevant to us to the parts where visitors’ gazes and interests are most concentrated.
Going even deeper, heatmaps are help us determine the best style of content we present on the page, but also its optimal length: word count remains a myth for SEO, but it can make sense to find out if readers are really interested in the share of text we publish and to understand the level of information visitors need on a given issue. If we use a scrolling map, for example, we can identify where users most frequently leave the Web page and try to analyze why: has the previous content solved the problem and provided all the information (and, therefore, is the remaining portion of text purely “ornative”)? Or, conversely, did people not find the details they were interested in and so perhaps return to the search engine to launch other queries? By combining these insights with analysis of the search intent related to the page of interest, we can experiment with publishing text of different lengths to determine what the audience likes best and build a content strategy tailored to the needs of our audience.
This last tip falls squarely within the first practical use of heatmaps, namely supporting the famous A/B Tests, which are used to assess user perception and decide whether it is worthwhile to make changes to the page (and what kind): by monitoring the reaction of different groups of users to the proposed corrective actions, it will be possible to make the right decision in a more informed way and optimize the resource in the best way.
Finally, with heatmaps we can have a tool to improve our internal linking and, to some extent, external linking strategy. As we know, internal linking is essential to connect pages on the site and set up a hierarchy of content on the most popular pages.With heatmaps we can have specific information about where users click and optimize link placement, directing more traffic to related pages.
With regard to external linking, on the other hand, heatmaps help us in two ways: they allow us to find out which links get the most clicks and to check whether users pay attention to the type of authority of the linked domain.
For example, some readers might follow a link aimed at websites/institutions, but not click on links to lesser-known sites; similarly, some people might leave the page after encountering an outbound link that they perceive as spam or irrelevant, and so changing the destination, turning the link to a better source, might be an immediate first action to reverse course, before moving on to changes in the content itself.
Heatmaps for SEO: the conclusions
Trying to weave the threads of this long discourse, for sure heatmaps help us to have indications to improve the structure and usability of the site, very important indicators for the user experience and “base” on which to rest content (well optimized to respond to the search intent) with the aim of conquering the best positions in the search results and increasing organic traffic.
It is clear, however, that heatmaps are only a tool to be used along with others within a broader SEO strategy, and not an element that, alone, can magically change the fortunes of the project.
In addition, there are a few aspects related to the use and understanding of heatmaps that need to be dwelt on: first, as with other types of web analytics tools, heatmaps also need a large amount of data – accurate and, more importantly, applicable for everyone – before they can be reliable. Analyzing heatmaps on the basis of very small sample sizes is akin to closing an A/B test too early, based on very few visits or conversions; because heatmaps show trends, it is important to have enough information to ensure that any anomalies do not affect the overall picture of the tool itself.
It is therefore important to be aware of the limitations of heatmaps, which, if used incorrectly, can be misleading and encourage analysts to make assumptions that may not be correct: the first point is to set the right approach, remembering that heatmaps tell us what happened on a page, but they cannot tell us why it happened.
So awareness is also needed in reading the data and interpreting heatmaps: for example, click maps for a page with a form may show that users click a lot on the first field and that there are fewer clicks on subsequent fields. At first glance, this might suggest that users are abandoning the process after filling in the first field, but in reality people are more likely to continue filling in fields using the keyboard rather than the mouse. Heatmaps do not offer this information, which is instead available in form analysis tools that measure time spent within each field, rather than just clicks.
