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

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

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

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

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

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

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

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

1、盡量在錯(cuò)誤源附近顯示報(bào)錯(cuò)信息

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

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

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

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

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

CafePress 使用彈出提醒的方式來吸引用戶的注意力，提供報(bào)錯(cuò)信息。

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

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

4、避免過早顯示報(bào)錯(cuò)信息

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

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

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

二、溝通指引

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

5、使用易懂的語(yǔ)言

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

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

6、簡(jiǎn)明扼要地描述問題

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

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

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

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

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

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

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

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

三、效率提升

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

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

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

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

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

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

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

如果可能預(yù)測(cè)用戶的操作和行為，那么盡量選擇可以減少增加后續(xù)糾錯(cuò)的交互。比如，不要讓用戶直接選擇城市的郵件編碼，因?yàn)楸旧砭秃苋菀纵斎脲e(cuò)誤，這個(gè)時(shí)候與其讓用戶輸入再報(bào)錯(cuò)，不如直接使用選擇器控件，讓用戶逐層篩選點(diǎn)擊和自己所在地匹配的郵政編碼。

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

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

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

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

極端情況下使用新奇的體驗(yàn)來消解挫敗

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

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

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

作者：陳子木