2016/09/22 Web Analytics 103 聚會分享內容 - 悠識與講者介紹 - UCD 設計流程 - 一些使用者研究測試的案例 - 點擊熱圖分析心得

1. WA 103 / 9月份實體活動
網頁點擊熱圖分析經驗分享
蔡明哲 richard@userxper.com
悠識 首席體驗架構師
2016/09/22

2. 規劃
Planning
研究
Research
培訓
Training
原型
Prototyping
社群
Community
策略
Strategy
UserXper Digital Consulting Co. ,Ltd.

3. 悠識的使用者研究
• 銀行線上申辦貸款用戶研究
• 衛浴品牌官網易用性研究
• 時尚雜誌官網易用性研究
• 網銀選單認知遠端測試研究
• 銀行業 創新服務認知研究
• 通訊業 帳號整合認知研究
• 網路書店客戶分群創新服務研究
• 連鎖超商場域服務設計研究
• 大客車駕駛訓練安全提升研究
易用性測試
Usability Test
認知探索
Cognitive Study
機會探索
Opportunity Study
網站/App 數據分析
GA / Firebase / …
點擊熱圖分析
Click Heatmap
量化研究質性研究
數據分析
Data Analysis

4. 了解網站或
其他數據
質性研究
觀察/訪談/etc.
高價值/低價值
痛點/爽點
高優先/低優先
高頻/低頻
顯性/隱性
產品/服務規劃
網站/App/etc.
傳播策略
What
Why
觀察研究 形成策略萃取洞察
通路策略
質量並進的設計策略框架
Ideation ＆ Prioritization
Plan & Design

5. • 交通大學資訊科學所碩士。
• 現任悠識 首席體驗架構師，
• HPX 社群創辦人。
• 致力於推動人本設計，以培育人才為樂。
• 專長於使用者研究、資訊架構、介面設計、社群經營等。
蔡明哲
悠識數位 首席體驗架構師

6. 我的工作成份
資訊架構
原型設計營運管理
用戶研究
數據分析
顧問
講師
社群經營

7. 了解網站或
其他數據
產生想法
服務規劃
網站/App/etc.
傳播策略
What？
So What？
觀察研究 形成策略腦力激盪
Now What？
通路策略
一般企劃工作模式：腦力激盪＋自動腦補

8. 網站數據或
其他數據
質性研究
觀察/訪談..等
高價值/低價值
痛點/爽點
高優先/低優先
高頻/低頻
顯性/隱性
服務規劃
網站/App/etc.
傳播策略
What？
Why？
So What？
觀察研究 形成策略萃取洞察
Now What？
通路策略產生一堆想法
悠識模式: 質量並進的策略研究框架

9. 以使用者為中心的設計觀念
user-centered design
Design
Develop
Measure
User-Centered
Design
Plan Discover
案例與方法
質性研究「WHY」
1. 實體場域研究觀察 - 第二螢應用需求及行為
2. 脈絡訪查 - 遊覽車駕駛需求
3. Usability Test - 電商零售網站易用性測試
量化行為研究「WHAT」
4. 網站/App 數據分析 - 轉換率成效計算
5. 點擊熱圖分析 - 媒體網站 click heatmap
6. 眼動追蹤 - 媒體網站 eye tracking
7. 選單理解認知及操作效率 - 導覽選單操作分析

10. 一些不同使用者研究測試的例子

11. 目的：
1. 找出實際使用行為
2. 提出優化設計建議
11
例. 點擊熱圖分析 click heatmap

12. 12
哪一個區域點擊最多？

13. 網頁點擊熱圖追蹤 Click Heatmap
13
行動裝置上網行為 電腦上網行為

14. 目的：
1. 找出線上購物網站的各種使用問題
2. 提出設計改善建議
14
例. Usability Test 電商零售網站易用性測試

15. Usability Test 觀察影片
15

16. 某電子商務網站 Usability 研究結果
約找出將近 100 項 Usability 問題。
較嚴重的問題造成品牌負面影響，形成客訴客怨。
問題分佈在以下流程：
1. 視覺及第一印象
2. 瀏覽商品
3. 搜尋商品
4. 登入/註冊
5. 加入購物車
6. 三件合購購買流程
7. 購物清單及結帳
8. 退貨流程

17. Tree Testing 影片
17
例. 資訊架構研究 - 導覽選單設計

18. 18

19. 點擊熱圖分析的一些心得

20. 1. 對比GA
• GA Overlay Report 以 URL link為累計標的，因此不同位置link 會
加總計算，無法分辨實際位置 ( 若網頁上的 link 都是唯一的，可以
藉著GA觀察點擊熱區）
• 無連結位置的點擊，GA不會納入紀錄 （除非下 event tracking)
20

21. GA Overlay Report

22. 2. 視覺化溝通，首次施用時效力驚人
• 初體驗的反應：
• 廣告怎麽都沒人點？
• 大圖怎麽都沒人點？
• 我們做那麽多延伸閱讀怎麽都沒人點？
• 網頁上的Social Icon 怎麽都沒人點？
• 這裡怎麽有人點啊？ (並沒有設置點擊連結啊？)
• 為什麽有人會點這裡？
• 使用者行為竟然是這樣子？

23. 3. 是與不是都有道理
• 分析使用者會點哪裡，很重要。
• 分析使用者不點哪裡，也很重要。

24. 4. 不要以偏蓋全
• 不同的TA，不同的內容，相同的介面模式，可能會產生不同的點擊
結果。
• 不可用一張圖來推論所有類似的網頁。

25. 5. 切勿過度推論
• 點擊行為是設計影響的結果，怎麽設計就產生什麽效果
• 不能解釋成使用者有需求，也不能解釋使用者沒有需求

26. 錯誤的推論例子：
「因為沒人點擊廣告，所以就不放廣告了」
不能這樣解釋，也不能這樣子做決定
26

27. 6. 小心求證，設計實驗
倖存者偏差（survivorship bias）
━ 網站缺乏滿足使用者需求的內容，使用者就不會點擊，但這種
問題無法從點擊熱圖看出來 不知道行為背後的真實動機，推
論就是猜測。

28. 要找真相，可搭配質性研究(訪談)補足
或
設計實驗 (A/B test) 來測試調整結果
28

29. 想嘗試 click heatmap 嗎?
• 歡迎跟 Richard 聯繫 richard@userxper.com
• 提供3～5個名額，經過Richard評估後，可免費追蹤5個網頁。
• 希望能獲得授權點擊熱圖，給Richard作為課程或演講案例。
• 最好單頁日流量到達1000 pvs以上，較易累計點擊繪製熱圖。
29