點擊熱力圖是什么？

時間：2022-05-28 15:57:02 | 來源：網(wǎng)絡(luò)營銷

時間：2022-05-28 15:57:02 來源：網(wǎng)絡(luò)營銷

常言道：“一圖勝千言”，在網(wǎng)站分析中也完全如此，我們喜歡熱力圖的原因是這張圖非常明確地告訴我們用戶對一個頁面上的什么部分感興趣，而且非常直觀。我曾經(jīng)有客戶告訴我：我什么都不需要，你就給我熱圖就好了。我想，他一定是因為熱力圖易讀好懂，且滿含信息，所以才對它青睞有加。

于是，眾多的工具也有意無意強調(diào)了熱力圖的重要性，大家熱衷創(chuàng)造比“別人”更好的熱圖功能，從而獲取更多的用戶好感，那么，點擊熱力圖究竟是什么呢？熱力圖的原理是怎樣的？又有什么作用呢？

一、什么是熱力圖？

熱力圖主要是以特殊高亮的形式顯示訪客熱衷的頁面區(qū)域和訪客所在的地理區(qū)域的圖示。

熱力圖可顯性、直觀地將網(wǎng)頁流量數(shù)據(jù)分布通過不同顏色區(qū)塊呈現(xiàn)，給中小網(wǎng)站網(wǎng)頁優(yōu)化與調(diào)整提供了有力的參考依據(jù)。

簡單來說，熱力圖就是用不同顏色的區(qū)塊疊加在地圖上實時描述人群分布、密度和變化趨勢的一個產(chǎn)品，主要可以分析出用戶來到你的網(wǎng)站，點擊了那些地方。

二、熱力圖的來源

熱圖可能不像大家想象的那么簡單，最早的熱圖思想來自于研究用戶瀏覽圖像行為的那些專家們，其實熱圖不僅僅只是給網(wǎng)站網(wǎng)頁分析用的，熱圖自一開始，就是一種用于研究人的視覺認知的嚴肅科學(xué)方法。

所以熱圖并非我們在網(wǎng)站分析工具上看到的熱圖（點擊密度圖），而是指用戶的視覺注意力圖，下面這張著名的Google熱圖的紅藍漸變就是描繪用戶眼球注意力的：

據(jù)說Google用這個圖來決定廣告位置的價格，左邊的價格高于右邊，顯然是因為左邊獲得的用戶注意力遠遠高于右邊。

所以，如果我們只是說“熱圖”，我們應(yīng)該想到的是人眼鏡的注意力熱圖，而非點擊的熱圖。

而在英語中，視覺熱圖常用eye tracking heat maps，點擊熱圖則用click heat maps表示，是不一樣的。

對于UE設(shè)計師，網(wǎng)站UI等負責(zé)頁面視覺和交互的朋友而言，人眼注意力的熱圖十分好用。一旦你知道你做出來的東西，人的眼睛是如何進行觀察的，你就可以知道你的東西是不是真的“抓住了眼球”，還是僅僅只是讓人們“視而不見”。

下面這張圖是Facebook改版前后的用戶注意力熱圖：

一言兩語似乎沒法表述這次改版到底是成功還是失敗，但在某一個方面，F(xiàn)acebook很成功的讓用戶的注意力產(chǎn)生了“左右對稱”，而擺脫了“Google頁面的瀏覽模式”。

人眼的注意力熱圖是怎樣獲得的呢？有兩種方法。

第一種方法是利用“眼動儀”，據(jù)說這是一種成本很高的方法。人們坐在一個屏幕面前，旁邊放上眼動儀記錄人的眼球運動軌跡。這種方法很精確，但采集樣本比較有限，操作難度也比較大（具體可查看億企邦《基于眼球追蹤技術(shù)對用戶調(diào)研誤區(qū)的探討》的相關(guān)介紹）。

第二種方法不需要利用眼動儀，看起來很神奇，它僅僅只需要帶有攝像頭的筆記本電腦即可，在做測試的時候，攝像頭啟動，拍錄下用戶眼球的運動，然后結(jié)合被測內(nèi)容做出用戶的眼動熱圖。

這種方法有一個非常大的好處，并非僅在于其成本的低廉，而是由于不需要專門的設(shè)備，能夠獲得較大的樣本，甚至能夠不受地域的限制。

三、熱力圖的特色

熱力圖是用不同顏色的區(qū)塊疊加在地圖上實時描述人群分布、密度和變化趨勢的一個產(chǎn)品，是基于大數(shù)據(jù)的一個便民出行服務(wù)。

1、熱力圖可以顯示不可點擊區(qū)域發(fā)生的事情，你將發(fā)現(xiàn)訪客經(jīng)常會點擊那些不是鏈接的地方，也許你應(yīng)該在那個地方放置一個資源鏈接。

比如：如果你發(fā)現(xiàn)人們總是在點擊某個產(chǎn)品圖片，你能想到的是，他們也許想看大圖，或者是想了解該產(chǎn)品的更多信息。同樣，他們可能會錯誤地認為特別的圖片就是導(dǎo)航鏈接。

2、熱力圖可顯性、直觀地將網(wǎng)頁流量數(shù)據(jù)分布通過不同顏色區(qū)塊呈現(xiàn)，給中小網(wǎng)站網(wǎng)頁優(yōu)化與調(diào)整提供了有力的參考依據(jù)，方便合作網(wǎng)站提高用戶體驗。

3、可以直觀清楚地看到頁面上每一個區(qū)域的訪客興趣焦點，無須報告數(shù)據(jù)分析，圖形化展現(xiàn)，無需任何頁面分析經(jīng)驗。

4、如果你在一個頁面上有多個鏈接指向同一個URL，例如：如果有不同位置的3個鏈接指到同一個特定的產(chǎn)品頁面，那么熱力圖將會顯示你的訪客最喜歡點擊哪一個鏈接，這將幫助你提升網(wǎng)頁的設(shè)計并讓它對用戶更加友好，不過實現(xiàn)這個功能需要一些設(shè)置。

5、能夠框出任意區(qū)域的訪問詳情，如來源、搜索引擎、搜索詞、關(guān)鍵詞、瀏覽器等在核心區(qū)域的點擊情況一目了然。

6、熱力圖同時還能告訴你，頁面的哪些部分吸引了大多數(shù)訪客的注意，這對那些對web分析數(shù)據(jù)沒有什么經(jīng)驗的站長或管理員非常有用（具體可查看億企邦《怎么用熱力圖分析網(wǎng)頁》的相關(guān)介紹）。

四、熱力圖的功能

使用過熱力圖功能的站長感觸頗深，這項功能的用途十分廣泛，簡單講：

1、有了熱力圖的幫忙，優(yōu)化和調(diào)整網(wǎng)頁設(shè)計就有了科學(xué)依據(jù)，可對癥下藥，不必盲目升級，還可以動態(tài)考量頁面調(diào)整前后的點擊效果。

2、在點擊行為集中和訪客多的頁面地方可以多放廣告，點擊率會更高，效果更為突出。

3、通過鏈接點擊圖了解同一欄目下不同文字鏈接被點擊的次數(shù)，判斷該鏈接標題和內(nèi)容的受歡迎程度，以優(yōu)化排版（具體可查看億企邦《網(wǎng)頁熱力圖對網(wǎng)站頁面優(yōu)化的幫助有哪些》的相關(guān)介紹）。

4、對于沒有鏈接的地方的點擊也能利用起來，將頁面上的流量價值最大化，比如沒有鏈接但點擊非常多的文字，說明訪客對這方面的內(nèi)容非常感興趣，可以加上鏈接讓訪客了解更多。

五、熱圖的3種類型及原理

目前常見的熱圖有3種：基于鼠標點擊位置的熱圖、基于鼠標移動軌跡的熱圖和基于內(nèi)容點擊的熱圖。

三種熱圖的原理、外觀、適用的場景各有不同。

1、基于鼠標點擊位置的熱圖（上圖左）

如百度統(tǒng)計的頁面點擊圖，記錄用戶點擊在屏幕解析度的位置。

但是基于鼠標點擊位置的熱圖不會追蹤內(nèi)容的變化而變化，只是記錄相對時間內(nèi)鼠標點擊的絕對位置。

2、基于鼠標移動軌跡的熱圖（上圖中）

如國外的MoseStats、Mouseflow等，記錄用戶鼠標移動、停留等行為，熱圖多為軌跡形式。

同樣，基于鼠標移動軌跡熱圖不會追蹤內(nèi)容的變化而變化，只是記錄相對時間內(nèi)鼠標移動的的絕對位置。

3、基于內(nèi)容點擊的熱圖（上圖右）

如GrwoingIO熱圖，記錄用戶在網(wǎng)頁內(nèi)容上的點擊，自動過濾掉頁面空白處（沒有內(nèi)容和鏈接）的無效點擊。

基于內(nèi)容點擊的熱圖，最大特點是熱圖追蹤內(nèi)容變化而變化，記錄用戶相對時間內(nèi)對內(nèi)容的點擊偏好。

六、點擊熱圖

談了不少注意力熱圖，該說說點擊熱圖了。

關(guān)于點擊熱圖，事實上在專門的網(wǎng)站分析工具出現(xiàn)也已經(jīng)出現(xiàn)了，而并非是Google Analytics或Omniture的專利。依據(jù)每個點擊帶來的效果的不同，點擊圖其實又可以分為鼠標點擊的熱圖，描述每個鏈接發(fā)生轉(zhuǎn)化數(shù)量的熱圖以及描述每個鏈接最終產(chǎn)生的銷售的熱圖。我們最為常用的是鼠標點擊的熱圖。

下面我們看看點擊熱圖中有哪些常見的大眾智慧，其中又有哪些誤區(qū)？

1、點擊熱圖無法做到的

我們拿點擊熱圖衡量用戶的興趣，這很恰當(dāng)，點擊多的表明用戶興趣大。但反過來則不一定成立，即點擊少的地方不一定用戶的興趣就少，或者說，人們的注意力被吸引的程度和鼠標點擊的次數(shù)并不總是保持一致的。

道理很簡單，人們眼光注意到的地方未必是能夠被點擊的區(qū)域，或者雖然對用戶產(chǎn)生了吸引力讓人情不自禁地多看了兩眼，卻缺乏足夠的說服力讓用戶點擊鏈接（請注意有吸引力的東西未必就有說服力）；反過來，在另外一些地方，也許一開始用戶根本就沒有給予更多的注意，但部分用戶多看兩眼后發(fā)現(xiàn)了它并且認可這個區(qū)域的價值，因此這里也許能獲得了不少的點擊，但卻不是注意力的焦點。

因此，點擊熱圖肯定不能完全用來描述頁面吸引人們注意力的情況，也不能完全滿足我們在設(shè)計頁面時的一個重要需求，即讓頁面中最能抓住人們注意力的地方放入最為重要的內(nèi)容，從而保證用戶注意力和興趣的一致性。

下面這個例子說明了這種情況，左圖是這個頁面的點擊熱圖，右圖是這個頁面的注意力熱圖，二者有一個很明顯的差異。

對UE（User Experience）或者UI（User Interface）而言，比較二者（注意力熱圖和點擊熱圖）的差異具有非常重要的價值。如果某個區(qū)域吸引了很多目光，那么干嘛我們不把最重要的內(nèi)容放在這里呢？

反過來，如果某個區(qū)域獲得了很多點擊，而且這個區(qū)域是非常重要的，那么我們就需要把它放置在人們目光最集中的地方。

可是，如果我們沒有注意力熱圖，那么我們就只能揣測人們的目光會按照我們所希望的方式停留。

點擊熱圖另外一個無法實現(xiàn)的功能是人們注意力移動的軌跡，有一些負責(zé)網(wǎng)站分析工具產(chǎn)品的朋友告訴我，我們可以把鼠標移動的軌跡當(dāng)作用戶注意力的軌跡，我不是特別贊同。

以我自己的習(xí)慣而言，瀏覽網(wǎng)頁的時候，我的眼睛是先行移動的，并且不斷快速掃視，直到發(fā)現(xiàn)某個我感興趣的內(nèi)容，我的鼠標才會相應(yīng)移動。這就如同我們在駕駛過程中的變線或轉(zhuǎn)向，我們并不會轉(zhuǎn)動方向盤，除非我們首先觀察后視鏡并且確定旁邊沒有其他車輛或干擾。

注意力熱圖可以實現(xiàn)人們注意力軌跡的跟蹤，如下圖所示：

在這個圖中，注意力熱圖告訴我們，首先吸引人們眼光的是后腦勺，然后才是這個網(wǎng)站的logo，這與我們通常認為的從左上到右下掃視的規(guī)律是不同的。

注意力軌跡又給了我們分析一個頁面的新線索——頁面布局和所用圖像的不同，會顯著影響用戶的注意力，若再與AB測試相結(jié)合，又能給我們很多有意思的故事，對UI同事會有很多幫助。

如果我們沒有注意力軌跡圖，那么鼠標移動的情況可以近似代替，可是麻煩在于，我見過的工具只能給我每一個用戶單獨的鼠標移動情況，但無法給我總體的移動概況。我們在之后的系列文章中，會強調(diào)概況數(shù)據(jù)的意義，而單獨用戶數(shù)據(jù)的意義就要小太多了。

所以，如果有條件，能夠把注意力熱圖和點擊熱圖結(jié)合起來，那就太棒了。你觀察世界的角度將立即發(fā)生變化，畢竟，awareness（意識到）才會有action（點擊），二者是單獨的兩個事物，應(yīng)該單獨衡量。

2、點擊熱圖的監(jiān)測技術(shù)問題

前面我們了解了點擊熱圖并不能夠完全反映興趣（注意力），下面我們看看在一般工具（Google Analytics或者是Omniture的SiteCatalyst）中點擊圖可能存在的監(jiān)測技術(shù)問題。

第一個問題是面對一個頁面中具有同樣URL的多個links無能為力。

如果你足夠細心，你會發(fā)現(xiàn)曾經(jīng)在Google Analytics中有一些熱圖的點擊百分比例的標注是實線格，有一些則是虛線格。虛線格的意思是，存在一個或者多個完全一樣URL的鏈接，標注的這個link只是其中之一，并且標注的百分比并非是這個link的點擊量，而是所有具有這個URL的links的總點擊量。

現(xiàn)在Google Analytics采用了更好的方法，即直接標注出這個URL有多少個相同的鏈接，如下圖所示：

因為多個鏈接共享同一個URL的原因，解釋了為什么有一些朋友認真的把Google Analytics頁面點擊熱圖的所有百分比加總起來不會得到100%，而是遠高于100%的原因。

類似的問題在Omniture技術(shù)支持的SiteCatalyst中也一樣。

事實上，上面這段話中“點擊量”三個字也是不準確的。原因在于Google Analytics或者SiteCatalyst，它們記錄的并非是這個link真實被點擊的數(shù)量，而是記錄了這個link被點擊之后打開的相應(yīng)頁面的PV。

例如某個link被點擊了100次，這個link對應(yīng)的頁面被打開了85次（我們確信有一些點擊實際上沒有打開頁面或者沒有被網(wǎng)站分析工具記錄到打開頁面是完全可能的，也是正常的），那么工具實際上記錄了85，而非100。

由于這問題的影響，我們產(chǎn)生了第二個問題——如果我們不做額外的配置（virtual page監(jiān)測或者外鏈監(jiān)測），我們就不能知道一些不能打開新頁面的鏈接，比如JavaScript彈窗，或是鏈接到別人網(wǎng)站的外鏈（outbound link）被點擊的數(shù)量。

所以，一般工具的點擊熱圖并不會告訴你真正的點擊量是多少。不過，也有其他一些熱圖工具它們記錄鼠標的動作，而不是記錄鏈接被點擊后打開新頁面的情況，所以，它們會比較準確的記錄實際的網(wǎng)頁上的點擊量，甚至是鼠標軌跡。

但這么做似乎又犧牲了另外一些功能，例如在普通的Google Analytics熱圖中，可以記錄每個link點擊之后產(chǎn)生的轉(zhuǎn)化的數(shù)量，并且做出一張“轉(zhuǎn)化”熱圖，銷售金額的熱圖也不成問題，但鼠標動作和軌跡監(jiān)測工具則難有這樣的能力，畢竟它們不知網(wǎng)站的轉(zhuǎn)化情況。

第三個問題是面對頁面中的諸如“輪播焦點圖”之類的鏈接比較令人困擾，在這些地方，Google Analytics的熱圖工具給出了幾個并列的若隱若現(xiàn)的數(shù)據(jù)，并不太容易辨別到底是那個輪播圖產(chǎn)生的點擊。而且，當(dāng)你鼠標要放在標簽上仔細查看的時候，這個標簽又“調(diào)皮”地跑開了?？傊惶糜?，讓人費解。

事實上，Google Analytics或者其他工具直接提供的點擊熱圖，我很少直接使用，除非運營同事特別心急，我更樂意自己根據(jù)一些方法自己做給他們，只是為了更準確的說明點擊情況，以便更好的優(yōu)化網(wǎng)站結(jié)構(gòu)（具體可查看億企邦《如何利用頁面點擊圖做網(wǎng)站頁面優(yōu)化》的相關(guān)介紹）。

七、自己做點擊熱圖

為了做好一張準確的點擊熱圖，我們需要請前端工程師同學(xué)幫我們做一些前期的事情，這些事情至關(guān)重要。

1、幫助我們加上Google Analytics外鏈監(jiān)測和Virtual Page監(jiān)測。有同學(xué)說，我已經(jīng)利用event tracking，而不是virtual page監(jiān)測這些JavaScript或者Flash互動，那么event tracking監(jiān)測到的互動能顯示在點擊熱圖上嗎？答案很遺憾，是不行的。這就是為什么有時候我還是不得已要回頭利用virtual page的原因。

2、幫助我們?yōu)榫哂邢嗤琔RL的不同鏈接做好記號，有兩種方法：

第一種方法，就是在相同URL的后面，加上不同的參數(shù)。例如，有兩個鏈接都鏈接到：http://www.mahaixiang.cn/SEO/

技術(shù)同事可以幫我們改為：

http://www.mahaixiang.cn/SEO/?from=navbar

和

http://www.mahaixiang.cn/SEO/?from=footage

以表明一個是在導(dǎo)航欄中的鏈接，一個是在底部的鏈接，盡管它們鏈接地址都是http://www.mahaixiang.cn/SEO/，但Google Analytics還是會記錄兩個不同的頁面。

第二種方法看起來先進一些，是一個老外提出的方法，他編寫了一段程序，你只需要定制一下，然后放在頁面中就可以了，一旦這個程序正常運轉(zhuǎn)，GA在捕獲這些具有相同URL的鏈接時，就會把數(shù)據(jù)放入Events報告中，并且自動加一個尾巴。

上面兩件事情做好了之后，自己做熱圖就很容易了，基本的報告是用Content –> Site Content –> All Pages –> Navigation Summary。這個報告我總覺得有一點遺憾，就是似乎不是特別準確，似乎利用了采樣數(shù)據(jù)，如果你選擇了上面兩中的第二個方法，你還需要參考Events報告。如果你用Omniture的Next Page報告，那么自己做熱圖就更準確了。

有時候我們并不需要具體到某個點擊，而是給出區(qū)域的點擊圖，如上圖所示。有時候我們還會根據(jù)人群細分點擊圖，以獲得不同人群的行為特征——畢竟人們在網(wǎng)頁上最基本的行為就是點擊了。

八、熱力圖在轉(zhuǎn)化分析上的貢獻

熱圖在轉(zhuǎn)化分析上也有重要的作用，我們都知道分析轉(zhuǎn)化的方法主要是構(gòu)建轉(zhuǎn)化漏斗以及細分流失路徑，很多朋友了解這個方法，因為這是分析主轉(zhuǎn)化路徑不可或缺的方法（具體可查看億企邦《如何利用熱力圖來優(yōu)化大型產(chǎn)品網(wǎng)站》的相關(guān)介紹）。

但如果主轉(zhuǎn)化路徑已經(jīng)優(yōu)化的相當(dāng)棒，轉(zhuǎn)化率還有優(yōu)化的空間嗎？

轉(zhuǎn)化不是一個單線程可以解決的問題，轉(zhuǎn)化是一個消費者心理問題，是信任、愉悅感、緊迫感、占便宜的誘惑、商品魅力的吸引、其他與商品相關(guān)的服務(wù)和保障的說服力（當(dāng)然這也是信任的一部分）等等綜合作用的結(jié)果。主轉(zhuǎn)化路徑幫助你糾正最基礎(chǔ)的錯誤，但它不是全部。

主轉(zhuǎn)化路徑之外影響轉(zhuǎn)化的那些因素被我們稱為“微轉(zhuǎn)化”。簡單講，微轉(zhuǎn)化是指在轉(zhuǎn)化必經(jīng)過程之外，但同樣會對轉(zhuǎn)化產(chǎn)生影響的各種元素，這些元素與用戶的互動，左右了用戶的感受，也直接或者間接的影響了用戶的決定。

比如，商品的一些圖片展示，并不是轉(zhuǎn)化過程中必須要看的，但是它們的存在，是否會對用戶的購買決定產(chǎn)生影響？這些圖片就是微轉(zhuǎn)化元素。

分析微轉(zhuǎn)化元素?zé)崃D也能發(fā)揮重要作用，微轉(zhuǎn)化的分析分為三個部分：

1、定位關(guān)鍵頁面。

2、定位關(guān)鍵頁面中可能影響用戶轉(zhuǎn)化的元素。

3、研究這些元素是否對消費者產(chǎn)生了作用以及它們對最終轉(zhuǎn)化的影響，一旦我們發(fā)現(xiàn)這些元素促進了或者降低了轉(zhuǎn)化，我們就可以確定我們優(yōu)化的著力點和發(fā)力的方向。

總之，熱力圖功能具備大多數(shù)的流量統(tǒng)計軟件不具備的優(yōu)勢，屬于“高端配置”，傻瓜級應(yīng)用，即使沒有任何網(wǎng)站分析經(jīng)驗的人看了也能很好地發(fā)現(xiàn)自己網(wǎng)站上的流量規(guī)律。

億企邦點評：

熱力圖可以顯示不可點擊區(qū)域發(fā)生的事情，你將發(fā)現(xiàn)訪客經(jīng)常會點擊那些不是鏈接的地方，也許你應(yīng)該在那個地方放置一個資源鏈接。

熱力圖同時還能告訴你，頁面的哪些部分吸引了大多數(shù)訪客的注意，這對那些對分析數(shù)據(jù)沒有什么經(jīng)驗的站長或管理員非常有用。

總的來說，我們做的用戶體驗是給用戶看的，而不是給百度蜘蛛抓取的，因此我們在做網(wǎng)站的任何方面都要在用戶的角度來考慮，熱力圖或許能給你一個非常好的幫助。