遵循本文這10個確立已久（卻又常常被忽略）的可用性建議，可以確保你的用戶順利完成表單任務。

美國交通安全管理局（TSA）服務于航空旅客的安全。但由于飛機延誤、安檢時需在公眾場合脫衣服等原因，也遭到了很多投訴。

第一次看到TSA的投訴表單時，我甚至懷疑他們是不是故意把按鈕設計成這樣的。表單底部的兩個按鈕分別為 “預覽” 和 “清空表單”。由于用戶預期的按鈕是 “提交” 或 “下一步”，所以 “預覽” 放在這里不是特別理想。最有問題的是按鈕 “清空表單”，一旦點擊，所有鍵入的內容將會全部消失。

無論是不是故意的，這無疑會減少投訴量——因為表單設計不當造成用戶無法順利填寫下去。但這樣的設計也違背了我們15年前就確立的表單設計規(guī)范：避免使用重置鍵。

TSA的投訴表單：按鈕 “清空表單” 違反了15年前的可用性原則。 “清空表單” 放置的位置更接近輸入區(qū)，不但容易造成用戶誤點；也違反了 “UI元素與主要操作行為相臨近” 的原則。

直到最近我才發(fā)現，TSA的這兩個按鈕不是有意要設計得這么糟。因為該網站的另外一個投訴表單就設計無誤，緊隨輸入區(qū)之后的是按鈕 “提交”。因此，前者很有可能是不小心造成的。

作為一個納稅人，我并不希望政府機構會拿一個故意弄錯的設計去阻止我發(fā)表建議。但從UX角度來說，這是對UX缺乏最基本了解的體現，盡管最近幾年人人都在談UX。很多人連基本的設計原則都不知道或常常將其忽視。

細致無誤的表單對用戶的理解速度和填寫過程有很積極的影響。最近一份由Seckler和她同事發(fā)布在CHI的報告顯示，如果表單在設計過程中遵循基本的可用性原則，表單的完成時間會顯著縮短，完成率也幾乎翻倍并且完成結果正確無誤。（遵循了可用性原則的投訴表單，表單提交率高達78%；而沒有遵守可用性規(guī)范的投訴表單，提交率僅有42%。）如果你的網站用戶在表單提交時轉化率急劇下降，那么這篇文章將對你會有很大幫助：表單如果存在可用性問題，會對業(yè)務層產生不利影響。
表單設計的原則

表單設計與很多因素有關：表單的長度、所在場景、及相關數據。誠然，需求不同，對表單的處理方法也不盡相同，但忽視表單可用性無論如何都是難咎其責的。所以，請仔細閱讀以下原則，用它們指導你的設計工作。如果非要違背它們，請給出有說服力的理由。

1. 表單要簡短

數學家Blaise Pascal有句名言：“I have made this longer than usual because I have not had time to make it shorter.” 這句名言同樣適用于網站設計，以及詩歌創(chuàng)作。刪掉不必要的字段需要花費很多思考時間，但這能減少用戶完成表單耗費的精力、提高表單提交率。被去掉的哪些字段所要傳遞的信息：a.可以讓用戶通過其他方式獲取、b.后續(xù)獲取會更方便、c.可以直接忽略。表單中每一個字段的刪除，都會提高表單與用戶之間的對話效率。

2. 將有關聯的標注和字段在視覺上進行分組

標注要緊隨其要需描述的字段（通常，移動端表單字段較短，標注位于上方；PC中常位于字段的旁邊）。為避免留白混亂影響組織結構，字段和其標注之間要等距擺放。如果你的表單含兩組不同話題的字段，那么將它們區(qū)分開。

3. 將所有字段排成一列

多列布局會打斷用戶自上而下的閱讀習慣。與其讓用戶在多列字段中調整閱讀習慣，不如僅做成一列，然后根據字段的語義關系進行組織，比如在不同語義組的字段之間使用分割線。（特例：非常短、或者邏輯上緊密關聯的字段如“城市”、“國家”、“郵政編碼”可以放在同一行。）

4. 通過邏輯定序

無論是表單字段（如“信用卡卡號”、“到期時間”、“安全碼”）還是字段對應的選擇值（如“普通配送”、“1日達”、“2日達”）都要按邏輯順序嚴格排列。此外，選擇值的排序還要考慮使用頻率，盡可能列出用戶最常用的選項、并按使用頻率由高到低排列。PC端最好通過Tab鍵一個一個測試表單的順序是否正確。

星巴克iPhone客戶端通過水平移動表單幫助用戶選擇Decaf類型。遺憾的是選擇值“Full Decaf”被隱藏起來了，必須水平滑動才可顯示。如果“Full Decaf”是高頻選項，那么它最好出現在左側第一個位置。

5. 避免占位文本

（譯者提示：占位文本指當一個文本框沒有被光標聚焦的時候顯示的是提示文字，當光標聚焦、即點擊之后顯示的是空白。）有些設計師喜歡使用占位文本，因為它可以緩解由于元素過多而引起的視覺雜亂問題。但是占位文本存在很多可用性問題（譯者提示：如文本消失后會挑戰(zhàn)用戶的短期記憶、進而錯誤反饋時不知錯所，有用戶把文本誤以為是默認填寫的數據，還有部分用戶會嘗試手動去刪除文本等等），盡量不要使用（欲了解更多，可查閱文章：Placeholders in Form Fields Are Harmful）。

6. 輸入框要與輸入內容的類型和大小匹配

如果選擇值只有2-3個，盡量避免使用下拉框，可以把它們設置成單選。輸入框的長度要與用戶的心理預期保持一致，要不然輸入框太短、用戶看不到全部輸入內容就會容易輸錯。UX大會2130位參與者的所住城市名大多在3個字符（如 Leo, Indianna）到22個字符（如San Pedro Garza Garcia, Mexico）不等。99.9%用戶的城市名含19個字符或更短，所以19個字符的寬度是字段“城市”的最佳填寫寬度。

7. 區(qū)分選填字段和必填字段

首先，選填字段越少越好（請參考第一條原則）。若該字段確定不可刪除、且只適合部分用戶，則不要讓用戶在反復驗證后才弄明白它該怎么處置。一個表單最好只設置1-2個選填項，同時要清晰地將“選填”二字標注出來。

8. 給出輸入要求或格式規(guī)范

如果需要輸入某種特殊格式，請給出具體要求。不要讓用戶對你含糊不清的密碼輸入要求進行猜測。這一原則也同樣適用于句法格式，如電話號碼或信用卡卡號等的標點符號的使用、空格的使用。

9. 避免重置按鈕和清空表單按鈕

一不小心誤點，就得重頭再來，用戶之前的所有付出頃刻白費。如果表單中含用戶財務信息之類的敏感字段，可以提供一個“取消”按鈕，讓用戶自行決定是否放棄表單填寫。但要注意的是 “取消” 按鈕在視覺上要比 “提交” 按鈕弱一些，以避免發(fā)生誤點。

10. 提供高亮且精準的錯誤反饋

用戶犯的錯誤不僅要有顏色提示，還要有文字提示。比如，用戶漏掉了字段AND內容的輸入，將AND加紅加粗，防止用戶再將它忽視。

輸錯的信息要讓用戶看到，同時給出錯誤原因，這樣用戶會知道自己犯的是什么錯、以及怎樣改正。

總結

表單的可用性設計絕不是什么新話題。很多可用性設計原則中都有相關介紹，如NN/g的通用可用性指導規(guī)范、眼動可用性研究、移動端可用性研究等。電商網站購物車的114個UX指導原則中也有詳細介紹。此外還有表單設計的相關書籍、學術報告等也對其有專業(yè)說明。

本文的10個建議并不是要徹底取代表單設計的其他專業(yè)性介紹。如果你對表單設計有很濃厚的興趣，多處理一些不同場景的復雜的表單會對你的能力提升有很大幫助。

但很多設計不當的表單并非是出于復雜，僅僅是違背我們上面談到的某個或 某幾個原則。希望你在日后的表單設計過程中，不會犯上述錯誤。

原文鏈接：Website Forms Usability: Top 10 Recommendations

譯者@小媛

來源@簡書

本文由 @小媛 授權發(fā)布于人人都是產品經理 ，未經許可，禁止轉載。