whoiscarlo/agent-skills

登陸頁面轉換與使用者體驗（UX）

這些規則適用於那些任務只有一個的頁面：登入、註冊、留下電子郵件、請求某樣東西。這些規則源自一系列行銷、轉換和UX電子書（來自UserTesting、UXPin、SmartBug、Usabilla等，大約2014至2016年）。它們引用的數字或許舊了，但背後的使用者行為卻歷久彌新。

每條規則都包含一個指令、簡短的理由和一個範例。若要進行審查，請從最後的檢查清單開始。

---

1. 價值主張與摺頁上方設計

1. 通過五秒測試。 原因：訪客會在幾秒內決定這個頁面是否適合他們。如果他們無法在短時間內說出你是做什麼的，就會按下返回鍵。 範例：讓某個人看你的頁面五秒鐘，然後隱藏它，問他「這是什麼？為誰而設？」如果他無法回答，在修改其他任何東西之前，先重寫你的標題。

2. 標題要圍繞訪客的結果，而不是關於你自己。 原因：一個一直說「我們」的頁面，會迫使讀者自己去轉換語言。使用「你」和一個具體的成果，就能直接為他們做到這一點。 範例：「我們策劃行銷郵件」改為「看看400個品牌如何撰寫他們的郵件，已分類且可搜尋。」

3. 用兩到三個具體的行動理由來支撐標題。 原因：標題負責激發動機；而理由則能轉化那些猶豫不決的人。 範例：在標題下方，放上三行簡短的文字：「每週新增品牌」、「完整的郵件，而非縮圖」、「免費瀏覽」。

4. 展示真實的產品，而不是使用庫存照片。 原因：普通的圖像看起來像在湊版面，讓頁面顯得不值得信賴。一張產品截圖就能證明它的存在。 範例：將一張微笑團隊的照片，替換成一個真實的郵件歸檔網格畫面。

5. 讓第一個畫面陳述清楚你的提案，然後讓人們可以向下滾動。 原因：主視覺區域（Hero）必須承載價值主張和主要行動，但把每個功能都塞進摺頁上方會造成混亂。當層級結構清晰時，人們自然會向下滾動。 範例：主視覺區域包含標題、副標題、一個按鈕和產品預覽。功能介紹、社會證明和常見問題（FAQ）則放在下方。

6. 先設計小螢幕版本。 原因：手機版佈局會迫使你對內容進行優先級排序。能在行動版上存活下來的，就是最重要的內容，而桌面版也能從中清晰地擴展出來。 範例：先畫一個375px寬度的線框圖，裡面只有標題、按鈕和一行證明文字。然後逐步加寬，直到出現太多空白空間時，再加入下一個元素。

7. 保持主視覺區域快速加載。 原因：大約超過一秒的延遲就會讓人們感到失控，同時加載緩慢的頁面不僅會流失訪客，還會損害搜尋排名。 範例：使用一張經過壓縮的預覽圖片，不要使用自動播放的影片，也不要使用輪播圖（Slider）。

[資料來源：Inbound Marketing's Most Wanted 33 Website Design Crimes; Lead Generation Techniques for High Conversions and Great UX; The Elements of Successful UX Design; Timeless UX Design Trends: Responsive and Adaptive; Responsive Web Design Best Practices]

---

2. 行動呼籲（CTA）

1. 給登陸頁面一個目標和一個主要的行動呼籲（CTA）。 原因：每一個額外的行動都在與你想要的那個主要行動競爭。一個要求用戶觀看影片、閱讀六則推薦，然後再填寫表單的頁面，會在過程中失去他們。 範例：一個「開啟歸檔」按鈕，在頂部和底部重複出現，而其他任何東西都不要被設計成按鈕的樣子。

2. 按鈕的標籤要說明下一步會發生什麼。 原因：「提交」和「點擊此處」描述的是機制，而不是獎勵。一個「動詞+事物」的標籤能讓頁面的目標一目了然。 範例：「提交」改為「請求這個品牌」；「登入」改為「開啟歸檔」。

3. 在訪客承諾之前，先告訴他們能得到什麼。 原因：人們會問「我用我的電子郵件交換了什麼？」用文字回答它，如果可能的話，再配上結果的圖片。 範例：在一個需要解鎖的按鈕旁邊，放上一行字，例如「免費。使用Google登入。只需十秒鐘。」以及其背後歸檔內容的預覽。

4. 透過對比而非喧嘩來凸顯行動呼籲（CTA）。 原因：在一個平靜的頁面上，一個飽和度高的按鈕會吸引目光。一個與品牌形象衝突的刺眼顏色，會讓整個網站顯得廉價。 範例：保持周圍的使用者介面（UI）去飽和度，只給主要按鈕使用品牌中最強烈的顏色。

5. 只有按鈕看起來應該像按鈕。 原因：加了邊框的文字或無作用的假按鈕會浪費點擊，並教會人們不信任頁面上的其他元素。 範例：不要在「400+ 品牌」周圍加上邊框圓角標籤；直接將它設計成一個標籤或純文字。

6. 讓觸控目標夠大且間距足夠。 原因：手指比游標的精確度低。過小或過於擁擠的觸控目標會導致誤點和雙重點擊。 範例：主要按鈕至少要有44x44點的大小，並與最近連結保持清晰的距離。

7. 不要將任何重要資訊隱藏在懸浮（Hover）狀態下。 原因：觸控螢幕沒有懸浮效果。只有滑鼠滑過才會出現的資訊，對手機用戶來說是完全看不見的。 範例：將「你將獲得什麼」的提示文字直接放在按鈕下方，而不是放在工具提示（Tooltip）中。

8. 為尚未準備好的人提供一個較低門檻的選項。 原因：大部分訪客在首次訪問時，還沒有準備好執行主要行動。一個次要、承諾度較低的選項可以讓他們不至於空手而歸，但它在視覺上必須保持次要地位。 範例：在主按鈕下方，放置一個文字連結，例如「或者，當有新品牌上線時寄送郵件通知我。」

[資料來源：33 Website Design Crimes; The Elements of Successful UX Design; Designing Better UX with UI Patterns; Responsive Web Design Best Practices; Timeless UX Design Trends: Responsive and Adaptive]

---

3. 潛在客戶獲取與註冊表單

1. 只詢問你現在就會用到的資訊。 原因：每一個欄位都會降低完成率。在一項測試中，將一個11個欄位的表單縮減為4個，使註冊率提高了超過100%，且潛在客戶品質並未下降。 範例：一個「請求下一個品牌」的表單只需要品牌名稱和電子郵件。不需要姓名、公司或電話。

2. 移除會造成混淆的欄位。 原因：一個模稜兩可的欄位就可能毀掉整個表單。一個知名案例是，移除了一個人們會誤解的、非必填的「公司」欄位，結果增加了數百萬美元的收入。 範例：如果你在品牌請求表單中加入「網站」欄位，人們可能不知道你指的是他們的網站還是品牌的網站。刪除它，或者精確地標註清楚。

3. 分次收集更多資訊，而不是一次全部索取。 原因：每次訪問時詢問一點資訊（漸進式分析），比一個人們會胡亂填寫的長表單，能獲得更高的完成率和更乾淨的數據。 範例：第一次請求時只問電子郵件；稍後再寄送郵件詢問「你屬於哪個產業？」

4. 接受任何合理格式的輸入。 原因：因為你想要的是「Nike」而拒絕「Nike.com」，這是在懲罰用戶，問題出在你的解析器。應該在伺服器端清理資料。 範例：去除前後空格、移除「www.」和「.com」、進行不分大小寫的匹配。

5. 將表單放在它所解鎖的價值旁邊。 原因：一個直接放在實用內容後面的表單，其轉換率遠高於一個人們已經學會忽略的通用側邊欄方塊。 範例：將「找不到想要的品牌？在此請求」直接放在歸檔內容預覽的下方，而不是放在頁尾。

6. 在視覺上清楚區分登入和註冊。 原因：當兩種表單疊在一起時，許多新訪客會開始填錯的那一個。 範例：提供一個能處理兩種情況的「使用Google繼續」按鈕，或者兩個清晰分離的區塊。

7. 提供顯示密碼的切換按鈕和可見的「忘記密碼」連結。 原因：在手機上輸入錯誤的密碼，會促使人們去收重設密碼郵件，這會把他們帶離當下的流程。 範例：密碼欄位中有一個眼睛圖示；重設連結就在它的正下方。

8. 在頁面上用簡單明瞭的文字確認成功。 原因：人們需要知道表單已經成功送出，以及接下來會發生什麼事。 範例：「收到了。當Glossier品牌加入歸檔時，我們會發送郵件通知你。」

9. 用一句簡短的話說明你會如何處理這封電子郵件。 原因：對隱私的擔憂是人們在最後一個欄位停下來的一個常見原因。使用平實的語言比連結到法律條文更有效。 範例：「當你請求的品牌被加入時，會收到一封郵件。除非你要求，否則不會有電子報。」

[資料來源：3 Common UX Mistakes Killing Good Design; 33 Website Design Crimes; The Elements of Successful UX Design; Lead Generation Techniques for High Conversions and Great UX; Designing a Checkout Flow That Converts (form rules only)]

---

4. 社會證明與信任

1. 有真實數據時就使用它。 原因：人們對硬數據的信任度遠高於形容詞。 範例：「來自312個品牌的2,140封郵件」勝過「一個巨大的資料庫」。

2. 將每則推薦都歸屬於一個真實人物。 原因：姓名、職位和照片能讓引言更引人共鳴。匿名的引言讀起來像是編造的。 範例：「為我們的歡迎郵件系列節省了好幾個小時。」 Priya S.，一家直接面向消費者（DTC）品牌的生命週期行銷人員，並附上大頭照。

3. 低調地展示知名品牌的標誌。 原因：藉由關聯性來建立可信度是有效的，但色彩繽紛的標誌會與行動呼籲（CTA）競爭注意力。 範例：在主視覺區域下方，使用一排灰階的品牌標誌。

4. 將證明放在疑慮產生的地方。 原因：一個放在頁面中間、緊鄰其支持之主張旁邊的推薦，其效果遠勝於放在最後的一整面推薦牆。 範例：在「完整的郵件，而非縮圖」這句話之後，放上一位使用過全尺寸檢視功能的人的引言。

5. 測試社會證明，而不是假設它一定有幫助。 原因：訂閱者數量有時會降低轉換率，特別是當數字很小時。 範例：對主視覺區域進行A/B測試，比較有和沒有「加入800位行銷人員」字樣的版本。

6. 透過精緻度和誠實來贏得信任。 原因：視覺品質是人們用來判斷可信度的第一件事。錯字、壞掉的按鈕和雜亂的排版，都會被解讀為「不專業」。 範例：上線前校對所有文字、點擊每個連結。

7. 絕不使用暗黑模式（Dark Patterns）。 原因：像隱藏式的勾選同意或難以找到的取消連結這類花招，只能騙到一次，卻會永遠失去用戶。 範例：一個未勾選、標示清楚的「同時寄送我的每週摘要」方塊，絕不能使用一個隱藏在細則中、預先勾選好的方塊。

8. 提前坦誠告知費用與條款。 原因：人們喜歡早點看到價格，而後來才發現條件限制的「免費」聲明會摧毀信任。 範例：如果瀏覽是免費的，但下載需要付費，請在登陸頁面上就說明清楚，而不是在登入之後。

[資料來源：The Elements of Successful UX Design; Lead Generation Techniques for High Conversions and Great UX]

---

5. 頁面流程與結構

1. 在設計頁面之前，先規劃好路徑。 原因：如果沒有規劃好「他們下一步該做什麼」，頁面就會變成死胡同。 範例：將流程寫出來：到達頁面、閱讀標題、看到預覽、點擊「開啟歸檔」、登入、進入歸檔內部。

2. 從單一目標的登陸頁面移除主要導航。 原因：每一個導航連結都是一個離開當前提案的出口。 範例：頁首只放Logo和一個CTA，沒有「部落格 / 關於 / 定價」選單。

3. 永遠不要在真實頁面之前放置一個啟動畫面（Splash Page）。 原因：它增加了一個步驟，卻沒有告訴訪客任何有用的資訊。 範例：沒有「進入網站」的門檻。登陸頁面就是正門。

4. 讓每個頁面都以一個下一步行動作為結尾。 原因：一個只是結束的頁面，會讓訪客自己去尋找目標。如果他們在幾秒鐘內找不到要去哪裡，就會離開。 範例：常見問題（FAQ）頁面的結尾，與主視覺區域放上相同的行動呼籲（CTA）。

5. 為快速掃讀者而寫。 原因：大多數人只閱讀標題、副標題和每個段落的第一句話。 範例：短的段落、清晰的副標題、使用項目符號列表來呈現功能。

6. 分組並間隔內容以降低認知負荷。 原因：留白能提升理解力，而將相關項目分組，讓人們可以在不刪減任何內容的情況下吸收更多資訊。 範例：將功能分組為三個卡片，而不是九條鬆散的文字行。

7. 使用熟悉的模式，除非你有證據證明你的模式更好。 原因：可辨識的模式讓人們無需思考即可行動。打破這些模式會迫使學習，並導致錯誤。 範例：將登入功能放在右上角，而不是某個隱藏的手勢中。如果你想為某個模式制定規則，但需要用到「除非」或「除了」這樣的詞，那正是你該重新思考的時候。

8. 用連結背後的內容來標示連結。 原因：清晰的標籤提供了「資訊線索」。而俏皮的標籤則會隱藏它。 範例：「瀏覽品牌」，而不是「好東西」。

9. 滿足基本的無障礙設計。 原因：這對所有人來說都是好的使用者體驗（UX），包括在強烈陽光下或使用速度較慢手機的人。 範例：文字對比度至少4.5:1、內文至少16px、行高大約1.5、表單欄位有真實的標籤。

10. 刻意設計空白狀態和等待狀態。 原因：登入後出現的空白螢幕看起來像是壞掉了。一個清晰的空白或加載狀態，能告訴人們可以期待什麼，並讓他們感覺處於掌控之中。 範例：顯示「正在加載2,140封郵件...」並配上一個骨架網格，而不是一個白色頁面。

[資料來源：33 Website Design Crimes; 3 Common UX Mistakes Killing Good Design; Designing Better UX with UI Patterns; The Elements of Successful UX Design; Responsive Web Design Best Practices; Idiot Buttons: The Placebo in UX Design]

---

6. 應避免的設計錯誤

這是一個快速清單，列出了最容易搞砸一個頁面的常見錯誤。每一行都說明了應該怎麼做。

• 輪播圖和幻燈片。 很少有人會在點擊第一張後繼續點擊其他幻燈片，而且它們會拖慢頁面速度。改用一張有力的圖片。
• 自動播放的影片或聲音。 這會嚇到訪客，導致他們離開。請使用播放按鈕，讓他們自己選擇。
• 俗氣的庫存照片。 它們在一個要求你提供數據的頁面上，看起來很可疑。使用真實的產品照片。
• 一個登陸頁面上有幾個互相競爭的行動呼籲（CTA）。 選一個就好。
• 預設的「提交」按鈕。 重新命名為該動作的名稱。
• 比其價值更長的表單。 刪減到最少。
• 雜亂。 每個區塊都應該證明自己存在的價值。一直刪減到你捨不得為止。
• 文字牆。 分割成標題、短文和項目符號。
• 低對比度或極小的文字。 淺灰色字配上白色背景會導致閱讀困難。
• 與頁面內容無關的行動呼籲（CTA）。 一個與頁面內容不符的全域側邊欄優惠，轉換率會很差。讓優惠與頁面內容匹配。
• 一直在談論自己。 把「我們」換成「你」和訪客的結果。
• 直到最後一刻才考慮行動版。 行動優先設計。
• 假裝有更多選項。 「更多」連結常變成無人點擊的垃圾場。如果內容不重要，就不要放上去。如果內容重要，就把它放在頁面上。
• 表單驗證錯誤。 即時驗證，並提供有用的錯誤訊息。

[資料來源：33 Website Design Crimes; 3 Common UX Mistakes Killing Good Design; Idiot Buttons: The Placebo in UX Design]

---

7. 衡量與測試

1. 先收集基準數據，再進行任何變更。 原因：如果沒有基準，你就無法知道你改變了什麼。 範例：在改動前，先記錄目前頁面的轉換率、跳出率和平均停留時間。

2. 進行A/B測試，一次只改變一個變數。 原因：一次改變太多東西，你將無法知道是哪個改變造成了差異。 範例：測試「免費試用」與「開始使用」按鈕，而不是同時測試按鈕文字和顏色。

3. 讓測試運行到具有統計顯著性。 原因：過早結束測試會導致根據隨機波動做出錯誤決策。 範例：在判斷獲勝者之前，讓測試運行至少一到兩週，或直到達到95%的信心水準。

4. 衡量對你重要的指標。 原因：虛榮指標（如頁面瀏覽量）看起來不錯，但並不能衡量轉換。專注於與目標直接相關的指標。 範例：如果你的目標是電子郵件註冊，那麼主要指標就是註冊數量，而不是頁面瀏覽量。

5. 進行質性研究以了解「為什麼」。 原因：數據告訴你發生了什麼事，但通常無法告訴你原因。使用者訪談和可用性測試能提供數據背後的背景。 範例：如果A/B測試顯示版本B表現更好，訪談一些用戶以了解他們更喜歡版本B的原因。

6. 不要欺騙自己。 原因：很容易只看到你想看到的結果。對你的測試與結論要保持客觀和誠實。如果結果不明確，繼續測試，或承認你還沒有答案。 範例：不要在測試中偷看結果並在達到統計顯著性之前就停止它。

[資料來源：The Elements of Successful UX Design; Lead Generation Techniques for High Conversions and Great UX]

---

檢查清單

在發布登陸頁面之前，請檢查以下項目：

• 頁面是否通過五秒測試？
• 標題是否專注於訪客的結果？
• 是否有兩到三個具體的好處來支持標題？
• 是否使用了真實的產品或服務截圖？
• 主要的行動呼籲（CTA）是否只有一個？
• CTA按鈕的標籤是否說明了下一步的行動？
• 按鈕是否透過對比而非喧嘩來凸顯？
• 表單欄位數量是否保持在最低限度？
• 是否有社會證明（如推薦、客戶標誌）？
• 是否存在暗黑模式？
• 頁面是否在行動裝置上看起來良好且功能正常？
• 是否移除了不必要的導航連結？
• 所有連結和表單是否正常運作？
• 是否有清晰的下一步行動？
• 是否有衡量轉換的系統？