目錄
UI 設計的知識網站「GoodUI.org」整理分享了許多已經 A/B 測試的 UI 設計，先幫忙把常見的網頁排版都測完，幫助 UI 設計師/網頁設計師們省下許多功夫！
什麼是A/B測試
A/B 測試（A/B Test）運用了統計學的原理，顧名思義就是眼前有「A 版」與「B 版」兩種方法，為了測試哪種方法能獲得更好的市場反應，將 2 種版本同時上線，將消費者導入 A 或 B 版網頁做測試。
A/B 測試的優點在於可以得到實際的數據，而非依靠主觀意見來決定網站的架構與UI 設計，也能不落傳統思維的俗套。只是各個版本需運行一段時間，待累積足夠的數據，才能確保測試的準確性，也需耗費不少成本。
範例1：嘗試使用單欄排版取代多欄
範例2：在行動呼籲前先給予誘因
範例3：嘗試合併類似功能的欄位，避免版面破碎化
範例4：讓社群證明價值，不要自吹自擂
嘗試蒐集過往客戶的推薦文、滿意度證明或各種可以佐證的數據證明，並放在網頁上吧！
範例5：不要害怕重複顯示引導指示，只要放在不同位置就好
重點在於合理規劃欄位分配，因長長的一頁式網頁已相當能被大眾接受，不需像過去一樣，把所有網頁元素都壓縮在一個螢幕大小。所以在一頁式網頁的最上方設置一個適中的點擊按鈕、最下方放置一個醒目的點擊按鈕，也是符合UX使用者體驗的原則。
根據 A/B 測試出來的使用者習慣，當使用者「滑」網頁到最底時，看到可點擊的按鍵，他們會停下來思考接下來要做什麼 —— 例如點下那個「購買」鍵。
範例6：讓「可點擊」和「可選擇」的外觀有差異
例如以圖例來看，設計師選擇「藍色」做為網站上可點擊按鍵的色調，而選擇「黑色」為當前所在頁面的名稱。簡明扼要的顏色應用就能達到不言而喻的效果。最重要的是：千萬別使用過多的顏色混淆使用者。
範例7：突顯最推薦的項目，避免讓所有項目都看起來相同
UI 設計師為了避免這個困境，比起單純陳列所有的項目，強調突出最主要的商品或服務是更好的做法。
範例8：讓使用者主動選擇「復原」，而不是重複詢問意圖
跳出視窗要你「確認自己在做什麼」會讓使用者覺得備受質疑，而「復原」提供使用者就算操作錯誤也可以回復到上一步的功能，則會讓人感到友善、包容與尊重。
另外，若使用者需重複的進行某項操作，網頁不斷跳出提示視窗，也讓使用者感到操作效率低下，產生不佳的 UX 體驗。
範例9：清楚描述 TA (目標客群)，而不是宣稱「適合所有人」
網站清楚描述產品或服務的目標族群畫面，可以讓網站吸引到相似特質的使用者，同時透露出的「排他性」會讓使用者感到自己是被重視的，並建立出親近感。
範例10：不會有人被優柔寡斷吸引，多使用肯定語氣吧！
優柔寡斷會降低信任感，如果網頁上常使用問句或不確定性的字詞，例如：有興趣嗎？想購買嗎？會讓消費者覺得你對產品或服務信心不足，這時候可以使用更具權威性、專業性的語句，像是如何帶給顧客良好的產品或最佳的 UX 使用者體驗。
範例11：善用色彩對比度來凸顯號召性用語
範例12：標示出產品的原產地
另外，說明原產地故事也能讓產品與產地名聲達到雙贏。
範例13：別讓使用者填太長的表單
如果必填欄位真的為數眾多，可以嘗試讓最重要的資訊先讓使用者填寫完，提交後再出現一個單獨的頁面，請使用者繼續填寫第二重要的資訊。
範例14：別隱藏頁面上的選項，大方展現吧！
但對於使用者來說，下拉式選單隱藏了一組他們要努力去發現的選項。這些選項若是跟產品有關，而且是交易流程中必經的，那你可以考慮不要隱藏這些選項，這樣可以提升網頁著轉換率
範例15：別讓使用者覺得已經「滑到最底了」
UI 設計師可以建立一種固定的視覺模式或節奏，例如圖標或是小動畫，來引導使用者「網頁還沒看完，下面還有內容」。設計時也需注意欄位之間留白區域的尺寸：過大的空隙會讓人誤以為已經沒有內容了。
範例16：保持焦點，不要用連結淹沒使用者
附上連結不是錯誤，只是數量與位置都要妥善規劃。減少多餘的連結，可增加讓使用者注意到頁尾 CTA（行動呼籲）的機會。
範例17：顯示出項目的即時動態
即時動態可以幫助消費者確認是否已經操作過了、操作是否成功、以及接下來應該進行什麼動作
範例18：把引導型按鈕的敘述改寫為「能帶給用戶哪些好處」
前者就是所謂「能帶來好處的按鈕」，能替使用者產生價值；而後者則是「任務導向的按鈕」，代表使用者耗費時間跟精力。而「能帶給使用者好處」的按鈕自然有較高的轉換率。
範例19：直接操作比多階層下拉式選單更直覺
範例20：若當下就可以操作，就不要再多開分頁！
精簡流程、讓使用者花最少的時間就能了解頁面資訊，並將簡單易懂的表單放置於該頁面上。除了方便性，也可藉此讓使用者預估填寫所需的時間，會更加增加使用者填寫的意願。
範例21：以過渡形式表現操作導致的 UI 介面改動
其實在變化過程中增加一些動態變化，也能達到尊重使用者的效果：故意延遲、以過渡形式表現尺寸或位置的變化，能讓使用者有更多時間、更有餘裕地去理解網頁的變動。
但需要注意的是，動態效果的時間最好在0.5秒以下，過長就可能引起使用者的不悅——特別是想要快速完成流程的使用者。
範例22：讓先使用者漸進式參與，而不是先要求註冊
一旦使用者看到您產品的價值、並體會到能帶來的價值，他們會更樂意接受您之後分享的其他訊息。「漸進式參與」即是一種盡可能推遲註冊過程，但依方面卻能增添使用者主動註冊動機的方法。
範例23：嘗試減少線框，不要浪費精力在分割框架
解決方法如：在設計之前就定義好內容與視覺之間的關係（例如色彩設計）、減少不必要的區塊、對齊不同的背景色，才能有效地減輕使用者的閱讀難度。
範例24：嘗試銷售「好處」而不是功能
人們在挑選產品時，考慮的點除了性能外，更在乎這個產品能如何帶給他們好處 －－ 例如若能同時幫他省錢又省力就太好了。而這就是產品能帶給顧客的價值所在，也是他們會掏錢的關鍵。所以網頁的說明別只向顧客說明產品或服務內容，說明能為顧客帶來哪些好處吧！
範例25：謹慎設計「沒有符合的產品」的網頁
此時，有 sense 的 UI 設計師會使用「網頁使用教學」或提示來取代冰冷的「搜尋到 0 個商品」頁面，讓使用者感受這個網頁是有人性的，營造暖心的 UX 使用者體驗！
範例26：讓使用者能選擇「不參加」
更好的做法是將正反向的選擇各放一個方框，告訴使用者「你可以要也可以不要」，然後再替使用者默選其中一項。
因為此舉可以減緩當使用者不想參與時的牴觸感，亦可可讓使用者潛意識產生「所有人都照原樣進行，那我也這樣做吧」的想法，進而讓我們的目的更容易達到，還不會引使用者的反感。畢竟行銷道德也會影響使用者對品牌的評價。
範例27：保持一致性，避免使用者重新學習
而網頁的一致性同樣能幫助使用者容易學習，若破壞一致性原則，使用者就得重新學習一次。在介面上，一致性可藉由如顏色、形狀、大小、標記或語言等方式完成。
不過，當有需凸顯的內容時，依然可以使用「不一致」的元素吸引使用者注意。
範例28：善用「自動填入」以避免使用者重複操作
盡量減少使用者的操作流程並節省他們的時間，絕對是有益處的。
範例29：UI 設計應要保留大多數人都習慣的操作方式
當然，新的操作模式也許可以帶來耳目一新的感覺，但在推翻傳統，必須謹慎思索改革的目的與成效。
範例30：「做了能避免⋯⋯」的行動呼籲內容比「做了能得到⋯⋯」更好
這個理論可以套用在產品設計和使用者溝通。例如若產品的目的是保護客戶現有的財富或安全等等，比起推銷客戶還未擁有的東西更能說服客戶購買。
在上圖的網站 UI 設計 A/B 測試中，左側的行動呼籲是「請這樣做，以免失去你的健康、財富或朋友」；右側的則是「請這樣做，就可以增加你的健康、財富或朋友」。左側的「恐嚇式描述」會讓人聯想到事情發生時（如失去財富等）的嚴重性，就按下「Do This」按鈕以先預防，因此比起右側的敘述更有「讓人不敢拒絕」的說服力。