原文：https://www.nngroup.com/articles/web-form-design/
本文由【咚門】翻譯，未經(jīng)允許，請(qǐng)勿轉(zhuǎn)載。
摘要：遵守這些已經(jīng)為大家所接受但又常常被忽視的準(zhǔn)則以確保用戶能夠順利地填寫你的網(wǎng)站表單。
運(yùn)輸安全管理（TSA）有助于保障飛機(jī)乘客的安全。但很多人也一定會(huì)因?yàn)楸谎诱`或被迫在公共場(chǎng)合脫掉衣服而被惹惱，相信你也預(yù)期到 TSA 收到了相當(dāng)多的投訴了吧。
因此當(dāng)我第一次看到 TSA 網(wǎng)站的投訴表單時(shí)，它們的設(shè)計(jì)失誤是如此的明顯以至于我懷疑這是不是故意的。表單的底部有兩個(gè)按鈕：“預(yù)覽”和“清空表單”?！邦A(yù)覽”按鈕不是太理想，因?yàn)楹芏嘤脩粝Ｍ@是一個(gè)“提交 ”按鈕或者至少是一個(gè)“下一步”按鈕。但真正的問題是“清空表單”按鈕，這個(gè)按鈕實(shí)際上會(huì)刪掉用戶輸入到表單里的所有信息。
無論是不是故意的，這樣的設(shè)計(jì)無疑會(huì)減少投訴量（譯者注：這里帶有嘲諷的意味）！不管怎樣，這也違反了我們15年以前寫的表單設(shè)計(jì)指南：在網(wǎng)頁表單中避免使用“重置”按鈕。
我最近斷定這個(gè)表單的設(shè)計(jì)不是故意使壞的（wasnot intentionally bad），因?yàn)?TSA 實(shí)際上有一個(gè)正確地使用了單個(gè)“提交”按鈕的投訴表單。既然有一個(gè)表單遵循了表單設(shè)計(jì)原則，很可能另一個(gè)差勁的設(shè)計(jì)只是偶然。
作為納稅人，很欣慰了解到我的政府機(jī)構(gòu)并非是故意采用糟糕的設(shè)計(jì)來回避聽取我的批評(píng)（avoid hearing my comments ）。但是從 用戶體驗(yàn)（UX ） 的角度來看，這是一個(gè)痛苦的提醒，雖有近幾年“用戶體驗(yàn)（UX）”的躁動(dòng)和普及（the buzz and popularity of “UX” ），對(duì)可用性的基本理解往往依舊缺乏。即使是一些本來很容易理解的簡(jiǎn)單原則也往往不為人所知或者被忽視。
細(xì)心的表單設(shè)計(jì)對(duì) 用戶理解和正確無誤地填寫一張表單的速度 產(chǎn)生巨大的影響。其實(shí)，Seckler 和她的同事們發(fā)表在 CHI 上的最新一篇論文表明，當(dāng)表單遵循基本的可用性原則時(shí)，填寫表單所用的時(shí)間（the completion time ）顯著地減少并且將近兩倍的用戶可能第一次就能夠正確無誤地提交表單（在遵循可用性原則的表單中，78% 用戶一次性通過提交；與之相對(duì)的是，在違反了可用性原則的表單中，42% 用戶一次性通過提交）。如果你想知道為什么你的轉(zhuǎn)換渠道在表單頁面出現(xiàn)了大陡降（has big drop-offs ），這個(gè)研究可以給你一個(gè)解答的線索：表單的可用性問題真的影響業(yè)務(wù)（hurt business ）。
你的網(wǎng)站表單遵循可用性最佳實(shí)踐嗎？
網(wǎng)頁表單設(shè)計(jì)的最佳實(shí)踐
任何給定表單的 最佳設(shè)計(jì)方案依賴于很多因素：表單長(zhǎng)度，使用場(chǎng)景（the context of use ）和收集的數(shù)據(jù)。雖然某些情況下你應(yīng)該采用的具體措施可能有所不同（The exact implementation you should use may vary in certain circumstances ），但這不是忽視所有可用性知道原則的接口。
1. 保持簡(jiǎn)短（Keep it short）。數(shù)學(xué)家帕斯卡（Blaise Pascal ）說過一句名言：“I have made this longer than usual because I have not had time to make it shorter?！边@一原則適用于網(wǎng)頁表單和散文創(chuàng)作。雖然排除不必要的字段會(huì)更費(fèi)時(shí)，但是節(jié)省下來的用戶工作量和提升的表單完成率 使得你花費(fèi)的時(shí)間物有所值。有一些字段是應(yīng)該被移除的，這些字段收集的信息通常具有以下特點(diǎn)：（a）可以從其它渠道獲取，（b）稍后能夠更方便地收集，或者（c）簡(jiǎn)單地省略。（我們最近把這項(xiàng)技術(shù)應(yīng)用到我們自己其中之一的表單中，并且把這個(gè)表單從6個(gè)字段削減到2個(gè)字段。）每次 你減少表單的一個(gè)字段或問題，你都在提高這個(gè)表單的轉(zhuǎn)化率——這一準(zhǔn)則的業(yè)務(wù)案例就是這么簡(jiǎn)單。
2. 把相關(guān)的標(biāo)簽和字段編組（Visually group related labels and fields）。標(biāo)簽（label）應(yīng)該靠近它所描述的字段（field）（對(duì)于移動(dòng)端和比較短的桌面表單，標(biāo)簽應(yīng)緊貼在字段的正上方；對(duì)于非常長(zhǎng)的桌面表單，標(biāo)簽應(yīng)該緊鄰于字段）。應(yīng)該避免含糊不清的空格，標(biāo)簽與字段之間應(yīng)該是等距的，并且確保包含屏幕閱讀器的標(biāo)簽屬性。如果表單要求有兩種不同的主題，則劃分為（section it into ）獨(dú)立的兩組字段（并且為屏幕閱讀器的分組打上標(biāo)記）。
3. 按單列布局編排字段（Present fields in a single column layout）。多列會(huì)打斷表單垂直向下的勢(shì)頭（Multiple columns interrupt the vertical momentum of moving down the form）。與其要求用戶在視覺上使自己適應(yīng)（多列表單），不如只保留一列，每一個(gè)字段獨(dú)占一行，從而讓用戶的視線保持連貫（Rather than requiring users to visually reorient themselves, keep them in the flow by sticking to a single column with a separate row for each field）（這一規(guī)則的例外情況：簡(jiǎn)短或邏輯上有關(guān)聯(lián)的字段可以編排在同一行，例如：City,State, andZipCode）。
4. 按邏輯順序排列（Use logical sequencing）。為 字段（例如：Credit-card number,Expirationdate,Securitycode）和（字段的）取值選項(xiàng)（例如：Standard shipping, 2-day shipping, 1-day shipping） 保留標(biāo)準(zhǔn)排序。但是對(duì)字段的值，也可以考慮使用頻率，并且盡可能先列出最常用的值。測(cè)試 Tab 鍵導(dǎo)航，確保 Tab 鍵按正確的字段順序?qū)Ш?，以幫助使用鍵盤的用戶。
5. 避免使用占位符文本（Avoid placeholder text）。設(shè)計(jì)師喜歡占位符文本，因?yàn)樗艘曈X上的雜亂。不過，占位符文本會(huì)導(dǎo)致許多可用性問題，最好避免使用。
6. 使字段與輸入的類型、尺寸相匹配（Match fields to the type and size of the input）。當(dāng)只有兩三個(gè)選項(xiàng)并且它們可以作為單選按鈕（the radio button）（只需要單擊鼠標(biāo)或 按下tab 鍵）來顯示時(shí)，應(yīng)避免使用下拉（drop-downs ）。文本字段 應(yīng)該與預(yù)期中的輸入 有差不多的尺寸，因?yàn)橛脩?無法看到全部輸入的時(shí)候 極其容易出錯(cuò)。例如，對(duì)于2130個(gè) UX 大會(huì)的參與者，用戶所在城市介于3（Leo, Indiana ）到22（San Pedro Garza Garcia, Mexico ）個(gè)字符之間。99.9%的城市名稱是19個(gè)字符或更短，因此一個(gè)“城市”字段的合理長(zhǎng)度是19個(gè)字符。
7. 區(qū)分選填與必填字段（Distinguish optional and required fields）。首先，盡可能減少可選字段（參考上面的第一條建議）。如果某些字段是真的有必要的，但只適用于一部分用戶，注意不要讓用戶經(jīng)過不斷的試驗(yàn)和犯錯(cuò)之后才能找到這些字段。應(yīng)該把表單限制到只有一兩個(gè)字段，并明確地把它們標(biāo)記為“選填”的。
8. 講解 所有的輸入 或者 格式化的必要條件（Explain any input or formatting requirements）。如果一個(gè)字段要求一種特定格式或特定 類型的輸入，請(qǐng)陳述確切的說明。請(qǐng)不要讓用戶猜測(cè)你的晦澀不清的密碼要求。這同樣適用于語法規(guī)則，如標(biāo)點(diǎn)符號(hào)，手機(jī)號(hào)碼或信用卡中的空格。（你應(yīng)該盡可能地消除這些主觀的/武斷的（arbitrary ）格式規(guī)則：禁止手機(jī)號(hào)碼區(qū)號(hào)的圓括號(hào)（death to parentheses for phone-number area codes））。
9. 避免使用重置按鈕和清空按鈕（AvoidResetandClearbuttons）。在網(wǎng)頁表單中，意外刪除的風(fēng)險(xiǎn) 在重要性方面要超過 不太必要的“重置（start over）”。在那些收集極為敏感的輸入（如：財(cái)務(wù)信息）的表單中，請(qǐng)?zhí)峁┮粋€(gè)‘取消’按鈕以支持那些放棄表單并想刪除信息的用戶。但是要確?！∠粹o沒有‘提交’按鈕那么顯眼，以避免意外的點(diǎn)擊。
10. 提供高度可見/顯眼并且具體的錯(cuò)誤消息（Provide highly visible and specific error messages）。錯(cuò)誤應(yīng)該以多種線索（cue）告知，而不僅僅以顏色的方式：為字段畫輪廓，使用紅色文本，使用加粗字體，確保用戶不會(huì)忽略這些極其重要的信息。Now is not the time to be subtle。
錯(cuò)誤的輸入應(yīng)該被保留并附以具體的解釋 以便用戶修正錯(cuò)誤。
總結(jié)
網(wǎng)頁表單的可用性絕不是（is by no means ）一個(gè)新課題。它已經(jīng)覆蓋了普遍的可用性參考書（general usability references ）（其中包括了幾本 NN/g 書：通用可用性準(zhǔn)則（general usability），視線追蹤可用性研究（eyetracking usabilityresearch ）和移動(dòng)端可用性（mobile usability））。電子商務(wù)購物車114條準(zhǔn)則中的大部分在表單設(shè)計(jì)方面都是專門的問題（Many of the114 UX guidelines for e-commerce shopping cartsare specialized issues in forms design. ）。也有專門寫表單設(shè)計(jì)的一整本書，以及論證 遵循準(zhǔn)則的效用的 學(xué)術(shù)研究。
這個(gè)簡(jiǎn)短的總結(jié)不是為了取代在其他資源里發(fā)現(xiàn)的深度分析：如果你廣泛地使用表單設(shè)計(jì)，那么很值得花時(shí)間去吸收各種情形下的最佳實(shí)踐（absorbing the intricacies of best practices in various situations is well worth your time ）。
但是，很多糟糕的表單都存在一些并不復(fù)雜難懂的問題，這些問題本來是可以通過我們此前了解到的一些簡(jiǎn)單提醒來避免的。看一看你網(wǎng)站上的表單，并確保它們沒有發(fā)下這些眾所周知的錯(cuò)誤。誰知道呢，你只是可能讓你網(wǎng)站的轉(zhuǎn)換率翻倍而已（Who knows, you just might double yourconversion rate）。
