cookieOptions = {...}; .產品經理,你真的懂熱圖嗎? - 3S Market「全球智慧科技應用」市場資訊網

3S MARKET

3S MARKET
2019年10月30日 星期三

 
What is a heat map - Stat Café

按:本文來自 Growing IO 團隊。
一圖勝千言!產品經理經常使用各式圖表,來提取或者表達訊息,其中熱圖是常見的一種;尤其是在站點管理、介面優化、交互設計等場合,熱圖更是被產品經理們廣泛應用。

然而產品經理,你真的懂熱圖嗎?熱圖有哪些類型?背後的原理又是什麼?產品經理該如何用好熱圖呢? 今天,我們就來一探究竟。

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

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

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

产品经理,你真的懂热图吗?

1)基於滑鼠點擊位置的熱圖(上圖左),如百度統計的頁面點擊圖,記錄用戶點擊在螢幕解析度的位置。但是基於滑鼠點擊位置的熱圖,不會追蹤內容的變化而變化,只是記錄相對時間內滑鼠點擊的絕對位置。
2)基於滑鼠移動軌跡的熱圖(上圖中),如MoseStatsMouseflow等,記錄用戶滑鼠移動、停留等行為,熱圖多為軌跡形式。同樣,基於滑鼠移動軌跡熱圖不會追蹤內容的變化而變化,只是記錄相對時間內滑鼠移動的的絕對位置。
3)基於內容點擊的熱圖(上圖右),如GrwoingIO熱圖,記錄用戶在網頁內容上的點擊,自動過濾掉頁面空白處(沒有內容和鏈接)的無效點擊。基於內容點擊的熱圖,最大特點是熱圖追蹤內容變化而變化,記錄用戶相對時間內對內容的點擊偏好。


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

然而,當產品經理要開始優化產品設計時,前兩種基於位置的熱圖也常常帶來困惑。

一是密密麻麻的熱圖柔化了效果,對精確訊息表達不充分,產品經理很難抓住重點。二是熱圖的高亮色彩傳遞的是感性化的訊息,不容易分辨具體的數值。三是相對時間內,熱圖只記錄滑鼠在絕對位置上的點擊,無法追蹤內容的變化。

 更多時候,產品經理、營運人員更多關心的是使用者在不同內容上(如每一篇文章、每一件商品、每一張圖片等等)的點擊偏好,然後才能有的放矢地進行優化。

而基於內容點擊的熱圖收集的是,使用者在不同內容上的點擊情況,過濾掉了頁面空白處(沒有內容和鏈接)的無效點擊。並且熱圖追蹤頁面內容的變化而變化,可以適應很多商業網站內容頻繁更新的需要。

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

任何工具都應該以提升工作效率為目標。作為數據可視化的重要工具,熱圖應該幫助產品經理,快速發現用戶行為規律,幫助產品經理快速優化和迭代產品。

基於強大的「無埋點」數據採集技術,GrowingIO熱圖清晰地展示,使用者在頁面不同內容上的點擊偏好。那麼,產品經理該如何用好這種強大的工具呢?


1.用戶「誤點擊」,還是設計不合理?
产品经理,你真的懂热图吗?

某SaaS產品在官網詳細介紹了其核心功能,並在首頁設置了4個功能分類。很多訪問使用者以為功能介紹可以點進去,然後就不停地點擊,卻發現根本就沒反應。

實際上,這4個功能介紹就未設置鏈接。產品一開始認為這是用戶「誤點擊」,但是以【自定義分析】功能為例,查看詳細數據,發現工作日每天竟然有1K-2K的用戶點擊了該功能。

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

2.毫釐必爭的網頁,如何優化內容?

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

产品经理,你真的懂热图吗?

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

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

現在的網站有大量相同結構的頁面,如電商的商品頁、媒體資訊的文章頁、SaaS產品後台等等。以電商網站的商品頁為例,雖然商品詳情頁商品訊息不一樣,但是都在相同的位置有商品照片、庫存情況、價格、商品規格參數、使用者評論、加入購物車等等內容。

下圖展示的是某技術博客的文章頁面,雖然不同文章的內容不一樣,但是每個頁面都有網頁導航欄、文章導航欄、熱門文章、熱門標籤等等元素。

产品经理,你真的懂热图吗?


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

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

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

产品经理,你真的懂热图吗?


在《精益創業》中有一個非常流行的概念——最小可行性產品(MVP),強調通過「驗證性學習」的方式來快速迭代產品。熱圖就是一個非常好的工具,產品經理從熱圖中發現問題、提出假設,然後快速實驗來驗證或者推翻我們的假設。

「冰凍三次,非一日之寒。」在「idea-product-data「的不斷迭代中,熱圖應該成為產品經理的一種工作方式!

0 comments: