說到數(shù)據(jù)分析經(jīng)常用到的圖表，熱圖是很常見的一種，尤其是在交互設(shè)計(jì)越來越重要的今天，熱圖更是占據(jù)著不可替代的位置，那么，熱圖有哪些類型？背后的原理又是什么？產(chǎn)品經(jīng)理該如何用好熱圖呢？

一、熱圖這么多，產(chǎn)品經(jīng)理該怎么選？

熱圖（heat map）也稱熱力圖，是以特殊高亮的形式顯示用戶頁面點(diǎn)擊位置或用戶所在頁面位置的圖示。借助熱圖，可以直觀地觀察到用戶的總體訪問情況和點(diǎn)擊偏好。

1.三種不同的熱圖及原理

目前常見的熱圖有 3 種：基于鼠標(biāo)點(diǎn)擊位置的熱圖、基于鼠標(biāo)移動軌跡的熱圖和基于內(nèi)容點(diǎn)擊的熱圖，三種熱圖的原理、外觀、適用的場景各有不同。

基于鼠標(biāo)點(diǎn)擊位置的熱圖（左），如百度統(tǒng)計(jì)的頁面點(diǎn)擊圖，記錄用戶點(diǎn)擊在屏幕解析度的位置。但是基于鼠標(biāo)點(diǎn)擊位置的熱圖不會追蹤內(nèi)容的變化而變化，只是記錄相對時(shí)間內(nèi)鼠標(biāo)點(diǎn)擊的絕對位置。

基于鼠標(biāo)移動軌跡的熱圖（中），如國外的 MoseStats、Mouseflow 等，記錄用戶鼠標(biāo)移動、停留等行為，熱圖多為軌跡形式。同樣，基于鼠標(biāo)移動軌跡熱圖不會追蹤內(nèi)容的變化而變化，只是記錄相對時(shí)間內(nèi)鼠標(biāo)移動的的絕對位置。

基于內(nèi)容點(diǎn)擊的熱圖（右），如數(shù)據(jù)分析產(chǎn)品?GrwoingIO 熱圖，記錄用戶在網(wǎng)頁內(nèi)容上的點(diǎn)擊，自動過濾掉頁面空白處（沒有內(nèi)容和鏈接）的無效點(diǎn)擊?；趦?nèi)容點(diǎn)擊的熱圖，追蹤內(nèi)容變化而變化，記錄相對時(shí)間內(nèi)用戶對內(nèi)容的點(diǎn)擊偏好。

2.提高產(chǎn)品轉(zhuǎn)化和熱圖選擇

熱圖可以反映用戶在頁面位置上鼠標(biāo)的點(diǎn)擊、移動和停留偏好，站長管理員、產(chǎn)品經(jīng)理、設(shè)計(jì)師等可以借助其對用戶的訪問偏好有一定的了解。

然而，當(dāng)產(chǎn)品經(jīng)理要開始優(yōu)化產(chǎn)品設(shè)計(jì)時(shí)，前兩種基于位置的熱圖常常帶來困惑：一是密密麻麻的熱圖柔化了效果，對精確信息表達(dá)不充分，很難抓住重點(diǎn)；二是熱圖的高亮色彩傳遞的是感性化的信息，不容易分辨具體的數(shù)值；三是相對時(shí)間內(nèi)，熱圖只記錄鼠標(biāo)在絕對位置上的點(diǎn)擊，無法追蹤內(nèi)容的變化。

更多時(shí)候，產(chǎn)品經(jīng)理、運(yùn)營人員關(guān)心的是用戶在不同內(nèi)容上（如每一篇文章、每一件商品、每一張圖片等）的點(diǎn)擊偏好，然后才能有的放矢地進(jìn)行優(yōu)化。

二、從熱圖中發(fā)現(xiàn)提高產(chǎn)品轉(zhuǎn)化的重點(diǎn)

任何工具都應(yīng)該以提升工作效率為目標(biāo)，作為數(shù)據(jù)可視化的重要工具，熱圖應(yīng)該幫助產(chǎn)品經(jīng)理快速分析發(fā)現(xiàn)用戶行為規(guī)律，快速優(yōu)化和迭代產(chǎn)品。

1.用戶“誤點(diǎn)擊”，還是設(shè)計(jì)不合理？

某 SaaS 產(chǎn)品在官網(wǎng)詳細(xì)介紹了其核心功能，并在首頁設(shè)置了 4 個(gè)功能分類。很多訪問用戶以為功能介紹可以點(diǎn)進(jìn)去，然后就不停地點(diǎn)擊，卻發(fā)現(xiàn)根本就沒反應(yīng)，實(shí)際上，這 4 個(gè)功能介紹未設(shè)置鏈接。產(chǎn)品一開始認(rèn)為這是用戶“誤點(diǎn)擊”，但是查看詳細(xì)數(shù)據(jù)，發(fā)現(xiàn)工作日每天竟然有 1K-2K 的用戶點(diǎn)擊了該功能。

這樣的設(shè)計(jì)對用戶體驗(yàn)非常不友好，不但浪費(fèi)了用戶點(diǎn)擊，而且無形中降低了用戶的訪問深度。產(chǎn)品經(jīng)理可以嘗試在該位置添加功能詳情的鏈接，以滿足用戶的好奇或者需求，同時(shí)提高用戶的訪問深度。

2.毫厘必爭的網(wǎng)頁，如何優(yōu)化內(nèi)容？

對于流量巨大的網(wǎng)站（如電商網(wǎng)站、新聞資訊網(wǎng)站、門戶網(wǎng)站），網(wǎng)頁上一塊小小的區(qū)域也意味著巨大的點(diǎn)擊量和營業(yè)收入。熱力圖可以幫助產(chǎn)品經(jīng)理快速了解用戶的點(diǎn)擊偏好，然后根據(jù)訪問點(diǎn)擊的多少，快速優(yōu)化內(nèi)容。

為了方便訪問用戶快速找到內(nèi)容，GrowingIO 官方博客在網(wǎng)頁右側(cè)設(shè)置了「熱門文章」和「熱門標(biāo)簽」兩個(gè)欄目。觀察基于內(nèi)容的熱圖，卻發(fā)現(xiàn)下方的「熱門標(biāo)簽」獲得了比「熱門文章」更多的點(diǎn)擊。既然用戶對推薦的內(nèi)容不感興趣，我們是不是考慮優(yōu)化一下推薦的內(nèi)容？

3.相同結(jié)構(gòu)的網(wǎng)頁，難道要一張一張分析？

現(xiàn)在的網(wǎng)站有大量相同結(jié)構(gòu)的頁面，如電商的商品頁、媒體資訊的文章頁、SaaS產(chǎn)品后臺等等。以電商網(wǎng)站的商品頁為例，雖然商品詳情頁的商品信息不一樣，但是都在類似的位置有商品照片、庫存情況、價(jià)格、商品規(guī)格參數(shù)、用戶評論、加入購物車等內(nèi)容。下圖展示的是官方博客的文章頁面，雖然不同文章的內(nèi)容不一樣，但是每個(gè)頁面都有網(wǎng)頁導(dǎo)航欄、文章導(dǎo)航欄、熱門文章、熱門標(biāo)簽等元素。

通過路徑設(shè)置，可以看到跨頁面的熱圖效果，產(chǎn)品經(jīng)理可以對大量相同結(jié)構(gòu)的頁面進(jìn)行快速的分析和優(yōu)化。

在《精益創(chuàng)業(yè)》中有一個(gè)非常流行的概念——最小可行性產(chǎn)品（MVP），強(qiáng)調(diào)通過“驗(yàn)證性學(xué)習(xí)”來快速迭代產(chǎn)品。熱圖就是一個(gè)非常好的工具，來幫助我們發(fā)現(xiàn)問題、提出假設(shè)，然后快速驗(yàn)證或者推翻假設(shè)，直至找到最終的解決方法。

冰凍三尺，非一日之寒，在 idea-product-data 的不斷迭代中，熱圖應(yīng)該成為產(chǎn)品經(jīng)理進(jìn)行數(shù)據(jù)分析的必備工具。

作者：小數(shù)，微信公眾號GrowingIO。

本文由 @GrowingIO 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。