UI 設計之AB測試

王彥藝 Yuie發表於2018-08-01

UI 設計之AB測試

——京東淘寶登入鍵大比拼

作者:Yuie
指導老師:何吉波


賽前準備

什麼是AB測試

AB測試是為Web或App介面或流程製作兩個(A/B)或多個(A/B/n)版本,在同一時間維度,分別讓組成成分相同(相似)的訪客群組隨機的訪問這些版本,收集各群組的使用者體驗資料和業務資料,最後分析評估出最好版本正式採用。 ——https://baike.baidu.com/item/AB測試 [ 百度百科 ]

翻譯成人類能懂的語言就是,比如我們想知道賣什麼樣的粽子,就做出A:豆沙粽子,B:肉粽子。兩種找一群人隨機發粽子給他們吃,看哪種粽子最受歡迎,然後我就賣哪種(個人還是喜歡沒有任何餡的白粽子)。 要注意的一點是,粽子除了餡不一樣,其他都要一樣。不能拿豆沙粽子和餃子比,也不能和珍珠丸子比,或者粉蒸肉….(不好意思跑偏了…)因為這些不光換了餡料還把包裹肉的材料換掉了!

使用Axure製作AB測試

Axure聽說過嗎,艾克嬸兒,一個能快速設計網站原型的軟體。這軟體還能模擬好多網站,APP 的功能,點選什麼的,特別好玩。沒玩過的趕緊去下,雖然你只能有14天的免費。(但永遠不要小看我們同胞的能力 !)

好了好了,廢話不多說我們開始看看京東和淘寶的實戰比賽吧!


淘寶 VS. 京東

Round 1

我們先使用艾克嬸兒(Axure)複製一個京東首頁命名為A。這樣式兒的:
這裡寫圖片描述然後再複製一個京東首頁,但悄悄地給京東登陸鍵換成淘寶的。像這樣:
這裡寫圖片描述什麼?沒看出變化?等著,我給你放大。
這裡寫圖片描述
這回看見了吧
神祕的微笑
然後我們就做一個測試的說明,圖片加上點選路徑,只要使用者點進連結就自動進入A或者B,找到登入鍵並點選就可以結束測試。(此處省略一萬字,略略略~)成品是這樣式兒的:
https://v6wqxw.axshare.com/#c=2[點選進入淘寶東京擂臺賽直播間](可能有點慢,但是重要的是心意嘛~)

不皮了,我們繼續第二輪!

Round 2

接下來就是激烈的對決了,用一些可以記錄點選和資料的網站,比如我用的Mouse flow,Optimal Workshop之類的記錄一下使用者在你做的AB測試網站上的點選資料等。(此處又省略一萬字,略略略,你咬我啊)然後就可以把你的測試連結發給家族群,同學群,二手房交易群等。(啊喂,這樣選擇參與實驗的備試也未免太隨意了點吧!)當然你也可以嚴格篩選備試,並且進行一些Pret-est,Post-test之類的。 因為這是為了介紹AB測試的小例子,我就沒有做的很professional,來看看我能得到的資料吧!

Round 3

在Mouse Flow上下載了CSVfile就可以開始分析資料啦!在參與的總共37個人中,我刪去了就開了3秒的,看一頁看了14分鐘的,還有一些沒做完的資料,最後剩下31個資料,其中訪問A頁面的有15人,B頁面的16人。使用者在兩個不同頁面上的停留和操作平均時間是這樣式兒的:
這裡寫圖片描述
很明顯B頁面,也就是使用了淘寶登入鍵的京東首頁。使用者停留和操作的時間都更短。說明大部分人可以更快地找到首頁上的淘寶登入鍵。
當然使用者在AB兩種頁面上點選的數量也是差距非常大的。
這裡寫圖片描述
我彷彿看到了抽到A測試的同學們無處安放的小手和胡亂點選螢幕的樣子。
通過簡單的統計資料可以看出來淘寶的登陸鍵好想設計的蠻有效率的,恭喜淘寶君啦。不過真的要做資料分析還需要更多的資料和統計方法比如Chi square,T test,Correlation之類的。因為這次資料收集的很少,所以沒辦法給一個確切科學的資料分析,對比登陸鍵效率也是相對而言的。有興趣的話可以做一個更科學的資料分析哦!

相關文章