表單設計中的錯誤提示的作用在於幫助用戶修復表單中的錯誤，並給出他們如何避免更多錯誤的建議。以下筆者將與大家討論設計錯誤提示的有用指南，enjoy~
在最近的項目中做了一些表格設計，其中牽涉到了一些錯誤提示的內容。於是筆者在下班時間找了一片關於錯誤提示的外文文章，利用空閒時間把它翻譯過來，希望能夠幫助大家在之後的表單設計中有一定的幫助。
錯誤提示是幫助用戶明確識別錯誤的地方和內容，並允許用戶輕鬆地訪問和糾正錯誤內容。
表格是許多app和網站的必要組成部分，我們使用它們登錄、購物、發送反饋、並輸入我們的個人信息。想想你使用網站時，你輸入了多少次信息？你遇到了多少次的錯誤？這些錯誤如何惹惱你？如果你有這些體驗的話，那不妨看看下面。
錯誤信息是系統狀態的提示：它們讓用戶知道遇到了一個阻礙，並給出解決方案。
所以，為了使錯誤信息有效，人們需要看到它們，理解它們，並且能夠很容易地對它們採取措施糾正它們。
系統狀態的可見性是由JakobNielsen提出的10種可用性啟發式方法之一。它指的是如何將系統的狀態傳達給用戶。理想情況下，通過在合理的時間內進行適當的反饋，系統應該始終讓用戶瞭解正在發生的事情。
用戶在使用app時，難免會犯錯誤。而錯誤流是用戶為了糾正錯誤而必須經過的步驟，經過深思熟慮的錯誤流允許用戶輕鬆地修復錯誤並繼續執行他們的任務。
在設計糾錯流程時應遵循三個主要原則：
- 錯誤信息應易於注意和理解。
- 錯誤的字段應該很容易定位。
- 用戶不必記住修復錯誤的說明。
這些指導原則幾乎不需要解釋：首先，如果用戶不知道他們的輸入有問題，他們將無法修復它。第二，人們不必通過表單尋找錯誤。最後，他們不應該記住如何在解決問題的同時記住錯誤說明。
在本文中，我們將討論設計錯誤的有用指南，學會了這基本的十個錯誤提示，之後的表單設計相對來說就輕而易舉了。
一、儘可能進行內聯驗證
理想情況下，內聯驗證的目標是所有驗證都應該是內聯的。
也就是說，一旦用戶填寫完字段，如果字段包含錯誤，則應該在附近做出提示，這種類型的錯誤消息很容易被注意到。
此外，在字段完成後立即修復錯誤需要用戶最少的交互成本：他們不需要定位或導航到字段，也不需要從新字段切換上下文才能返回他們認為已經成功完成的舊字段。當然，在某些情況下，內聯驗證是不可能的，用戶輸入的數據需要發送到服務器進行驗證。
二、指示覆雜字段的成功條目
對於複雜字段的成功條目，內聯驗證也可以用來表示成功完成。
例如：如果用戶必須創建唯一的用戶名、綠色複選標記和用戶名可用的消息，則讓用戶知道他們可以繼續下一步。
遵循防止錯誤的指導方針：為字段值提供建議，將輸入限制為合法值，並通過允許鍵入、縮寫或不同的輸入格式來靈活處理。對於新密碼等複雜輸入，如果用戶輸入的內容符合系統設置的準則，則即時內聯驗證(在輸入字段值時出現)將防止用戶多次猜測或檢查。
在下面的示例中，密碼強度指示符在用戶鍵入時會發生變化，並幫助用戶確定到目前為止輸入的字符串是否足夠好或需要添加更多字符。
然而，不要在成功指標上過份。成功指標不應分散用戶填寫表單的注意力，而只應在附加上下文有助於更快或更準確地完成表單時才使用。例如：當字段中唯一的要求是填充成功消息時，不需要顯示成功消息，因為該消息不會為用戶提供更多的附加上下文。
三、將錯誤消息顯示在字段旁邊
將“錯誤消息”顯示在“字段旁邊使用內聯驗證”，錯誤消息自然顯示在錯誤的字段旁邊。但是，即使字段沒有內聯驗證，也會在問題字段下方或旁邊顯示可操作的錯誤消息，以幫助用戶修復錯誤。
該消息應遵循錯誤消息準則：應明確、人可讀、禮貌、精確，並應提供建設性建議。在錯誤字段旁邊保留錯誤消息可以最大限度地減少工作內存負載：用戶可以在修復錯誤時看到錯誤消息，而不必記住它。
四、使用顏色將錯誤與正常字段狀態區分開來
紅色是與錯誤最相關的顏色，橙色或黃色表示警告，綠色或藍色表示成功。確保驗證文本的顏色與表單的其他部分突出，這樣用戶就會迅速注意到它。將相同顏色的半透明背景添加到錯誤字段，使其在具有多個窗體字段的長頁上突出顯示。
五、添加圖像或精細動畫以便於掃描
與顏色一起，一個圖標左邊的錯誤信息或驗證總結將提請注意的錯誤，並幫助用戶誰是色盲。當用戶掃描表單時，圖標將脫穎而出，並將目光吸引到需要修復的地方。
與錯誤對應的圖標上的微妙脈衝或彈跳動畫可以進一步吸引用戶對錯誤的注意。然而，不要濫用動畫，如果有多個錯誤，許多動畫圖標可能是壓倒性的。不要動文字-動畫錯誤信息很難讀懂。
六、謹慎地使用模式或確認對話框
當您需要特別注意潛在的錯誤時，您可以使用模態或確認對話框來解釋細節並幫助用戶解決問題。
然而，謹慎地使用這種對話框有兩大缺點：
- 它們具有破壞性；
- 錯誤信息是在一個窗口中顯示的，為了修復錯誤需要排除該窗口，因此任何複雜的指令都必須存儲在用戶的工作記憶中，從而增加他們的認知負荷。但是，如果錯誤消息很簡單，或者表單仍然可以按原樣提交，它們就可以了。
七、輸入完成前不要驗證字段
在大多數情況下，避免在用戶完成字段並移到下一個字段之前顯示錯誤。在獲得完成打字的機會之前看到錯誤消息可能會很煩人。
八、不要使用驗證摘要作為錯誤的唯一指示
驗證摘要顯示在表單的頂部，並讓用戶知道頁面上存在需要修復的錯誤，無論這些錯誤是在視圖中還是在摺疊下面。
驗證摘要可以使用戶全面瞭解表單中的所有錯誤，但不應用作唯一的錯誤指示形式，因為它迫使用戶在錯誤中搜索字段；此外，當用戶到達錯誤字段時，錯誤消息可能不再出現在視口中，從而迫使用戶在修復問題時記住錯誤消息。
九、不要使用工具提示報告錯誤
工具提示有時用於指示錯誤。警告圖標通常顯示在錯誤的字段旁邊，然後，一旦用戶懸停在該圖標上或移動該字段中的焦點，就會出現包含錯誤消息的工具提示。
通常，我們建議不要使用這種信令錯誤的方法。
首先，一些警報圖標很難被注意到；第二，用戶可能想知道這個字段有什麼問題，而不知道如果他們採取額外的步驟，他們實際上可以看到錯誤消息；第三，為什麼讓用戶更多地工作(即懸停或移動焦點到字段)以查看錯誤消息？
十、為重複錯誤提供額外幫助
如果相同的錯誤重複發生（通常在一次表單填充嘗試中發生3次或更多次），這通常表明用戶界面中存在嚴重問題。很可能，您的錯誤消息沒有足夠的幫助，但是設計和用戶需求之間也可能存在另一種不匹配。
和往常一樣，請記住，當用戶出錯時，這不是他們的錯。
你的設計太容易出錯。我們建議檢查分析數據的重複錯誤，然後審查(或測試)的設計，試圖改進它。重寫錯誤消息通常是嘗試的第一件事。作為一個更多的創可貼解決方案，您還可以顯示一個鏈接到更詳細的幫助信息或文檔後，用戶已多次犯同樣的錯誤。
結論
錯誤流的設計應該幫助用戶修復表單中的錯誤，並建議他們如何避免犯更多錯誤。確保用戶能夠輕鬆地檢測錯誤，瞭解如何修復錯誤，並在更正相應的錯誤時看到錯誤消息。消除猜測，讓用戶繼續執行他們的任務。
本文由 @潘強 原創發佈於人人都是產品經理。未經許可，禁止轉載
題圖來自 Unsplash ，基於 CC0 協議