文：Nick Babich ?| ?譯文轉(zhuǎn)自：MyZaker

" 錯誤 " 時有發(fā)生。在 App 與生活中都會發(fā)生。有時是因為我們犯了錯誤，有時是系統(tǒng)錯誤。無論錯誤原因是什么，它們——還有解決方式——對用戶體驗影響深遠。但它往往不被重視，草草處理錯誤、組織混亂的錯誤信息會使用戶沮喪，最終拋棄你的應(yīng)用。相反，處理得當(dāng)?shù)腻e誤提示，能把失敗變?yōu)轶@喜。

本文中，我們會討論如何優(yōu)化 app 的設(shè)計，來盡力防止用戶錯誤，并建立良好的錯誤信息。錯誤是什么？錯誤（或者說錯誤狀態(tài)）發(fā)生在 app 未能完成某個預(yù)期操作時，例如：

1.app 不理解用戶的輸入

2.app 出錯了

3.用戶試圖同時進行兩個矛盾的操作

無論是誰引起的，每一種錯誤對于用戶而言，都會成為一種阻礙。好在，設(shè)計良好的錯誤處理能減少這種阻礙。

一、預(yù)防用戶錯誤

設(shè)計過 app 的同學(xué)，應(yīng)該很熟悉各種限制條件。例如網(wǎng)絡(luò)狀況差的情況下，很難填寫表單，而且?guī)缀鯖]法同步數(shù)據(jù)。要考慮到這些限制，設(shè)計更易使用的 app，將錯誤減到最少。換句話說，應(yīng)該提供建議、加上限制、保持靈活，第一時間預(yù)防用戶犯錯。

Twitter 因推文的字?jǐn)?shù)限制而出名，他們會在用戶達到字?jǐn)?shù)上限之前提出警示。

讓錯誤信息統(tǒng)一有效

要清晰優(yōu)雅地表達出錯誤信息。有效的錯誤提示應(yīng)該提供如下信息：

明確表達發(fā)生了什么

描述用戶應(yīng)該如何應(yīng)對

盡可能多地保留用戶輸入的信息

用戶輸入錯誤

用戶輸入信息驗證的意義在于與用戶交流，并引導(dǎo)他們克服困難，應(yīng)對不確定。輸入驗證的首要原則是：" 出現(xiàn)錯誤時告知他們！" 簡單說，優(yōu)秀的表單驗證由 3 個重要元素組成：

在適當(dāng)時機和位置告知錯誤

為錯誤信息選擇合適的顏色

用簡明的語言描述錯誤

所有這些都有一個主要目標(biāo)——避免困惑。

適當(dāng)?shù)臅r機和位置（行內(nèi)驗證）

用戶并不喜歡填完一個長表單并提交之后，才發(fā)現(xiàn)哪里填錯了。告知輸入信息正確與否的恰當(dāng)時機，正是在輸入之后。實時驗證就該出場了。實時行內(nèi)驗證會立刻對用戶輸入作出提醒。如果使用行內(nèi)表單驗證，就會清晰標(biāo)明有錯誤的輸入項，發(fā)生錯誤時，提交按鈕也會置灰。用戶不必等到點擊提交按鈕才看到錯誤，他們能更早改正錯誤。

圖片來源：Google

帶有字?jǐn)?shù)統(tǒng)計的輸入框與錯誤提示。圖片來源：Material Design

合適的顏色（直觀的設(shè)計）

顏色是設(shè)計驗證信息的最佳手段。因為它能引發(fā)本能作用，紅色的錯誤信息和黃色的警告信息非常有效。錯誤文字應(yīng)當(dāng)易于閱讀，與背景有足夠的反差，讓人能注意到。但要確保界面中的顏色適用于所有用戶，這是優(yōu)秀視覺設(shè)計的重要因素。

讓人注意到提示信息。圖片來源：Material Design

簡明的信息（發(fā)生了什么）

確保錯誤信息是寫給人看的。要實現(xiàn)這一點，就得用用戶的語言來說話，避免使用技術(shù)術(shù)語，用用戶的詞匯來表達一切。驗證信息要清晰陳述以下內(nèi)容：

1.什么出錯了，為什么。

2.用戶接下來該做什么來解決錯誤。

左圖中的錯誤提示為，" 輸入日期錯誤 "；右圖中的錯誤提示為，" 這是個過去的日期 " ? ?圖片來源：Material Design

典型的錯誤會直接說 " 信息不正確 "，沒有告訴用戶它為什么錯了：是數(shù)據(jù)類型錯誤？還是已經(jīng)被占用了？請確保信息清晰明確。

二、應(yīng)用的錯誤

應(yīng)用也會發(fā)生錯誤，它不受用戶輸入影響。這種情況下，用戶會遭遇意料之外的狀態(tài)。顯示錯誤時，要解釋一下用戶為什么一無所獲，如何擺脫當(dāng)前處境。

同步錯誤 / 加載錯誤

當(dāng)同步或鏈接斷開，或者內(nèi)容加載失敗時，應(yīng)該告知用戶。要預(yù)先告訴他們。由于沒有數(shù)據(jù)，可以使用空狀態(tài)填補空隙?？杀聦嵤?，許多空狀態(tài)看起來……真的是空的。下面的例子中，錯誤界面只說 " 發(fā)生了錯誤 "，沒有提供一點有用的信息。

這個空狀態(tài)界面是個死胡同。圖片來源：Spotify

把錯誤提示想象成與用戶的一場對話。在遭遇失敗時，用友好且有意義的空狀態(tài)來溝通。提供基本所需的信息來幫助用戶，鼓勵他們解決問題。

走丟了，失去連接，就像置身于荒島？可以跟隨建議，保持冷靜，點起篝火，持續(xù)刷新。圖片來源：Azendoo

在適當(dāng)時機，提供鏈接或按鈕幫助用戶完成任務(wù)。但要提供你所能做到的操作。如果明知道會失敗，就不要放出 " 再試一次 " 這樣的選項。

不要展示原始錯誤信息

下面這個例子中的消息非?；逎瓏樔?。

操作無法完成。 ( WDGeneralNetworkError error 500. )

這種錯誤信息，是由開發(fā)者寫給另一名開發(fā)者看的。不要假設(shè)人們知道提示信息的來龍去脈，或者指望他們是技術(shù)專家，要用簡單的語言告訴人們哪里出錯了。如何用人話來解釋這些錯誤？把它寫下來，那就是你的錯誤提示文案。

三、用戶試圖同時進行兩個矛盾的操作

用戶試圖執(zhí)行沖突操作時，會引發(fā)不匹配的狀態(tài)錯誤，例如在飛行模式下?lián)茈娫?，或者離線狀態(tài)播放在線視頻。應(yīng)該清晰表明他們所處狀態(tài)，避免他們陷入這般境地。簡單說，就是不要讓用戶執(zhí)行無法完成的任務(wù)。

清晰表明錯誤的原因和出處。圖片來源：Material Design

結(jié)論

從不出現(xiàn)的錯誤信息才是最好的。最佳方式是引導(dǎo)用戶向正確方向前進，第一時間預(yù)防錯誤發(fā)生。但當(dāng)錯誤確實發(fā)生時，設(shè)計精良的錯誤處理，不僅能教育用戶按你預(yù)期的方式使用 app，還能防止用戶感到茫然。

感謝閱讀！