網站上那顆設計得最顯眼的按鈕（對比色最強、擺在版面正中央），理論上應該是全頁最容易被點到的地方。打開熱點圖一看，那個位置卻是一片冷色，幾乎沒人點過。
多數人看到這種畫面，第一個念頭通常是「這顆按鈕不夠醒目」，或乾脆認定「這個設計本身有問題」。只看了一張圖就急著下結論，很容易把因果整個看反。
熱點圖（Heatmap）其實不是一張圖，而是三種記錄完全不同行為的圖，分別對應點擊、滑鼠移動與頁面捲動。同一種暖色，在這三張圖裡代表的意思並不相同，沒先弄清楚這一點，熱點圖怎麼看很容易一開始就看錯方向。這篇就把 click、move、scroll 三張圖各自在講什麼、又最容易在哪裡看錯，一項一項拆開來看。
先從最基本的顏色規則講起，這是後面三張圖判讀共同的地基。
熱點圖的顏色，紅色跟藍色各代表什麼？
看熱點圖之前，有一個顏色規則所有圖表都適用。暖色系（紅、橘）代表這裡記錄到的行為量最多，冷色系（藍、紫）代表最少，顏色越暖，數字就越高；不管是點擊、滑鼠移動，還是頁面捲動，這條規則都通用。
真正容易搞混的地方，是「行為量」在三張圖裡指的根本不是同一件事。點擊熱點圖（click heatmap）的紅，代表這個位置被點擊的次數多；滑鼠熱點圖（move heatmap）的紅，代表滑鼠移動或停留的時間長；捲動熱點圖（scroll heatmap）的紅，代表捲到這個位置的使用者比例高，不是點擊次數，也不是停留時間。Hotjar 官方文件對點擊與滑鼠熱點圖的色階，就是照這條規則去定義；Microsoft Clarity 的官方文件也用類似的說法，指出顏色會隨頁面區塊受歡迎的程度變暖，兩份文件彼此可以互相佐證。
同一塊紅色，放在三張不同的圖上，意思完全不一樣。先把「同色不同義」這個觀念記住，後面三節分開拆 click、move、scroll，才不會把某一張圖的判讀邏輯，誤套到另一張圖上。
Click 熱點圖：紅點多，未必代表使用者「喜歡」
點擊熱點圖（click／tap heatmap）記錄的是使用者實際點擊、點兩下的位置彙總。看這張圖的第一步不是看哪裡最紅，而是先確認那個紅點是不是真的落在可以點擊的 CTA 按鈕或連結上。
這裡有一個常被忽略的陷阱，就是同一個紅點可能代表兩種完全相反的狀況。一種是設計真的成功吸引了使用者點擊；另一種，是使用者以為這裡可以點，結果點了沒反應，又回去點第二次、第三次。後者在 Hotjar 的定義裡分成兩類，死點擊（dead click）指的是點在根本不可點擊的元素上，憤怒點擊（rage click）指的是同一個元素在 500 毫秒內被連續點擊 5 次以上，通常代表使用者已經不耐煩。兩種狀況在圖上呈現出來都是同一片暖色，單看顏色沒辦法分辨。
回到開頭那顆冷色按鈕的情境，這裡先給第一個可能的解釋。按鈕本身或許沒有問題，紅點反而出現在別的地方，比如看起來像連結、其實點不動的圖片或文字上。也就是說，使用者不是不想點，而是點錯了地方。
還有一個判讀時容易忽略的限制，點擊百分比只會計入畫面截圖當下看得到的元素，像下拉選單、彈出視窗這類要先觸發才會出現的隱藏元素，並不會被算進點擊熱點圖裡。這代表某些真實存在的互動，熱點圖從一開始就看不到。
Move 熱點圖：滑鼠移動的路徑，不等於眼睛看的地方
很多人看到滑鼠熱點圖上一大片暖色，直覺會覺得這裡就是使用者目光聚焦的地方。這個直覺其實有限，學術研究顯示滑鼠移動的路徑跟眼睛真正在看的地方，只有部分重疊，不能直接畫上等號。滑鼠熱點圖（move heatmap）記錄的其實是滑鼠移動與停留的累積軌跡，不是視線本身。
Google 與紐約大學的研究團隊在 2008 年 CHI 研討會發表過一份眼動與滑鼠對應的研究，找來 32 名參與者，用 17 吋螢幕搭配 Tobii 眼動儀記錄，再扣掉校準失敗的 7 人，分析剩下的瀏覽紀錄。結果發現，多數瀏覽過程裡，使用者只是把滑鼠移到準備點擊的地方就不再移動，這種情況研究裡稱為「被動使用」。
研究總共記錄 175 次瀏覽，其中只有 78 次，佔比大約 44.6%，出現滑鼠真的跟著眼睛走的「主動使用」模式，而主動使用又能再細分成三種型態：垂直跟讀、水平跟讀，以及標記候選項目。換句話說，超過一半的瀏覽紀錄裡，滑鼠根本沒有在跟著眼睛走。
move 圖上出現的熱區，不能直接解讀成「使用者的注意力在這裡」，它比較像是滑鼠曾經經過或停留的痕跡，不是視線地圖。手機版網頁沒有滑鼠游標可以追蹤，這張圖在行動裝置上，參考價值又更有限。
Scroll 熱點圖：顏色變冷，代表「沒看到」不是「不想看」
頁面往下捲，顏色也跟著從紅轉冷。這就是捲動熱點圖（scroll heatmap）最容易被誤讀的地方，冷色不代表使用者不想看，而是代表根本沒捲到那裡。它記錄的是捲到這個頁面位置的使用者比例，跟點擊次數、停留時間都沒有關係。
判讀這張圖有一個關鍵概念，叫平均折線（average fold）。它指的是使用者還沒開始捲動之前，畫面最下緣可以看到的位置平均值，也就是多數人不用動手就看得到的那條線。折線以下的內容，使用者得主動往下捲才看得到，能不能捲到，就要靠 scroll 熱點圖的顏色去判斷。
Hotjar 官方文件說明，scroll 熱點圖的計算方式是依使用者捲動到的最大深度換算成百分比，不是精確的像素距離；官方文件也提醒，如果同一組熱點圖裡混用了長度不同的頁面，算出來的數據會失真，不能直接放在一起比較。
開頭那顆設計精美卻沒人點的按鈕，到這裡就能得到關鍵的解答。如果它的位置本身就落在多數使用者從沒捲動到的區域，「按鈕最顯眼卻沒人點」的真相，就不是設計出了問題，而是位置出了問題。這種狀況其實不少見。就算按鈕設計成強烈對比色、視覺上再搶眼，只要擺放的位置需要往下捲動才看得到，點擊數照樣可以趨近於零。
三張圖交叉對照，才看得出問題出在哪一段
單看一張圖就下結論，是熱點圖判讀最容易犯的錯。比較務實的做法，是把三張圖分成三個步驟輪流看，先用 scroll 圖確認這個位置多數人到底有沒有看到，再用 click 圖確認看到的人有沒有點，最後才把 move 圖當成輔助線索交叉參考，而不是單獨拿它當證據。
這個順序也能解釋一個常被忽略的現象。某個區塊在 move 圖上很熱，不代表使用者真的對它感興趣，有可能只是滑鼠滑過去，視覺上卻主動略過了看起來像廣告的區域，這種現象叫橫幅視盲（banner blindness）。Nielsen Norman Group 在 2018 年由 Kara Pernice 主導的一份眼動研究，找來 26 名參與者，歸納出橫幅視盲的三個成因：版位落在使用者慣性認定是廣告的位置、視覺設計本身看起來就像廣告，以及緊鄰著廣告內容擺放。
另一份能互相佐證的研究，是 Jakob Nielsen 在 2006 年提出、以 232 名使用者眼動紀錄為基礎的 F 型閱讀模式（F-shaped pattern）。這份研究指出，使用者的視覺焦點是跟著內容走，不是跟著色彩最搶眼的元素走。這也解釋了為什麼有時候滑鼠熱區跟實際轉換數字完全對不上。
把這套排查順序套回開頭那個情境，真正的原因可能有好幾種，位置太靠下面、被誤認成廣告而被略過，也可能是按鈕設計本身沒有問題，只是頁面上別的元素把注意力分走了。
熱點圖的資料量不夠，顏色也會騙人
熱點圖判讀還有一個常被忽略的前提，就是樣本數夠不夠。瀏覽量太少的時候，圖上出現的暖色，有可能只是隨機噪訊，不是真的行為模式，卻很容易被誤讀成「使用者真的很喜歡這裡」。
有幾個可以參考的門檻。CXL 的建議是，點擊熱點圖每一種裝置至少要累積 2,000 到 3,000 次頁面瀏覽，數據才有參考價值；Nielsen Norman Group 的眼動追蹤研究方法論則建議，樣本至少要有 39 名使用者，結果才算可靠。
裝置也要分開看。Hotjar 會依裝置調整截圖寬度，桌機是 1280 像素、平板是 800 像素、手機是 380 像素，同一個頁面在不同裝置上，呈現出來的截圖與熱區可能完全不同。把桌機、平板、手機的數據混在一起看，只會讓判讀更失真；scroll 熱點圖如果又混用了長度不同的頁面，前面提過的失真問題會更嚴重。
熱點圖從來不是拿來驗證你原本就覺得對的設計，而是用來揭穿你自以為對、其實根本沒人看到的地方。
這個領域也在往前走。現在已經有像 EyeQuant、Attention Insight 這類工具用 AI 模擬眼動，在正式上線前就先預測使用者的注意力可能落在哪裡，不必等真實流量進來才能測試設計方向。這類工具模擬的是使用者前 3 到 5 秒的注意力分布，官方數據顯示，預測結果與真實眼動測試的吻合度大約落在 90% 到 96% 之間，但終究是模擬，不是實測，上線之後還是得靠 click、move、scroll 三張圖交叉驗證一次。
熱點圖怎麼看，重點從來不是哪張圖比較準，而是你這次想確認的是什麼。下次打開熱點圖之前，先問自己一句，這次要看的是「有沒有看到」，還是「有沒有點」，想清楚這一句，再決定先看哪一張圖。