什麼是熱區圖 (Heat Map)?如何判讀熱區圖?

什麼是 Heat Map?

Heat Map 熱區圖會將所有用戶在你網站上的點擊一覽無遺的顯示出來。利用熱區圖的資訊,你可以容易的找出需要改善的地方,確保你的內容是用戶想看的,或是你的流程有正確的引導用戶。

我們將以 SumoMe 的熱區圖功能作為範例,介紹如何使用及讀取熱區圖的資訊。

 

找出需要改善的地方

熱區圖的用途就是顯示所有用戶的點擊,假設你在 banner 底下設計了四個按鈕,就可以用來判斷哪些是用戶會點擊的,哪些不會。例如:按鈕沒有預期的點擊,是否應該修改大小?文字?顏色?

大範圍的 A/B Test

如果只是要偵測單獨元件(例如單一按鈕、Banner 等)的點擊狀況,當然可以用 A/B Test 的工具來測試,但是如果想要看到改版前後的第一屏點擊狀態,還是使用熱區圖會比較直觀。

測試手機版與電腦版的差異

一般來說,現在的網站大約有 30% 以上的流量來自於手機版。如果到了今年開發的網站還不能適應移動裝置,基本上是不及格的。

透過熱區圖,也可以看出用戶在手機版上的點擊與電腦版上點擊的差異,從而判斷電腦版和手機版的設計是否合理。

熱區圖的缺點

因為每個用戶的螢幕大小和瀏覽器總會有些差異,加上熱區圖是記錄每一次點擊,所以可能會有誤觸、或是靠近捲軸的地方點擊特別多的情形。

另外,因為熱區圖是平面的,如果你的網站用了大量的 Modal、Lightbox,或是你用了下拉式選單,看起來就會有很多幽靈點擊,記得在分析熱區圖的時候把這些浮動的元件算進來喔。