Website heatmaps: user behavior insights at a glance
Published on January 29, 2020
Last modified on February 19, 2021
Heatmaps tell the visual story of how users interact and engage with a specific website page.
As its name suggests, it maps out the elements or sections of a page that get views, clicks, or movements from its visitors, using overlaid colors to indicate ‘heat’ (i.e., the most engagements) and ‘cold’ (i.e., the ones with little to no interactions).
(A sample heatmap for 1902 Software’s homepage in Crazy Egg)
In Crazy Egg, for example, the brightest areas (in the meter on the left) indicate the most popular sections of the page—in this case, our “What we do” section.
You can also see splotches on some areas of the page, which show parts where we get clicks from our visitors.
(A sample heatmap (scrolls) for 1902 Software’s homepage in Hotjar)
Other tools, like Hotjar, use hot colors to represent a high intensity of user engagement and cool colors for the opposite.
Types of heatmaps
A heatmap for user engagement can mean many different things—it could be clicking or tapping, scrolling, or simply moving the mouse cursor (which often indicates pausing or reading).
To get a full understanding of how users interact with the page, there are different types of heatmaps that show these varied activities:
1. Click map – This is what’s often associated with the general “heatmap” term—a visual report that shows parts of a page that get the most clicks (or taps in mobile devices).
(A Hotjar clickmap for 1902 Software’s contact form, with the red areas representing the most clicks and the blue areas representing the least ones)
(A Crazy Egg “confetti” report—their version of a clickmap—for 1902 Software’s Umbraco e-commerce page, which not only shows the areas of the page that got clicks, but also provides a context for these clicks with additional information such as the referrer page)
(Page Analytics, Google’s analytics Chrome extension, provides a “clickmap” of a sort by adding bubbles beside clickable elements on a page showing the percentage of website visitors clicking on each specific link or element.)
2. Scroll map – This heatmap is used to indicate the popularity of a page’s sections.
Typically, you would expect a scroll map to naturally go from hot to cold—with above-the-fold content always in the hot area as it’s the part of the page that each user sees upon landing.
(A Crazy Egg scrollmap for a specific area in 1902 Software’s homepage, which interestingly indicates that the section with our customers’ logos is more popular than our featured content section, despite it being lower in position on the page)
3. Move map – A move map is a visual representation of how visitors move around on a page.
According to Hotjar, research suggests that the position of the cursor typically indicates where users are looking in the page.
While this is only a correlation, it still gives you a good idea on how your visitors are likely consuming your content.
(A Hotjar move map for 1902 Software’s pricelist page, which tells us that no one likely reads through the short description above the form—a critical insight if this text happened to contain important information for customers)