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