設(shè)計(jì)一個(gè)網(wǎng)站無論對設(shè)計(jì)者還是業(yè)主都是一個(gè)浩大的工程。但是，不管你是創(chuàng)建一個(gè)新的網(wǎng)站，還是對已有網(wǎng)站做重新設(shè)計(jì)，有一個(gè)至關(guān)重要的點(diǎn)，你的決定要基于數(shù)據(jù)而不是基于感覺。對客戶和設(shè)計(jì)來說，在設(shè)計(jì)過程中做出的決定，可以決定創(chuàng)意，可以決定商業(yè)的成敗。

為了避免你下一個(gè)作品中潛在的缺陷，你應(yīng)該將 A/B 測試做為你設(shè)計(jì)工具的標(biāo)準(zhǔn)配置。對客戶網(wǎng)站做簡單的 A/B 測試可以讓你交付之前避免設(shè)計(jì)，導(dǎo)航，功能上的任何缺陷。這樣可以讓你交出最終產(chǎn)品，不僅視覺效果***，還有優(yōu)化的交互 — 他們會(huì)愛上你的。

聽起來很有趣？繼續(xù)閱讀，看看 A/B 測試如果讓你成為更好的 web 設(shè)計(jì)師。

A/B 測試 101

A/B 測試（又稱分割測試），允許你在一個(gè)網(wǎng)站測試兩個(gè)不同的測試元素，測試目的是判斷哪種設(shè)計(jì)對完成特定目標(biāo)是最有效的。

做 A/B 測試時(shí)，進(jìn)入網(wǎng)站的用戶會(huì)被隨機(jī)分配到兩個(gè)組：一半在“A 組”，另外一半在“B 組”。隨后每組顯示你選定的不同設(shè)計(jì)元素 — 例如，登錄頁面，商鋪主題，響應(yīng)按鈕，或者結(jié)帳流程。

通過對真實(shí)用戶實(shí)時(shí)測試兩組不同的設(shè)計(jì)元素，你可以收集成有意義的數(shù)據(jù)用來確定每個(gè)組的設(shè)計(jì)元素對訪客行為的影響。這會(huì)給你更來設(shè)計(jì)洞察力，幫助你為客戶創(chuàng)建***在線商業(yè)方案。

從本質(zhì)上講，A/B 測試幫助你在每一個(gè)項(xiàng)目上設(shè)計(jì)出***的網(wǎng)站。

為什么 Web 設(shè)計(jì)者應(yīng)該做 A/B 測試

創(chuàng)建***的網(wǎng)站應(yīng)該就是你開始在設(shè)計(jì)項(xiàng)目中把 A/B 測試作為標(biāo)準(zhǔn)服務(wù)來提供的充分理由。不過如果你還不服氣的話，下面也是你可以預(yù)見到的其它好處：

1. 增加收入 — 通過將 A/B 測試當(dāng)做一項(xiàng)服務(wù)涵蓋到你的自由職業(yè)項(xiàng)目中，就能為你帶來更多的項(xiàng)目收益。你既可以將其作為標(biāo)準(zhǔn)化服務(wù)包含到你的 web 設(shè)計(jì)包中，也可以利用其在網(wǎng)站優(yōu)化方面的好處將其作為加錢項(xiàng)。你的客戶會(huì)花費(fèi)一個(gè)體面的金額以讓他們的網(wǎng)站建設(shè)專業(yè)起來 — 把 A/B 測試作為一項(xiàng)后續(xù)服務(wù)來做出明智的設(shè)計(jì)修改，這樣做將幫助他們獲得收入的***爆發(fā)(而你自己也能賺更多一點(diǎn))。

2. 減少客戶糾紛 — 當(dāng)扯到要為一個(gè)網(wǎng)站做出設(shè)計(jì)決定的時(shí)候，看起來房間里的每個(gè)人都對于網(wǎng)站應(yīng)該怎么怎么樣持有各自的觀點(diǎn) — 特別是為此花了錢的客戶。幸運(yùn)的是，A/B 測試為你提供了具體的數(shù)據(jù)來指導(dǎo)設(shè)計(jì)決定，并且無需得罪客戶就能化解掉不必要的糾紛。

3. 心滿意足的客戶 — 將所有精力集中到網(wǎng)站的視覺設(shè)計(jì)上而忽略其功能性目標(biāo)這種事情是很容易發(fā)生的。然而大多數(shù)客戶確實(shí)想要一個(gè)好看的最終產(chǎn)品，每個(gè)客戶其實(shí)更關(guān)心那個(gè)網(wǎng)站的轉(zhuǎn)化。運(yùn)行 A/B 測試能向你的客戶說明你是真正在關(guān)心他們業(yè)務(wù)的在線目標(biāo)的，并且也希望盡力幫他們完成預(yù)期。

如何設(shè)計(jì)一個(gè)簡單 A/B 測試

如果之前從來沒有運(yùn)作過一次 web 優(yōu)化實(shí)驗(yàn)，***次的 A/B 測試看起來就會(huì)相當(dāng)令人為難。但是不要擔(dān)心，創(chuàng)造一個(gè)簡單的 A/B 測試其實(shí)還是相當(dāng)簡單的。下面我會(huì)概述一種你可以開始嘗試運(yùn)作你的*** A/B 測試的策略性方法。

定義你的目標(biāo)

在你開始測試一些東西的時(shí)候，你需要去理解網(wǎng)站的目的。理解了網(wǎng)站的目的就能讓你確定在量化的指標(biāo)方面成功對于你的客戶意味著什么。這些指標(biāo)，也叫 做轉(zhuǎn)換，代表了你所期望的訪問者將會(huì)在網(wǎng)站上進(jìn)行的動(dòng)作。通過及早定義目標(biāo)和成功指標(biāo)，你就為 A/B 測試將要執(zhí)行的操作劃定了一個(gè)框框。

你的轉(zhuǎn)換指標(biāo)將根據(jù)你所設(shè)計(jì)的網(wǎng)站的類型而有所不同。下面的表格概述了不同網(wǎng)站類型的常見轉(zhuǎn)換指標(biāo)：

識別瓶頸

為了讓你的測試得到***的結(jié)果，你需要識別過程通道中用戶失去訪問興趣或者脫離通向轉(zhuǎn)換路程的區(qū)域。這些障礙被稱為瓶頸。就是這些瓶頸對你的網(wǎng)站的表現(xiàn)產(chǎn)生了消極的影響，也就是你想要運(yùn)作 A/B 測試的地方。

如果你在客戶的商店中設(shè)置了 Google Analytics，其內(nèi)置的轉(zhuǎn)換跟蹤可以提供相對簡單的方式來識別用戶體驗(yàn)中潛在的瓶頸，可以在分析管理界面中設(shè)定你的轉(zhuǎn)換目標(biāo)，通過定義一些用戶走向轉(zhuǎn)換的過程中的事件和頁面就可以簡單地創(chuàng)建一個(gè)轉(zhuǎn)換通道。

電子商務(wù)網(wǎng)站上常見的一個(gè)簡單轉(zhuǎn)換通道示例應(yīng)該是這樣的: “放到購物車” 到 “查看購物車”到“下單” 到 “選擇支付方式” 到*** “訂單確認(rèn)”。這里有一個(gè) 很棒的指南 能幫助你開始在 Analytics 上進(jìn)行轉(zhuǎn)換跟蹤，另外還有一個(gè)能幫助你進(jìn)行更多 高級的通道轉(zhuǎn)換跟蹤 的設(shè)置。

一旦你設(shè)置好了轉(zhuǎn)換目標(biāo)和通道，你就能夠使用 Google Analytics 的“Goals“找到的“Goal Flow”報(bào)告來識別瓶頸了。通過對造成最多門檻和用戶退出的事件和頁面進(jìn)行高亮顯示，這份報(bào)告能夠幫助你著力于對測試最有益的區(qū)域。

創(chuàng)建一個(gè)假設(shè)

一旦你確認(rèn)了目標(biāo)并識別除了瓶頸，你就應(yīng)該創(chuàng)建一個(gè)你確信的假設(shè)，有關(guān)于對站點(diǎn)的設(shè)計(jì)修改會(huì)改變訪問者行為的。這會(huì)使得你的測試更具價(jià)值，因?yàn)樗脒^程中加入了一層目的，確保你仍在保持對于整個(gè)測試目標(biāo)實(shí)現(xiàn)過程的跟蹤。

例如，假設(shè)你的客戶的最終目標(biāo)是降低網(wǎng)站的購物車放棄率。你已經(jīng)完成了調(diào)查并識別出影響現(xiàn)有比率的瓶頸在于出現(xiàn)在”結(jié)算信息“頁面之后而在”確認(rèn)“頁面之前的”傳遞信息“頁面。在這種情況下，你的假設(shè)可以像下面這樣：

“如果我們通過將計(jì)費(fèi)和傳遞信息頁面整合成一個(gè)頁面來縮短結(jié)賬流程，那么整體的購物車放棄率將會(huì)降低。”

如果你在沒有創(chuàng)建一個(gè)假設(shè)的情況下去嘗試運(yùn)作一次測試，你還是會(huì)收集到關(guān)于訪問者有價(jià)值的數(shù)據(jù)。不過不幸的是，你會(huì)錯(cuò)過對于諸如為什么結(jié)果是他們這 樣做了這種問題的更深層次的分析和驗(yàn)證。即使你的測試失敗了，你還是能夠從實(shí)驗(yàn)中得出一些結(jié)論。實(shí)驗(yàn)的妙處在于，在整個(gè)站點(diǎn)上的實(shí)現(xiàn)之前放棄那些不起作用 的想法。

設(shè)計(jì)一些修改版本

在你可以去實(shí)踐你的實(shí)驗(yàn)之前，你需要針對你所測試的特定的設(shè)計(jì)元素創(chuàng)建修改版本。元素原來的版本是控制版本，而新的版本都是這個(gè)控制版本的變化版本。

為了開發(fā)出最準(zhǔn)確和公正的 A/B 測試，要確保新的版本中只有控制變量其中之一被修改了。例如，你可以測試一個(gè)號召性按鈕(如前所述)的顏色，或者其在頁面上的位置，但不能同時(shí)測試。將你 的測試限制于單一變量確保了你可以放心地將行為所發(fā)生的變化歸因于做出了設(shè)計(jì)修改的變量。

開始測試

瓶頸確認(rèn)而且構(gòu)建了設(shè)計(jì)變量，你幾乎就已經(jīng)準(zhǔn)備好運(yùn)作你的A/B測試了。為了確保你的測試能提供最精確的結(jié)果，你會(huì)想要確保下面兩件事情發(fā)生在實(shí)現(xiàn)期：

1. 向一組隨機(jī)選擇的站點(diǎn)訪問者分組同時(shí)展示你的變量和控制版本的元素.

2. 將你的測試運(yùn)行足夠長的時(shí)間，那樣它就能展示盡可能***數(shù)量的樣本.

遵循這兩項(xiàng)準(zhǔn)則將有助于確保實(shí)驗(yàn)提供了統(tǒng)計(jì)上最顯著的可能結(jié)果。那樣，你就可以對你所使用的數(shù)據(jù)放心了，因?yàn)槟闼龀龅淖罱K設(shè)計(jì)決定的基礎(chǔ)是可靠和精確的。

對于初學(xué)者要在他們的站點(diǎn)——不管它是不是在 Shopify 上 ——上開始實(shí)現(xiàn)一次 A/B 測試最容易的方法就是使用 A/B 實(shí)驗(yàn)工具. 有各種工具可以供你用來在網(wǎng)站上進(jìn)行 A/B 測試, 而我建議你先從 Optimizely, unbounce, 或者 Google Analytics Content Experiments 開始.

還有如果你在找一些額外的資源作為入門資料, 可以看看這些綜合指南:

• 簡單的 A/B 測試入門指南

• A/B 測試和網(wǎng)站重新設(shè)計(jì)

• A/B 測試有關(guān)的71件事

成為一名更好的Web設(shè)計(jì)者

最成功的網(wǎng)站設(shè)計(jì)者知道網(wǎng)站的交接僅僅只是開始而已. 每一個(gè)單獨(dú)的項(xiàng)目都能帶來幾乎無窮盡的實(shí)踐和優(yōu)化的機(jī)會(huì). 通過把 A/B 測試當(dāng)做你的標(biāo)準(zhǔn)設(shè)計(jì)包中提供的一項(xiàng)服務(wù), 就將能夠提高收入，幫助你的客戶達(dá)成更好的商務(wù)業(yè)績, 并構(gòu)建出一個(gè)你可以真正為之驕傲的網(wǎng)站.

你還在等什么呢? 馬上開始測試踏上你成為更好的 web 設(shè)計(jì)者的征途吧.