你知道如何設計出用戶友好型表單嗎？你知道其中需要掌握什麼技巧嗎？筆者將為你仔細介紹其中的要點。
在開始這篇譯文之前，先普及下什麼是表單。表單在網頁或 app 中主要負責數據採集的功能。也就是說，大部分起到了數據採集功能的模塊，我們都可以稱其為表單。
表單作為平臺與用戶聯繫最為緊密的一環，也是影響商業交易成功與否的重要分水嶺。那麼在設計過程中，需要怎樣規避風險，提升表單頁面的產品體驗呢？作者會從幾個案例具體分析，歸納了11個表單設計中的常見注意事項。當然，這些規則都是在表單設計中的一般準則，每條準則都有例外。
表單的構成要件：標題、標籤、輸入欄位、幫助提示、佔位符、反饋、操作。
亞馬遜的註冊頁面
1 保持簡短
沒有用戶會喜歡填寫很長的表單，我知道花一些時間來詢問每個欄位是否對於用戶實現其目標是必要的，這需要很多時間，但是相信我，減少用戶填寫的工作量將會使更多用戶填寫表單。
譯者註：必要而不是全部，簡化表單，或許是優化表單的最大建議。簡化的辦法之一就是追溯每個欄位為什麼需要，是否是當前最相關的信息，如果它是可選的，最好不要顯示。
ASOS的註冊步驟沒有必要這麼長，它包括了很多多餘的欄位
2 可視化組欄位及其標籤
標籤需要緊密挨著輸入框，利用空白分割上下的距離，尤其是標籤的位置在輸入框的上邊。
一定要緊密將標籤與輸入框組合在一起，因為人們潛意識中會認為緊密聯繫的組合是一個整體—格式塔原理。
譯者註：標籤告訴用戶需要輸入什麼。這裡作者強調了位於輸入欄位頂部的標籤要緊密挨著輸入欄位，牢記設計中的格式塔原理。
亞馬遜註冊頁面，充分利用了空白讓上下的輸入框分割從而更容易瀏覽
3 清楚地顯示你的要求
告訴用戶你們需要什麼，不要等到用戶填完表單之後才反饋錯誤信息，這是一種非常不友好的負面強化形式。如果不明確提示用戶怎麼填，用戶將不知道他填寫的內容是否正確，這尤其適用於「密碼」欄位，因為不同的產品有不同的要求。
譯者註：幫助提示在表單中是必不可少的組成部分。作用在於說明要求，解釋原因。根據產品的不同需求，存在的形式有2種：
常駐（比如密碼要求可以一直顯示在頁面中）按需提供（針對部分用戶的低頻需求，比如對欄位的解釋，滑鼠懸停在幫助圖標上才顯示說明）
這種提示不僅降低了用戶填錯密碼格式的概率，而且為用戶創建新帳戶提供了積極的動力
4 避免使用佔位符文本作為欄位標籤
佔位符，標籤的額外描述，幫助用戶了解可輸入的數據類型和格式提示，但是有一些設計師卻用佔位符替代了欄位標籤，從而使得整體看起來更簡約。
這樣做的問題是，一旦用戶輸入欄位交互，佔位符文本就會消失，如果用戶忘記了欄位的用途，必須在其外部單擊以再次查看佔位符，這可能會很煩人。
谷歌使用智能微交互來克服這個問題，當用戶點擊輸入框的時候，佔位符文本會縮小到左上角變成小標籤。
譯者註：以上谷歌的註冊頁面的標籤形式即「內聯標籤」，多數情況下謹慎使用內聯標籤，在用戶輸入後，內聯標籤會消失，用戶無法判斷輸入的內容是否符合。不過在用戶熟悉且簡單的欄位下可採用，比如登錄表單只有帳號和密碼。針對以上問題，可以採用內聯浮動標籤。即作者列舉的谷歌註冊頁面的例子。
5 使用自動對焦
當進入表單頁面，自動對焦第一個輸入欄位可以引導用戶開始進行輸入，我非常喜歡它，因為我只需鍵入，制表，鍵入，制表和完成。雖然它只為我節省了一次額外的點擊，但它確實以一種微妙的方式增強了整體體驗。
當允許表單自動對焦時，還要突出顯示活動的欄位以通知用戶第一個欄位已被選中，並且可以填寫它。
6 突出顯示活動欄位
這通常通過改變邊框顏色和大小來完成，以提供更強的視覺提示。確保所選欄位的顏色從表單的其餘部分突出，下意識地幫助用戶專注於活動欄位。同樣的概念也可用於錯誤反饋，如果出現錯誤，通常文本欄位將以紅色突出顯示。
通過突出顯示活動欄位，讓用戶更容易聚焦它
7 告知用戶大寫鎖定已開啟
這是一個非常簡單的功能，但很多產品沒有實現它。有時我沒有意識到大寫鎖定已經開啟，並且在我不斷被提示輸入錯誤時感到沮喪。最糟糕的是，錯誤消息甚至沒有提示我大寫鎖定已打開，它只是一直說我的密碼錯誤。這對用戶來說真的很煩人。
蘋果系統很好地通過告知用戶大寫鎖定已開啟
8 使用欄位視覺約束
欄位視覺約束有助於強化用戶所需的信息。例如，如果「日期/月」欄位只需要兩個字符，則不需要它與「名稱」欄位的輸入框一樣長，否則可能會導致用戶混淆。
Invision根據所需信息提供不同的欄位長度
9 不要隱藏你的錯誤信息
一些設計將錯誤信息隱藏起來。通過在輸入框末端顯示警報圖標，讓用戶將滑鼠懸停在圖標上時，才會顯示錯誤消息。這是非常糟糕的用戶體驗，因為它需要用戶更多一步的操作才知道他錯在哪裡。有些用戶可能甚至不知道他們需要採取額外步驟（將滑鼠懸停在圖標上）以查看錯誤消息。
譯者註：我們不僅僅需要視覺上的區別（請考慮色盲用戶），還需要文字說明並告知原因和解決辦法，而不是簡單的「輸入錯誤」。
在輸入框的底部顯示錯誤消息不是更好嗎？
10 明確區分可選填欄位
如果您忽略了第一個提示（保持表單簡短），並使用了可選填欄位，請確保它們明確標記為可選填。它將提供更強的視覺提示，在標籤後邊標明（可選填），而不是僅使用星號。有些用戶可能也不理解星號的含義，因為它有時用於表示驗證錯誤。
譯者註：如上所述，儘量避免可填欄位。如果不可避免，應該做明確區分。根據經驗，可填和必填的數量少的做標記說明。
常規做法：必填，使用「*」星號符；可填，使用「選填」
11 使用圖片來增加用戶參與度
如果有意義，請使用圖像作為選項，改善用戶體驗。利用圖標或者圖像和文本進行組合，有時候可以更好地解釋每個選項。
谷歌廣告使用圖片來描繪廣告系列類型
12 儘可能使用預測搜索
這主要適用於要求用戶輸入具有許多預定義選項的信息，例如他們的假日目的地。允許用戶只輸入幾個字母來查找他們的目的地城市，而不是輸入整個名稱。
它還降低了搜索失敗的機率，因為用戶不太可能拼錯他們的搜索詞。
愛彼迎用了搜索預測幫助用戶更快捷地尋找到他們的假期目的地
總結
我知道設計一個表單可能是一個無聊的過程，大多數用戶總是不喜歡填寫他們。但是遵循上述指南，可以很好地提升用戶的體驗。
這樣做無疑可以提高用戶填寫的完成率。作為UX設計師，這也是你的目標之一。
原文作者：JeremiahLam
原文地址：https://uxdesign.cc/11-form-design-guidelines-4b2f1c659414
本文由 @許忙忙 翻譯發布於人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基於CC0協議