沒有系統(tǒng)在工作時(shí)不會(huì)出錯(cuò)。錯(cuò)誤的原因可能是因?yàn)橛脩粢部赡苁且驗(yàn)橄到y(tǒng)。在這兩種情況下，以正確的方式處理錯(cuò)誤，對(duì)于良好的用戶體驗(yàn)是至關(guān)重要的。

這里列舉好的錯(cuò)誤提示應(yīng)該包含的3個(gè)重要部分：

1.清晰的文本消息

2.正確的錯(cuò)誤提示位置

3.良好的視覺設(shè)計(jì)

· 清晰的文本消息

1.錯(cuò)誤提示應(yīng)該清楚

錯(cuò)誤提示應(yīng)該清楚地說明問題是什么，為什么發(fā)生，以及如何處理。把你的錯(cuò)誤提示想象成與用戶的對(duì)話 （這就要保證錯(cuò)誤提示應(yīng)該像和人在交流）。確保你的錯(cuò)誤提示是有禮貌的，可以理解的，友好的，不含行話的。

2.錯(cuò)誤提示應(yīng)該是有幫助的

只寫出一些錯(cuò)誤是不夠的，要向用戶展示如何盡可能快地解決問題。例如，Microsoft描述了什么是錯(cuò)誤的，并在錯(cuò)誤消息中提供了解決方案，以便您可以立即解決此問題。

3.錯(cuò)誤提示應(yīng)該是特定的情況

很多時(shí)候，網(wǎng)站對(duì)所有驗(yàn)證狀態(tài)只使用一個(gè)錯(cuò)誤提示。例如“您的電子郵件地址行為空” “輸入有效的電子郵件地址”。MailChimp以另一種方式進(jìn)行處理，每個(gè)電子郵件驗(yàn)證狀態(tài)都有3個(gè)錯(cuò)誤消息。第一次提交表單時(shí)檢查輸入字段是否不為空，第二三次檢查是否有“@”和“.”字符。（但是“請(qǐng)輸入一個(gè)值”并不是錯(cuò)誤提示一個(gè)很好的例子，因?yàn)橛脩舨磺宄枰斎胧裁礃拥闹担?

4.錯(cuò)誤提示應(yīng)該是有禮貌的

不要責(zé)怪你的用戶，即使他們做錯(cuò)了。對(duì)你的用戶要有禮貌，讓他們感覺舒適方便。這是一個(gè)很好的提升品牌的機(jī)會(huì)，并適當(dāng)?shù)奶砑优c品牌相關(guān)的錯(cuò)誤提示。

5.如果情景合適的話，使用幽默的話術(shù)

在你的錯(cuò)誤提示中應(yīng)當(dāng)小心的使用幽默元素。首先，錯(cuò)誤信息應(yīng)該是內(nèi)容簡(jiǎn)潔且有幫助的。但是，如果合適的話，在錯(cuò)誤提示中添加一些幽默話術(shù)有助于提升用戶體驗(yàn)。

· 錯(cuò)誤提示的正確位置

好的錯(cuò)誤提示是你可以在需要的時(shí)候看到。盡量將錯(cuò)誤提示放在相關(guān)的UI元素附近。

· 錯(cuò)誤提示的正確視覺設(shè)計(jì)

錯(cuò)誤提示應(yīng)該是清晰可見。使用高對(duì)比度的文本和背景顏色，以便用戶可以輕松快速注意到并閱讀提示。

通常來(lái)說，紅色用于錯(cuò)誤信息文本。在某些情況下，可以使用黃色或橙色作為錯(cuò)誤信息顏色。因?yàn)榧t色對(duì)用戶來(lái)說壓力太大。在這兩種情況下，請(qǐng)確保錯(cuò)誤提示的信息是清晰的，與背景顏色明顯對(duì)比。不要忘記在顏色旁邊提供一個(gè)相關(guān)的圖標(biāo)，以改善色盲患者的可訪問性。

· 結(jié)論

錯(cuò)誤提示是改善用戶體驗(yàn)，分享品牌和彰顯個(gè)性的好機(jī)會(huì)。注意一個(gè)好的錯(cuò)誤提示的所有方面：語(yǔ)言，位置和視覺設(shè)計(jì)，使它成為一個(gè)非常完美的錯(cuò)誤提示。

原文：uxplanet

譯文：GSDS