編者按：用戶和UI界面交互的時候，出現(xiàn)錯誤或者犯錯風(fēng)險的時候，系統(tǒng)通常需要發(fā)出報錯和提醒信息，這種信息的交互和 UX 設(shè)計策略有哪些講究？今天這篇文章來自UX領(lǐng)域權(quán)威機構(gòu) NNGroup，文章闡述了設(shè)計報錯信息的 12  個原則和技巧，以下是正文：

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

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

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

在這篇文章當(dāng)中，我將會介紹創(chuàng)建報錯信息的 12 個核心的準(zhǔn)則，這些準(zhǔn)則按照功能劃分為3類：

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

一、可見性準(zhǔn)則

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

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

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

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

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

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

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

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

3、根據(jù)影響程度來規(guī)劃報錯的樣式

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

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

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

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

這個網(wǎng)站將用戶尚未輸入內(nèi)容的狀態(tài)識別出來，并發(fā)出報錯提醒，這會讓什么都沒做的用戶，還沒輸入就感到沮喪，這個案例是一個標(biāo)準(zhǔn)的錯誤演示。

二、溝通指引

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

5、使用易懂的語言

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

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

6、簡明扼要地描述問題

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

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

7、提供建設(shè)性的意見

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

8、采用積極語氣，不要責(zé)怪用戶

積極而不帶偏見的文案設(shè)計，能夠很好地安撫用戶，不要指責(zé)用戶或者暗示他們做錯事，不要使用諸如 invalid 、illegal 和 incorrect 這樣的詞匯，任何一套系統(tǒng)能否被正確使用，都取決于它的設(shè)計者而不是使用它的用戶，因此系統(tǒng)需要做優(yōu)雅的適配而不是推卸責(zé)任。需要謹(jǐn)慎使用幽默的表述，雖然它可能會消解嚴(yán)肅的氣氛，但是如果用戶經(jīng)常碰到同類問題，幽默會變?yōu)閷擂巍?/p>

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

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

三、效率提升

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

9、防范可能出現(xiàn)的錯誤

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

10、保留用戶輸入的內(nèi)容

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

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

11、減少可能需要糾錯的內(nèi)容

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

12、簡明扼要地介紹系統(tǒng)的工作原理

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

vistaprint 解釋了超出衣服區(qū)域之外的文本會發(fā)生什么變化。

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

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

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

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

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

作者：陳子木