英文原文：The Ultimate UX Design of Form Validation 編譯：oschina
引言
幾年前當我第一次看到Twitter的表單驗證時很驚訝. 對使用者介面呆板厭煩的你應該知道我在說什麼. 當時我幾乎興奮的要跳起來.
Twitter精心設計的分離式表單驗證相當引人注意.當我輸入錯誤時右側彈出錯誤提示資訊, 立即就能讓我消除錯誤.”線上驗證”幫助我明白什麼是正確的方向. 我能感受到這種簡潔的形式是想跟我有個隨時的對話. 這是一個啟示! 我不必等待載入整個頁面來檢查這個表單添寫的是否正確.
這個體驗完全改變了我對錶單的設計方法. 它讓我明白表單驗證意味著和使用者的交流並引導他們改正錯誤和不確定的輸入.
術語“表單驗證”可能需要一些說明。表單驗證是一門處理在一個web表單裡檢查使用者提供的資訊是否正確的技術。這個處理的輸出結果更多是情緒上的而不是技術上的。表單或者指出使用者操作錯誤，或者確認提供的資料是準確的。給你一個例子：如果一個使用者在一個標籤為“email address”的表單欄位裡提供了資料，表單應該檢查提供的文字是否在正確的格式（user@example.com)和提供的e-mail地址是否已經註冊了。
通常來說，有兩種型別的表單驗證：
- 提交後驗證——當使用者提供了所有資料同時提交表單之後，通常會點選按鈕，資訊會傳送到伺服器同時進行驗證。“驗證器”的返回資訊傳送會使用者的電腦同時它顯示一段確認的資訊（“所有東西都正確！”）或者一系列的錯誤資訊。
- 線上驗證——驗證資訊在使用者輸入資料到表單欄位後直接展示。通常，資訊會展示在欄位旁邊同時鼓勵使用者採取直接行動。
表單驗證的重要性
表單驗證是web/手機瀏覽者與介面互動時重要的一個核心溝通流程。它的重要性遠超過我們所認識到的，不相信我？試想一下你經常遇到的需要表單驗證的情形:
- 註冊/登入表單
- 購物車 – 支付表單
- 郵件表單
在你的介面整個流程中這是一些重要的流程，不是嗎？你業務方面的努力可能全體現在這裡了。.
比較一下線上和離線兩種狀態下的不同，這會讓事情進入一個熟悉的視角。讓我們做一個簡單的類比：表單驗證相當於在購買東西之前和推銷員之間的一次談話-所有的事情還在成交的邊緣上。如果推銷員粗魯無禮並且拒絕提供幫助，你自然會離開商店不買他的東西.。如果推銷員很專業，有禮貌並且樂於助人-你就會樂意掏錢包了。
大多數表單驗證都像是個粗魯無禮的推銷員。表單的錯誤提示資訊形如：“資料庫錯誤！”，“錯誤的郵箱地址！”這樣的提示不僅沒有禮貌-還會導致使用者的高流失率。
缺乏溝通導致了不友好的業務設計，有很多類似的例子。Luke Wroblewski進行的研究清楚地表明瞭使用一個內聯的表單驗證將帶來巨大的不同效果:
“相比我們的控制版本，內聯驗證表單對資料的驗證資訊顯示更加醒目並且更加友好。尤其是，我們看到的:
- 增加了22%的成功率,
- 減少了22%的錯誤率,
- 增加31%的滿意度,
- 完成時間縮短42%,
- 減少了47%時間的視覺停留。
這些不能被忽視。合理的表單驗證設計可能會大幅的提升你的業務量！
我們來跳出理論進入實踐，讓我們看看在實際設計中什麼才是最好的設計方法，並且通過循序漸進的方式來設計一個完美的表單驗證。
興奮了吧?
下面使用的每一個例子都可以在UXPin – The UX Design App下載.。
避免困惑
通常來說一個好的表單驗證包含下面的四個重要元素:
- 合適的時間 通知驗證的成功與失敗
- 合適的地方 來顯示驗證資訊
- 合適的顏色
- 清晰的表達
所有的這些元素有一個清晰的目標：避免困惑。困惑是表單轉化的死敵。如果你不想冒使用者流失率的風險，建立一個消除使用者困惑的表單驗證。這是一條通往高轉化率的路子。
合適的時間
正如我們在Luke Wroblewski的研究例子中看到的-顯示成功/失敗資訊的合適時間是在使用者提交資訊後。內聯表單驗證會立刻通知使用者輸入資料的正確性，這也提高了使用者的轉化率。
Twitter就是個典型的例子，他們做了大量的工作來避免使用者產生困惑。
在下面的截圖中你可以看到我試圖使用一個已使用的郵箱地址註冊，表單會提示我應該在第二步停下並且讓我考慮其他備選方案，這樣我就不會對最終的結果失望了。傳統的“提交驗證”需要等我填寫完整個表單後，重新載入頁面才讓我知道哪些地方填寫的不合理。
Twitter 選擇了一個更好的時機讓我們停下 – 這是毫無疑問的。立即響應的形式為我節省了大量的時間（是的，3分鐘對於一天來說是個巨大的浪費）。
更棒的是什麼 — Twitter實際上嘗試作為一個熟人和我們進行一場談話。多虧了內聯驗證，它可以立刻提供給我們一些選擇。或許我是這個郵箱賬號的主人，那麼我只想登入?誰曉得呢-也許我只是忘記了密碼？
這不僅是一個漂亮的表單驗證，它也增加了表單的轉化率；同時這也是一個頂級的客戶服務。
Twitter 表單驗證 – 錯誤資訊
Twitter 表單驗證 – 錯誤信心 – Upload Wireframing Template to UXPin
合適的位置
驗證資訊所在的顯示位置與正確的顯示時機一樣重要。在討論的Twitter例子中-如果提示資訊不在文字域後面，而是在它下面，我就不會很快的注意到它。如果我沒有留意它···好吧，這將產生了困惑，迫使我離開沒有完成的表單。
當你疑惑把驗證資訊放在哪個位置時，遵循下面的一條原則-總是把資訊放到操作的上下文中。如果你想通知使用者一個特殊欄位發生了錯誤-在文字域後面顯示資訊，如果錯誤是通用的（比如向伺服器傳送資料錯誤）並且沒有重新整理頁面-可以在提交按鈕後面顯示資訊，如果重新整理了頁面-在頁面的頂部顯示資訊。
看看下面的例子。Light CMS把錯誤資訊顯示到了每一個文字域的下一行，這很容易注意和理解它。
Light CMS 表單驗證 – Error Message
Light CMS 表單驗證 – Upload Wireframing Template to UXPin
Etsy的表單也是一個很好的放置驗證資訊位置的例子。在這種情況下我也很喜歡錶單的結構和錯誤資訊的視覺效果。明確的劃分成段（使用facebook註冊，主要的登錄檔單）為註冊流程提供了清晰的嚮導。
錯誤資訊有了一個視覺化的視覺效果-文字域使用紅色邊框標紅並且有了一個紅色的資訊框-溝通的意圖清晰明瞭。
這是一個消除表單困惑的好的嘗試。
Etsy 表單驗證 – Error Message
Etsy 表單驗證 – Upload Wireframing Template to UXPin
如果表單的結構沒有給你足夠的空間顯示清晰的錯誤資訊，你可以使用Vimeo這種形式。
Vimeo 表單驗證 – Error Message
Vimeo，使用提示條的形式來顯示錯誤的欄位資訊，避免了佈局的混亂。顏色的相關性也是很有用的，錯誤的欄位紅色的資訊提示和一個紅色的背景、邊框相一致。
錯誤資訊被放在了操作上下文的位置，提供了一個很好的溝通基礎。
當然這裡的問題是“提交驗證”需要等到伺服器驗證通過後才能獲取錯誤資訊。然而，對於這樣一個短小的表單，我不希望它是一個關鍵性的設計錯誤。
Vimeo Form Validation – Upload Wireframing Template to UXPin
恰到好處的色彩
顏色就像數字1、2、3一樣簡單–錯誤為紅色，通知為藍色，警告為黃色，成功確認為綠色。這個色系是你能想到的最直觀的搭配。至少其中一部分（紅和黃可以使人引起注意並提高血壓）被進化備份乃至整個系統的顏色–意味著已存在，比如在公路上。不要混淆它，你就會沒事。
在上面所有例子中，我們已在實際中見過這個規則。讓我們回顧一下一些更有趣的解決方案，這樣你將更有靈感。當談到合適的表單驗證時，我們再看看Twitter規則，確認資訊被非常清晰地用綠色標記並且將小的驗證圖示嵌入到整個大框體中。
注意密碼輸入欄位。綠色的指示條顯示了你密碼的安全級別。任務完成，享受它吧!
Twitter Form Validation – Confirmation Message
Twitter Form Validation – Upload Wireframing Template to UXPin
Pinterest也是一個在驗證資訊中使用合理色彩的有趣例子。一個紅色的框環繞整個文字域，錯誤資訊被著重強調，整齊的內聯驗證使他成為了一個完美的解決方案。.
Pinterest Form Validation – Error Message
再關注下表單的結構，六個欄位被分成兩個區段。一個區段是關於登入到伺服器的資訊和要求格式。另一個區段是個人資訊-姓名和性別。這樣的劃分很有意義，因為你的姓名和性別不是必填項。
然而，沒有指明哪些欄位是必填項哪些是非必填項，使用者處在一個盲區的邊緣。人們可能會感覺這是在誘使他們輸入姓名和性別（可能用於定位廣告宣傳的原因）。
我可以看到他們獲取資料非常有效的策略，但是我將小心的做這樣的實踐。通常，我推薦在註冊流程完成後詢問使用者是否要填寫非必要資訊。
Pinterest Form Validation – Upload Wireframing Template to UXPin
正確的語言
最後，是語言——這也是一個坑爹的地方。我本來想找個恰當的例子，可惜找了很久都不如意。
作為一條驗證訊息，它應該能夠清晰地表明：
- 當前發生了什麼事
- 下一步使用者應該做什麼(成功的確認訊息除外)
還應避免使用專業術語。
儘管這幾條規則看起來很簡單，但往往會被人們忘記。比如，光光告訴使用者“Email無效”，卻不說明為什麼無效(到底是輸入錯誤呢，還是已被其他人佔用？)這會給使用者帶來困擾，十分危險。
當然，又要拿Twitter來說事兒了，它的語言用的相當簡明扼要。如果你的Email地址可用，Twitter會告訴你「我們會把確認資訊Email給你」；如果Email早已被其他人註冊過了，她會讓你選擇，是登入呢，還是恢復密碼。如果你建立了一個很完美的密碼，她甚至會誇你「完美的密碼！」
是不是很nice？所有這一切，都像是日常閒聊一樣自然。
Delicious在表單驗證方面犯了許多錯，不過在語言這個部分倒是蠻有意思的。
Delicous的表單驗證 – 錯誤訊息
首先，他們在密碼輸入的地方加了提示資訊“試試用句子作為強密碼。”，這個我超喜歡。很不錯吧？這種東西我可等了好久了。在密碼的安全性方面確實很有意義，比那種要求使用者使用大寫字母和數字什麼的做法要好太多了。
然後，Delicous在提示使用者名稱錯誤的時候也做的很漂亮：
1) “抱歉，使用者名稱marcin已經被別人用了” – 很明確地告訴使用者發生了什麼事情。
2) “請選擇另一個名字” – 明確地告訴使用者下一步應該做什麼。
可惜，他們忘了一個後備選項。萬一我已經有賬號，只是一下子忘了這回事而已？
不管怎麼說，Delicous雖然在時間、地點、顏色等等各個方面都搞砸了，但是勝在語言方面乾的不壞，所以它們的表單依然還具有相當的可用性。反過來也說明，語言是多麼重要啊。
Delicous表單驗證
總結
在表單驗證方法我們看到了很多經典例子，但是我們仍然沒有看到一個完美的。接下來我們將建立一個例子來演示下遵循下面的四個規範的表單驗證是多麼簡單:
- 合適的時間 通知驗證的成功與失敗
- 合適的地方 來顯示驗證資訊
- 合適的顏色
- 清晰的表達
一步步的教程!
按照上面提到的四個簡單原則，我們建立一個完美的表單驗證。表單驗證最小化了在服務端流失一個使用者的風險。
為了證明我的觀點，我將設計一個分割槽段的表單，包含額外的一些非必填資訊。有些地方很類似於Pinterest的表單。如我所言，通常我不推薦使用那樣的方式，但是如果你確實需要，你可以通過做一些處理讓使用者使用起來感覺更簡單。
1. 結構& 頭部
我將從表單的結構和頭部開始。表單結構很簡單，白色的區域是必填欄位區域，灰色的部分是非必填欄位，附加資訊。
我只需畫一個簡單的盒子，填充空白地方，加上我的設計結構
接下來增加一個表頭-一些普通的文字，把打動人心的資訊作為副標題。再次-我正尋找一種解決混亂佈局的方案。
2. 表單欄位
接下來這一步，我將在表單中新增文字域和標籤。因為我強烈反對在文字域內寫標籤（非常混亂，如果你在文字域裡輸入資訊，停頓數分鐘後再開始···這裡沒有一個指示告訴你輸入什麼），我將把它們放在表單文字域的上面。
此外，我新增了兩個子表頭來解釋每個區段提供哪些型別的資訊。
3. 表單欄位資訊
表單欄位資訊是一個容易忽略的地方，但是作為與使用者會話的一個開始是非常有用的。通過使用一句或者最多兩個句子，你可以解釋一些使用者疑慮的事情像“為什麼我需要填寫郵箱？”，這樣和使用者之間建立一個基本的信任。
接下來我將在幾乎所有的文字域上新增相關資訊:
- 使用者名稱 – “XYZ裡面你的名字，你也可以用來登入系統。”
- E-mail 地址 – “我們將傳送一個確認資訊，並且使用它來和您做基本溝通。不是垃圾郵件喲:)”
- 密碼– “為了安全性-請使用一句容易記住並且難以破解的話!”
- 名字 – “在交流時我們方便通過真實名字稱呼您!”
- 性別– “方便告訴我們為您訂製適合你的服務!”
這些額外的資訊可能不是必須的，但是它是開始一段使用者“關係”的出發點。對於使用者寧可多言，也不要讓使用者感覺困惑。
4. 錯誤資訊
當涉及到錯誤資訊時，我們需要認真考慮下我們的原則。
- 顯示錯誤資訊的合適時機是在發現錯誤後。我們設計為內聯驗證。
- 顯示錯誤資訊的合適的地方是在文字域後面-所以我要把附加資訊放到文字域下面，在後面顯示錯誤資訊
- 顯示錯誤資訊合適的顏色當然是紅色，我把一個紅色背景盒子放到整個錯誤欄位下面。
- 清理掉不專業的用語-如“資料庫錯誤”等。
看一下結果:
通過以上的流程我想我的錯誤資訊給使用者起到“解釋”和“嚮導”作用。我努力試著不給使用者留下任何疑問，這會讓使用者在離開表單時沒有任何需要修改的資料了。這是完整的文字:
– 使用者名稱 錯誤– “使用者名稱已經存在了，請保證使用者名稱的唯一性。如果這是你的使用者名稱請嘗試:
* 登入或者重置密碼
如果不是你的使用者名稱 – “請先註冊一個新使用者吧”
– E-mail 錯誤– “郵箱地址不正確，檢查下你輸入的是否正確。或許你忘記了某個地方的 “.” 或者 “@”?”
– 密碼 錯誤– “試著把密碼設定長些。輸入一句話是一個不錯的主意！如果你喜歡冒險-最少允許輸入3個字元”
在這些錯誤資訊中你能看到我們提過的模式嗎？我明確的指出了某個問題，然後立刻給出瞭解決方案。
確認資訊
最後是確認資訊，對設計來說，這純粹是為了高興。在輸入文字欄位後彈出操作正確，我就決定想出一個更微妙的解決方案。我不想人們停在確認資訊上。他們可以快速掃描這些資訊並跳到之前他們感覺良好的某個欄位。
沒有多餘的彩色資訊，沒有長長的句子–只是一個快速確認資訊。
這就是驗證資訊，像1、2、3那樣簡單。表單驗證符合我們的四個規則。它沒有損害，不是嗎？如果你喜歡這個表單，把它上傳到UXPin然後在你的設計中自由地運用。
你需要更多的細節嗎？那就看看按視訊一步步做吧.
下次繼續！