在下面的這篇文章中，我們來看看有助於你設計不同可用性表單的10個最佳實踐，希望它對設計人員和開發人員都有用，玩得開心。
好吧，讓我們開始吧！
「表單」是什麼意思，它在哪裡使用？
通常，表單是一個帶有標籤和欄位的框，其中包含一個號召性用語按鈕。
以下是網站和應用程式的許多部分中使用的表單的一些示例：
登錄/註冊採購訂單門票預訂房間預訂付款結帳通訊訂閱諮詢/審計請求捐贈調查自定義表格……
那麼，如何設計一個用戶友好的表單？
一般來說，表單設計為用戶端隱藏了許多困難和痛苦的地方。因此，有必要設計一個用戶友好的表單。
讓我們從討論表單設計的兩個主要規則開始：
首先，表單設計的最佳實踐是做用戶測試，永遠不要忽視用戶的意見，即使你不同意。
進行用戶測試有助於找出生活中的小竅門，比如測量與表單交互的時間、檢測痛點、觀察用戶如何使用界面、他在哪裡卡住或找不到必要的元素等等。
執行這些活動可以幫助初學者避免表單世界中最大的和無知的錯誤。
技巧1：單列布局
避免曲折界面空間布局。通過眼動追蹤測試可以看出，用戶花費更多時間從一列跳到另一列，並且在確定表單中的特定欄位時遇到了麻煩。
與此相反，單列設計只是從上到下的讀取，它創建了與表單的簡單交互。
具有多列設計的表單通常會導致用戶省略欄位，原因很簡單，因為他們沒有注意到這些欄位，或者因為他們誤解了多列的含義，或者填寫了不相關或不正確的欄位，因為用戶將它們誤解為所需輸入的一部分。
單列設計更有效
技巧2：完成和對齊的路徑
巴塞爾大學的研究人員發現，左對齊優於中心對齊是減少完成時間路徑的最佳方法，如左對齊，眼睛不需要跳過頁面。
標籤的正確對齊方式將注視時間減少了近一半，這表明這種布局大大降低了用戶完成任務所需的認知負荷。
曲折的定位需要更多的時間來完成
技巧3：對長表單和進度條使用嚮導
當你需要設計大數據表單時，確保表單中的所有欄位都是真正必要的、唯一的、不重複的。即使您沒有機會優化您的大數據表單，也可以使用帶有步驟的嚮導。
很簡單：
分段上的組表單欄位；記住保存按鈕:它保護用戶處理和填充的數據；分步顯示填充進度:幫助用戶了解完成了多少步，還剩下多少步。
嚮導和進度條使複雜的表單變得清晰
技巧4：不要忘記將相關信息分組
分組形式看起來有組織，整齊和清晰。因此，將相關信息以長格式分組到標題或分隔符下。
為什麼要將相關信息分組?
假設，用戶在填寫表單時想要更改任何特定欄位中的內容，突然覺得需要更改任何欄位。在這種情況下，分組將幫助用戶快速記住必要欄位出現在哪個部分。
相關內容成組
技巧5：可選而不是必需的
大多數情況下，所有欄位都是必填項，只有幾個欄位是可選的。用星號標記必填欄位是一種廣泛的實踐，但實際上這種形式開始用紅色星號表示。
順便說一句，紅色會從用戶方面引起負面關聯，因為紅色只用於錯誤。
在我的經驗中，有一次在測試原型時，用戶問我星號是什麼意思？它是書中的標籤還是描述中的標籤?
奇怪，不是嗎?我們看到星號並不適合所有類型的用戶。
為了避免這種誤解，最好使用「僅可選欄位」。
對於非必需欄位使用可選標籤
技巧6：使用自動完成功能
用戶很懶，這是事實。
所以，當你有機會讓自己的生活更簡單時，他們會很感激。自動填充/自動填充使表單完成速度提高30％。因此，分析可以自動填充/自動填充的表單元素。
為了給您一個想法，可以自動完成城市，國家，電話，電子郵件等元素。
自動完成功能可以簡化用戶的生活
技巧7：自定義輸入格式
注意輸入欄位格式。在任何地方只使用簡單的輸入或下拉框都是不好的做法。
欄位類型是否更多並不重要，用戶喜歡數據欄位的不同表示形式。
表示吸引人的信息的最簡單方法是：
為性別類型使用單選按鈕，不要害怕使用圖標；金融領域使用帶有貨幣文字的標籤，自動區分千萬和百萬；設計手機號碼、工作日、日期等明顯欄位；使用帶有自動提示功能的高級搜索，避免用戶手工填寫許多欄位。
嘗試對數據欄位進行不同的修改
此外，永遠不要忘記關於輸入格式的規則：
欄位的長度提供答案的長度；電子郵件欄位驗證；儘可能多地預填充/自動檢測；最小/最大長度；數字、字母、字母數字，所有符號；依賴性；佔位符。
技巧8：CTA（call to action）風格規則
用戶不應該花很多時間去弄清楚應該使用哪個按鈕來執行一個操作。例如:這個按鈕是用於提交表單還是丟棄表單?
因此，確保在表單中正確定義和區分主按鈕和輔助按鈕。
你可以簡單地使用不同的顏色。避免主按鈕和輔助按鈕使用相同的顏色，因為它們會誤導用戶，或者使用對比色來區分它們。
在主按鈕和輔助按鈕之間進行分隔
技巧9：CTA縮微
為CTA按鈕使用簡短而清晰的名稱。這個按鈕的主要目的是吸引用戶的注意，並讓他們採取必要的行動。當它簡短而清晰時，閱讀的時間就會減少，完成的時間也會減少。
簡短意味著清晰
技巧10：使用內聯表單欄位驗證
永遠不要忽視表單驗證的設計!不要把它放在開發人員的肩上。它是各種形式功能中最重要的部分。
作為設計人員，你必須為不同類型的錯誤狀態準備文本和視圖、幫助文本以及其他與用戶通信的方法。花時間驗證微縮本。如果沒有為每種類型的錯誤準備文本的資源，請考慮全局錯誤副本。
圖片來源：網絡
永遠記住，當你為錯誤消息準備一個文本列表時，永遠不要因為用戶的錯誤而責怪他。相反，要確保你傳達的信息是清晰的、切題的。
重點是，用戶數據需要實時驗證。不要讓您的用戶填寫所有欄位，然後單擊submit按鈕以了解有什麼地方出錯了。
不要強迫用戶找出錯誤
總結
為了使您的表單設計更加出色，讓我們避免以下內容：
複雜的消息；提交後進行全局驗證；欄位的長標題；CTA按鈕的長名稱；未分組信息；丟棄自我暗示/自動完成；一頁無止盡的欄位；對所有內容使用一種輸入格式；容易忽視(色盲)；採用多欄設計；在欄位中使用標籤而不是佔位符；容易混淆完成路徑；避免用戶測試；不要使用建議和指南。所以，繼續考慮你的新表單設計，並祝你好運！
作者：Chris，公眾號（ID：LDesign1）
本文由@Chris 原創發布於人人都是產品經理，未經許可，禁止轉載
題圖來自Unsplash， 基於CC0協議