29
WA 103 / 9月份實體活動 網頁點擊熱圖分析經驗分享 蔡明哲 [email protected] 悠識 首席體驗架構師 2016/09/22

WA103 網頁點擊熱圖分析經驗分享

  • View
    394

  • Download
    0

Embed Size (px)

Citation preview

Page 1: WA103 網頁點擊熱圖分析經驗分享

WA 103 / 9月份實體活動

網頁點擊熱圖分析經驗分享

蔡明哲 [email protected]

悠識首席體驗架構師

2016/09/22

Page 2: WA103 網頁點擊熱圖分析經驗分享

規劃Planning

研究Research

培訓Training

原型Prototyping

社群Community

策略Strategy

UserXper Digital Consulting Co. ,Ltd.

Page 3: WA103 網頁點擊熱圖分析經驗分享

悠識的使用者研究

• 銀行線上申辦貸款用戶研究

• 衛浴品牌官網易用性研究

• 時尚雜誌官網易用性研究

• 網銀選單認知遠端測試研究

• 銀行業 創新服務認知研究

• 通訊業 帳號整合認知研究

• 網路書店客戶分群創新服務研究

• 連鎖超商場域服務設計研究

• 大客車駕駛訓練安全提升研究

易用性測試Usability Test

認知探索Cognitive Study

機會探索Opportunity Study

網站/App 數據分析GA / Firebase / …

點擊熱圖分析Click Heatmap

量化研究質性研究

數據分析Data Analysis

Page 4: WA103 網頁點擊熱圖分析經驗分享

了解網站或其他數據

質性研究

觀察/訪談/etc.

高價值/低價值痛點/爽點

高優先/低優先高頻/低頻顯性/隱性

產品/服務規劃

網站/App/etc.

傳播策略

What

Why

觀察研究 形成策略萃取洞察

通路策略

質量並進的設計策略框架

Ideation & Prioritization

Plan & Design

Page 5: WA103 網頁點擊熱圖分析經驗分享

• 交通大學資訊科學所碩士。

• 現任悠識首席體驗架構師,

• HPX 社群創辦人。

• 致力於推動人本設計,以培育人才為樂。

• 專長於使用者研究、資訊架構、介面設計、社群經營等。

蔡明哲

悠識數位首席體驗架構師

Page 6: WA103 網頁點擊熱圖分析經驗分享

我的工作成份

資訊架構原型設計營運管理

用戶研究數據分析

顧問講師

社群經營

Page 7: WA103 網頁點擊熱圖分析經驗分享

了解網站或其他數據

產生想法

服務規劃

網站/App/etc.

傳播策略

What?

So What?

觀察研究 形成策略腦力激盪Now What?

通路策略

一般企劃工作模式:腦力激盪+自動腦補

Page 8: WA103 網頁點擊熱圖分析經驗分享

網站數據或其他數據

質性研究觀察/訪談..等

高價值/低價值痛點/爽點

高優先/低優先高頻/低頻顯性/隱性

服務規劃

網站/App/etc.

傳播策略

What?

Why?

So What?

觀察研究 形成策略萃取洞察

Now What?

通路策略產生一堆想法

悠識模式: 質量並進的策略研究框架

Page 9: WA103 網頁點擊熱圖分析經驗分享

以使用者為中心的設計觀念user-centered design

Design

Develop

Measure

User-CenteredDesign

Plan Discover

案例與方法

質性研究「WHY」1. 實體場域研究觀察 - 第二螢應用需求及行為2. 脈絡訪查 - 遊覽車駕駛需求3. Usability Test - 電商零售網站易用性測試

量化行為研究「WHAT」

4. 網站/App 數據分析 - 轉換率成效計算5. 點擊熱圖分析 - 媒體網站 click heatmap6. 眼動追蹤 - 媒體網站 eye tracking7. 選單理解認知及操作效率 - 導覽選單操作分析

Page 10: WA103 網頁點擊熱圖分析經驗分享

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

10

Page 11: WA103 網頁點擊熱圖分析經驗分享

目的:

1. 找出實際使用行為

2. 提出優化設計建議

11

例. 點擊熱圖分析 click heatmap

Page 12: WA103 網頁點擊熱圖分析經驗分享

12

哪一個區域點擊最多?

Page 13: WA103 網頁點擊熱圖分析經驗分享

網頁點擊熱圖追蹤 Click Heatmap

13

行動裝置上網行為 電腦上網行為

Page 14: WA103 網頁點擊熱圖分析經驗分享

目的:

1. 找出線上購物網站的各種使用問題

2. 提出設計改善建議

14

例. Usability Test 電商零售網站易用性測試

Page 15: WA103 網頁點擊熱圖分析經驗分享

Usability Test 觀察影片

15

Page 16: WA103 網頁點擊熱圖分析經驗分享

某電子商務網站 Usability 研究結果

約找出將近 100 項 Usability 問題。

較嚴重的問題造成品牌負面影響,形成客訴客怨。

問題分佈在以下流程:

1. 視覺及第一印象

2. 瀏覽商品

3. 搜尋商品

4. 登入/註冊

5. 加入購物車

6. 三件合購購買流程

7. 購物清單及結帳

8. 退貨流程

Page 17: WA103 網頁點擊熱圖分析經驗分享

Tree Testing 影片

17

例. 資訊架構研究 - 導覽選單設計

Page 18: WA103 網頁點擊熱圖分析經驗分享

18

Page 19: WA103 網頁點擊熱圖分析經驗分享

點擊熱圖分析的一些心得

19

Page 20: WA103 網頁點擊熱圖分析經驗分享

1. 對比GA

• GA Overlay Report 以 URL link為累計標的,因此不同位置link 會

加總計算,無法分辨實際位置 ( 若網頁上的 link 都是唯一的,可以

藉著GA觀察點擊熱區)

• 無連結位置的點擊,GA不會納入紀錄(除非下 event tracking)

20

Page 21: WA103 網頁點擊熱圖分析經驗分享

GA Overlay Report

Page 22: WA103 網頁點擊熱圖分析經驗分享

2. 視覺化溝通,首次施用時效力驚人

• 初體驗的反應:

• 廣告怎麽都沒人點?

• 大圖怎麽都沒人點?

• 我們做那麽多延伸閱讀怎麽都沒人點?

• 網頁上的Social Icon 怎麽都沒人點?

• 這裡怎麽有人點啊? (並沒有設置點擊連結啊?)

• 為什麽有人會點這裡?

• 使用者行為竟然是這樣子?

22

Page 23: WA103 網頁點擊熱圖分析經驗分享

3. 是與不是都有道理

• 分析使用者會點哪裡,很重要。

• 分析使用者不點哪裡,也很重要。

23

Page 24: WA103 網頁點擊熱圖分析經驗分享

4. 不要以偏蓋全

• 不同的TA,不同的內容,相同的介面模式,可能會產生不同的點擊

結果。

• 不可用一張圖來推論所有類似的網頁。

24

Page 25: WA103 網頁點擊熱圖分析經驗分享

5. 切勿過度推論

• 點擊行為是設計影響的結果,怎麽設計就產生什麽效果

• 不能解釋成使用者有需求,也不能解釋使用者沒有需求

25

Page 26: WA103 網頁點擊熱圖分析經驗分享

錯誤的推論例子:

「因為沒人點擊廣告,所以就不放廣告了」

不能這樣解釋,也不能這樣子做決定

26

Page 27: WA103 網頁點擊熱圖分析經驗分享

6. 小心求證,設計實驗

倖存者偏差(survivorship bias)

━ 網站缺乏滿足使用者需求的內容,使用者就不會點擊,但這種

問題無法從點擊熱圖看出來不知道行為背後的真實動機,推

論就是猜測。

27

Page 28: WA103 網頁點擊熱圖分析經驗分享

要找真相,可搭配質性研究(訪談)補足

設計實驗 (A/B test) 來測試調整結果

28

Page 29: WA103 網頁點擊熱圖分析經驗分享

想嘗試 click heatmap 嗎?

• 歡迎跟 Richard 聯繫 [email protected]

• 提供3~5個名額,經過Richard評估後,可免費追蹤5個網頁。

• 希望能獲得授權點擊熱圖,給Richard作為課程或演講案例。

• 最好單頁日流量到達1000 pvs以上,較易累計點擊繪製熱圖。

29