wa103 網頁點擊熱圖分析經驗分享
Post on 22-Jan-2018
394 views
TRANSCRIPT
![Page 2: WA103 網頁點擊熱圖分析經驗分享](https://reader035.vdocuments.site/reader035/viewer/2022082204/5a654cda7f8b9a182a8b4b7f/html5/thumbnails/2.jpg)
規劃Planning
研究Research
培訓Training
原型Prototyping
社群Community
策略Strategy
UserXper Digital Consulting Co. ,Ltd.
![Page 3: WA103 網頁點擊熱圖分析經驗分享](https://reader035.vdocuments.site/reader035/viewer/2022082204/5a654cda7f8b9a182a8b4b7f/html5/thumbnails/3.jpg)
悠識的使用者研究
• 銀行線上申辦貸款用戶研究
• 衛浴品牌官網易用性研究
• 時尚雜誌官網易用性研究
• 網銀選單認知遠端測試研究
• 銀行業 創新服務認知研究
• 通訊業 帳號整合認知研究
• 網路書店客戶分群創新服務研究
• 連鎖超商場域服務設計研究
• 大客車駕駛訓練安全提升研究
易用性測試Usability Test
認知探索Cognitive Study
機會探索Opportunity Study
網站/App 數據分析GA / Firebase / …
點擊熱圖分析Click Heatmap
量化研究質性研究
數據分析Data Analysis
![Page 4: WA103 網頁點擊熱圖分析經驗分享](https://reader035.vdocuments.site/reader035/viewer/2022082204/5a654cda7f8b9a182a8b4b7f/html5/thumbnails/4.jpg)
了解網站或其他數據
質性研究
觀察/訪談/etc.
高價值/低價值痛點/爽點
高優先/低優先高頻/低頻顯性/隱性
產品/服務規劃
網站/App/etc.
傳播策略
What
Why
觀察研究 形成策略萃取洞察
通路策略
質量並進的設計策略框架
Ideation & Prioritization
Plan & Design
![Page 5: WA103 網頁點擊熱圖分析經驗分享](https://reader035.vdocuments.site/reader035/viewer/2022082204/5a654cda7f8b9a182a8b4b7f/html5/thumbnails/5.jpg)
• 交通大學資訊科學所碩士。
• 現任悠識首席體驗架構師,
• HPX 社群創辦人。
• 致力於推動人本設計,以培育人才為樂。
• 專長於使用者研究、資訊架構、介面設計、社群經營等。
蔡明哲
悠識數位首席體驗架構師
![Page 6: WA103 網頁點擊熱圖分析經驗分享](https://reader035.vdocuments.site/reader035/viewer/2022082204/5a654cda7f8b9a182a8b4b7f/html5/thumbnails/6.jpg)
我的工作成份
資訊架構原型設計營運管理
用戶研究數據分析
顧問講師
社群經營
![Page 7: WA103 網頁點擊熱圖分析經驗分享](https://reader035.vdocuments.site/reader035/viewer/2022082204/5a654cda7f8b9a182a8b4b7f/html5/thumbnails/7.jpg)
了解網站或其他數據
產生想法
服務規劃
網站/App/etc.
傳播策略
What?
So What?
觀察研究 形成策略腦力激盪Now What?
通路策略
一般企劃工作模式:腦力激盪+自動腦補
![Page 8: WA103 網頁點擊熱圖分析經驗分享](https://reader035.vdocuments.site/reader035/viewer/2022082204/5a654cda7f8b9a182a8b4b7f/html5/thumbnails/8.jpg)
網站數據或其他數據
質性研究觀察/訪談..等
高價值/低價值痛點/爽點
高優先/低優先高頻/低頻顯性/隱性
服務規劃
網站/App/etc.
傳播策略
What?
Why?
So What?
觀察研究 形成策略萃取洞察
Now What?
通路策略產生一堆想法
悠識模式: 質量並進的策略研究框架
![Page 9: WA103 網頁點擊熱圖分析經驗分享](https://reader035.vdocuments.site/reader035/viewer/2022082204/5a654cda7f8b9a182a8b4b7f/html5/thumbnails/9.jpg)
以使用者為中心的設計觀念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 網頁點擊熱圖分析經驗分享](https://reader035.vdocuments.site/reader035/viewer/2022082204/5a654cda7f8b9a182a8b4b7f/html5/thumbnails/10.jpg)
一些不同使用者研究測試的例子
10
![Page 11: WA103 網頁點擊熱圖分析經驗分享](https://reader035.vdocuments.site/reader035/viewer/2022082204/5a654cda7f8b9a182a8b4b7f/html5/thumbnails/11.jpg)
目的:
1. 找出實際使用行為
2. 提出優化設計建議
11
例. 點擊熱圖分析 click heatmap
![Page 12: WA103 網頁點擊熱圖分析經驗分享](https://reader035.vdocuments.site/reader035/viewer/2022082204/5a654cda7f8b9a182a8b4b7f/html5/thumbnails/12.jpg)
12
哪一個區域點擊最多?
![Page 13: WA103 網頁點擊熱圖分析經驗分享](https://reader035.vdocuments.site/reader035/viewer/2022082204/5a654cda7f8b9a182a8b4b7f/html5/thumbnails/13.jpg)
網頁點擊熱圖追蹤 Click Heatmap
13
行動裝置上網行為 電腦上網行為
![Page 14: WA103 網頁點擊熱圖分析經驗分享](https://reader035.vdocuments.site/reader035/viewer/2022082204/5a654cda7f8b9a182a8b4b7f/html5/thumbnails/14.jpg)
目的:
1. 找出線上購物網站的各種使用問題
2. 提出設計改善建議
14
例. Usability Test 電商零售網站易用性測試
![Page 15: WA103 網頁點擊熱圖分析經驗分享](https://reader035.vdocuments.site/reader035/viewer/2022082204/5a654cda7f8b9a182a8b4b7f/html5/thumbnails/15.jpg)
Usability Test 觀察影片
15
![Page 16: WA103 網頁點擊熱圖分析經驗分享](https://reader035.vdocuments.site/reader035/viewer/2022082204/5a654cda7f8b9a182a8b4b7f/html5/thumbnails/16.jpg)
某電子商務網站 Usability 研究結果
約找出將近 100 項 Usability 問題。
較嚴重的問題造成品牌負面影響,形成客訴客怨。
問題分佈在以下流程:
1. 視覺及第一印象
2. 瀏覽商品
3. 搜尋商品
4. 登入/註冊
5. 加入購物車
6. 三件合購購買流程
7. 購物清單及結帳
8. 退貨流程
![Page 17: WA103 網頁點擊熱圖分析經驗分享](https://reader035.vdocuments.site/reader035/viewer/2022082204/5a654cda7f8b9a182a8b4b7f/html5/thumbnails/17.jpg)
Tree Testing 影片
17
例. 資訊架構研究 - 導覽選單設計
![Page 18: WA103 網頁點擊熱圖分析經驗分享](https://reader035.vdocuments.site/reader035/viewer/2022082204/5a654cda7f8b9a182a8b4b7f/html5/thumbnails/18.jpg)
18
![Page 19: WA103 網頁點擊熱圖分析經驗分享](https://reader035.vdocuments.site/reader035/viewer/2022082204/5a654cda7f8b9a182a8b4b7f/html5/thumbnails/19.jpg)
點擊熱圖分析的一些心得
19
![Page 20: WA103 網頁點擊熱圖分析經驗分享](https://reader035.vdocuments.site/reader035/viewer/2022082204/5a654cda7f8b9a182a8b4b7f/html5/thumbnails/20.jpg)
1. 對比GA
• GA Overlay Report 以 URL link為累計標的,因此不同位置link 會
加總計算,無法分辨實際位置 ( 若網頁上的 link 都是唯一的,可以
藉著GA觀察點擊熱區)
• 無連結位置的點擊,GA不會納入紀錄(除非下 event tracking)
20
![Page 21: WA103 網頁點擊熱圖分析經驗分享](https://reader035.vdocuments.site/reader035/viewer/2022082204/5a654cda7f8b9a182a8b4b7f/html5/thumbnails/21.jpg)
GA Overlay Report
![Page 22: WA103 網頁點擊熱圖分析經驗分享](https://reader035.vdocuments.site/reader035/viewer/2022082204/5a654cda7f8b9a182a8b4b7f/html5/thumbnails/22.jpg)
2. 視覺化溝通,首次施用時效力驚人
• 初體驗的反應:
• 廣告怎麽都沒人點?
• 大圖怎麽都沒人點?
• 我們做那麽多延伸閱讀怎麽都沒人點?
• 網頁上的Social Icon 怎麽都沒人點?
• 這裡怎麽有人點啊? (並沒有設置點擊連結啊?)
• 為什麽有人會點這裡?
• 使用者行為竟然是這樣子?
22
![Page 23: WA103 網頁點擊熱圖分析經驗分享](https://reader035.vdocuments.site/reader035/viewer/2022082204/5a654cda7f8b9a182a8b4b7f/html5/thumbnails/23.jpg)
3. 是與不是都有道理
• 分析使用者會點哪裡,很重要。
• 分析使用者不點哪裡,也很重要。
23
![Page 24: WA103 網頁點擊熱圖分析經驗分享](https://reader035.vdocuments.site/reader035/viewer/2022082204/5a654cda7f8b9a182a8b4b7f/html5/thumbnails/24.jpg)
4. 不要以偏蓋全
• 不同的TA,不同的內容,相同的介面模式,可能會產生不同的點擊
結果。
• 不可用一張圖來推論所有類似的網頁。
24
![Page 25: WA103 網頁點擊熱圖分析經驗分享](https://reader035.vdocuments.site/reader035/viewer/2022082204/5a654cda7f8b9a182a8b4b7f/html5/thumbnails/25.jpg)
5. 切勿過度推論
• 點擊行為是設計影響的結果,怎麽設計就產生什麽效果
• 不能解釋成使用者有需求,也不能解釋使用者沒有需求
25
![Page 26: WA103 網頁點擊熱圖分析經驗分享](https://reader035.vdocuments.site/reader035/viewer/2022082204/5a654cda7f8b9a182a8b4b7f/html5/thumbnails/26.jpg)
錯誤的推論例子:
「因為沒人點擊廣告,所以就不放廣告了」
不能這樣解釋,也不能這樣子做決定
26
![Page 27: WA103 網頁點擊熱圖分析經驗分享](https://reader035.vdocuments.site/reader035/viewer/2022082204/5a654cda7f8b9a182a8b4b7f/html5/thumbnails/27.jpg)
6. 小心求證,設計實驗
倖存者偏差(survivorship bias)
━ 網站缺乏滿足使用者需求的內容,使用者就不會點擊,但這種
問題無法從點擊熱圖看出來不知道行為背後的真實動機,推
論就是猜測。
27
![Page 28: WA103 網頁點擊熱圖分析經驗分享](https://reader035.vdocuments.site/reader035/viewer/2022082204/5a654cda7f8b9a182a8b4b7f/html5/thumbnails/28.jpg)
要找真相,可搭配質性研究(訪談)補足
或
設計實驗 (A/B test) 來測試調整結果
28
![Page 29: WA103 網頁點擊熱圖分析經驗分享](https://reader035.vdocuments.site/reader035/viewer/2022082204/5a654cda7f8b9a182a8b4b7f/html5/thumbnails/29.jpg)
想嘗試 click heatmap 嗎?
• 歡迎跟 Richard 聯繫 [email protected]
• 提供3~5個名額,經過Richard評估後,可免費追蹤5個網頁。
• 希望能獲得授權點擊熱圖,給Richard作為課程或演講案例。
• 最好單頁日流量到達1000 pvs以上,較易累計點擊繪製熱圖。
29