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

  Last time, we introduced: 1. Key indicators related to heat maps; 2. How to analyze landing pages and promotional pages through heat maps; 3. The relationship between heat maps and event monitoring. Next time, we will continue to look at the contribution of heat maps to conversion analysis, the combination and segmentation of heat maps, and the application of heat maps on apps.

The contribution of heatmaps in conversion analysis

Heatmaps also play an important role in conversion analysis. We all know that the method of analyzing conversions is mainly to build conversion funnels and segment loss paths. Many friends understand this method because it is indispensable for analyzing the main conversion path. But if the main conversion path is already optimized quite well, is there still room for improvement in conversion rate ?

Conversion is not a problem that can be solved by a single thread. Conversion is a consumer psychological issue. It is the result of the combined effects of trust, pleasure, sense of urgency, the temptation to get a bargain, the appeal of product charm, the persuasiveness of other product-related services and guarantees (of course, this is also part of trust), etc. The primary conversion path helps you correct the most basic mistakes, but it’s not the whole story.

Factors that affect conversion outside the main conversion path are called "micro-conversions". I have explained the content of micro-conversion in this article: 10 classic methods that must be mastered for Internet operation data analysis . Simply put, micro-conversions refer to various elements that are outside the necessary conversion process but also have an impact on conversions. The interaction between these elements and users influences their feelings and directly or indirectly affects their decisions. For example, some pictures of products are not necessary to see in the conversion process, but will their existence affect the user's purchasing decision? These images are micro conversion elements.

Analyzing heatmaps of micro-conversion elements can also play an important role. The analysis of micro-conversions is divided into three parts: 1. Locating key pages (the main conversion path pages and other pages that have a significant impact on conversions. The specific methods will not be repeated here, and are explained in detail in my "Data-Driven Internet Operation Training"); 2. Locating elements in key pages that may affect user conversions; 3. Studying whether these elements have an effect on consumers and their impact on the final conversion - once we find that these elements promote or reduce conversions, we can determine our focus and direction of optimization.

These interactive elements in the figure are not necessary elements of the main conversion path, but they are typical micro-conversion elements because they will more or less affect the consumer psychology and affect the final conversion.

By comparing the heat map, we can clearly see which of these micro-conversion elements have more impact on consumers, such as purchase consultation and product reviews, while viewing the large product image is not particularly popular among consumers (only for this product).

If we continue to dig deeper into the data and discover the final purchase conversions that occur after each micro-conversion element is clicked, what kind of analysis can we get?

"Product reviews", which are the most attractive to consumers, do not bring higher conversions after users click to view them. This shows that the reviews themselves need more effective control to further promote conversions. Now, my own online shopping habit is that I will definitely check whether a merchant has bad or medium reviews. If there are a lot of one-sided but lacking nutritional reviews, I will definitely not buy it. If the neutral or negative reviews seem to be obviously caused by the consumers' own cognitive problems or some unexpected misunderstandings, it will greatly encourage me to buy this product.

You may say, can't we also use Event Tracking in the above example? Yes, it is possible, but it is much more difficult to operate, and it is not as simple and intuitive as a heat map.

Collection heat map

The Nikon lens example above has many applications in our analysis work. The heat map tool can even directly display the conversions after clicking these locations on the front end, which provides great convenience for us to analyze micro conversions. But a new situation arose, which caused us trouble again.

This new situation is very common, especially for many e-commerce websites or apps, which have a huge number of product pages on their platforms, each with a similar structure but different products. If I don’t want to optimize just one product (such as the shot above), but want to optimize the template of the entire product page, I will face a huge challenge - people’s behaviors are scattered across various product pages, and I want to analyze the overall performance of all product pages. Can I only analyze one product page at a time and then summarize it? In particular, when we want to understand users’ click behavior, will I have to make a heat map for each product page and then aggregate them together?

For a website with more than 10 products (SKUs), this is simply not feasible (are you really going to manually stack the heatmaps of these pages one by one?), and some websites have tens of thousands of products, so the above approach is not only not feasible, but impossible.

If there is a tool that can help us collect user behavior data on all these pages without us having to do it manually, it will solve our big problem! Such a function was unheard of in the past. But today, using the advanced capabilities of heatmaps we can solve this problem once and for all.

The basic idea to solve this problem is this: first, merge the pages you want to analyze together into a page group - not all website analysis tools support this, for example, Google Analytics does not support similar settings directly in the background, but other tools can support this very well, you need to first choose such a tool. Second, find the page group heatmap feature in such a tool's heatmap feature. Finally, specify a page as the base map of the heat map in the page group heat map function. The last step is necessary because although the heat map can overlay people’s click behavior, if all the pages in the page group are displayed together, it will be completely confusing. So in this case we can only specify the most representative page as the base map for the heat map display. This process is shown in the following example:

Step 1: Collection page. The image below shows a setup where I group together all the category pages in my blog (www.chinawebanalytics.cn), all of which have "category" in their URLs. I named this page group "Category Pages".

Step 2: Select the heat map function of "Page Group", and the page group I just created will automatically appear in it.

Step 3: You must specify a page as the base map for the heat map.

Step 4: After specifying the base map and saving it, a heat map of the entire page group with the page you selected as the base map is generated. You can study the overall click situation of these pages. My blog isn’t the best example. E-commerce product pages, media channel pages, or other pages with fixed templates are best suited to this method to view the overall heat map performance of a category of pages.

In the image above, what you see appears to be one page, but it is actually a heat map of all clicks on all pages containing the word "category" aggregated together. You can see that this group of pages don’t seem to be getting a lot of hits, which isn’t surprising, as these pages don’t get a lot of traffic on my site. For websites with a large number of pages with the same template, such as e-commerce , this method is great for clustering all pages. In fact, we couldn’t find a better way to analyze all product pages as a whole other than a collection heatmap.

Responsive pages and adaptive heatmaps

The last challenge that heatmaps face is responsive pages. It is easy to understand that responsive pages are websites that can automatically change the way the same page is displayed on PC, tablet and mobile phone, and display the page with the most optimized layout. The opposite of responsiveness is a rigid page, which looks the same on any terminal (so it becomes very small on a mobile phone and you can’t see anything without zooming in). The figure below shows an example of a responsive page (image from Baidu Encyclopedia).

Heatmaps have to cope with this new page format, especially for the tools I mentioned at the beginning that can perfectly solve the first type of heatmap indicators. Because for such tools, they must not only record user clicks on clickable links, but also all user clicks on the page (regardless of whether the place is clickable or not), so the layout reconstruction of responsive pages on different terminals has a very significant impact on the recording of such click behaviors (especially the exact location where these click behaviors occur). If modern heatmap tools are to faithfully represent people’s click interactions, they must be able to display clickmaps of rebuilt (responsive) pages on a variety of devices. The image below shows how this heatmap adapts to a responsive page — not only does it need to adapt to different devices, but it also needs to adapt to the device's portrait or landscape rotation.

Analyze your app’s performance using heatmaps

Heat maps are not just tools for the web. Apps often also need heat maps to display user interaction behaviors. For apps, heat maps are also a "fast, good, and economical" tool.

It is worth noting that since apps and web are fundamentally different - apps are programs, similar to ".exe" files on PCs, the usage of heat maps is also somewhat different. Generally speaking, due to the limitations of terminal devices, apps have a relatively small display area, and the interactive elements are concentrated but limited in number, so the value of heat maps is lower than that of the web. However, precisely because the screen is small, the distribution of interactive points is also relatively concentrated and limited, so the analysis is much simpler and more intuitive than the heat map of the web. Therefore, compared with the PC web, it has both advantages and disadvantages. In addition, for some content ( information flow ) apps (NetEase News, Toutiao ), heat maps are not applicable because the content changes almost all the time. However, heat maps are still valuable for tool and e-commerce apps (especially product pages of e-commerce apps). The heatmap of gaming apps is very special and depends on the type of game. However, heatmaps for most main game bodies are difficult to create and have little significance. However, some of the game’s operating interfaces (such as registration, in-app purchases, etc.) are very similar to web interactions, and heatmaps are also meaningful for optimizing these interactions.

For example, the following AB test makes full use of the intuitive and convenient advantages of app heatmaps.

In this case, Lonely Planet wants people to buy more of the “All Cities” package, which is $4.99, but the heat map shows that people don’t like to choose the more expensive one.

Smart operations managers believe that it is necessary to fully tap into human nature. Since people do not have a strong motivation to spend more money to obtain things that they cannot use temporarily, it is necessary to stimulate people's nature of wanting to take advantage.

The new design added a purchase option: "Unlock two cities" for $4.49, and everything changed significantly. It seems to remind people how low the cost-effectiveness of the two cities is compared with all cities, so people realize how necessary it is to buy things with higher cost-effectiveness as soon as possible.

Apparently, the new design suddenly aroused people's pleasure of "getting a small bargain", thus quickly saving the previous poor performance of "unlocking all cities". You can see how the heat map quickly illustrates this problem.

Comparative analysis using segmentation heatmaps

The combination of heatmap and segmentation capabilities is the last point I want to talk about, and its value is unquestionable. One of the fundamental methods of analysis is to understand the behavioral differences between different categories of people, and to study the deep mechanism of how products interact with people, and then optimize the products.

Obviously, the most intuitive tool to describe crowd behavior is the heat map.

There are as many ways to segment a population as there are types of populations worthy of being described using heat maps. Simply put, what are the differences between new and old visitors in their interaction with the website (or app)? Or, what is the difference in interaction behavior between visitors coming from search engines and visitors coming from social media?

The heat map below shows the difference in behavior between new and old visitors.

The two pages in the picture are exactly the same homepage of my blog. The difference between them is that the left one shows the click heat map of new visitors to my website, while the right one shows the click heat map of old visitors to my website. Doesn't seem like much of a difference, right?

After careful inspection, I found that old visitors care about my "site map" and have more on-site search behaviors, which shows that they do come to my website with a purpose, while new visitors are very interested in "About the Author". In addition, the headlines also received more attention from old visitors, while new visitors did not seem to care much about my headlines.

With precise click distribution graphs that show the numbers, you can see new and interesting things. For example, the new visitors (left), highlighted in the red box, seem to be more interested in my latest training course on Big Data.

I once did a comparative heat map analysis of an e-commerce website, and in that case, it was clear that on the homepage, new visitors liked to use the navigation very much, while old visitors went straight to the "Famous Products Sale" (a channel selling discounted products). Unfortunately I can’t find the original image, but the analysis at the time helped us redesign the homepage layout for old users when they return to the website.

Summarize:

Having written this far, this article is almost complete with what I talked about with my friends. I used to not trust heatmaps. You can read my old post Challenging the Wisdom of the Crowd in Web Analytics (2) — Heatmaps to see my attitude back then. But today, thanks to the emergence of reliable and powerful tools, the application areas and value of heat maps have changed dramatically.

Today, heatmaps have become a tool I must use, even more than event tracking and reporting. After all, heat maps are simple, intuitive, expressive, and extremely easy to segment. From an operational perspective, many problems that could not be solved in the past can now be easily solved through heat maps.

Finally, I hope this article can give you a new perspective on your website, app or product and help you achieve real business optimization. Also thank you for following along and reading this far through the two long articles.

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!