金無足赤，人無完人，在我們的日常生活中，在我們使用APP的過程中都難免會發生錯誤。錯誤有些時候是人為原因造成的，有些時候是系統原因造成的。不管是什麼原因造成的，我們如何認識這些錯誤以及怎麼處理這些錯誤，都對APP的使用者體驗有很大的影響。
我們常常忽視了錯誤狀態的設計，一個不用心的錯誤處理或者糟糕的錯誤資訊提示會讓使用者感到無比挫敗，致使他們不再使用你的APP。而相反，一個處理妥當的錯誤狀態設計能讓情況轉危為安。在這篇文章中，我們會探討如何設計才能儘可能地避免使用者遇到不必要的錯誤，以及如何設計一個好的錯誤提示資訊。
什麼是錯誤
錯誤（或者說錯誤狀態）發生在APP無法完成預想的功能的時候，例如：
- APP沒有理解使用者的輸入
- APP崩潰了
- 使用者進行了兩個不能同時進行的操作
錯誤已經成為了使用者使用APP過程中的一個重要阻力點。幸運的是，我們可以通過精心的設計來減少這個阻力。
避免使用者錯誤
如果你在設計一款APP，你應該熟悉設計的邊界條件。舉個例子，如果手機的網路環境很差，使用者將很難完成提交一個表單或者同步一個資料。所以，在設計一款對使用者好用的APP時，你必須考慮這些邊界條件，從而減少錯誤的不良影響。換句話說，作為設計師你最好能通過向使用者提供建議，利用邊界條件和彈性機制來把錯誤扼殺在搖籃裡。
推特對推文有嚴格的字數限制，當輸入字數超過字數限制時，系統用紅字提醒超出的字數
讓錯誤提示資訊具有引導性和一致性
尼爾森的十大可用性原則中有一條建議，優雅而清晰地告知使用者發生錯誤的情況。一個有效的錯誤提示資訊包括以下資訊：
- 清晰地告知使用者發生了什麼
- 解釋使用者如何解決問題
- 儘可能儲存使用者已輸入的資訊
使用者表單輸入錯誤
使用者確認提交表單資訊後，意味著APP與使用者建立了對話關係，系統有義務在使用者遇到錯誤和不確定狀況的時候能幫助他們渡過難關。這個過程應該更加情感化，而不是充滿冷冰冰的技術術語。
關於輸入錯誤最重要的原則是：“主動跟使用者交流！當錯誤發生時告知他們！”一般來說，一個好的表單包括三個要點：
- 在恰當的時間和地點告知錯誤
- 恰當的提示文字顏色
- 簡潔的提示資訊語言
這三個要點都有一個共同的目標——避免困惑。
在恰當的時間和地點告知錯誤 （內聯檢驗）
使用者不喜歡他們填完所有表單，然後提交後系統才告知他們填寫錯誤。最好的時機是使用者剛填完資訊就告知他們是否填寫正確，實時表單驗證能幫助我們實現這個功能。
實時內聯檢驗系統，能立即告知使用者剛輸入的資料是否正確。實時檢驗後，如果填寫區域有明顯的錯誤提示，提交按鈕將無法點選直到錯誤被改正。實時檢驗能幫助使用者更快地糾正錯誤，而不是讓他們點完提交按鈕後才知道錯誤的發生。
圖片來源：Google
下面是幾個內聯檢驗的例子：
- 使用者名稱已註冊
圖片來源：Material Design
- 超過字數限制
圖片來源：Material Design
恰當的顏色（符合直覺的設計）
在設計驗證效果時顏色是最好的工具。因為它能觸發人的本能反應，紅色的資訊表示錯誤，黃色的資訊表示警告，這種暗示效果是非常顯著的。錯誤提示資訊的顏色要與背景色作好對比使它更易讀，但要保證你的產品的介面顏色對所有使用者的可及性（accessible），這是一個好的視覺設計中的重要組成部分。
讓所有使用者都能注意到提示資訊。圖片來源：Material Design
清晰易懂的提示內容（告知使用者發生了什麼）
你要讓錯誤提示資訊，像是一個有血有肉的人寫出來的。為了達到這個目標，你應該使用和使用者同樣的語言，避免一些技術術語，提示資訊應該清晰地描述：
- 發生了什麼錯誤以及可能的原因。
- 使用者應該如何修正錯誤。
第一個錯誤案例中只告知使用者資料驗證錯誤而沒有告知使用者為什麼發生錯誤（是拼寫錯誤？還是已佔用？）。圖片來源：Material Design
APP自身的錯誤
這種錯誤跟使用者輸入無關，是系統因某種原因無法呈現給使用者他們想要看到的結果。這種情況就應該向使用者解釋，為什麼沒有結果以及相應的解決方法。
資料同步錯誤/無法載入
當資料連線中斷，資訊無法載入的時候，我們應該直接告訴他們具體情況。由於我們無法呈現資訊，我們可以設計一個空白狀態頁來填補這個空白。可惜大多數空白狀態頁都看起來太……空白了。就像下面這個案例，錯誤資訊只說明瞭“系統發生了一個錯誤”，並沒有提供任何有幫助的資訊。
圖片來源：Spotify
將你設計的錯誤資訊想象成一次跟使用者的交談，在使用者遇到挫折時，你用友好、具有幫助的話語來幫助使用者瞭解基本情況並鼓勵他們解決這個問題。
遇到錯誤時就像置身於孤島一般感到迷惑和不安？沒關係！請遵循系統的建議，保持冷靜，點上火把，然後下拉重新整理。圖片來源：Azendoo
如果合適的話，你也可以在空白狀態頁放上按鈕或連結來幫助使用者完成任務。但要注意的是，你提供的選項要確保是奏效的。舉個例子，你知道使用者點選“再試一次”的按鈕後仍無法解決錯誤，這時就應該去掉這個選項。
永遠不要使用生硬的技術語言來描述錯誤。
這個錯誤提示是程式設計師寫給程式設計師看的
不要自以為是地認為使用者瞭解錯誤發生的原因或認為他們懂技術，你要用通俗易懂的語言來描述錯誤。
不相容狀態錯誤
不相容狀態錯誤發生在當使用者嘗試執行兩個互相沖突的操作時，例如在飛航模式打電話或是在沒有網路的情況下看線上視訊。你應該清楚地告知使用者他們正在選擇的狀態是怎樣的，以防止發生不相容狀態的錯誤。簡單來說，就是不要讓他們開始他們不能完成的操作。
闡明問題發生的原因和來源。圖片來源：Material Design
結論
關於錯誤狀態的設計，最好的解決方案就是不讓錯誤發生，我們要儘可能地在使用者犯錯之前引導使用者通往正確的道路。如果錯誤無法避免要發生，一個設計良好的錯誤狀態設計，不僅能教導使用者如何使用app，還不會讓使用者認為自己很愚蠢。