挑戰網站分析中的大眾智慧（2）——熱圖

仲介交易 SEO診斷 淘寶客 雲主機 技術大廳

【每期一句】所有人都沉浸在時間之中，並被流逝的歲月卷走。 人終其一生不過是在與時間抗爭。 我們很想抓住一次戀愛，一場友情，但是這些情感只能依附于人才能得以留存，而每個人自己，隨著時間的流逝 ，也在不斷地解體和沉沒——或是死去，或是溜出我們的生活之外，或是我們自己已然改變。 ——普魯斯特

【前言】上期我們詳細討論了bounce rate中的一些大眾智慧，為大家說明了「過猶不及」的道理，bounce rate過低並非好事，bounce rate過高也可能只是技術原因。 這一期，我們看看朋友們特別喜歡的另外一個工具——熱圖。 看看熱圖中的大眾智慧有什麼「小誤區」。

【正文】

「一圖勝千言」，在網站分析中也完全如此。 我們喜歡熱圖的原因，是這張圖非常明確地告訴我們使用者對一個頁面上的什麼部分感興趣，而且非常直觀。 我曾經有客戶告訴我：我什麼都不需要，你就給我熱圖就好了。 我想，他一定是因為熱圖易讀好懂，且滿含資訊，所以才對它青睞有加。

於是，眾多的工具也有意無意強調了熱圖的重要性，大家熱衷創造比「別人」更好的熱圖功能，從而獲取更多的使用者好感。

此熱圖非彼熱圖

熱圖可能不像大家想像的那麼簡單。 最早的熱圖思想來自于研究使用者流覽圖像行為的那些專家們，其實熱圖不僅僅只是給網站網頁分析用的，熱圖自一開始，就是一種用於研究人的視覺認知的嚴肅科學方法。

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

據說Google用這個圖來決定廣告位置的價格，左邊的價格高於右邊，顯然是因為左邊獲得的使用者注意力遠遠高於右邊。

所以，如果我們只是說「熱圖」，我們應該想到的是人眼鏡的注意力熱圖，而非點擊的熱圖。 而在英語中，視覺熱圖常用eye tracking heat maps，點擊熱圖則用click heat maps表示，是不一樣的。

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

下面這張圖是Facebook改版前後的使用者注意力熱圖。 一言兩語似乎沒法表述這次改版到底是成功還是失敗，但在某一個方面，Facebook很成功的讓使用者的注意力產生了「左右對稱」，而擺脫了「Google頁面的瀏覽模式」。

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

第一種方法是利用「眼動儀」，據說這是一種成本很高的方法。 人們坐在一個螢幕面前，旁邊放上眼動儀記錄人的眼球運動軌跡。 這種方法很精確，但採集樣本比較有限，操作難度也比較大。

第二種方法不需要利用眼動儀，看起來很神奇。 它僅僅只需要帶有攝像頭的筆記本電腦即可。 在做測試的時候，攝像頭啟動，拍錄下使用者眼球的運動，然後結合被測內容做出使用者的眼動熱圖。 這種方法有一個非常大的好處，並非僅在於其成本的低廉，而是由於不需要專門的設備，能夠獲得較大的樣本，甚至能夠不受地域的限制。 關於這種方法，在國外有服務提供者，名字叫做eyetrackshop，大家可以看看它的視頻介紹。

談了不少注意力熱圖，該說說點擊熱圖了。 關於點擊熱圖，事實上在專門的網站分析工具出現也已經出現了，而並非是Google Analytics或Omniture的專利。 依據每個點擊帶來的效果的不同，點擊圖其實又可以分為滑鼠點擊的熱圖，描述每個連結發生轉化數量的熱圖以及描述每個連結最終產生的銷售的熱圖。 我們最為常用的是滑鼠點擊的熱圖。

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

點擊熱圖無法做到的

我們拿點擊熱圖衡量使用者的興趣，這很恰當，點擊多的表明使用者興趣大。 但反過來則不一定成立，即點擊少的地方不一定使用者的興趣就少，或者說，人們的注意力被吸引的程度和滑鼠點擊的次數並不總是保持一致的。 道理很簡單，人們眼光注意到的地方未必是能夠被點擊的區域，或者雖然對使用者產生了吸引力讓人情不自禁地多看了兩眼，卻缺乏足夠的說服力讓使用者點選連結(請注意有吸引力的東西未必就有說服力);反過來，在另外一些地方， 也許一開始使用者根本就沒有給予更多的注意，但部分使用者多看兩眼後發現了它並且認可這個區域的價值，因此這裡也許能獲得了不少的點擊，但卻不是注意力的焦點。 因此，點擊熱圖肯定不能完全用來描述頁面吸引人們注意力的情況，也不能完全滿足我們在設計頁面時的一個重要需求，即讓頁面中最能抓住人們注意力的地方放入最為重要的內容，從而保證使用者注意力和興趣的一致性。

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

對UE(User Experience)或者UI(User Interface)而言，比較二者(注意力熱圖和點擊熱圖)的差異具有非常重要的價值。 如果某個區域吸引了很多目光，那麼幹嘛我們不把最重要的內容放在這裡呢?反過來，如果某個區域獲得了很多點擊，而且這個區域是非常重要的，那麼我們就需要把它放置在人們目光最集中的地方。 可是，如果我們沒有注意力熱圖，那麼我們就只能揣測人們的目光會按照我們所希望的方式停留。

點擊熱圖另外一個無法實現的功能是人們注意力移動的軌跡。 有一些負責網站分析工具產品的朋友告訴我，我們可以把滑鼠移動的軌跡當作使用者注意力的軌跡。 我不是特別贊同。 以我自己的習慣而言，流覽網頁的時候，我的眼睛是先行移動的，並且不斷快速掃視，直到發現某個我感興趣的內容，我的滑鼠才會相應移動。 這就如同我們在駕駛過程中的變線或轉向，我們並不會轉動方向盤，除非我們首先觀察後視鏡並且確定旁邊沒有其他車輛或干擾。

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

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

注意力軌跡又給了我們分析一個頁面的新線索——頁面配置和所用圖像的不同，會顯著影響使用者的注意力。 若再與AB測試相結合，又能給我們很多有意思的故事。 對UI同事會有很多説明。

如果我們沒有注意力軌跡圖，那麼滑鼠移動的情況可以近似代替。 可是麻煩在於，我見過的工具只能給我每一個使用者單獨的滑鼠移動情況，但無法給我總體的移動概況。 我們在之後的系列文章中，會強調概況資料的意義，而單獨使用者資料的意義就要小太多了。

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

點擊熱圖的監測技術問題

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

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

如果你足夠細心，你會發現曾經在Google Analytics中有一些熱圖的點擊百分比例的標注是實線格，有一些則是虛線格。 虛線格的意思是，存在一個或者多個完全一樣URL的連結，標注的這個link只是其中之一，並且標注的百分比並非是這個link的點擊量，而是所有具有這個URL的links的總點擊量。 現在Google Analytics採用了更好的方法，即直接標注出這個URL有多少個相同的連結(如右圖所示)。 因為多個連結共用同一個URL的原因，解釋了為什麼有一些朋友認真的把Google Analytics頁面點擊熱圖的所有百分比加總起來不會得到100%，而是遠高於100%的原因。

類似的問題在Omniture技術支援的SiteCatalyst中也一樣。

事實上，上面這段話中「點擊量」三個字也是不准確的。 原因在於，Google Analytics或者SiteCatalyst，它們記錄的並非是這個link真實被點擊的數量，而是記錄了這個link被點擊之後打開的相應頁面的PV。 例如某個link被點擊了100次，這個link對應的頁面被打開了85次(我們確信有一些點擊實際上沒有打開頁面或者沒有被網站分析工具記錄到打開頁面是完全可能的，也是正常的)，那麼工具實際上記錄了85，而非100。

由於這問題的影響，我們產生了第二個問題——如果我們不做額外的配置(virtual page監測或者外鏈監測)，我們就不能知道一些不能打開新頁面的連結，比如JavaScript彈窗，或是連結到別人網站的外鏈(outbound link)被點擊的數量。

所以，一般工具的點擊熱圖並不會告訴你真正的點擊量是多少。 不過，也有其他一些熱圖工具它們記錄滑鼠的動作，而不是記錄連結被點擊後打開新頁面的情況，所以，它們會比較準確的記錄實際的網頁上的點擊量，甚至是滑鼠軌跡。 但這麼做似乎又犧牲了另外一些功能，例如在普通的Google Analytics熱圖中，可以記錄每個link點擊之後產生的轉化的數量，並且做出一張「轉化」熱圖，銷售金額的熱圖也不成問題， 但滑鼠動作和軌跡監測工具則難有這樣的能力，畢竟它們不知網站的轉化情況。

第三個問題是面對頁面中的諸如「輪播焦點圖」之類的連結比較令人困擾。 在這些地方，Google Analytics的熱圖工具給出了幾個並列的若隱若現的資料，並不太容易辨別到底是那個輪播圖產生的點擊。 而且，當你滑鼠要放在標籤上仔細查看的時候，這個標籤又「調皮」地跑開了。 總之，不太好用，讓人費解。

事實上，Google Analytics或者其他工具直接提供的點擊熱圖，我很少直接使用，除非運營同事特別心急，我更樂意自己根據一些方法自己做給他們，只是為了更準確的說明點擊情況。 做法是?——看下一節。

自己做的點擊熱圖更可靠

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

1. 説明我們加上Google Analytics外鏈監測和Virtual Page監測。 有同學說，我已經利用event tracking，而不是virtual page監測這些JavaScript或者Flash互動，那麼event tracking監測到的互動能顯示在點擊熱圖上嗎?答案很遺憾，是不行的。 這就是為什麼有時候我還是不得已要回頭利用virtual page的原因。 關於外鏈監測，可以參考官方的一篇文章：HTTP://support.google.com/googleanalytics/bin/answer.py?hl=en&topic=11014&answer= 55527

2. 説明我們為具有相同URL的不同連結做好記號。 有兩種方法。 第一種方法，就是在相同URL的後面，加上不同的參數。 例如，有兩個連結都連結到：HTTP://www.chinawebanalytics.cn/about_author/，技術同事可以幫我們改為：HTTP://www.chinawebanalytics.cn/about_ author/?from=navbar和HTTP://www.chinawebanalytics.cn/about_author/?from=footage，以表明一個是在巡覽列中的連結，一個是在底部的連結， 儘管它們連結位址都是HTTP://www.chinawebanalytics.cn/about_author/，但Google Analytics還是會記錄兩個不同的頁面。 第二種方法看起來先進一些，是一個老外提出的方法，他編寫了一段程式，你只需要定制一下，然後放在頁面中就可以了。 一旦這個程式正常運轉，GA在捕獲這些具有相同URL的連結時，就會把資料放入Events報告中，並且自動加一個尾巴。 如下面的圖所示(點擊看大圖)：

這篇文章有詳細介紹：HTTP://www.savio.no/blogg/a/102/how-to-track-multiple-links-to-the-same-url-automatically-in-google-analytics。

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

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

最後，一個bonus：創造一個點擊熱圖工具似乎沒有我們想像的那麼複雜，如果你想要自己做一個點擊熱圖的工具，請看這裡：HTTP://css-tricks.com/ tracking-clicks-building-a-clickmap-with-php-and-jquery/。

好了，第二集就寫到這裡。 如果你覺得有什麼不明白的，有什麼意猶未盡的，覺得我有什麼寫的不准確的，請在下面留言告訴我!非常感謝!

本文版權歸「網站分析在中國CWA」及其作者宋星