原文：https://www.nngroup.com/articles/web-form-design/
本文由【咚門】翻譯，未經(jīng)允許，請勿轉(zhuǎn)載。
摘要：遵守這些已經(jīng)為大家所接受但又常常被忽視的準則以確保用戶能夠順利地填寫你的網(wǎng)站表單。
運輸安全管理（TSA）有助于保障飛機乘客的安全矮瘟。但很多人也一定會因為被延誤或被迫在公共場合脫掉衣服而被惹惱，相信你也預(yù)期到 TSA 收到了相當多的投訴了吧塑娇。
因此當我第一次看到 TSA 網(wǎng)站的投訴表單時澈侠，它們的設(shè)計失誤是如此的明顯以至于我懷疑這是不是故意的。表單的底部有兩個按鈕：“預(yù)覽”和“清空表單”埋酬∩诳校“預(yù)覽”按鈕不是太理想，因為很多用戶希望這是一個“提交 ”按鈕或者至少是一個“下一步”按鈕写妥。但真正的問題是“清空表單”按鈕棘催，這個按鈕實際上會刪掉用戶輸入到表單里的所有信息。
無論是不是故意的耳标，這樣的設(shè)計無疑會減少投訴量（譯者注：這里帶有嘲諷的意味）醇坝！不管怎樣，這也違反了我們15年以前寫的表單設(shè)計指南：在網(wǎng)頁表單中避免使用“重置”按鈕次坡。
我最近斷定這個表單的設(shè)計不是故意使壞的（wasnot intentionally bad）症脂，因為 TSA 實際上有一個正確地使用了單個“提交”按鈕的投訴表單谚赎。既然有一個表單遵循了表單設(shè)計原則，很可能另一個差勁的設(shè)計只是偶然诱篷。
作為納稅人壶唤，很欣慰了解到我的政府機構(gòu)并非是故意采用糟糕的設(shè)計來回避聽取我的批評（avoid hearing my comments ）。但是從 用戶體驗（UX ） 的角度來看棕所，這是一個痛苦的提醒闸盔，雖有近幾年“用戶體驗（UX）”的躁動和普及（the buzz and popularity of “UX” ），對可用性的基本理解往往依舊缺乏琳省。即使是一些本來很容易理解的簡單原則也往往不為人所知或者被忽視迎吵。
細心的表單設(shè)計對 用戶理解和正確無誤地填寫一張表單的速度 產(chǎn)生巨大的影響躲撰。其實，Seckler 和她的同事們發(fā)表在 CHI 上的最新一篇論文表明击费，當表單遵循基本的可用性原則時拢蛋，填寫表單所用的時間（the completion time ）顯著地減少并且將近兩倍的用戶可能第一次就能夠正確無誤地提交表單（在遵循可用性原則的表單中，78% 用戶一次性通過提交蔫巩；與之相對的是谆棱，在違反了可用性原則的表單中，42% 用戶一次性通過提交）批幌。如果你想知道為什么你的轉(zhuǎn)換渠道在表單頁面出現(xiàn)了大陡降（has big drop-offs ）础锐，這個研究可以給你一個解答的線索：表單的可用性問題真的影響業(yè)務(wù)（hurt business ）嗓节。
你的網(wǎng)站表單遵循可用性最佳實踐嗎荧缘？
網(wǎng)頁表單設(shè)計的最佳實踐
任何給定表單的 最佳設(shè)計方案依賴于很多因素：表單長度，使用場景（the context of use ）和收集的數(shù)據(jù)拦宣。雖然某些情況下你應(yīng)該采用的具體措施可能有所不同（The exact implementation you should use may vary in certain circumstances ）截粗，但這不是忽視所有可用性知道原則的接口。
1. 保持簡短（Keep it short）鸵隧。數(shù)學家帕斯卡（Blaise Pascal ）說過一句名言：“I have made this longer than usual because I have not had time to make it shorter绸罗。”這一原則適用于網(wǎng)頁表單和散文創(chuàng)作豆瘫。雖然排除不必要的字段會更費時珊蟀，但是節(jié)省下來的用戶工作量和提升的表單完成率 使得你花費的時間物有所值。有一些字段是應(yīng)該被移除的外驱，這些字段收集的信息通常具有以下特點：（a）可以從其它渠道獲取育灸，（b）稍后能夠更方便地收集，或者（c）簡單地省略昵宇。（我們最近把這項技術(shù)應(yīng)用到我們自己其中之一的表單中磅崭，并且把這個表單從6個字段削減到2個字段。）每次 你減少表單的一個字段或問題瓦哎，你都在提高這個表單的轉(zhuǎn)化率——這一準則的業(yè)務(wù)案例就是這么簡單砸喻。
2. 把相關(guān)的標簽和字段編組（Visually group related labels and fields）。標簽（label）應(yīng)該靠近它所描述的字段（field）（對于移動端和比較短的桌面表單蒋譬，標簽應(yīng)緊貼在字段的正上方割岛；對于非常長的桌面表單，標簽應(yīng)該緊鄰于字段）犯助。應(yīng)該避免含糊不清的空格蜂桶，標簽與字段之間應(yīng)該是等距的，并且確保包含屏幕閱讀器的標簽屬性也切。如果表單要求有兩種不同的主題扑媚，則劃分為（section it into ）獨立的兩組字段（并且為屏幕閱讀器的分組打上標記）腰湾。
3. 按單列布局編排字段（Present fields in a single column layout）。多列會打斷表單垂直向下的勢頭（Multiple columns interrupt the vertical momentum of moving down the form）疆股。與其要求用戶在視覺上使自己適應(yīng)（多列表單）费坊，不如只保留一列，每一個字段獨占一行旬痹，從而讓用戶的視線保持連貫（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ī)則的例外情況：簡短或邏輯上有關(guān)聯(lián)的字段可以編排在同一行附井，例如：City,State, andZipCode）。
4. 按邏輯順序排列（Use logical sequencing）两残。為 字段（例如：Credit-card number,Expirationdate,Securitycode）和（字段的）取值選項（例如：Standard shipping, 2-day shipping, 1-day shipping） 保留標準排序永毅。但是對字段的值，也可以考慮使用頻率人弓，并且盡可能先列出最常用的值沼死。測試 Tab 鍵導(dǎo)航，確保 Tab 鍵按正確的字段順序?qū)Ш酱薅模詭椭褂面I盤的用戶意蛀。
5. 避免使用占位符文本（Avoid placeholder text）。設(shè)計師喜歡占位符文本痒留，因為它消除了視覺上的雜亂谴麦。不過，占位符文本會導(dǎo)致許多可用性問題狭瞎，最好避免使用细移。
6. 使字段與輸入的類型、尺寸相匹配（Match fields to the type and size of the input）熊锭。當只有兩三個選項并且它們可以作為單選按鈕（the radio button）（只需要單擊鼠標或 按下tab 鍵）來顯示時弧轧，應(yīng)避免使用下拉（drop-downs ）。文本字段 應(yīng)該與預(yù)期中的輸入 有差不多的尺寸碗殷，因為用戶 無法看到全部輸入的時候 極其容易出錯精绎。例如，對于2130個 UX 大會的參與者锌妻，用戶所在城市介于3（Leo, Indiana ）到22（San Pedro Garza Garcia, Mexico ）個字符之間代乃。99.9%的城市名稱是19個字符或更短，因此一個“城市”字段的合理長度是19個字符。
7. 區(qū)分選填與必填字段（Distinguish optional and required fields）搁吓。首先原茅，盡可能減少可選字段（參考上面的第一條建議）。如果某些字段是真的有必要的堕仔，但只適用于一部分用戶擂橘，注意不要讓用戶經(jīng)過不斷的試驗和犯錯之后才能找到這些字段。應(yīng)該把表單限制到只有一兩個字段摩骨，并明確地把它們標記為“選填”的通贞。
8. 講解 所有的輸入 或者 格式化的必要條件（Explain any input or formatting requirements）。如果一個字段要求一種特定格式或特定 類型的輸入恼五，請陳述確切的說明昌罩。請不要讓用戶猜測你的晦澀不清的密碼要求。這同樣適用于語法規(guī)則灾馒，如標點符號茎用，手機號碼或信用卡中的空格。（你應(yīng)該盡可能地消除這些主觀的/武斷的（arbitrary ）格式規(guī)則：禁止手機號碼區(qū)號的圓括號（death to parentheses for phone-number area codes））你虹。
9. 避免使用重置按鈕和清空按鈕（AvoidResetandClearbuttons）。在網(wǎng)頁表單中琉预，意外刪除的風險 在重要性方面要超過 不太必要的“重置（start over）”董饰。在那些收集極為敏感的輸入（如：財務(wù)信息）的表單中，請?zhí)峁┮粋€‘取消’按鈕以支持那些放棄表單并想刪除信息的用戶圆米。但是要確弊湓荩‘取消’按鈕沒有‘提交’按鈕那么顯眼，以避免意外的點擊娄帖。
10. 提供高度可見/顯眼并且具體的錯誤消息（Provide highly visible and specific error messages）也祠。錯誤應(yīng)該以多種線索（cue）告知，而不僅僅以顏色的方式：為字段畫輪廓近速，使用紅色文本诈嘿，使用加粗字體，確保用戶不會忽略這些極其重要的信息削葱。Now is not the time to be subtle奖亚。
錯誤的輸入應(yīng)該被保留并附以具體的解釋 以便用戶修正錯誤。
總結(jié)
網(wǎng)頁表單的可用性絕不是（is by no means ）一個新課題析砸。它已經(jīng)覆蓋了普遍的可用性參考書（general usability references ）（其中包括了幾本 NN/g 書：通用可用性準則（general usability）昔字，視線追蹤可用性研究（eyetracking usabilityresearch ）和移動端可用性（mobile usability））。電子商務(wù)購物車114條準則中的大部分在表單設(shè)計方面都是專門的問題（Many of the114 UX guidelines for e-commerce shopping cartsare specialized issues in forms design. ）首繁。也有專門寫表單設(shè)計的一整本書作郭，以及論證 遵循準則的效用的 學術(shù)研究陨囊。
這個簡短的總結(jié)不是為了取代在其他資源里發(fā)現(xiàn)的深度分析：如果你廣泛地使用表單設(shè)計，那么很值得花時間去吸收各種情形下的最佳實踐（absorbing the intricacies of best practices in various situations is well worth your time ）夹攒。
但是谆扎，很多糟糕的表單都存在一些并不復(fù)雜難懂的問題，這些問題本來是可以通過我們此前了解到的一些簡單提醒來避免的芹助√煤看一看你網(wǎng)站上的表單，并確保它們沒有發(fā)下這些眾所周知的錯誤状土。誰知道呢无蜂，你只是可能讓你網(wǎng)站的轉(zhuǎn)換率翻倍而已（Who knows, you just might double yourconversion rate）。
