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

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

由來

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

Screen Shot 2013-02-21 at 下午2.21.29Screen Shot 2013-02-21 at 下午2.21.29

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

Screen Shot 2013-02-21 at 下午2.23.19Screen Shot 2013-02-21 at 下午2.23.19

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

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

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

1. 準備實驗專用頁面

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

Screen Shot 2013-02-21 at 下午2.37.38

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

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

Screen Shot 2013-02-21 at 下午2.39.47

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

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

Screen Shot 2013-02-21 at 下午2.41.14

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

Screen Shot 2013-02-21 at 下午2.44.50

#### 看報表

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

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

Screen Shot 2013-02-21 at 下午2.50.48

#### 後話

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

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