作者：KATHRYN WHITENTON ? ?2016-5-1 ? ?發(fā)表于NN/g ? ?譯者：小媛
摘要：遵循本文這10個確立已久（卻又常常被忽略）的可用性建議，可以確保你的用戶順利完成表單任務该肴。
美國交通安全管理局（TSA）服務于航空旅客的安全。但由于飛機延誤奸攻、安檢時需在公眾場合脫衣服等原因，也遭到了很多投訴。
第一次看到TSA的投訴表單時谷朝，我甚至懷疑他們是不是故意把按鈕設計成這樣的斜姥。表單底部的兩個按鈕分別為 “預覽” 和 “清空表單”鸿竖。由于用戶預期的按鈕是 “提交” 或 “下一步”，所以 “預覽” 放在這里不是特別理想铸敏。最有問題的是按鈕 “清空表單”缚忧，一旦點擊，所有鍵入的內容將會全部消失杈笔。
無論是不是故意的闪水，這無疑會減少投訴量——因為表單設計不當造成用戶無法順利填寫下去。但這樣的設計也違背了我們15年前就確立的表單設計規(guī)范：避免使用重置鍵蒙具。
直到最近我才發(fā)現(xiàn)鞠呈，TSA的這兩個按鈕不是有意要設計得這么糟。因為該網(wǎng)站的另外一個投訴表單就設計無誤右钾，緊隨輸入?yún)^(qū)之后的是按鈕 “提交”蚁吝。因此，前者很有可能是不小心造成的舀射。
作為一個納稅人窘茁，我并不希望政府機構會拿一個故意弄錯的設計去阻止我發(fā)表建議。但從UX角度來說脆烟，這是對UX缺乏最基本了解的體現(xiàn)山林，盡管最近幾年人人都在談UX。很多人連基本的設計原則都不知道或常常將其忽視邢羔。
細致無誤的表單對用戶的理解速度和填寫過程有很積極的影響驼抹。最近一份由Seckler和她同事發(fā)布在CHI的報告顯示，如果表單在設計過程中遵循基本的可用性原則拜鹤，表單的完成時間會顯著縮短框冀，完成率也幾乎翻倍并且完成結果正確無誤。（遵循了可用性原則的投訴表單敏簿，表單提交率高達78%明也；而沒有遵守可用性規(guī)范的投訴表單，提交率僅有42%惯裕。）如果你的網(wǎng)站用戶在表單提交時轉化率急劇下降温数，那么這篇文章將對你會有很大幫助：表單如果存在可用性問題，會對業(yè)務層產(chǎn)生不利影響蜻势。
表單設計的原則
表單設計與很多因素有關：表單的長度撑刺、所在場景、及相關數(shù)據(jù)咙边。誠然猜煮，需求不同，對表單的處理方法也不盡相同败许，但忽視表單可用性無論如何都是難咎其責的。所以淑蔚，請仔細閱讀以下原則市殷，用它們指導你的設計工作。如果非要違背它們刹衫，請給出有說服力的理由醋寝。
1. 表單要簡短搞挣。數(shù)學家Blaise Pascal有句名言：“I have made this longer than usual because I have not had time to make it shorter.” 這句名言同樣適用于網(wǎng)站設計，以及詩歌創(chuàng)作音羞。刪掉不必要的字段需要花費很多思考時間囱桨，但這能減少用戶完成表單耗費的精力、提高表單提交率嗅绰。被去掉的哪些字段所要傳遞的信息：a.可以讓用戶通過其他方式獲取舍肠、b.后續(xù)獲取會更方便、c.可以直接忽略窘面。表單中每一個字段的刪除翠语，都會提高表單與用戶之間的對話效率。
2. 將有關聯(lián)的標注和字段在視覺上進行分組财边。標注要緊隨其要需描述的字段（通常肌括，移動端表單字段較短，標注位于上方酣难；PC中常位于字段的旁邊）谍夭。為避免留白混亂影響組織結構，字段和其標注之間要等距擺放憨募。如果你的表單含兩組不同話題的字段慧库，那么將它們區(qū)分開。
3. 將所有字段排成一列馋嗜。多列布局會打斷用戶自上而下的閱讀習慣齐板。與其讓用戶在多列字段中調整閱讀習慣，不如僅做成一列葛菇，然后根據(jù)字段的語義關系進行組織甘磨，比如在不同語義組的字段之間使用分割線。（特例：非常短眯停、或者邏輯上緊密關聯(lián)的字段如“城市”济舆、“國家”、“郵政編碼”可以放在同一行莺债。）
4. 通過邏輯定序滋觉。無論是表單字段（如“信用卡卡號”、“到期時間”齐邦、“安全碼”）還是字段對應的選擇值（如“普通配送”椎侠、“1日達”、“2日達”）都要按邏輯順序嚴格排列措拇。此外我纪，選擇值的排序還要考慮使用頻率，盡可能列出用戶最常用的選項、并按使用頻率由高到低排列浅悉。PC端最好通過Tab鍵一個一個測試表單的順序是否正確趟据。
5. 避免占位文本咳促。（譯者提示：占位文本指當一個文本框沒有被光標聚焦的時候顯示的是提示文字，當光標聚焦泼舱、即點擊之后顯示的是空白等缀。）有些設計師喜歡使用占位文本，因為它可以緩解由于元素過多而引起的視覺雜亂問題娇昙。但是占位文本存在很多可用性問題（譯者提示：如文本消失后會挑戰(zhàn)用戶的短期記憶尺迂、進而錯誤反饋時不知錯所，有用戶把文本誤以為是默認填寫的數(shù)據(jù)冒掌，還有部分用戶會嘗試手動去刪除文本等等）噪裕，盡量不要使用（欲了解更多，可查閱文章：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ī)范、眼動可用性研究户誓、移動端可用性研究等饼灿。電商網(wǎng)站購物車的114個UX指導原則中也有詳細介紹。此外還有表單設計的相關書籍帝美、學術報告等也對其有專業(yè)說明碍彭。
本文的10個建議并不是要徹底取代表單設計的其他專業(yè)性介紹。如果你對表單設計有很濃厚的興趣，多處理一些不同場景的復雜的表單會對你的能力提升有很大幫助庇忌。
但很多設計不當?shù)谋韱尾⒎鞘浅鲇趶碗s舞箍，僅僅是違背我們上面談到的某個或某幾個原則。希望你在日后的表單設計過程中皆疹，不會犯上述錯誤疏橄。
譯者簡介：
小媛
互聯(lián)網(wǎng)從業(yè)者，熱衷于用戶體驗略就、交互設計和服務設計
若有轉載需求捎迫，請與我聯(lián)系；轉載時請標明簡書出處
