The secret weapon of operational optimization: Re-understand the power of heat maps! (superior)

In this two-part article, I’ll describe how heatmap analysis is revolutionary today, how it can be applied, and (with examples) the exciting results it can produce.

In the past, few people actually used heat maps. Heat maps look very intuitive, but they are not so easy to use. In the past, inaccurate data display was an important reason. Now, the objects of heat map analysis - interactions on web pages and APP screens are becoming increasingly complex, so the technical difficulty of drawing heat maps is much more difficult than in the past. This has made me feel for some time that heat maps are not even as useful as reports like "next page summary".

The good news is that today’s data tools are not what they used to be. Today’s heat map is not just about “guaranteed to satisfy you”, but more importantly, it has begun to serve as an important and practical data method to help us solve some problems that were almost unsolvable in the past, thereby helping us elevate our Internet operations to a new level.

Key indicators related to heat maps

First of all, it should be made clear that the heat map is not a tool, but a system. It is an organic collection of multiple tools that perform different functions. If you think that heatmaps are just a tool to see where people click more or less, you are underestimating them.

Since it is a system, the heat map certainly has its own relevant key indicators. Some you know, some you may not.

The first type of key indicators are used to indicate people’s click behavior.

However, since people's clicking behavior is quite random, clicks can be divided into three categories: link clicks, non-link interaction clicks, and blank clicks. Link click, very simply, is a click on an actual http link. Non-link interactive clicks are those that can also be clicked but are not http links, such as JavaScript interactions and flash interactions. A blank click refers to a click that occurs in a place where there is no link or interaction, that is, a click that "clicks on a white dot".

Different from the pageview commonly used in our website analysis, the metric of click behavior measured by the heat map is the number of clicks. However, since some tools do not directly monitor mouse clicks, the number of clicks they indicate in the heat map is not actually the number of clicks, but the number of pageviews of new pages opened after clicking the link. Our most commonly used tool, Google Analytics, draws heat maps this way, which is why heat maps using it are quite inaccurate.

A good heatmap tool should measure real clicks, that is, not just link clicks, but also non-link interaction clicks and blank clicks. And the number of pageviews of the new page opened after the click cannot be used to replace the number of clicks.

The second key metric is people's browsing behavior on the page

Since a web page usually takes up more than one screen (that is, the entire web page cannot be displayed on one monitor screen), people have to scroll down the web page to view the entire content. Heatmap systems should record how people scroll through the page, which is an important part of browsing behavior. In addition, the heat map system should also show which part of the web page is displayed on the screen longer, thus helping us understand which part of the page is viewed more carefully.

The metric that measures how much people scroll through a page is called “browse lines,” while the metric that measures which part of the page is displayed on the screen longer is called display heat. As shown in the following figure:

In the picture above, you can notice some percentage numbers that get smaller from top to bottom. These numbers refer to the percentage of visitors who scrolled to that location. For example, the 57% line in the figure above (solid and dashed lines) means that 57% of visitors scrolled the page to the position indicated by the line in the figure.

Similarly, in the above picture, you can also notice that the entire page is covered with various color bands of blue, green, red and yellow, which indicate how long the corresponding position of the page stays on the screen. The warmer the color (red, orange, yellow), the longer the retention time, which means that people look at this part for a longer time; the colder the color (green, blue or even colorless), the shorter the time the corresponding part stays on the screen, and the shorter the time people look at this part. So, this is the second category of key metrics: views and dwell time.

The third category of key indicators is different from the first two categories

The first two categories of indicators measure people's active behavior, that is, behavior performed to achieve specific goals, while the third category of indicators measures people's indirect behavior. It sounds difficult to say, but it is not difficult to understand. This type of behavior is the behavior of moving the mouse (but not clicking) that we often use. The purpose of moving the mouse is to click, but the movement itself is relatively random. In order to click a point, the movement trajectories of different people will definitely be different, and each movement will also be different. Measuring mouse movement is not the most important thing, but sometimes it is important, such as when you want to check whether the user behavior on the page is the behavior of "real people". It is worth noting that most heatmap tools may not include the ability to monitor mouse movements. For me, this feature is not needed very often, so I won’t introduce it in detail in this article.

Understanding the above key indicators is not difficult and is a very good start. Next, let’s see how heat maps should be used and how they can solve our specific problems.

Landing Page Dilemma

A classmate asked me what are the most important indicators to look at on the landing page. In the past I would answer that you can look at the "bounce rate", but today I don't completely agree with that. There is nothing wrong with looking at the bounce rate, but the bounce rate is not completely reliable.

The reason is that the technical settings of many pages have changed, and there are many non-HTML interactions on these pages, such as a customer service window that pops up after clicking, or jumps to other websites (such as Taobao and JD.com), or simply picking up the phone to make a call, or the visitor carefully reads the page from beginning to end for a long time but does not take any more actions, but the page content does touch him - all of these situations will cause the bounce rate to be "abnormally high" and give us the "illusion" that the landing page is very bad.

What's more, many websites are single-page websites. These websites are just a landing page, and all business demands are completed on this landing page! In this case, you would expect a bounce rate higher than 95%! (As for why it is not 100%, the reason is that the page may be refreshed by the user, and page refresh is no longer a jump out for website analysis tools). For example, on the page below, all clickable areas open QQ for a conversation.

The page above is a typical single-page website because the designer of the website doesn’t want you to visit other pages. All the links on these websites are linked to customer service systems such as "Enterprise QQ" or "Leyu". Therefore, it is not very meaningful to study the bounce rate for this type of website. This puts the optimization of landing pages into a dilemma, that is, it is very difficult to describe user behavior using our traditional monitoring methods (because user behavior cannot be detected by general tools), so it is difficult to obtain any basis for optimization!

There is no better tool than heatmap for optimizing landing pages

Since we can’t rely solely on bounce rates, how can we know whether these pages meet our expectations and satisfy users? This requires the use of heat maps, and more complete heat map tools, such as the tools that can monitor all mouse click behaviors, that is, heat map tools that can monitor link clicks, non-link clicks, and blank clicks, as I mentioned in the previous section when I talked about the first type of key indicators. In addition, we also need to use heat maps to understand how people's attention changes, so as to determine what content on the page users are interested in without more interaction data.

My approach to optimizing landing pages using heatmaps is usually like this:

First, check to see if your landing page is too long. People generally have some personal preferences and misunderstandings about page length. Many people believe that there is a fixed length for a page. It should not be too long (causing visitors to get bored) nor too short (leaving them wanting more and feeling unsatisfied). I quite disagree with this. Just like a magazine, is 10 pages appropriate or 100 pages appropriate? There really is no rule about this. If magazines are more your thing (such as Playboy, FHM, etc.), 100 pages may not be too few, but for Chaoyang Masses magazine, you probably don't need that many pages.

In fact, many AB tests have shown a rule, that is, the length of the page has no regular effect on the achievement of business goals. So, you have to analyze each case on a case-by-case basis. The analysis of page length requires the use of heat map tools, especially the "browse line" I mentioned earlier (see the second type of key indicators in the previous section).

The browsing line is very simple to use. If your page is more than ten screens long, but the browsing line shows that only 5% of people are left at the fourth screen, then it is necessary to examine whether the page is really worth so long, or whether the content is attractive enough to keep people reading.

Second, check to see if people are clicking where they shouldn’t be, or not clicking where they should be. This one needs no further explanation because it is effortless to understand. Still, this is where almost all landing pages make mistakes. The heat map shows that users' clicking patterns are often beyond your imagination. These unexpected behaviors are actually extremely valuable. We use them to determine the user's intentions and then use the inferred user intentions to modify the current landing page.

Finally, we will not launch the modified landing page immediately, but conduct AB testing. We will not only look at the CTR comparison between the two landing pages, but also continue to look at the difference between the heat maps of the two pages. This is to verify the user intention speculation we made in the previous step.

This method has worked for me time and time again. It does not require data modeling or big data mining. It is so simple and direct, yet very effective.

Don't believe it? Let’s look at a real case with a name and a surname.

Landing Page Heatmap Analysis Example

This is a new product page of one of China's most renowned enterprise communications solution companies: "Xintongwangying".

Now, let me tell you that the bounce rate of this page is quite good, only 52.95%. Do you think it still needs to be optimized?

For a commercial landing page like this, almost all traffic comes from Baidu SEM . You know the price of a click. Although a 53% bounce rate is good, even if it is reduced by only 1 percentage point, it is still real money. What’s more, Baidu now only has a few competitive advertising spaces left, and the bidding is even more fierce.

Since we are going to analyze it, I will give you the relevant data of this page.

• Bounce rate: 52.95%
• Average stay time: 1 minute 40 seconds;
• The withdrawal rate is 36.05%.

How do you think this page can be improved?

You will say: "Teacher Song, this cannot be analyzed. The data is too broad."

Almost all of the time, we face a landing page with just a little data like this. Optimize it? It feels like I don't know where to start. In most cases, if a landing page has similar statistics to the one above, it means that the page is not particularly optimized because, overall, the performance of the page is just okay.

But if we look at the heat map, your idea will completely change.

For the heat map below, I used the heat map function of the PtEngine monitoring tool provided by PtMind. This is the most practical and easy-to-use heat map tool I can find, and this tool is well positioned. An important reason why we seldom used heat maps in the past was that the heat map data was too inaccurate. Now, with this tool, we don’t have to worry about this problem at all.

The heat map of the page above is shown in the figure below. Similarly, click on the small picture below to see the large picture .

The heat map gives us a lot of slots. The very important information obtained from the heat map is as follows:

1. The five "cakes" on the first screen and the text below them have received a considerable number of clicks . Unfortunately, these five circles do not have any links and cannot be clicked. ——It cannot be clicked. Putting it in such a prominent position on the first screen of the landing page is deliberately making things difficult for the user experience.
2. The two large banner images below the pie occupy a very large space on the first and second screens. Unfortunately, almost no one clicks there. Moreover, looking at the attention retention heat map on the right, the user retention situation at this location is also very unsatisfactory. ——Then why put these two full-width pictures in such a good position?
3. The top navigation takes up a lot of clicks. The problem is that this page was not originally designed to be used as a navigation transition page.
4. There were suddenly a large number of clicks on the last two screens, and the browsing retention rate was also quite good, indicating that these contents were of great concern to users. Unfortunately, less than 60% of users scroll here.

This is not information that a 53% bounce rate can tell us. But each one is important!

After reading the above four pieces of information, I believe you know how to adjust this page. Of course, we must do AB testing after adjustment. The results of the AB test were as expected. The bounce rate dropped from 53% to 37.5%. For businesses that rely on paid search, this huge change is enough to help them establish a strong advantage over their competitors.

An unexpected positive side effect: simplified event tracking

After reading the case above, careful readers will definitely find something more interesting. If the heat map can faithfully record all mouse clicks, regardless of whether the place is actually clickable, then some interactions that were very difficult to record in the past will become simple?

These difficult-to-record interactions include JavaScript, Flash, video player plug-ins, customer service plug-ins, etc. that we mentioned earlier. In the past, in order to record the clicks on these interactive elements, we had to use the event tracking patch. Event tracking is a good thing, but it has a significant disadvantage, which is that it is difficult to deploy (now everyone calls the deployment of event tracking "tracking") and is prone to errors.

The emergence of advanced heat map function can actually help some friends who do not need too powerful event tracking function to a great extent. For example, I just want to see the number of JavaScript interactions. Now the heat map can tell you directly without having to bury points, which saves a lot of trouble.

If the heat map is accurate and detailed enough, and today’s analysis tools are no longer just about detecting HTML interactions (they can detect things like DOM events), then it can even extend the functionality of a complete event tracking. This is actually the source of the so-called "no-buried point" event monitoring. Although some Chinese tool suppliers today emphasize that they "pioneered" the technology of no buried points, this solution actually appeared three or four years ago. Today, many tool vendors offer corresponding capabilities.

In the picture below, the up and down scroll buttons in the "featured" column of my blog are not HTML interactive at all, not even JavaScript interactive, but the monitoring tool can easily and accurately indicate how many times it has been clicked.

Therefore, this feature can almost instantly become an "event tracking" feature without embedding. You don't need to do any additional settings. The tool has already recorded all the interactions, regardless of whether they are HTML or not. This is a completely different experience from the past, and you will have a strong sense of pleasure that the tool has become so smart. As shown in the following figure:

In fact, I found that in order for the heat map to be accurate, the data collected without buried points can be accurate. No embedding is not inherently accurate, so if you want to see whether no embedding is done well, you can almost verify it by looking at the accuracy of the heat map of this tool (accuracy of values ​​and positioning points).

Content analysis also relies heavily on heatmaps

If landing pages rely heavily on heatmaps, content analysis requires heatmaps even more. Content analysis is a difficult point in data-driven operations, but it is also a very core point, especially in the field of SEO .

The difficulty with content analysis is that, although you can know whether users have reached your content, you cannot determine how your content has affected users - yes, users reaching (opening) content and seeing the content are actually two different things. We need ways to understand how many users actually read your content, how well they read it, and where they abandon it. Content analysis is very similar to landing page analysis in that using bounce rate to make judgments is actually very inaccurate, because reading may not require clicking on any links, but the visitor's mind may be completely influenced by the content. In this case, many bounces are likely to be "pseudo bounces."

In the example below, of my own website, it’s clear that using bounce rate as a proxy would be unfair. I don’t consider SEO much when writing my articles (especially those in recent years), so I’m too lazy to add internal links. Therefore, the bounce rates shown by these articles (such as the two articles in the red box) are often quite alarming. But if the bounce rate is high, does it mean that the article is “disliked” by readers?

The first of these two red-boxed articles - the one at "/interne", I think is one of my most popular articles and has received a crazy amount of reposts. But this article has the highest bounce rate, as high as 81%. At the same time, you can see that the dwell time of this article is actually quite long, close to 6 and a half minutes. Of these two contradictory indicators, I obviously should trust the residence time more.

It is not difficult to find the problem. One feature of this article is that there is no link in the entire text - you can just read it, no need to click. This is bad for SEO and obviously drives up bounce rates, but the article does get a lot of dwell time, which shows the effort people put into reading it. That’s good to know, but I’d also like to know how widely the article has been read, and more fundamentally, how many people have read it. Neither the bounce rate nor the dwell time in the table can help me answer this question. Traditional heatmaps can't help me with this either.

With the new heatmap features, especially screen dwell and read lines, I can see a lot of things that I couldn’t see in the past, such as how much people actually “loved” the article.

The above picture basically shows the reading situation of the entire article.

The heat map above tells me a lot - a lot of people genuinely like my article. Even with such a long article, nearly 40% of people still read to the end. Moreover, judging from the mainstream situation on the screen, the effective content is always retained for a longer period of time. So what about an 81% bounce rate? The bounce rate is no longer important here. What matters is that the content is being consumed!

Such articles that are recognized by readers, coupled with appropriate internal links within the article (this is where I was lazy and didn’t add it), can easily gain the favor of search engines.

Such cases are very common, and I need to use heat maps for almost all content analysis.

Okay, that’s all for the first half. The second half will also discuss several very important topics: how heat maps can help optimize conversions, how heat maps can solve the cluster analysis of some pages that share common templates but are extremely large in number, how heat maps can adapt to new website page technologies, how to use heat maps on apps, and how to combine segmentation and heat maps to create even better analysis!

Mobile application product promotion service: APP promotion service Qinggua Media information flow

This article was written by @Sidney Song Compiled and published by (APP Top Promotion), please indicate the author information and source when reprinting!