如何設計報錯信息？頂尖權威機構總結了 12 條原則！

編者按：用戶和UI界面交互的時候，出現錯誤或者犯錯風險的時候，系統通常需要發出報錯和提醒信息，這種信息的交互和 UX 設計策略有哪些講究？今天這篇文章來自UX領域權威機構 NNGroup，文章闡述了設計報錯信息的 12? 個原則和技巧，以下是正文：

通過高可見性、建設性的溝通方式，以及設計優秀的報錯信息來幫助用戶了解情況，維持良好的用戶體驗。

30 多年前，Jakob Nielsen 曾經提出了著名的 「10大可用性啟發式」，它們是如今數字產品設計領域的通用指南，這些啟發式有著極強的通用性，在如今的世界當中，也同樣適用。在這 10 條規則中，第九條描述的是「報錯信息設計」的重要性：幫助用戶識別、診斷并從報錯信息中獲得解決方案。處理報錯信息是至關重要的，因為它們是構建「可用性體驗」的5個核心要素之一。

錯誤信息的定義：錯誤信息是用戶工作流程中斷后系統生成的提示信息，通知用戶出現了不兼容、意料外的情況。

在這篇文章當中，我將會介紹創建報錯信息的 12 個核心的準則，這些準則按照功能劃分為3類：

• 可見性：報錯信息如何呈現給用戶
• 溝通：報錯信息傳達的問題，以及可能的解決方案
• 效率：報錯信息如何幫助用戶彌合評估和執行的兩道坎

一、可見性準則

報錯信息必須以醒目且易于識別的方式，呈現到用戶面前。

1、盡量在錯誤源附近顯示報錯信息

通過在錯誤源附近的界面來放置報錯信息的指示器組件，借此來減少用戶的認知符合，符合臨近性的設計能夠讓用戶天然將錯誤源和報錯信息聯系到一起。

在 instagram 當中，當用戶添加一個無效的 url 的時候，報錯信息距離實際的填寫字段控件很遠，效果很微妙。

2、使用引人矚目的、有冗余空間的、可訪問性良好的指示器

粗體，高對比度的紅色文本是傳統的報錯信息所偏好的視覺設計方式，另外一種吸引用戶注意力的方式，是使用精心設計的動畫，來吸引用戶的注意力。不過，值得注意的是，全球大約有 3.5億用戶是有視力障礙的，所以結合可用性設計的原則，永遠不要只使用動畫或者配色等單一要素要作為報錯指示。

亞馬遜的網站上，使用了多種方式來報錯，突出邊框、增加圖標和紅色的文本。

CafePress 使用彈出提醒的方式來吸引用戶的注意力，提供報錯信息。

3、根據影響程度來規劃報錯的樣式

不同的錯誤可能帶來不同程度的影響，所以，有的錯誤提示僅僅只是可能出現潛在問題或者不良結果的時候，給予用戶適時提醒，而用戶依然可以繼續推進，沿著既定的工作流推進，在其他的地方補足缺陷。這種只需要「知道」即可的報錯信息，和真正會造成用戶前進阻礙的報錯信息，區分開，這類信息就可以使用標簽提醒、toast 通知或者橫幅通知告知用戶，無需交互或者只需較少交互就能消除，而真正需要用戶解決才可推進的嚴重錯誤和問題，則使用模態對話框，也就是彈出框來呈現。

4、避免過早顯示報錯信息

過早出現報錯信息，會讓用戶產生抵觸心理，這是一種典型的「敵對模式」，就像是學生回答問題之前就得到評估，這種情況會非常讓人惱火。如果用戶在填寫表單的時候，有可能填錯的風險，可以在交互上使用表單內置的實時錯誤提醒，這種交互模式能夠有效降低交互成本。

Clear 在靠近輸入框的地方將輸入字符的要求清晰地標識出來，幫助用戶規避可能存在的錯誤操作。

這個網站將用戶尚未輸入內容的狀態識別出來，并發出報錯提醒，這會讓什么都沒做的用戶，還沒輸入就感到沮喪，這個案例是一個標準的錯誤演示。

二、溝通指引

報錯信息不僅要做好視覺效果，它們還得包含詳細的說明，幫助用戶解決問題，糾正錯誤。

5、使用易懂的語言

報錯信息應該使用清晰易懂的文本，盡可能直白地進行描述，避免使用過于專業的技術術語，使用用戶熟悉的語言來進行表述。互聯網上最典型的報錯信息就是 404 ，頁面無法訪問時瀏覽器會如此顯示，這種錯誤代碼對于絕大多數用戶而言可能是無效的信息，用戶無法快速獲得有效的信息指引。

所以，盡量隱藏晦澀的術語、縮寫和代碼，僅只考慮技術診斷而無視用戶需求的信息是殘缺的。

6、簡明扼要地描述問題

「發生了錯誤」這樣的表述對于用戶而言缺乏上下文語境，確切地描述問題，才能幫助用戶解決問題。也就是說，要避免表述過度技術化和精準化，還要維持文本內容表述的可理解性。用戶對于系統的理解方式，可能和技術人員對于整個系統的理解的心智模型，截然不同。

在迪士尼的網站上搜索就餐地點時，如果篩選條件設置的較為苛刻就會收到報錯信息，但是迪士尼的文案使用雙關，讓人感到混淆，這種表述不夠清楚。

7、提供建設性的意見

僅僅陳述問題也說不夠的，還需要為用戶提供一些補救措施。在電商網站的產品缺貨的時候，可以在頁面中告知用戶何時會補貨，或者讓用戶提供聯系方式（比如電子郵件），當產品補貨之后發送信息通知用戶。

8、采用積極語氣，不要責怪用戶

積極而不帶偏見的文案設計，能夠很好地安撫用戶，不要指責用戶或者暗示他們做錯事，不要使用諸如 invalid 、illegal 和 incorrect 這樣的詞匯，任何一套系統能否被正確使用，都取決于它的設計者而不是使用它的用戶，因此系統需要做優雅的適配而不是推卸責任。需要謹慎使用幽默的表述，雖然它可能會消解嚴肅的氣氛，但是如果用戶經常碰到同類問題，幽默會變為尷尬。

Target 給予用戶明確的反饋，即用戶必須花費更多的運費才能保證當日送達。在文案上，Target 強調的是價格區間和閾值，并沒有表達用戶購買力不足的事情。

如果未成年用戶打開國家地理的網站，國家地理的彈出框會表示拒絕，但是并沒有解釋緣由。最好的呈現方式，是告知未成年用戶，只有成年用戶可以訪問網站內容。

三、效率提升

好的報錯信息不僅僅解釋問題，而且能夠幫用戶節省時間和精力，幫助用戶加速解決問題，并在未來幫助用戶規避問題。

9、防范可能出現的錯誤

最糟糕的報錯是不給用戶報錯提示。當用戶出現了狀況，但是系統沒有給予報錯信息反饋的時候，接下來可能會產生一系列的誤解，然后會出現大量的錯誤操作，白費力氣的補救和持續的挫敗感。多年來，電子郵件都一直會盡職盡責地幫你傳遞郵件，限制絕大多數的郵件 APP 會在你忘記添加附件的時候，對你給予提示，避免出問題的尷尬。

10、保留用戶輸入的內容

讓用戶在已編輯過的內容上進行修改是比較容易的，重新輸入會很容易給用戶以挫敗感。比如想要發送和輸入的文本字段可能會因為不滿意或者誤操作而被舍棄，這個時候系統可以提示用戶是否要放棄已編輯的內容，如果用戶愿意修改，還能在原來文本的基礎上進行調整。

Instagram 一方面會詢問準備退出編輯器的用戶是否放棄內容，還提供選擇讓用戶可以將它們放到草稿本當中。

11、減少可能需要糾錯的內容

如果可能預測用戶的操作和行為，那么盡量選擇可以減少增加后續糾錯的交互。比如，不要讓用戶直接選擇城市的郵件編碼，因為本身就很容易輸入錯誤，這個時候與其讓用戶輸入再報錯，不如直接使用選擇器控件，讓用戶逐層篩選點擊和自己所在地匹配的郵政編碼。

12、簡明扼要地介紹系統的工作原理

向用戶簡明扼要地介紹系統的運作方式和原理，以及如何解決當前的問。如果你需要其他的信息，請使用超鏈接文本，跳轉到相關的解釋界面上。

vistaprint 解釋了超出衣服區域之外的文本會發生什么變化。

Zazzle 雖然會警告用戶，但是并沒有告知用戶它所產出的結果是文本被截斷，所定制的衣服很難讓用戶滿意。

極端情況下使用新奇的體驗來消解挫敗

上述的準則都是普世的、必不可少的。不過，最后還是要補充一條準則。對于極端的情況，完全的失敗，和不可修復的問題，或者是因為不可抗力造成的錯誤，比如服務器崩潰了這種情況，除了等，用戶什么都坐不了。這個時候可以使用新奇幽默的語氣來消解這種極度的挫敗感。不要低估了謙遜和愉悅所能帶來的能量，尤其是在極限的情況下。這種策略可能會增加品牌的記憶點，并且通過低風險的方式來維持用戶的興趣。

ChatGPT 會在這種情況下盡量讓用戶愉悅，引導用戶體驗他們的開放性功能，直到服務器恢復。

Twitter 這幅著名的插畫，就是通知用戶服務器崩了。