不會 A/B 測試的 Web 設計師不是好程式設計師

設計一個網站無論對設計者還是業主都是一個浩大的工程。但是，不管你是建立一個新的網站，還是對已有網站做重新設計，有一個至關重要的點，你的決定要基於資料而不是基於感覺。對客戶和設計來說，在設計過程中做出的決定，可以決定創意，可以決定商業的成敗。

為了避免你下一個作品中潛在的缺陷，你應該將 A/B 測試做為你設計工具的標準配置。對客戶網站做簡單的 A/B 測試可以讓你交付之前避免設計，導航，功能上的任何缺陷。這樣可以讓你交出最終產品，不僅視覺效果極佳，還有優化的互動 — 他們會愛上你的。

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

A/B 測試 101

A/B 測試（又稱分割測試），允許你在一個網站測試兩個不同的測試元素，測試目的是判斷哪種設計對完成特定目標是最有效的。

做 A/B 測試時，進入網站的使用者會被隨機分配到兩個組：一半在“A 組”，另外一半在“B 組”。隨後每組顯示你選定的不同設計元素 — 例如，登入頁面，商鋪主題，響應按鈕，或者結帳流程。

通過對真實使用者實時測試兩組不同的設計元素，你可以收整合有意義的資料用來確定每個組的設計元素對訪客行為的影響。這會給你更來設計洞察力，幫助你為客戶建立最佳線上商業方案。

從本質上講，A/B 測試幫助你在每一個專案上設計出最好的網站。

為什麼 Web 設計者應該做 A/B 測試

建立最好的網站應該就是你開始在設計專案中把 A/B 測試作為標準服務來提供的充分理由。不過如果你還不服氣的話，下面也是你可以預見到的其它好處：

1. 增加收入 — 通過將 A/B 測試當做一項服務涵蓋到你的自由職業專案中，就能為你帶來更多的專案收益。你既可以將其作為標準化服務包含到你的 web 設計包中，也可以利用其在網站優化方面的好處將其作為加錢項。你的客戶會花費一個體面的金額以讓他們的網站建設專業起來 — 把 A/B 測試作為一項後續服務來做出明智的設計修改，這樣做將幫助他們獲得收入的最大爆發(而你自己也能賺更多一點)。

2. 減少客戶糾紛 — 當扯到要為一個網站做出設計決定的時候，看起來房間裡的每個人都對於網站應該怎麼怎麼樣持有各自的觀點 — 特別是為此花了錢的客戶。幸運的是，A/B 測試為你提供了具體的資料來指導設計決定，並且無需得罪客戶就能化解掉不必要的糾紛。

3. 心滿意足的客戶 — 將所有精力集中到網站的視覺設計上而忽略其功能性目標這種事情是很容易發生的。然而大多數客戶確實想要一個好看的最終產品，每個客戶其實更關心那個網站的轉化。執行 A/B 測試能向你的客戶說明你是真正在關心他們業務的線上目標的，並且也希望盡力幫他們完成預期。

如何設計一個簡單 A/B 測試

如果之前從來沒有運作過一次 web 優化實驗，第一次的 A/B 測試看起來就會相當令人為難。但是不要擔心，創造一個簡單的 A/B 測試其實還是相當簡單的。下面我會概述一種你可以開始嘗試運作你的首次 A/B 測試的策略性方法。

定義你的目標

在你開始測試一些東西的時候，你需要去理解網站的目的。理解了網站的目的就能讓你確定在量化的指標方面成功對於你的客戶意味著什麼。這些指標，也叫做轉換，代表了你所期望的訪問者將會在網站上進行的動作。通過及早定義目標和成功指標，你就為 A/B 測試將要執行的操作劃定了一個框框。

你的轉換指標將根據你所設計的網站的型別而有所不同。下面的表格概述了不同網站型別的常見轉換指標：

識別瓶頸

為了讓你的測試得到最好的結果，你需要識別過程通道中使用者失去訪問興趣或者脫離通向轉換路程的區域。這些障礙被稱為瓶頸。就是這些瓶頸對你的網站的表現產生了消極的影響，也就是你想要運作 A/B 測試的地方。

如果你在客戶的商店中設定了 Google Analytics，其內建的轉換跟蹤可以提供相對簡單的方式來識別使用者體驗中潛在的瓶頸，可以在分析管理介面中設定你的轉換目標，通過定義一些使用者走向轉換的過程中的事件和頁面就可以簡單地建立一個轉換通道。

電子商務網站上常見的一個簡單轉換通道示例應該是這樣的: “放到購物車” 到 “檢視購物車”到“下單” 到 “選擇支付方式” 到最後 “訂單確認”。這裡有一個 很棒的指南 能幫助你開始在 Analytics 上進行轉換跟蹤，另外還有一個能幫助你進行更多 高階的通道轉換跟蹤 的設定。

一旦你設定好了轉換目標和通道，你就能夠使用 Google Analytics 的“Goals“找到的“Goal Flow”報告來識別瓶頸了。通過對造成最多門檻和使用者退出的事件和頁面進行高亮顯示，這份報告能夠幫助你著力於對測試最有益的區域。

建立一個假設

一旦你確認了目標並識別除了瓶頸，你就應該建立一個你確信的假設，有關於對站點的設計修改會改變訪問者行為的。這會使得你的測試更具價值，因為它想過程中加入了一層目的，確保你仍在保持對於整個測試目標實現過程的跟蹤。

例如，假設你的客戶的最終目標是降低網站的購物車放棄率。你已經完成了調查並識別出影響現有比率的瓶頸在於出現在”結算資訊“頁面之後而在”確認“頁面之前的”傳遞資訊“頁面。在這種情況下，你的假設可以像下面這樣：

“如果我們通過將計費和傳遞資訊頁面整合成一個頁面來縮短結賬流程，那麼整體的購物車放棄率將會降低。”

如果你在沒有建立一個假設的情況下去嘗試運作一次測試，你還是會收集到關於訪問者有價值的資料。不過不幸的是，你會錯過對於諸如為什麼結果是他們這樣做了這種問題的更深層次的分析和驗證。即使你的測試失敗了，你還是能夠從實驗中得出一些結論。實驗的妙處在於，在整個站點上的實現之前放棄那些不起作用的想法。

設計一些修改版本

在你可以去實踐你的實驗之前，你需要針對你所測試的特定的設計元素建立修改版本。元素原來的版本是控制版本，而新的版本都是這個控制版本的變化版本。

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

開始測試

瓶頸確認而且構建了設計變數，你幾乎就已經準備好運作你的A/B測試了。為了確保你的測試能提供最精確的結果，你會想要確保下面兩件事情發生在實現期：

1. 向一組隨機選擇的站點訪問者分組同時展示你的變數和控制版本的元素.

2. 將你的測試執行足夠長的時間，那樣它就能展示儘可能最大數量的樣本.

遵循這兩項準則將有助於確保實驗提供了統計上最顯著的可能結果。那樣，你就可以對你所使用的資料放心了，因為你所做出的最終設計決定的基礎是可靠和精確的。

對於初學者要在他們的站點——不管它是不是在 Shopify 上 ——上開始實現一次 A/B 測試最容易的方法就是使用 A/B 實驗工具. 有各種工具可以供你用來在網站上進行 A/B 測試, 而我建議你先從 Optimizely, unbounce, 或者 Google Analytics Content Experiments 開始.

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

• 簡單的 A/B 測試入門指南
• A/B 測試和網站重新設計
• A/B 測試有關的71件事

成為一名更好的Web設計者

最成功的網站設計者知道網站的交接僅僅只是開始而已. 每一個單獨的專案都能帶來幾乎無窮盡的實踐和優化的機會. 通過把 A/B 測試當做你的標準設計包中提供的一項服務, 就將能夠提高收入，幫助你的客戶達成更好的商務業績, 並構建出一個你可以真正為之驕傲的網站.

你還在等什麼呢? 馬上開始測試踏上你成為更好的 web 設計者的征途吧.