Different forms of heatmaps

Heatmap is a form of data visualization tool, where values are represented by colors. It provides you with a very understandable way to analyze data, without any further knowledge of other topics, like math, programming, etc.

Heatmaps have been with us for about 150 years, although it wasn’t a widely used tool until the last 10 years when heatmaps started to appear in the online world. However, there are many fields in the world of work where heatmaps have been introduced and have been used for the last one and a half centuries. In this article, I will try to show you all the different forms of this tool and also try to give you a little insight into how and why these working fields are required to use heatmap on a daily basis. Let’s jump into it!

#1. Website heatmap

Although the relationship between heatmaps and websites is one of the newest compared to heatmaps with other fields, I advise you to start with this. Not just because in the last 10 years website heatmap became the most influential heatmap usage, but it’s also an easy-to-explain topic, so you can understand the whole system without any problem at all. 

Website-related heatmaps exist because companies are curious about their user habits, how they use their site and what information they read. This is very precious information, as a lot of things depend on it. In some cases, the whole future of the firm. As a result, many companies realized that in the online world through websites, it’s way easier to find out the customer’s thoughts and also the needs than in the real world. It’s because on a website they can measure a lot of stuff. Like the amount of time the user stays on the site, the user mouse scrolling, or where he clicks with his mouse. You may think that this data is unnecessary, as what information does a firm gain from a simple click? Most of the time, a lot. Just think about it: You can gain insight into which part of your website is receiving the most attention and also what other parts seem difficult or confusing to use for a simple user. If you somehow gain this data and use it for the improvement of your site, you may boost your conversation rates as well as the overall user experience. 

There were 3 main types of website heatmaps, which were: click, scroll and mouse movement heatmaps. Although nowadays we can easily differ approximately seven types, which are the following:

1. Click heatmap: it can show us where the visitors regularly click, also we can monitor whether they click on our call-to-action buttons. 

2. Scroll heatmap: scroll heatmap is as important as the click one. Here, we can monitor how far a user scrolls down our page, which can give answers to many-many unknown problems. 

3. Mouse movement heatmap: While the click heatmap only analyzes the number of clicks, the mouse movement heatmap shows us every little movement of the mouse. This type of website heatmaps is also a way you can understand what the busiest place of your website is, but be aware, it can mislead you sometimes.

4. Form heatmap: it can show you the answer frequency of each question related to a form by pointing out the most frequented parts of a red color. Rarely used.

5. Attention heatmap: it is a new way to analyze your website, and it’s quite unusual but very effective. Here, the whole colors are generated by the AI which tries to predict what parts of your site will be detected mostly by human beings. It’s just a prediction, but we all know how quickly AI has improved in recent years, so we should consider using it. It’s like any eye-camera analysis in a brick-and-mortar shop, just for a cheaper amount of money. 

6. Exit-intent heatmap: another form of the website heatmaps which is very similar to the mouse movement heatmap, but this tool only concentrates on one specific problem. Why do the users leave our site? There is a problem somewhere? This heatmap only visualizes the last mouse movements a user makes before leaving your site. 

7. Heatmap A/B testing: the last one is not really a website heatmap, but it is connected to it. A/B testing means that nowadays you can use heatmaps to compare two different versions of sites, as this can graphically show which is better in terms of engagement and interactions. 

#2. Sport-related heatmap

Why do we use heatmaps instead of just reading numbers? The answer is easy: our eyes are calibrated to examine fascinating scenes instead of just browsing boring numbers.  

That’s even more true in connection with sports. Sports are for entertainment. People love it since they can forget their everyday problems for a few hours, turn off a little, while they tend to forget the upcoming difficulties. 

Let’s examine this on the other side of the television! The experts have to explain the deeper elements of the field during the break times, although they have only 10-20 minutes to accomplish it. With just reading numerous numbers nor the viewers understand that, nor the TV channel attracts more and more people. So heatmaps are a great solution to reduce the amount of time analyzing a bunch of data.

When it began to spread out in the whole sports industry, mostly in football, ice hockey, and baseball, there was a graphic designer who drew these illustrations one by one. When computers improved and better programs started to appear in the market, graphic designers’ place changed by AI. Nowadays artificial intelligence makes thousands of heatmaps for every match and just a few percent of them appear on our television. 

There was a huge improvement in the segments of these sports-related heatmaps too. Mostly they used it to measure each player’s continuous movements, where red circles usually mean the main places, and the blue the opposite. Finally, after a few years, they found other parts of the modern sports industry, where these maps can generate value. Nowadays, football coverages are full of different variations of heatmaps. Like some of them can show what segment of the field the player likes to pass the ball to, or what distance he usually likes to shoot. Here is an example from the American Major League, which shows where each team likes to take defensive actions in a 15-match period to prevent a goal from the opposition. 

Source: https://www.americansocceranalysis.com/home/2017/6/14/mapping-defensive-actions-a-spatial-analysis-of-where-teams-focus-their-efforts

There are many analyzers throughout the online world who love to share these heatmaps with the online community, so luckily it’s very easy to browse them if you are curious about how it looks, or you are just interested in this topic. Moreover, there are also some football-related game developers who are interested in heatmaps. Especially the Football Manager series, which included that function in their games. As the company says: football and heatmaps have such a deep connection nowadays that you can not miss it from the game!

Also, a very interesting part of the story is about the scouts (who analyze players, and make reports) and the heatmaps connection. How they choose and recommend players throughout their modern analyzing systems, which also include very interesting heatmap models. Although this whole topic is way too big to examine completely in this article, I recommend you to check it out because it is very exciting.

#3. Geographical heatmap

Geographical heatmaps are a very interesting use of this tool, but it has been clear since the very beginning of creating mobile applications that heatmap is a good way to visualize heights, busy points and so on. Nowadays, there are several other possibilities that a geographical heatmap can provide to its lovers. 

But why do map creators use this function regularly?

First of all, because it looks interesting. It can attract the users attention and they will spend more time using the application. Secondly, there are several pieces of data which can be tricky to present graphically as somehow you must make layers to show the differences between each area. Luckily, a heatmap is recommended for this task, as its color scale is very useful for this kind of problem. Also, the user can easily notice the contrast between the color scale, so he can understand the whole visualization very quickly. 

There are so many types of it that I can’t even show you all of them, although I try to present the most important ones, which are mostly used in this sector. 

1. Hot spot map: I think this is the easiest one to explain. Just imagine an average heatmap with an average geographical map and you are done! Easy but practical for so many reasons: huge data can be translated into an understandable version, yet it’s not so complex. Let’s see an example: A few years ago, when Covid spread throughout our whole planet, it was tricky to travel to another country or sometimes to a county as well. There were so many restrictions which were implemented from one day to another because of the suddenly increased covid cases. So map creators made a heatmap to help travelers. They tried to indicate countries and all the belonging counties as well,  using a red color where more cases appeared than the usual number. This whole idea worked really great, so more and more people downloaded this to their mobile phones. 

2. Choropleth maps: Choropleth map is the oldest way how heatmap and Geography relate to each other. I am sure you already saw one of these, but you never knew that it’s working based on the heatmap technology. Here, colored areas represent the magnitude of an attribute. There are several examples of how people tend to use this. For example, to demonstrate how many people belong to each state, or how the electoral votes ratios distribute in each county. 

3. Isarithmic map: a little harder to understand at first, just like its name. Firstly, it’s important to know that it is a huge category and just one type of Isarithmic map belongs to the heatmaps itself. Thus, I just only mention that one and only type, which represents density. An isarithmic map uses lines to differ and connect places, but also uses colors to show each related line’s attributes, which can be height or for example the amount of temperature. 

#4. The relation between biotechnology and heatmaps

As I wrote down earlier, one of the most essential places to use heatmaps is the field of biotechnology. But why is it so important for scientists that they require it in almost every single dissertation? The answer is simple: they need a multidimensional tool to show the relations between materials and their forms. Also, it has to be easily understandable as of the fact that sometimes they must visualize hundreds of biological materials. So basically a non-biologic related human being as easily knows the meaning of an average biological heatmap as an expert. 

Before heatmaps were released, they used charts and tables, but after some research and experience, they found out that those are not that effective due to the big chunk of data. Although, there is a little problem with the heatmap as well. Our brain usually examines the highlighted parts (in the case of heatmaps, these are the biggest and lowest values, as the colors are either brighter or darker than other ones) and memorizes them, but doesn’t look after the other elements. So it can mislead us and in the biological industry, where there are exact requirements, which you should obey since the punishments are very strict, is not good news at all. So they usually recalculate everything and rarely trust just the heatmap itself, however, they really love to use them. As well as bioinformaticians too. 

Source: https://www.researchgate.net/figure/Heat-map-of-bio-variables-and-summary-scores-that-affect-each-individual-subject-This_fig7_327134630

#5. Risk heatmaps -The savior of your company?

There are a lot of articles in the online world in connection with web analytics and their relations with heatmaps. But did you hear about one another usage of heatmaps which have influenced a lot of businesses recently? I am sure the answer is “no”, so let me introduce risk heatmaps. 

These are useful to present cyber risk assessment results in an easy-to-understand, visually attractive and concise format. Imagine a 5×5 matrix, which is equal to a 1-5 scale. There are two sides of the matrix, one curious about the impact of an action, the other curious about the likelihood. Both “1” means that it is not a big deal, you don’t need to worry. Of course, the number 5 means you have to prevent it immediately. At the end of the risk analysis, you must multiply the value of the two answers that you gave in connection with the actions. 

The bigger the number is, the bigger the risk, which may cause catastrophic events. Do action before it happens!  

Why I recommend this:

• Easy to use, simple
• Increased warning of the upcoming events
• More precision 
• Faster decision-making when needed 

Source: https://www.slideteam.net/risk-matrix-heat-map.html

#6. Conclusion:

As you can see, heatmaps are not only good for web-analytical reasons, but there are several other fields of life where they can be useful. So I advise you to use heatmap regularly and not just restrict its usage to website-related topics. I hope after reading this article, you can recognize when a heatmap occurs on your television, an app, or on a website. 
And what can the future bring in connection with heatmaps? I think AI-generated heatmaps will fluidly spread out each and every sector, and prediction heatmaps will be as important as the usual ones. I think your main task now is to be informed about the latest updates in this sector, and also try to adapt to them!

Don't forget, sharing is caring! :)