作者：KATHRYN WHITENTON ? ?2016-5-1 ? ?發(fā)表于NN/g ? ?譯者：小媛

摘要：遵循本文這10個(gè)確立已久（卻又常常被忽略）的可用性建議，可以確保你的用戶(hù)順利完成表單任務(wù)。

美國(guó)交通安全管理局（TSA）服務(wù)于航空旅客的安全。但由于飛機(jī)延誤、安檢時(shí)需在公眾場(chǎng)合脫衣服等原因，也遭到了很多投訴。

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

無(wú)論是不是故意的，這無(wú)疑會(huì)減少投訴量——因?yàn)楸韱卧O(shè)計(jì)不當(dāng)造成用戶(hù)無(wú)法順利填寫(xiě)下去。但這樣的設(shè)計(jì)也違背了我們15年前就確立的表單設(shè)計(jì)規(guī)范：避免使用重置鍵。

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

直到最近我才發(fā)現(xiàn)，TSA的這兩個(gè)按鈕不是有意要設(shè)計(jì)得這么糟。因?yàn)樵摼W(wǎng)站的另外一個(gè)投訴表單就設(shè)計(jì)無(wú)誤，緊隨輸入?yún)^(qū)之后的是按鈕 “提交”。因此，前者很有可能是不小心造成的。

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

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

表單設(shè)計(jì)的原則

表單設(shè)計(jì)與很多因素有關(guān)：表單的長(zhǎng)度、所在場(chǎng)景、及相關(guān)數(shù)據(jù)。誠(chéng)然，需求不同，對(duì)表單的處理方法也不盡相同，但忽視表單可用性無(wú)論如何都是難咎其責(zé)的。所以，請(qǐng)仔細(xì)閱讀以下原則，用它們指導(dǎo)你的設(shè)計(jì)工作。如果非要違背它們，請(qǐng)給出有說(shuō)服力的理由。

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

2. 將有關(guān)聯(lián)的標(biāo)注和字段在視覺(jué)上進(jìn)行分組。標(biāo)注要緊隨其要需描述的字段（通常，移動(dòng)端表單字段較短，標(biāo)注位于上方；PC中常位于字段的旁邊）。為避免留白混亂影響組織結(jié)構(gòu)，字段和其標(biāo)注之間要等距擺放。如果你的表單含兩組不同話題的字段，那么將它們區(qū)分開(kāi)。

3. 將所有字段排成一列。多列布局會(huì)打斷用戶(hù)自上而下的閱讀習(xí)慣。與其讓用戶(hù)在多列字段中調(diào)整閱讀習(xí)慣，不如僅做成一列，然后根據(jù)字段的語(yǔ)義關(guān)系進(jìn)行組織，比如在不同語(yǔ)義組的字段之間使用分割線。（特例：非常短、或者邏輯上緊密關(guān)聯(lián)的字段如“城市”、“國(guó)家”、“郵政編碼”可以放在同一行。）

4. 通過(guò)邏輯定序。無(wú)論是表單字段（如“信用卡卡號(hào)”、“到期時(shí)間”、“安全碼”）還是字段對(duì)應(yīng)的選擇值（如“普通配送”、“1日達(dá)”、“2日達(dá)”）都要按邏輯順序嚴(yán)格排列。此外，選擇值的排序還要考慮使用頻率，盡可能列出用戶(hù)最常用的選項(xiàng)、并按使用頻率由高到低排列。PC端最好通過(guò)Tab鍵一個(gè)一個(gè)測(cè)試表單的順序是否正確。

星巴克iPhone客戶(hù)端通過(guò)水平移動(dòng)表單幫助用戶(hù)選擇Decaf類(lèi)型。遺憾的是選擇值“Full Decaf”被隱藏起來(lái)了，必須水平滑動(dòng)才可顯示。如果“Full Decaf”是高頻選項(xiàng)，那么它最好出現(xiàn)在左側(cè)第一個(gè)位置。

5. 避免占位文本。（譯者提示：占位文本指當(dāng)一個(gè)文本框沒(méi)有被光標(biāo)聚焦的時(shí)候顯示的是提示文字，當(dāng)光標(biāo)聚焦、即點(diǎn)擊之后顯示的是空白。）有些設(shè)計(jì)師喜歡使用占位文本，因?yàn)樗梢跃徑庥捎谠剡^(guò)多而引起的視覺(jué)雜亂問(wèn)題。但是占位文本存在很多可用性問(wèn)題（譯者提示：如文本消失后會(huì)挑戰(zhàn)用戶(hù)的短期記憶、進(jìn)而錯(cuò)誤反饋時(shí)不知錯(cuò)所，有用戶(hù)把文本誤以為是默認(rèn)填寫(xiě)的數(shù)據(jù)，還有部分用戶(hù)會(huì)嘗試手動(dòng)去刪除文本等等），盡量不要使用（欲了解更多，可查閱文章：Placeholders in Form Fields Are Harmful）。

6. 輸入框要與輸入內(nèi)容的類(lèi)型和大小匹配。如果選擇值只有2-3個(gè)，盡量避免使用下拉框，可以把它們?cè)O(shè)置成單選。輸入框的長(zhǎng)度要與用戶(hù)的心理預(yù)期保持一致，要不然輸入框太短、用戶(hù)看不到全部輸入內(nèi)容就會(huì)容易輸錯(cuò)。UX大會(huì)2130位參與者的所住城市名大多在3個(gè)字符（如 Leo, Indianna）到22個(gè)字符（如San Pedro Garza Garcia, Mexico）不等。99.9%用戶(hù)的城市名含19個(gè)字符或更短，所以19個(gè)字符的寬度是字段“城市”的最佳填寫(xiě)寬度。

7. 區(qū)分選填字段和必填字段。首先，選填字段越少越好（請(qǐng)參考第一條原則）。若該字段確定不可刪除、且只適合部分用戶(hù)，則不要讓用戶(hù)在反復(fù)驗(yàn)證后才弄明白它該怎么處置。一個(gè)表單最好只設(shè)置1-2個(gè)選填項(xiàng)，同時(shí)要清晰地將“選填”二字標(biāo)注出來(lái)。

8. 給出輸入要求或格式規(guī)范。如果需要輸入某種特殊格式，請(qǐng)給出具體要求。不要讓用戶(hù)對(duì)你含糊不清的密碼輸入要求進(jìn)行猜測(cè)。這一原則也同樣適用于句法格式，如電話號(hào)碼或信用卡卡號(hào)等的標(biāo)點(diǎn)符號(hào)的使用、空格的使用。

Netgear的密碼重置表單對(duì)密碼輸入做出了要求，但卻在密碼輸錯(cuò)之后才將其展出。優(yōu)化方法是用戶(hù)輸入密碼之前就給出要求。所以，不要讓用戶(hù)因你的“秘密要求”而犯錯(cuò)。

9. 避免重置按鈕和清空表單按鈕。一不小心誤點(diǎn)，就得重頭再來(lái)，用戶(hù)之前的所有付出頃刻白費(fèi)。如果表單中含用戶(hù)財(cái)務(wù)信息之類(lèi)的敏感字段，可以提供一個(gè)“取消”按鈕，讓用戶(hù)自行決定是否放棄表單填寫(xiě)。但要注意的是 “取消” 按鈕在視覺(jué)上要比 “提交” 按鈕弱一些，以避免發(fā)生誤點(diǎn)。

10. 提供高亮且精準(zhǔn)的錯(cuò)誤反饋。用戶(hù)犯的錯(cuò)誤不僅要有顏色提示，還要有文字提示。比如，用戶(hù)漏掉了字段AND內(nèi)容的輸入，將AND加紅加粗，防止用戶(hù)再將它忽視。

輸錯(cuò)的信息要讓用戶(hù)看到，同時(shí)給出錯(cuò)誤原因，這樣用戶(hù)會(huì)知道自己犯的是什么錯(cuò)、以及怎樣改正。

總結(jié)

表單的可用性設(shè)計(jì)絕不是什么新話題。很多可用性設(shè)計(jì)原則中都有相關(guān)介紹，如NN/g的通用可用性指導(dǎo)規(guī)范、眼動(dòng)可用性研究、移動(dòng)端可用性研究等。電商網(wǎng)站購(gòu)物車(chē)的114個(gè)UX指導(dǎo)原則中也有詳細(xì)介紹。此外還有表單設(shè)計(jì)的相關(guān)書(shū)籍、學(xué)術(shù)報(bào)告等也對(duì)其有專(zhuān)業(yè)說(shuō)明。

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

但很多設(shè)計(jì)不當(dāng)?shù)谋韱尾⒎鞘浅鲇趶?fù)雜，僅僅是違背我們上面談到的某個(gè)或某幾個(gè)原則。希望你在日后的表單設(shè)計(jì)過(guò)程中，不會(huì)犯上述錯(cuò)誤。

譯者簡(jiǎn)介：

小媛

互聯(lián)網(wǎng)從業(yè)者，熱衷于用戶(hù)體驗(yàn)、交互設(shè)計(jì)和服務(wù)設(shè)計(jì)

若有轉(zhuǎn)載需求，請(qǐng)與我聯(lián)系；轉(zhuǎn)載時(shí)請(qǐng)標(biāo)明簡(jiǎn)書(shū)出處

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