聯繫表格中的 UX：將潛在客戶轉化為轉化的要點
已發表: 2022-03-10你喜歡填寫表格嗎？ 我以為不是。 這不是我們想要的服務。 用戶想要的只是買票、訂酒店、購物等等。 填寫表格是他們必須處理的必要之惡。 這能描述你嗎？ 那麼，究竟是什麼影響了一個人提交表單的態度呢？
- 這可能很耗時。
- 複雜的表格通常難以理解（或者您只是不想填寫）。
- 該表格可能會要求您提供您不想分享的個人信息：信用卡詳細信息、手機號碼、家庭住址等。
表單字段實際上是用戶與服務交互的最重要工具，無論表單是做什麼用的——無論是新聞訂閱還是用於收集數據的分步表單。
在本文中，我們將看看我們公司設計實習生最常見的問題。 以下是有關如何使網站表單易於使用的常見問題解答和答案，以及防止低用戶交互的提示。
可以將表格放在兩列中嗎？
眼動追踪研究表明，單列形式優於多列形式。 為什麼這樣？ 我們向下滾動網站的方式類似於我們填寫表格的方式：從上到下，專注於內容。 具有平行列的表單很容易使用戶誤入歧途並分散他們的注意力。 為了讓用戶保持在流程中並且不中斷垂直方向，請將字段放在一個列中的另一個下方。 當然，每條規則都有其例外。 至於下面的，短的或邏輯上連續的字段（手機號碼、城市、州和區號）可以放在一行中。
如果表單的結構非常複雜（例如在線商店的結賬階段或借貸平台的註冊階段），則可以在視覺上將其劃分為語義組，並在它們之間添加空格或標題。 這會給用戶一種通過表單取得進展的感覺，而不會感到不知所措。
標籤應該放在哪裡？
標籤告訴用戶哪些信息屬於給定的表單域，它們通常位於表單域之外。 最近，標籤放置只有兩種變體：在字段上方和左對齊。 前段時間，出現了另一種選擇：設計師開始為表單設置動畫並將標籤隱藏在佔位符中。 關於什麼是顯示標籤的最佳方式存在許多爭議，但仍然沒有明確的答案。 有一點很清楚：標籤放置取決於具體情況。 讓我們仔細看看每個選項。
在字段上方放置標籤
這是最常見的標籤放置方式，並且經過 Google 的 UX 研究驗證，這是有充分理由的。 它可以更好地適應智能手機尺寸，這對於響應式標記至關重要。
左對齊標籤
如果您需要顯示更大的數據輸入字段，這可能是最佳選擇。 左對齊標籤得到更多關注，並且不會與其他字段融合。 此外，聯繫表格在垂直方向上佔用的空間更少。 但請記住，這種方法僅適用於桌面視圖； 對於移動設備，尺寸是個問題（屏幕對於左側標籤和字段來說都太窄了）。 這可能會給用戶帶來麻煩，他們可能無法在提交表單之前看到完整的輸入數據或發現輸入錯誤。 為防止提交錯誤的表單，您必須創建額外的原型以使網站對智能手機友好。
在字段內放置標籤（現場頂部對齊標籤）
放置在字段內的交互式標籤因其在填寫前的可掃描性而越來越受到 UX 設計師的歡迎。動畫可以不同，但過程是相同的：點擊帶有標籤佔位符的字段後，標籤不會消失，但向上移動到字段的頂部，為用戶輸入數據騰出空間。
這種方法的優點是顯而易見的：它節省了空間，並且動畫對用戶來說是可以理解的。 但動畫形式並不總是最好的解決方案。 這取決於表單的上下文。 如果您使用的表單字段很少（登錄或通訊框），那麼頂部對齊的標籤就不是那麼必要了，因為用戶需要回憶的信息並不多。 它在具有多個部分的複雜表單上效果更好。 儘管這種方法有好處，但也要考慮下拉選擇的外觀和適合動畫的方式。
儘管如此，交互式標籤佔位符勝過靜態標籤。 單擊該字段時，標籤向上移動，保持可見，而靜態標籤則消失。
我們可以使用佔位符文本而不是標籤嗎？
提供提示的方法有很多； 其中之一是表單字段中指令的常見實現。 不幸的是，用戶測試不斷表明表單字段中的佔位符通常對可用性的傷害大於幫助。 它們會使填寫表格的過程變得非常複雜，尤其是在表格包含十幾個字段的情況下。 消失的佔位符文本會佔用用戶的短期記憶。 它使人們難以記住某個字段中的信息，以及檢查和修復錯誤。 它還給有視覺和認知障礙的用戶帶來了額外的負擔。
正如我們所看到的，當用戶單擊字段以填充佔位符文本時，困難在於保持佔位符文本不可見。 沒有標籤，用戶在提交表單之前無法檢查他們的工作。 他們很容易忘記他們必須在當前字段中填寫哪些數據以及之前的數據是否沒有錯誤——總是存在很大的虛假信息風險。 用戶必須通過一一刪除每個字段中的文本來顯示佔位符文本，以驗證他們的輸入是否滿足描述。 實際上，許多人甚至沒有意識到錯誤的可能性，他們也不會努力複查。
此外，對於通過按 Tab 鍵在字段之間移動的用戶來說，這種方法不會很舒服，因為他們不會習慣在切換到下一個字段之前解析下一個字段中的數據。 當光標放在表單域中時消失的佔位符文本會激怒使用鍵盤導航的用戶。
儘管有這些缺點，但在某些情況下使用標籤作為佔位符是非常合適的。 例如，對於時事通訊訂閱，我們可以只填寫一個字段“電子郵件”。
如何減輕表格的認知負荷？
觀看間距
一個標籤和它的字段應該在視覺上進行分組，以免混淆用戶，以便他們可以理解哪個標籤屬於哪個字段。 此外，避免鬆散的填充，其中標籤放置在兩個字段之間的相等距離。
自動聚焦第一個輸入字段
自動對焦將用戶引導到表單的起點。 我們建議使用強調邊框顏色、背景顏色或兩者都強調第一個字段。 通過調用用戶填寫，您將加快註冊或購買。
從不使用大寫字母
用大寫字母書寫的標籤，尤其是在包含三到四個字段的表單中。 全大寫字母很難閱讀。 此外，它們看起來像是在喊叫。
按鈕是否被視為表單用戶體驗的一部分？
按鈕旨在指導用戶採取行動。 這就是為什麼按鈕設計應該始終關注識別度和清晰度。 將您的網站或應用程序視為忙碌用戶發起的對話的一部分。 該按鈕在此對話中起著至關重要的作用。
按鈕應說明要採取的行動
一個好的對話框不僅僅是詢問用戶他們想要執行的操作。 這也是為了使每個選項盡可能清晰。 這就是為什麼每個選項都有一個獨特的標籤如此重要，它可以作為“及時”的幫助，讓用戶對他們選擇正確的操作更有信心。
命名按鈕以解釋其作用，而不是使用通用標籤（如“OK”）。 BettingExpert 通過將簡單的動詞更改為號召性用語，獲得的註冊量增加了 31.54%。 盡可能使用動詞，而不是“是”或“確定”，因為您的按鈕與解釋性文本或標題無關。 請記住，您的 CTA 應反映用戶的意圖。 例如，如果是註冊，那麼顯然調用按鈕“註冊”。
將主要行動與次要行動分開
與表單相關的主要動作需要具有更強的視覺重量。 次要動作應該具有最弱的視覺權重，以最大程度地減少錯誤風險並引導人們走向成功的結果。 基本操作按鈕應該被強烈標記，同時撥下輔助操作按鈕就足夠了。
正確使用主要和次要按鈕。 如果你有兩個按鈕，一個主要的和次要的，在視覺上區分它們以減少錯誤。 鑑於它更重要，主按鈕應該看起來更明顯。
強調按鈕
在完成所有表單域之前，不要激活按鈕。 這是一個很好的解決方案，可以幫助用戶在發送前直觀地檢查他們的數據。
是否可以簡化填寫表格的過程？
添加自動填充
自動化用戶輸入通過減少他們需要填寫的字段來防止錯誤。 此外，根據谷歌的研究，自動填寫可以幫助人們更快地填寫表格 30%。 如果用戶已註冊您的服務，請在結帳階段在相關字段中自動填寫其帳戶中的數據。 此外，請考慮您可以根據區號或地理位置數據自動填充城市和地區文本字段。 不要忘記讓這些字段可供編輯，以便讓用戶進行控制。
不要忘記屏蔽輸入
這是一個自動格式化字段的插件。 這樣的解決方案非常適合日期、時間、手機號碼等。 這個插件使填寫表格變得更加容易。 用戶不會問更多問題，因為一切對他們來說都很清楚。
有創造力
使用字段長度作為答案的提示。 這對於字符數有限的字段很有意義，例如手機號碼字段、家庭地址和區號。
避免只有兩個或三個選項的下拉選擇
不要使用下拉菜單，而是使用單選按鈕來快速傳達您的信息，而不是減慢用戶的速度。 一切都必須清晰，無需額外點擊。
驗證表格
表單驗證至關重要。 區分那些發現錯誤的字段並解釋為什麼該字段沒有驗證。
此外，解釋數據及其格式的所有要求。 如果用戶的密碼必須包含六個符號，請提及這一點。 不要讓用戶猜測。 使過程方便且易於理解。
添加便利以防止密碼字段中的常見錯誤
這可能是密碼預覽或用戶在發送前檢查其數據的另一個機會。 此外，如果您的服務對密碼有一些特殊要求，請在用戶填寫字段之前通知他們。
順便說一句，在填寫密碼字段時，用戶經常會遇到一個已知問題——例如，大寫鎖定已打開——並且已經忘記了它。 我們建議您通知用戶按下大寫鎖定按鈕，以防止放棄表單以及與網站的負面關聯。
讓用戶通過社交媒體進行授權
社交登錄可能是一個非常強大的工具； 它為用戶節省了大量時間。 如果您使用社交媒體提供快速註冊，請不要忘記向人們保證其社交媒體數據的安全性並準確說明您需要哪些信息。 此外，請告知用戶您不會在未經許可的情況下使用他們的數據。 只是為了增強他們的安全感，您可以添加一個鎖定圖標。 站在用戶一邊，並註意他們的安全。
用戶的位置會影響表單的用戶體驗嗎？
是的，記住當地的差異。 如果一項服務是為兩個或更多本地市場（如美國、歐洲和亞洲）設計的，請注意它們之間的各種差異。 毫不奇怪，字段、提示、輸入等的名稱會因地區而異。
以下是一些需要注意的事項：
- 每個國家都有自己的數字格式，這就是為什麼輸入掩碼也應該有所不同。
- 美國說郵政編碼，而在歐洲，它是郵政編碼。
- 只有在美國才需要“州”字段。
結論
正如我們所看到的，設計一個好的註冊表單是很棘手的。 用戶體驗設計確實很重要。 為了改善用戶體驗，設計師需要設身處地為用戶著想。 不要冒險讓用戶失望或浪費寶貴的時間試圖弄清楚您的表單是如何工作的。 從一開始就使您的表單清晰，在空白表單域之外放置可見標籤。 表單是許多轉換目標的重要組成部分，因此請確保您的用戶能夠快速準確地完成它們。