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

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)
特色
§ 有科學根據
§ 發掘視覺焦點與軌跡
限制
§ 設備很貴
§ 樣本空間有限
Source 10

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

12. 常見的A/B測試：Colors
對照組 實驗組
12

13. 常見的A/B測試：Layout
對照組 實驗組
13

14. 常見的A/B測試：Performance
(使用CDN服務)
對照組 實驗組
14

15. 常見的A/B測試：New Feature
對照組 實驗組
15

16. 不喜慎入
DATA-DRIVEN 以大數據為基礎
16

17. 借用Log（日誌檔）來設計介面
17

18. 保持“其他條件不變”
設計有效的實驗
18

19. 實驗設計
§ 設計測試內容與目標
§ 選擇測試群體
§ 實驗組v.s.對照組
§ 決定測試期間(考慮週期、節日、季節性)
§ 留下實驗記錄
19

20. 範例實驗
§ 測試功能：更改頭條區塊背景顏色（#AFD6FF à #1989FF）
§ 測試期間：2013/1/1–2013/1/14, 共計2星期
§ 期望目標：頭條區塊CTR上升5%
對照組 C001（50%） 實驗組 T001（50%）
對照組 實驗組
20

21. 碼農們上崗啦！
實作程式架構
21

22. Before A/B Testing
Trunk/Control
資料庫 業務邏輯 網頁
22

23. 情境A 相同業務邏輯 + 不同介面
Trunk/Control
資料庫 業務邏輯 網頁
Branch/Test
網頁
23

24. 情境B 不同業務邏輯 + 相同介面
Trunk/Control
資料庫 業務邏輯 網頁
Branch/Test
Open API 業務邏輯
24

25. 情境C 不同業務邏輯 + 不同介面
Trunk/Control
資料庫 業務邏輯 網頁
Branch/Test
Open API 業務邏輯 網頁
25

26. 基於數據做決定
§ 停止測試
§ 延長測試
§ 成為正式版本
26

27. Yahoo! 搜尋介面調校經驗
27

28. THANK YOU!
廖英翔 Clay Liao
Twitter/Weibo @clayliao
clayliao@yahoo-inc.com
28