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

5 評論 17828 瀏覽 107 收藏 10 分鐘

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

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

熱圖這么多,產品經理該選哪一種?

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

三種不同的熱圖及原理

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

pm_heatmap-1

  • 基于鼠標點擊位置的熱圖(上圖左),如百度統計的頁面點擊圖,記錄用戶點擊在屏幕解析度的位置。但是基于鼠標點擊位置的熱圖不會追蹤內容的變化而變化,只是記錄相對時間內鼠標點擊的絕對位置。
  • 基于鼠標移動軌跡的熱圖(上圖中),如國外的MoseStats、Mouseflow等,記錄用戶鼠標移動、停留等行為,熱圖多為軌跡形式。同樣,基于鼠標移動軌跡熱圖不會追蹤內容的變化而變化,只是記錄相對時間內鼠標移動的的絕對位置。
  • 基于內容點擊的熱圖(上圖右),如GrwoingIO熱圖,記錄用戶在網頁內容上的點擊,自動過濾掉頁面空白處(沒有內容和鏈接)的無效點擊?;趦热蔹c擊的熱圖,最大特點是熱圖追蹤內容變化而變化,記錄用戶相對時間內對內容的點擊偏好。

產品優化和熱圖選擇

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

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

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

看完熱圖,產品該如何優化?

任何工具都應該以提升工作效率為目標。作為數據可視化的重要工具,熱圖應該幫助產品經理快速發現用戶行為規律,幫助產品經理快速優化和迭代產品?;趶姶蟮摹盁o埋點”數據采集技術,熱圖清晰地展示用戶在頁面不同內容上的點擊偏好。那么,產品經理該如何用好這種強大的工具呢?

用戶“誤點擊”,還是設計不合理?

pm_heatmap-2

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

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

毫厘必爭的網頁,如何優化內容?

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

pm_heatmap-3

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

相同結構的網頁,難道要一張一張分析?

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

pm_heatmap-4

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

產品迭代,熱圖能幫的上什么忙?

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

pm_heatmap-5

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

 

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

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 真棒

    來自浙江 回復
  2. 這種東西我們公司也不注重

    回復
  3. 我能說我們公司根本不注重這種嗎 ?

    來自本機地址 回復
    1. 企業數據分析、商務分析是一個系統的工作,需要自上而下的重視和推動。

      來自本機地址 回復
    2. 如果不注重,一個根本的原因就是還是和自身業務結合得不夠,或者說沒有找到熱圖分析真正幫助到業務的方法。

      來自北京 回復