VWO Logo
Like this post?
Read our in-depth guide to Website Heatmap
Share this post
6 Min Read

Heatmap in 2020: A Glance at its History & Adoption

Shanaz Khan Khongthaw
Shanaz Khan Khongthaw
Content Marketer at VWO

What is Heatmap?

Heatmap can be defined as a method of graphically representing numerical data where individual data points contained in the matrix are represented using different colors. The colors in the heatmap can denote the frequency of an event, the performance of various metrics in the data set, and so on. Different color schemes are selected by varying businesses to present the data they want to be plotted on a heatmap. Some like eCommerce marketers use the hot-to-cold color scheme whilst others like stock market analysts use the cold-to-hot color scheme. The benefit that every heatmap user enjoys, irrespective of the industry, study field, and purpose, is the simplification of complex numerical data through visualization that can be gauged at a glance.

The History and Evolution of Heatmap

Heatmaps have been around since the 1800s and have since evolved into what they are today. Having originated in the 2D display of data value in a matrix, where dark grey or black blocks represented larger values and lighter shades represented smaller values, heatmaps have now taken a very unique form. The first known usage of heatmaps is credited to Loua in 1873 for presenting various social statistics in Paris using colors:

first heatmap
Image Source[1]

Loua’s heatmap used dark grey and black to denote higher value metrics and light colors like white and light grey to denote lower value metrics. Other instances of heatmap usage have been earmarked by authors like Brinton, who used heatmaps to present educational data in 1914. Gower & Digby (1981), and Chen (2002) developed a new type of heatmap that represented both the recorded data and the diagonal similarity between matrices by attaching dendrograms[1]. The most recent development in the evolution of heatmaps has been the incorporation of hover and click data into the toolbox. 

Today, heatmaps have become so versatile that they have become the go-to tool for data visualization and analysis not only for statisticians but marketers, business owners, biologists, geographers, and the like.
There are so many examples across the industry, where heatamps have taken multiple forms.
And these heatmap examples have so many varied purposes based on their usage.

What is Heatmap Used For in Different Industries?

Let’s take a look at how heatmaps are used by professionals across industry and how each of them benefits from its usage:

Stock Index Heatmap

In the financial market, stock index heatmap helps identify prevailing trends in the market at a glance.  It uses a cold-to-hot color scheme to indicate which stock options are bullish and which ones are bearish. The former is represented using the color green, whilst the latter is highlighted in red.

Stock Index Heatmap
Image Source[2]

Geographical Heatmap

Geographical heatmap or geo heatmap represents areas of high and low density of a certain parameter ( for instance, population density, network density, etc.)  by displaying data points on a real map in a visually interactive manner. Industries like real estate, travel, food, and so on can greatly benefit from the usage of geographical heatmaps.

geographical heatmap or geo heatmap
Image Source[3]

Real estate firms can map out all the properties they offer and identify opportunities to divert more resources towards high-profile neighborhoods.

Travel websites make use of geo heatmaps to represent the most happening and busy spots in the selected destination to help travelers make an informed itinerary depending on the kind of vacation they are planning.

Klook heatmap
Image Source[4]

Food entrepreneurs, on the other hand, can create a geo heatmap to identify markets where there is the least amount of competition or to identify markets which have not already been swamped by rival food joint and chains.

Website Heatmap

Website heatmap represents the hottest (most popular) and coldest (least popular) sections of your web pages using a hot-to-cold color scheme with the warm-toned colors depicting the most popular sections and cool-toned colors depicting the unpopular ones. Website heatmaps are of utmost importance to organizations that have a strong online presence and use the internet as their main revenue channel like eCommerce stores, travel and hospitality websites, OTT media services, B2B SaaS companies, and so on.

website heatmap

Using website heatmaps, businesses can track user behavior and discover actionable insights that help them measure their website’s performance, simplify numerical data, read their visitors’ minds, identify friction areas by identifying dead clicks, redundant links and so on, and ultimately make changes that positively impact their website’s conversion rates.

Heatmap in Sports

Sports heatmap is actually a very fascinating use case for heatmaps. By plotting heatmaps of players’ on-field performance, coaches and managers can identify their game pattern, performance areas that need improvement, study their rival’s possible game plan as well as strategy, and make data-backed decisions that not only benefit the players but the entire team and ultimately their business and turnovers.

Heatmap in sports

Conclusion

Statisticians and analysts employ a plethora of tools and methods to sort the collected data and present them in a more user-friendly manner. To this end, heatmaps help professionals from every industry. To sum up, the reason why heatmaps have gained the impetus they have in the past few decades as a statistical and analytical tool is that:

  • It is visual and is an intriguing method of data representation
  • It is readily and easily consumable as it simplifies numeric data and depicts them using a color scale
  • One can easily compare various data points plotted on different heatmaps 
  • It is versatile and adaptable as it can record and present both absolute and derived values
  • It removes multiple steps from traditional data analysis and interpretation process by laying down all the values in one single heatmap

FAQs on Heatmaps

What is a Heatmap?

Heatmap is a tool that can be used to graphically represent numerical data, where individual data points contained in the matrix are being represented using different colors.

How does a heatmap work?

Heatmaps rely on data collection to work.
Heatmaps use the data and help us in visualizing it in the simplest manner. The colors in the heatmap are used to denote the frequency of an event and the performance of various metrics in the data set.


Like this post?
Read our in-depth guide to Website Heatmap
More from VWO

Heatmaps for UX: Quantifying Interaction for Better Website Experiences

One of the many questions that User Experience designers want to answer with considerable certainty…

Read More
Shanaz Khan Khongthaw

Shanaz Khan Khongthaw

10 Min Read

Google Analytics Heat map: How To Create & Read [2020]

Google Analytics is one of the many services that Google offers to help you track…

Read More
Shanaz Khan Khongthaw

Shanaz Khan Khongthaw

6 Min Read

8 Top Free Heatmap Tools For Your Industry [2020]

Investing in a third-party tool for achieving business goals like gathering data for efficient decision…

Read More
Shanaz Khan Khongthaw

Shanaz Khan Khongthaw

5 Min Read
Shanaz Khan from VWO

Hi, I am Shanaz from the VWO Research Desk.

Join our community of 10,000+ Marketing, Product & UX Folks today & never miss the latest from the world of experience optimization.

A value for this field is required.

Thank you!

Check your inbox for the confirmation mail