本文的圖片和主要觀點(diǎn)來(lái)自：A/B Test Case Study:Single Page vs. Multi-Step
作者是Linda Bustos、Janis Lanka，她們都來(lái)自Elastic Path Software

從文字標(biāo)題上來(lái)看，作者原本的意圖是介紹一個(gè)通過(guò)A/B測(cè)試來(lái)提高產(chǎn)品性能的案例（溫哥華冬奧會(huì)官方特許商品購(gòu)買(mǎi)網(wǎng)站），但大家實(shí)際留下的評(píng)論以及關(guān)注重點(diǎn)都被集中在這個(gè)具體的Checkout設(shè)計(jì)的交互細(xì)節(jié)上。當(dāng)然我也被這個(gè)我認(rèn)為有些優(yōu)雅的設(shè)計(jì)所吸引，因此簡(jiǎn)單翻譯并整理一下原文和原文評(píng)論。好了，言歸正傳。

什么是Checkout？就我個(gè)人的理解來(lái)說(shuō)就是挑選商品結(jié)束后進(jìn)入結(jié)帳的流程。從決定開(kāi)始結(jié)帳到輸入聯(lián)系信息、支付選擇到最后的支付成功，整個(gè)過(guò)程就叫Checkout。在改版前，她們?cè)瓉?lái)的Checkou流程是這樣的：

原Checkout的sign in

control

可以發(fā)現(xiàn)原 Checkout流程分成：Sign in、Shipping、Billing & Review、Receipt，也就是說(shuō)從點(diǎn)Checkout按鈕到最后結(jié)帳成功需要走四步。

經(jīng)過(guò)重新設(shè)計(jì)后，新的流程變成了一步（見(jiàn)下圖）。怎么做到的呢？

首先，取消了Checkout前的強(qiáng)制Sign in（只保留Returning Customer Sign in以便于直接獲得Shipping和Delivery option等信息）。其次，將Shipping和Billing信息進(jìn)行整合，以簡(jiǎn)單扁平的方式形成一個(gè)較長(zhǎng)的表單供用戶(hù)填寫(xiě)并確認(rèn)。頁(yè)面右側(cè)是訂單詳細(xì)信息。點(diǎn)擊Place Order后Checkout完成后，提示用戶(hù)可以新注冊(cè)帳號(hào)（Create Account）以便跟蹤具體的訂單情況。

另外一個(gè)我個(gè)人認(rèn)為不錯(cuò)的交互是右側(cè)的Order Summary展示。由于合并后的頁(yè)面較長(zhǎng)，因此她們把Order Summary做成能隨著頁(yè)面上下浮動(dòng)，這讓用戶(hù)始終能看到訂單的詳情。

從最后的數(shù)據(jù)上來(lái)看，新設(shè)計(jì)相比老設(shè)計(jì)：

購(gòu)買(mǎi)完成率上升了257.26%
平均訂單額上升了8.54%（這個(gè)數(shù)值的上升作者自稱(chēng)始料未及，也不知道具體原因）
Overall site conversion rate上升了0.54%（這個(gè)數(shù)值作者沒(méi)有很好的解釋清楚，評(píng)論下方也有人在問(wèn)）

新的Checkout設(shè)計(jì)

Checkout成功后，提示注冊(cè)

為什么她們會(huì)這么設(shè)計(jì)，要知道連Amazon也是4步checkout的，她們是怎么考慮的？思考過(guò)程作者在原文中沒(méi)有透露，但從下方的激 烈的評(píng)論和作者的回應(yīng)中我們可以基本找到答案。

首先，這個(gè) store的目的是銷(xiāo)售特許商品。因此通過(guò)簡(jiǎn)化產(chǎn)品設(shè)計(jì)和降低門(mén)檻來(lái)提高購(gòu)物的轉(zhuǎn)化率是她們的核心KPI，拋開(kāi)運(yùn)營(yíng)的壓力（主要是不注冊(cè)可Checkout不利于二次購(gòu)物和商品推薦），她們的設(shè)計(jì)出發(fā)點(diǎn)就是盡可能多的幫助用戶(hù)完成訂單。多余的Checkout流程會(huì)給用戶(hù)機(jī)會(huì)來(lái)改變他們的選擇。（評(píng)論中一哥們提到他做過(guò)相似的實(shí)驗(yàn)，多一個(gè)頁(yè)面轉(zhuǎn)化率就有少20%。）其次，由于她們銷(xiāo)售的屬于利基（niche）商品，因此Checkout步驟少或多并不影響實(shí)際的轉(zhuǎn)化率。因?yàn)橛脩?hù)只能在這里購(gòu)買(mǎi)，沒(méi)有其他選擇，這以因素也可以認(rèn)為是之前提到的第二個(gè)指標(biāo)并未提高很多的原因。最后，另外一個(gè)老兄發(fā)現(xiàn)他們只提供VISA支付，作者解釋到這是因?yàn)閂ISA是奧運(yùn)特許合作伙伴，而這一 客觀因素也幫助她們能在設(shè)計(jì)上少費(fèi)些周折。如果必須有多種支付方式選擇，那么真的把所有的支付方式結(jié)合其他信息放在一個(gè)頁(yè)面上，我想她們也會(huì)有思想斗爭(zhēng)的壓力的：）

題外話(huà)，有朋友會(huì)認(rèn)為她們的表單設(shè)計(jì)也并非完美，比如在實(shí)時(shí)數(shù)據(jù)驗(yàn)證、錯(cuò)誤提示、表單字段的提示上等等也有可改進(jìn)的地方。但我們應(yīng)該認(rèn)識(shí)到完美又優(yōu)雅的設(shè)計(jì)往往可遇而不可求，最合適的設(shè)計(jì)才是我們應(yīng)該努力去實(shí)現(xiàn)的。我想至少在這個(gè)具體問(wèn)題上，這個(gè)例子給了我們一個(gè)榜樣。

最后總結(jié)一下，本例告訴我們?cè)诳赡艿那闆r下，把多頁(yè)面表單適時(shí)地整合成不太復(fù)雜的單頁(yè)面表單也是一種提高轉(zhuǎn)化率的方法。這也是一種明明白白告訴用戶(hù)你有多少表單信息需要填寫(xiě)的直白方式，但這么做的前提是必須很好地認(rèn)識(shí)用戶(hù)的行為以及行為背后潛在的需求，切不可為了KPI而不顧一切。

原文評(píng)論中其他有價(jià)值的問(wèn)題：

如果把訂單額從現(xiàn)在的$45.60變成$456，是否實(shí)驗(yàn)的結(jié)果依然是如此？
Checkout結(jié)束后的注冊(cè)有多少效果？
A/B測(cè)試的注意事項(xiàng)：何時(shí)開(kāi)始、何時(shí)結(jié)束？
真正的最后，有問(wèn)題的朋友歡迎各位看了原文后和我討論。