網站點擊熱圖(Heat Map)

網站分析通過統計點擊流數據及網站產生的其他各類數據,提供各種數據報表來監控網站的運營狀態,爲網站的優化和改進提供參考依據。但網站分析能提供的絕不僅有數據,其中點擊熱圖(Heat Map)是對網站分析的一個很好的擴充,目前網上介紹點擊熱圖的文章也比較多,很多網站交互設計師用點擊熱圖來評估用戶與網站之間的交互狀況從而改善用戶體驗。這裏簡單介紹幾個點擊熱圖的實現工具以及用我的博客做的點擊熱圖的實驗。

幾款點擊熱圖工具

Sidney的博客中很早以前就介紹過一款點擊熱圖的分析工具——Crazy Egg,文章是由Tenly寫的。另外網上介紹比較多的點擊熱圖工具還有ClickTabletealeaf,這些工具都是通過JS來實現的,只要在相應的頁面上嵌入JS代碼,就能在這些工具的網站上查看該頁面的點擊效果圖,實現機制跟Google Analytics較爲類似。這些工具一般都需要收費,但會有1個月的免費試用期,有興趣的可以去試試。

另外有一款開源的工具——ClickHeat,可以下載它的源代碼部署到自己的服務器上,並在網站頁面中嵌入相應的JS代碼來生成點擊熱圖,然後通過調用相應的頁面查看。要部署ClickHeat,服務器需要支持PHP,同時因爲點擊的日誌和所有統計結果都保存到了部署的服務器上,所以對服務器的空間和資源佔用都比較高。

點擊熱圖應用實例

前段時間用我的博客做了下網站點擊熱圖的試用實驗,我用的是Click Density,跟ClickTable和Crazy Egg類似,也是通過嵌入JS的方法來實現的,在結果的輸出頁面可以選擇點擊的時間段、瀏覽器類型等條件對結果進行篩選,下面的生成的幾張點擊效果圖:

Heat Map

因爲我的博客訪問量不大,所以熱圖的分佈不是很明顯,但還是能看出主要的點擊集中在博客最新的文章上面;另外右側的搜索、訂閱和分類目錄模塊也佔據了一定的點擊比例。一般網站的點擊都會聚集在全局導航欄的下面那一塊,並且呈“F”型分佈,在需要下拉的頁面部分點擊一般就會劇減(對於需要下拉查看的內容,除非用戶找到了他們需要的信息,否則一般不會過多地進行點擊)。

Click Map

這張是點擊分佈圖,紅叉代表無效的點擊,綠叉代表有效點擊。這個圖似乎比上面單純的顯示點擊分佈或點擊密度更有價值,因爲它顯示了頁面的有效點擊,從圖上可以看出用戶在瀏覽我的博客時除了點擊文章標題和搜索框外,訂閱按鈕上面也分佈了大量的有效點擊數,這個對於博客來說至關重要,因爲博客類網站的一個重要目標就是產生訂閱,所以通過這個圖可以查看有多少有效點擊轉化成了網站目標,佔總的點擊比例及佔總的有效點擊的比例。

另外可以看到圖上的某些有效點擊並非一定落在可點擊的對象上,正是因爲博客內容更新時導致頁面元素(標題位置、內容摘要行數等)的偏移,而生成的點擊不會跟隨頁面元素移動,導致了生成圖片顯示上的誤差。

Hover Map

這個圖其實相當與網頁覆蓋圖(Overlay)或點擊密度圖(Click density),Google Analytics上面也提供了類似的功能。網頁上可點擊的位置會由虛線框圈起來,鼠標放到某個框上面就會顯示該模塊被點擊的次數及點擊轉化率(CTR);另外如果你爲你的網站設定了目標,那麼同時也會顯示點擊該模塊的目標轉化率,對於分析網站的重要頁面是個不錯的選擇。

點擊熱圖的價值及缺陷

點擊熱圖的價值

1、通過點擊熱圖發現用戶經常點擊的模塊或聚焦的內容;

2、觀察頁面中的哪些模塊具有較高的有效點擊數,用戶會嘗試去點擊哪些模塊;

3、應用於A/B測試,比較不同頁面的點擊分佈情況;

4、用於改進網站交互和用戶體驗。

點擊熱圖的缺陷

1、網站點擊熱圖雖然提供了一種很直觀的網站分析途徑,但其功能還需完善,因爲實現機制一般都是根據頁面的座標來定位點擊位置,所以不同的分辨率和網站佈局方式(居中等)都會導致結果的不準確;

2、在使用點擊熱圖時需要記錄用戶每次點擊的行爲,所以會對網頁的性能產生影響,導致網頁的加載速度變慢;

3、當頁面各元素的位置發生大範圍變動時,點擊熱圖的結果就失效了。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章