If you haven’t seen this picture, you can’t say you understand data analysis?

When it comes to charts that are often used in data analysis , heat maps are a very common type. Especially today when interactive design is becoming more and more important, heat maps occupy an irreplaceable position. So, what types of heat maps are there? What is the principle behind it? How should product managers make good use of heat maps?

1. With so many heat maps, how should product managers choose?

A heat map, also known as a heat map, is a graphic that displays the user's page click location or the user's page location in a specially highlighted form. With the help of heat maps, you can visually observe users' overall access and click preferences.

1. Three different heat maps and their principles

There are currently three common types of heat maps: heat maps based on mouse click locations, heat maps based on mouse movement trajectories, and heat maps based on content clicks. The principles, appearances, and applicable scenarios of the three types of heat maps are different.

• Heatmap based on mouse click location (left), such as Baidu Statistics' page click map, records the location of user clicks at screen resolution. However, heat maps based on mouse click positions do not track changes in content, but only record the absolute position of mouse clicks within relative time.
• Heatmap based on mouse movement trajectory (middle), such as foreign MoseStats, Mouseflow, etc., records user mouse movement, dwelling and other behaviors. Heatmaps are mostly in the form of trajectories. Similarly, heatmaps based on mouse movement do not track changes in content, but only record the absolute position of the mouse movement within relative time.
• Content-click-based heatmaps (right), such as the GrwoingIO heatmap, record user clicks on web page content and automatically filter out invalid clicks on blank pages (without content or links). The heat map based on content clicks tracks changes in content and records users' click preferences for content within a relative period of time.

2. Product optimization and heatmap selection

Heat maps can reflect users' mouse click, movement and dwell preferences on page locations. Webmasters, product managers, designers, etc. can use them to gain a certain understanding of users' access preferences.

However, when product managers start to optimize product design, the first two types of location-based heat maps often cause confusion: first, densely packed heat maps soften the effect, fail to fully express precise information, and make it difficult to grasp the key points; second, the highlighted colors of the heat maps convey perceptual information, and it is not easy to distinguish specific values; third, within relative time, the heat map only records mouse clicks at absolute positions and cannot track changes in content.

More often than not, product managers and operations staff are concerned about users' click preferences on different content (such as each article, each product, each picture, etc.), and only then can they optimize in a targeted manner. Heat maps based on content clicks, such as the GrwoingIO heat map, collect users' clicks on different content and filter out invalid clicks on blank pages (without content and links). Furthermore, the heat map tracks changes in page content and can adapt to the needs of frequent content updates on many commercial websites.

2. Discover the key points of product optimization from the heat map

Any tool should aim to improve work efficiency. As an important tool for data visualization, heat maps should help product managers quickly discover user behavior patterns and quickly optimize and iterate products. Based on real-time and full data collection without embedding points, the heat map clearly shows the users' click preferences on different content and guides product optimization.

1. Is it a "misclick" by the user or an unreasonable design?

A certain SaaS product introduces its core functions in detail on its official website and sets up 4 functional categories on the homepage. Many visiting users thought they could click on the function introduction, and then kept clicking, only to find that there was no response at all. In fact, there were no links set for these 4 function introductions. The product initially believed that this was a "misclick" by the user, but after checking the detailed data, it was found that 1K-2K users clicked on this function every day on weekdays.

Such a design is very unfriendly to the user experience. It not only wastes user clicks, but also invisibly reduces the user's access depth. Product managers can try to add a link to the function details in this location to satisfy users' curiosity or needs and increase the depth of users' access.

2. How to optimize the content of a web page where every inch counts?

For websites with huge traffic (such as e-commerce websites, news and information websites, and portal websites), a small area on the web page also means huge clicks and operating income. Heat maps can help product managers quickly understand users’ click preferences, and then quickly optimize content based on the number of visits and clicks.

3. Do we need to analyze web pages with the same structure one by one?

Today's websites have a large number of pages with the same structure, such as e-commerce product pages, media information article pages, SaaS product backgrounds, and so on. Taking the product page of an e-commerce website as an example, although the product information on the product details page is different, they all have product photos, inventory status, price, product specifications, user reviews, add to cart and other content in similar locations.

Through path settings, you can see the heat map effect across pages, and product managers can quickly analyze and optimize a large number of pages with the same structure.

There is a very popular concept in "Lean Startup " - Minimum Viable Product (MVP), which emphasizes rapid product iteration through "validation learning". Heat maps are a very good tool to help us identify problems, propose hypotheses, and then quickly verify or overturn the hypotheses until we find the final solution.

A three-foot-thick ice does not form overnight. In the continuous iteration of idea-product-data, heat maps should become an essential tool for product managers.