產品經理,你真的懂熱圖嗎?

一圖勝千言！產品經理經常使用各式圖表來提取或者表達信息 ，其中熱圖是常見的一種；尤其是在站點管理、界面優化、互動設計等場合，熱圖更是被產品經理們廣泛應用。然而產品經理，你真的懂熱圖嗎？

熱圖有哪些類型？背後的原理又是什麼？產品經理該如何用好熱圖呢….. 今天，我們就來一探究竟。

熱圖這麼多，產品經理該選哪一種？

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

三種不同的熱圖及原理

目前常見的熱圖主要有3種：基於滑鼠點擊位置的熱圖、基於滑鼠移動軌跡的熱圖和基於內容點擊的熱圖。三種熱圖的原理、外觀各異，適用的場景各有不同。

基於滑鼠點擊位置的熱圖（上圖左），如百度統計的頁面點擊圖，記錄用戶點擊在屏幕解析度的位置。但是基於滑鼠點擊位置的熱圖不會追蹤內容的變化而變化，只是記錄相對時間內滑鼠點擊的絕對位置。基於滑鼠移動軌跡的熱圖（上圖中），如國外的MoseStats、Mouseflow等，記錄用戶滑鼠移動、停留等行為，熱圖多為軌跡形式。同樣，基於滑鼠移動軌跡熱圖不會追蹤內容的變化而變化，只是記錄相對時間內滑鼠移動的的絕對位置。基於內容點擊的熱圖（上圖右），如GrwoingIO熱圖，記錄用戶在網頁內容上的點擊，自動過濾掉頁面空白處（沒有內容和連結）的無效點擊。基於內容點擊的熱圖，最大特點是熱圖追蹤內容變化而變化，記錄用戶相對時間內對內容的點擊偏好。產品優化和熱圖選擇

基於滑鼠點擊位置的熱圖和基於滑鼠移動軌跡的熱圖，可以反映用戶在頁面位置上滑鼠的點擊、移動和停留偏好，站長管理員、產品經理、設計師等可以藉助其對用戶的訪問偏好有一定的了解。

然而，當產品經理要開始優化產品設計時，前兩種基於位置的熱圖也常常帶來困惑。一是密密麻麻的熱圖柔化了效果，對精確信息表達不充分，產品經理很難抓住重點。二是熱圖的高亮色彩傳遞的是感性化的信息，不容易分辨具體的數值。三是相對時間內，熱圖只記錄滑鼠在絕對位置上的點擊，無法追蹤內容的變化。

更多時候，產品經理、運營人員更多關心的是用戶在不同內容上（如每一篇文章、每一件商品、每一張圖片等等）的點擊偏好，然後才能有的放矢地進行優化。而基於內容點擊的熱圖收集的是用戶在不同內容上的點擊情況，過濾掉了頁面空白處（沒有內容和連結）的無效點擊。並且熱圖追蹤頁面內容的變化而變化，可以適應很多商業網站內容頻繁更新的需要。

看完熱圖，產品該如何優化？

任何工具都應該以提升工作效率為目標。作為數據可視化的重要工具，熱圖應該幫助產品經理快速發現用戶行為規律，幫助產品經理快速優化和迭代產品。基於強大的「無埋點」數據採集技術，熱圖清晰地展示用戶在頁面不同內容上的點擊偏好。那麼，產品經理該如何用好這種強大的工具呢？

用戶「誤點擊」，還是設計不合理？

某SaaS產品在官網詳細介紹了其核心功能，並在首頁設置了4個功能分類。很多訪問用戶以為功能介紹可以點進去，然後就不停地點擊，卻發現根本就沒反應。實際上，這4個功能介紹就未設置連結。產品一開始認為這是用戶「誤點擊」，但是以【自定義分析】功能為例，查看詳細數據，發現工作日每天竟然有1K-2K的用戶點擊了該功能。

這樣的設計對用戶體驗非常不友好，不但浪費了用戶點擊，而且無形中降低了用戶的訪問深度。產品經理可以嘗試在該位置添加功能詳情的連結，以滿足用戶的好奇或者需求，同時提高用戶的訪問深度。

毫釐必爭的網頁，如何優化內容？

對於流量巨大的網站（如電商網站、新聞資訊網站、門戶網站），網頁上一塊小小的區域也意味著巨大的點擊量和營業收入。熱力圖可以幫助產品經理快速了解用戶的點擊偏好，然後根據訪問點擊的多少，快速優化內容。

為了方便訪問用戶快速找到內容，某技術博客在網頁右側設置了【熱門文章】和【熱門標籤】兩個欄目。觀察基於內容的熱圖，卻發現下方的【熱門標籤】獲得了比【熱門文章】更多的點擊。既然用戶對我們博客推薦的內容不感興趣，我們是不是考慮優化一下內容推薦？

相同結構的網頁，難道要一張一張分析？

現在的網站有大量相同結構的頁面，如電商的商品頁、媒體資訊的文章頁、SaaS產品後臺等等。以電商網站的商品頁為例，雖然商品詳情頁商品信息不一樣，但是都在相同的位置有商品照片、庫存情況、價格、商品規格參數、用戶評論、加入購物車等等內容。下圖展示的是某技術博客的文章頁面，雖然不同文章的內容不一樣，但是每個頁面都有網頁導航欄、文章導航欄、熱門文章、熱門標籤等等元素。

通過路徑設置，將原本 「……blog/article_1」 路徑下的熱圖通配為為 「……blog/*」，用 「*」 模糊匹配所有的博客文章。這樣，我們就能看到看到跨所有博客文章頁面的熱圖效果（如上圖）。通過這樣的便捷的頁面設置，產品經理可以對大量相同結構的頁面進行快速的分析和優化。

產品迭代，熱圖能幫的上什麼忙？

「埋點「是所有產品經理的痛，從提需求、寫代碼、返數據再到做分析，這是一個漫長、繁瑣、低效的過程。在強大的「無埋點」數據採集技術的基礎上，基於內容點擊的熱圖可以直觀展示用戶在頁面上內容的點擊偏好，讓產品經理對用戶的行為規律一目了然。

在《精益創業》中有一個非常流行的概念——最小可行性產品（MVP），強調通過「驗證性學習」的方式來快速迭代產品。熱圖就是一個非常好的工具，產品經理從熱圖中發現問題、提出假設，然後快速實驗來驗證或者推翻我們的假設。「冰凍三次，非一日之寒。」在「idea-product-data「的不斷迭代中，熱圖應該成為產品經理的一種工作方式！

 

本文作者是GrowingIO小數，從事產品、運營數據分析工作，原文發於GrowingIO技術博客。

收藏已收藏 | {{ postmeta.bookmark }} 點讚已贊 | {{ postmeta.postlike }}