超理性使用者介面設計 - Data-driven A/B Testing

Web 介面設計並非憑空蹦出來的，頁面上的每一個連結、按鈕、位置甚至色碼都有其意義。除了眼球追蹤、焦點群體法外，其實我們還可以讓數字說話，利用海量數據引導介面設計。有效的 Data-driven A/B Test 需要團隊合作無間才能完成：PM 設計實驗並解讀報表、Desinger 設計介面、 Engineer 打造產品與產生報表。

Transcript

1. 超理性使用者介面設計 – Data-driven A/B Testing Yahoo! Search F2E 廖英翔 Clay Liao Jan 13, 2013
2. Q: 如何測量網站介面 好/不好？ 老闆㘸了算？ 2
3. 何謂“好”的使用者介面？ 找出關鍵指標 3
4. 資訊型網站 4
5. 電子商務網站 5
6. 工具型網站 6
7. 非營利/公益活動網站 7
8. 找出網站介面與指標的關係 8
9. 常見的衡量方法 §  憑個人的感覺專業 §  比較改版前後的營收、PV、CTR、Unique user、Bounce rate等關鍵數字變化 §  問卷調查法 §  焦點群體法(Focus Group) §  易用性測試（Usability Test） §  … 9
10. 眼動研究 (Eye-tracking) §  有科學根據 §  發掘視覺焦點與軌跡 10 Source §  設備很貴 §  樣本空間有限 特色 限制
11. “超”理性使用者介面設計 Data-driven A/B Testing 11
12. 常見的A/B測試：Colors 12 對照組 實驗組
13. 常見的A/B測試：Layout 13 對照組 實驗組
14. 常見的A/B測試：Performance 14 對照組 實驗組 (使用CDN服務)
15. 常見的A/B測試：New Feature 15 對照組 實驗組
16. DATA-DRIVEN 以大數據為基礎 不喜慎入 16
17. 借用Log（日誌檔）來設計介面 17
18. 設計有效的實驗 保持“其他條件不變” 18
19. 實驗設計 §  設計測試㚎容與目標 §  選擇測試群體 §  實驗組v.s.對照組 §  決定測試期間(考慮週期、節日、季節性) §  留下實驗記錄 19
20. 範例實驗 20 對照組 實驗組 對照組 C001（50%） 實驗組 T001（50%） §  測試功能：更改頭條區塊背景顏色（#AFD6FF à #1989FF） §  測試期間：2013/1/1–2013/1/14, 共計2星期 §  期望目標：頭條區塊CTR上升5%
21. 實作程式架構 碼農們上崗啦！ 21
22. Before A/B Testing 22 資料庫 業務邏輯 網頁 Trunk/Control
23. 情境A 相同業務邏輯 + 不同介面 23 資料庫 業務邏輯 網頁 網頁 Branch/Test Trunk/Control
24. 情境B 不同業務邏輯 + 相同介面 24 資料庫 業務邏輯 網頁 業務邏輯 Branch/Test Trunk/Control Open API
25. 情境C 不同業務邏輯 + 不同介面 25 資料庫 業務邏輯 網頁 業務邏輯 網頁 Branch/Test Trunk/Control Open API
26. 基於數據做決定 §  停止測試 §  延長測試 §  成為正式版本 26
27. Yahoo! 搜尋介面調校經驗 27
28. THANK YOU! 廖英翔 Clay Liao Twitter/Weibo @clayliao clayliao@yahoo-inc.com 28