網頁介面A/B Test 筆記 (Google Analytics Experiments)

昨天第一次使用 Google Analytics 的 Experiments 來做介面上的 A/B Test，還滿好玩的所以來筆記一下。

由來

獎金佈告從上次改版開始，比賽資訊清單的顯示方式預設就是「格子狀」，像是這樣的。

上個月改版大幅增進了顯示的介面，並且可以隨時切換成「條列式」。像是這樣的。

我們覺得「格子狀」比較漂亮，所以一進去預設是格子狀的，但是陸陸續續許多使用者說，他們比較喜歡條列式，另外我們使用 CrazyEgg 觀察的結果也顯示很多人一進來就會點選「切換顯示模式」，所以我們認為有可能預設就是條列式對我們真正的使用者比較有用。

但是，就這樣換了嗎？那可不行，光憑感覺一點也不科學，上次去 WebConf 聽廖大的演講，覺得他的標題下的好：「超理性使用者介面設計」，真的，一切都要測試，用數字來說話。

因此我準備了另一個獎金佈告頁面，一進去預設就是「條列式」。準備好之後，這次的實驗就開始了。詳細的準備步驟如下：

1. 準備實驗專用頁面

原本網址是 /contests ，我的 alternative 頁面網址是 /contests- ，就照這樣填上去即可。

#### 2. 設定實驗選項

目標是要查看使用者進入這兩個頁面誰會停留比較久、看比較多頁面，來決定哪種頁面比較討喜。

#### 3. 把程式碼加到網頁

這邊提供的程式碼只需要加到「原始頁面（/contests）」裡面，加好之後按儲存，Google 會自動幫你偵測看有沒有加成功，另外也要確認網站每個頁面都已經安裝 Google Analytics 原始碼。因為我的網站的 GA 有 Custom cookie domain，所以實驗專用原始碼也要加上。

這個原始碼因為負責幫你把一部分取樣對象轉到實驗頁面，所以一定要放在 head 裡面。不像 GA 可以放在頁面最下方。好了的話，會顯示綠色勾勾代表原始碼嵌入成功，就可以點選「非常好」！（這按鈕用詞真是振奮人心）

#### 看報表

也來當我們的實驗對象吧！進入獎金佈告：http://bhuntr.com/contests，如果你被導到 http://bhuntr.com/contests- （contests後面有個小減號），代表你被當成實驗對象了！小妹先在這邊感謝你！ :D

因為現在剛設定好，取樣數不夠多，不過已經可以看到報表囉！實驗組似乎有得勝的機會呢！

#### 後話

我覺得 UX 真的不是純設計師或純前端、純後端可以做的，以 A/B Test 來說，「準備實驗用頁面」可能就會需要程式、「實驗用頁面」的設計需要前端和設計師共同配合，整個設定也需要對網站分析、介面流程有整體了解。但這些都是可以學的來的。只要設計師不怕原始碼、工程師也開始思考介面，彼此各跨一步，就都可以做到。

總之，以後要面試人的時候，我會請他做一個 A/B Test 的測驗，如果可以完成實作的話就算通過。如果你對於視覺、網頁前端和介面設計有興趣，歡迎加入獎金獵人，我們隨時都在徵人噢！（請來信 hana@bhuntr.com）