Hotjar：最適合設計師的數據分析工具

08-17

來自專欄 UXTOOLS用戶體驗設計工具4 人贊了文章

對於絕大多數設計師來說，數據分析屬於另外一個世界的事情，通常應該由研究人員或者專門的數據分析師去完成。對設計效果進行數據分析？最好提都不要提！

2017年，一項針對歐美設計師的調查數據顯示：73%的設計師沒有使用分析工具對設計效果進行數據監測和分析（報告全文：2017年度設計工具調查）。參照國內外設計師對技術的掌握情況，國內設計師的這個比例應該更高。

圖1：歐美設計師使用數據分析工具的比例分布

造成這種狀況的原因，我個人判斷主要有兩個：

第一個，是長期以來設計師缺乏利用數據分析，對自身的設計進行評估和優化的意識。但在數字化的大趨勢下，數據驅動的設計和優化，是未來的必然發展方向，各個職業和崗位，包括設計師也必須要具備數據分析的意識和能力。

第二個，是目前的很多數據分析工具，主要針對的是專門的研究和運營人員，功能非常強大。監測的指標非常之多，如果你覺得還不夠，還能讓你自定義，同時對每一個指標，都能提供各種維度的篩選和交叉分析。但對設計師來說，這些使用起來太複雜，不方便，不直觀，打開首頁就被嚇傻了，其中，Google Analysis就是典型代表！

由於以上原因，就造成了設計師對美好設計的追求與不平衡不充分的數據分析能力之間的矛盾。於是，一位來自以色列的資深設計師——David Darmanin，自己創業開發了一款數據分析工具——Hotjar，它的最大特點就是：簡單、方便、實用！

Hotjar沒有堆砌大量的功能、成堆的指標、複雜的自定義流程。選取的都是設計師最需要、能看懂，所需要的自定義操作基本都在設計師能力和耐心範圍內。

使用之後不得不說，還是只有設計師最懂設計師。到目前為止，Hotjar是我見過的最適合設計師使用的數據分析工具，下面就直接上圖說明。

第一步：創建項目

打開Hotjar官網（http://www.hotjar.com），點擊「TRY FOR FREE」按鈕，按照指引註冊賬號，Hotjar提供有免費套餐，每月提供2000個pv。

圖2：賬號註冊

註冊登陸後，點擊登錄後主頁左上角的「+」，創建需要監測和分析的網站項目，項目設置非常簡單，輸入需要監測的網址即可（如圖3）。

圖3：創建網站監測與分析項目

第二步：埋代碼

創建好項目後，還看不到數據，因為Hotjar還沒有跟要監測的網站對接上。為了讓Hotjar採集到被監測網站的數據，下一步就是埋代碼，也是唯一一個需要技術人員支持的環節。

這個環節也非常簡單，Hotjar將需要埋入的代碼呈現在了登錄後的主頁區域，如圖4所示。讓技術人員把Hotjar提供的代碼複製並粘貼到被檢測網站的後台代碼庫中，放置在兩個<head>之間的任意位置即可。如果你有網站後台的賬號，完全不需要任何技術人員的支持，3分鐘就能完成複製粘貼。

圖4：埋代碼

如果在登陸後主頁找不到代碼區，可以點擊主頁右上角的「Tracking Inactive」的激活按鈕（如圖4），會彈出專門的代碼顯示框（如圖5），同樣可以複製粘貼。

圖5：代碼框

在被監測的網站買入代碼後，大約10分鐘左右，Hotjar就能跟網站後台連接上，登錄後首頁的右上角會顯示帶勾的「Tracking Active」標識（如圖6），表明Hotjar已經開始接收數據了。

圖6：數據激活

第三步：設置與分析

數據接通後，就可以開始自定義設置和查看分析結果。這部分就是Hotjar跟市面上其他分析工具差別最大的地方，它並沒有提供非常多、非常複雜的分析功能，只提供了兩類數據的分析，一目了然（如圖7左側欄所示）：

一類是ANALYTICS：這類分析功能主要基於網站後台的行為數據進行分析，也就是我們常說的客觀大數據分析。具體分析功能包括4個——熱圖分析（Heatmaps）、操作錄像（Recording）、漏斗分析（Funnels）、表格分析（Forms）。這4個是行為分析中最常用的分析功能，對設計師在進行界面設計、流程設計和表格設計有非常直接的幫助。

一類是FEEDBACK：這類分析功能基於用戶的直接反饋數據進行分析，屬於主觀小數據的分析。這個大類也包括4類具體分析功能——進入反饋（Incoming）、投票（Polls）、問卷調查（Surveys）、用戶招募（Recruiters）。

圖7：分析功能

以上就是Hotjar提供的所有分析功能——4個客觀分析功能，4個主觀分析功能，非常簡練，而且是主客觀相結合。Hotjar是所有輕量級分析工具中唯一能做到主客觀相結合的，同時也是所有主客觀分析工具中，做的最輕的。

這8個分析功能在使用之前需要進行自定義設置，但設置流程非常簡單，採用的Step By Step方式，指引清晰，照著說明一步一步操作即可。設計師的貼心和強迫症在這裡體現的淋漓盡致，尤其是有十幾年經驗的老司機。

幾個栗子

下面以http://UXTOOLS.CC網站為例，列舉幾個我自己利用Hotjar進行的例子。首先來看熱圖分析（Heatmaps），點擊熱圖分析首頁的「+New Heatmap」按鈕（如圖8所示），按照彈出的指引頁面，添加想監測熱圖的頁面地址。添加成功後，熱圖列表就會出現添加的監測項目，點擊熱圖項目的「View Heatmap」按鈕，就可以打開查看指定頁面的熱圖（如圖9）。

圖8：熱圖分析

Hotjar的熱圖功能可以分別查看WEB端和手機端，提供點擊、滑鼠和翻頁行為的熱圖，詳細數據可以導出，熱圖圖片可下載。

圖9：熱圖結果

下面再來看看操作錄像（Recording）的例子：同樣，先在操作錄像的頁面點擊「Edit Settings」進行設置，系統會自動對訪問者的操作進行視頻還原。所有的錄像都會出現在列表中，每一條都會註明訪問者編號、訪問頁面、時長、操作系統、瀏覽器等信息（如圖10）。點擊「Play」按鈕，會打開專門的播放頁面（圖11）。