表單對于企業和個人同樣至關重要，當涉及到數據收集時，我們大多數情況下會采用表單(或許是因為在互聯網繁榮之前我們就已經在線下使用了很久的表單)。因此，創建一個用戶友好型表單對表單的填寫效率至關重要。
表單解析
表單的目的、內容、大小雖然各不相同，但是有一些基本的元素助我們輕松地填寫。
Amazon創建賬戶表單解析
(1)標題
這個元素幫助用戶引導完成表單填寫的整個過程，尤其當你收集的數據不止有一個標題的時候，它特別有用。例如：個人資料、職業詳情、財務明細。
(2)標簽
標簽告訴用戶在任何特定的輸入區域期望他們填寫什么內容。
(3)占位符
占位符是對標簽進行額外的信息描述。
(4)錯誤信息提示
錯誤信息提示給予用戶錯誤反饋，提醒用戶為什么填錯了。
(5)動作按鈕
動作按鈕是在表單的結尾，有個確認提交的動作控件。
表單狀態
基本上，表單在用戶的交互過程中需要經歷三個階段：
(1)默認狀態
用戶在未進行任何操作前表單的狀態。
(2)聚焦狀態
這個狀態強調用戶正在填寫的區域，幫助用戶聚焦和減少反復掃描屏幕的時間。
(3)反饋狀態
反饋狀態是指用戶收到的反饋時的頁面狀態(大多數是指錯誤信息反饋)。有時候，這個狀態出現在用戶在完成了一個輸入框的錄入后把焦點移動到下個輸入框。當然了，如果數據不能得到立即驗證的話，就要等到用戶點擊提交按鈕后再給予反饋提示。
Amazon創建賬戶表單的“默認、聚焦、反饋”頁面狀態
最佳實踐
(1)保持簡潔
讓你的表單保持簡短精煉，只保留最有必要的數據，避免以驗證的名義讓用戶重復輸入，例如不要重復密碼字段，取而代之的是要讓用戶直接看到他們輸入的密碼。
(2)使用及時驗證
當給予用戶輸入進行報錯時，最好將反饋定位到具體位置。
Facebook和Amazon采用了兩種不同的驗證反饋方式
(3)將相近的字段打組
將相近的字段打組和按標準序列排序是非常重要的。這樣的話可以幫助用戶減少認知負荷和注意力消耗。
付款頁面相近的功能區域被適當地分組
(3)將標簽左對齊
要將標簽放置到輸入框上面(像上面所解析的Amazon的表單一樣)。不要把占位符文字作為輸入框的標簽，那樣的話用戶輸入完成后將看不到標簽，用戶將很難對已輸入的內容做最終的核對，會讓他們思考很多。
始終將標簽放置在輸入框上面并左對齊，有一個很全面的研究報告來說明這是高效率的做法：https://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php
Flutterwave’sRave的登錄頁面，輸入區域的尺寸與預期的輸入字段的長度比例一致。
payporte的輸入區域與預期的輸入字段的長度比例不匹配
(6)CTA(calltoaction)按鈕
在表單的末尾通常會有個確認按鈕或者下一步按鈕，在有些場景下，必須有一個以上的按鈕。要強調主要的按鈕，弱化次要按鈕。
Amazon的主要次要按鈕處理的很好
當運用模態彈窗進行信息收集時(表單在模態彈窗上)，那么次要按鈕有時候就是關閉按鈕，另一種弱化它的方法就是使用Xicon代替關閉按鈕，如下所示。
Medium的登錄模態彈窗使用Xicon來代表關閉按鈕
(7)搜索區域
不要隱藏你的搜索框，特別是你的網站內有大量內容時，搜索或許是最好的選擇。
Amazon的的搜索框特別的顯眼
當用戶執行了搜索操作后并顯示了搜索結果，不要立即清除搜索框內的內容，以便讓可以用戶很容易地去回顧他起初所搜索的內容。
Medium沒有清除搜索后的輸入內容
(8)清晰
給用戶傳達清楚的信息，給予他們所預期的，不要模棱兩可。沒有人喜歡填寫表單，沒有人愿意填寫兩遍。
Cowrywise的標簽內容非常的清晰，甚至按鈕的文字都描述的很好。
這里所有的例子既不是為了打廣告，也不是為了鄙視某個產品的設計。這僅用于學習。
原文作者：MomohSilm
譯者：孫夢超，交互設計師
本文由@孫夢超授權發布，未經作者許可，禁止轉載。
題圖來自Pexels，基于CC0協議
更多關于云服務器，域名注冊，虛擬主機的問題，請訪問三五互聯官網：m.shinetop.cn