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

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

Yahoo! Search F2E 廖英翔 Clay Liao

Jan 13, 2013

Q: 如何測量網站介面好/不好？老闆說了算？

2

何謂“好”的使用者介面？找出關鍵指標

3

資訊型網站

4

電子商務網站

5

工具型網站

6

非營利/公益活動網站

7

找出網站介面與指標的關係

8

常見的衡量方法

§  憑個人的感覺專業 §  比較改版前後的營收、PV、CTR、Unique

user、Bounce rate等關鍵數字變化 §  問卷調查法 §  焦點群體法(Focus Group) §  易用性測試（Usability Test） §  …

9

眼動研究 (Eye-tracking)

§  有科學根據 §  發掘視覺焦點與軌跡

10 Source

§  設備很貴 §  樣本空間有限

特色

限制

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

11

常見的A/B測試：Colors

12

對照組實驗組

常見的A/B測試：Layout

13

對照組實驗組

常見的A/B測試：Performance

14

對照組實驗組

(使用CDN服務)

常見的A/B測試：New Feature

15

對照組實驗組

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

16

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

17

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

18

實驗設計

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

19

範例實驗

20

對照組實驗組對照組 C001（50%）實驗組 T001（50%）

§  測試功能：更改頭條區塊背景顏色（#AFD6FF à #1989FF） §  測試期間：2013/1/1–2013/1/14, 共計2星期 §  期望目標：頭條區塊CTR上升5%

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

21

Before A/B Testing

22

資料庫業務邏輯網頁

Trunk/Control

情境A 相同業務邏輯 + 不同介面

23


網頁

Branch/Test

Trunk/Control

情境B 不同業務邏輯 + 相同介面

24


業務邏輯

Branch/Test

Trunk/Control

Open API

情境C 不同業務邏輯 + 不同介面

25


業務邏輯網頁

Branch/Test

Trunk/Control

Open API

基於數據做決定

§  停止測試 §  延長測試 §  成為正式版本

26

Yahoo! 搜尋介面調校經驗

27

THANK YOU! 廖英翔 Clay Liao

Twitter/Weibo @clayliao [email protected]

28

Technology