What Is A Heatmap?
A heatmap is a representation of clicks, scrolls, or mouse mapping data shown as an overlay of a website.
The differences in colors (usually red to show the highest concentration of the metric being presented) gives a visual summary of information on the page.
It's quite similar to a radar map. A website heatmap shows you this concentration of user activity on your site.
Heatmaps give you an accurate idea what sections on the site are the most popular, how far users are making it down the page, and what areas need to be improved.
Improving areas that seem clickable, to make them clickable, is often one of the outcomes from heatmaps, because it shows how users are interacting with the site and where their eyes take them when navigating around.
Often developers and designers have preconceived notions about how users will interact and move around on a website, but a heatmap gives factual data and evidence about how users are moving around and utilizing the present features of the site.
When showing the data and evaluating the heatmaps, the clusters of red-orange-yellow against a traditionally dark background indicates activity.
The higher concentration of color, indicates a higher number of clicks, scrolls, or the metric being analyzed.
Clustering often occurs on common reference points on a webpage, like navigation bars, links and calls to action in the hero, and other important links that contains valuable information on the site.
There are 3 primary kinds of heatmaps:
A Scrolling Heatmap conveys the information of where the user has been scrolling on the page, from the time the page has been loaded.
When the screen is loaded, all of the information contained on the initial loading page, before any scrolling has been done, is considered above the fold.
Any information that requires you to scroll beyond the original loaded section of the website is considered below the fold.
Traditionally, it is difficult to get users to scroll to the bottom of a webpage.
They either lose interest or get sidetracked partially through the site, or find what they are looking before they reach the end.
If users are continually getting to the bottom of the site, the content on your site must be very engaging or viewers of the site are eager to learn more.
Perhaps the most well-known type of heatmap, a heatmap tracks the amount of clicks that happen when on a certain webpage.
This is useful because it allows you to see not only where the clicks are on on the screen, but allows you to see the density of clicks in certain areas based on the colors.
Showing where users click around tells those who create the website whether things appear clickable to visitors, or if changes need to be made to increase additional page views on the site.
Furthermore, if users are missing an area on the site that developers thought was clickable, but neglects to show any clicks on the heatmap, perhaps an updated design or call to action would draw more attention to the clickable area.
Making clickable areas more visible and apparent to visitors is necessary to increase engagement on a website.
Mouse Mapping Heatmap
The mouse mapping heatmap is very similar to the clicking heatmap, however it tracks all of the mouse’s movement while visiting a webpage.
It tracks all of the movement, including clicks, such that the observers can see if users are hovering in certain spots, or resting their mouse in particular patterns on the websites page.
This has the ability to tell developers if users are getting hung up on some aspects of the site, or show where people are hovering to see more information on the page.
Users tend to hover and place their mouse on eye-catching objects on a webpage.
For example, animations and other effects on a page usually have a higher density of mouse mapping than less visually appealing elements on a webpage.
Being creative and thinking outside the box will make for curious users, and this will translate into a more informative mouse mapping heatmap!