How to Report Errors in Forms: 10 Design Guidelines 10個表單錯誤訊息回饋設計指南
在團隊內分享經驗法則評估（Heuristic Evaluation）後（有機會在寫另一篇文章分享），大家展開了對於錯誤訊息怎麼預防與呈現的討論。
搜尋了相關資料，找到 NN/g 的 How to Report Errors in Forms: 10 Design Guideline，覺得很適合分享給團隊，因此翻譯紀錄出此文。
1. Aim for Inline Validation Whenever Possible 盡可能進行內嵌驗證
內嵌驗證指的是在使用者輸入完成後，若輸入有誤，立即出現回饋在表單附近。這樣的交互成本最低，使用者不需要特別移動到錯誤訊息處，也不必從現在位置往前滑過他們已經完成的部分。
2. Indicate Successful Entry for Complex Fields 若輸入要求複雜，需要有成功回饋
內嵌驗證除了用在錯誤提示，也可以顯示成功。
例如帳號名稱需要為唯一值，在使用者輸入後，即可呈現成功或失敗讓他們知道可否進行下一步。另外，可以遵循防錯指南，提供符合規定又具彈性的設定建議。
對於新密碼這種複雜的設定，在使用者輸入時就開始驗證，防止使用者檢查或猜測自己是否符合系統規定。
下面範例是密碼強度會隨者使用者輸入而改變，幫助他們確定目前密碼設定是否夠安全。
但是，不要過度使用成功的提示，可能會分散使用者的注意力。
3. Keep Error Messages Next to Fields 在輸入框附近保留錯誤訊息
若是內嵌驗證，通常錯誤訊息會出現在輸入框的附近。但若不是做內嵌驗證，可以在輸入框附近提供正確操作的訊息（Actionable errors），幫助使用者恢復錯誤。
可以參考 Google 對於 Actionable errors 的說明。另外，錯誤訊息可以遵循錯誤訊息指南，錯誤訊息應該是清楚的、易讀易懂的、禮貌且準確的，並提供具體建議。
將錯誤訊息放在錯誤輸入框旁邊可以大程度地減少工作記憶負荷，使用者可以在修正錯誤時看到錯誤訊息，不用記住它。
4. Use Color to Differentiate Errors from Normal Field States 使用顏色將錯誤與正常區域分開
紅色是與錯誤最相關的顏色，橘色或黃色則是警告，綠色或藍色表示成功。我們要確保訊息的顏色在整份表單中能快速、清楚地被察覺，在錯誤訊息加上半透明的背景，能使之更為顯眼。
5. Add Iconography or Subtle Animation for Easy Scanning 加入icon 或小動畫以便於使用者注意到
在錯誤訊息的左側加入表示錯誤的 icon，有助於色盲者注意到。使用者在掃描整份表單時，有 icon 的地方會特別突出。
錯誤訊息小動畫可以引起使用者的注意，但是不要過度使用動畫，如有多個錯誤，一直跳動的畫面會讓人不知所措，難以閱讀。
6. Use Modals or Confirmation Dialogs Sparingly 謹慎使用彈跳模態視窗
當錯誤非常需要被注意到時，可以使用彈跳的模態視窗，來解釋與提供詳細解決方式。但請謹慎使用，因爲它具破壞性且錯誤訊息是存在必須關閉的視窗中，這樣所有指令都必須存在使用者的工作記憶中，增加了他們的認知負荷。
若是錯誤消息很簡單，或表單仍可以按原樣提交，還是可以使用彈跳模態視窗的方式來提醒錯誤。
7. Don’t Validate Fields Before Input is Complete 輸入完成前不要進行驗證
在多數情況下，避免使用者在輸入時就一直進行驗證，顯示錯誤。在完成輸入前一直看到錯誤訊息可能會很煩人。
8. Don’t Use Validation Summaries as the Only Indication of an Error 不要將驗證摘要作為唯一的錯誤提示
驗證摘要通常顯示在表單的最上方，讓使用者知道頁面有需要修復的錯誤。驗證摘要可以讓使用者全面了解表單中的所有錯誤，但不應該將其做為錯誤的唯一提示形式，這樣使用者被迫必須自行尋找出錯誤的地方；另外，當使用者到錯誤位置時，錯誤訊息可能已經被捲到上方，這樣使用者就被迫要記住錯誤訊息來修復錯誤。
9. Don’t Use Tooltips to Report Errors 不要使用 Tooltip 顯示錯誤
Tooltip 有時用於顯示錯誤。錯誤的表單旁通常會顯示一個錯誤/警告圖示，一旦將滑鼠 Hover 在圖示上，就會出現包含錯誤訊息的 tooltip 或 toast。
通常，建議不要使用這種方式呈現錯誤。第一，只有錯誤/警告圖示很難注意到。第二，使用者可能想知道出了什麼問題，但不知道如果他們採取額外的步驟（Hover），實際上可以看到錯誤訊息。第三，為什麼要做更多的動作（如：Hover）才能看到錯誤消息？
10. Provide Extra Help for Repeated Errors 若出現重複錯誤，提供額外幫助
如果重複出現相同的錯誤（通常出現 3 次或更多次），則表示 UI 可能存在嚴重問題。很可能，錯誤訊息沒有提供足夠的幫助，設計和使用者需求之間沒有達到一致的目標。當使用者犯錯時，不是他們的錯，是你的設計太容易出錯了。😢
建議利用分析數據來檢查重複的錯誤，並測試整個流程來嘗試改善。重寫錯誤訊息通常是最先要嘗試的事情。
在使用者犯了多次相同錯誤後，可以提供更詳細的幫助訊息或文件連結。
NN/g 結論
錯誤流的設計旨在幫助使用者修復表單中的錯誤，並建議他們如何避免犯更多錯。確保使用者可以輕鬆察覺錯誤，了解如何修復錯誤，並在更正錯誤時可查看錯誤訊息。不出現猜測性的操作，讓使用者繼續任務。
團隊討論
📍 因表單某個欄位輸入內容特殊，錯誤訊息要等使用者輸入完，送出表單再一次檢查？還是輸入完就檢查？還是要直接限制輸入？
綜合本篇與經驗法則評估（Heuristic Evaluation）的預防錯誤法則（Error prevention），我們與其讓使用者知道「你做錯了」，更好的方式是一開始就預防犯錯。系統可以減少容易犯錯的情境，或是在使用者操作過程中協助確認。
因此，我們決定在使用者操作過程中協助檢查輸入內容是否符合規定，並提供錯誤訊息。不去侷限使用者輸入的內容，而是清楚地讓他們知道錯誤原因，並看著錯誤訊息來修復錯誤。
這是我們目前嘗試的方法，若是有更適合的方式也歡迎一起討論分享！🙌
謝謝你的閱讀！
如果喜歡這次的分享，請快樂的隨意👏👏吧！
