優化App的設計:防止用戶錯誤,并建立良好的錯誤信息

7 評論 18775 瀏覽 77 收藏 10 分鐘

“錯誤”時有發生。在App與生活中都會發生。有時是因為我們犯了錯誤,有時是系統錯誤。無論錯誤原因是什么,它們——還有解決方式——對用戶體驗影響深遠。但它往往不被重視,草草處理錯誤、組織混亂的錯誤信息會使用戶沮喪,最終拋棄你的應用。相反,處理得當的錯誤提示,能把失敗變為驚喜。在本文中,我們會討論如何優化app的設計,來盡力防止用戶錯誤,并建立良好的錯誤信息。

錯誤是什么?

錯誤(或者說錯誤狀態)發生在app未能完成某個預期操作時,例如:

  • app不理解用戶的輸入
  • app出錯了
  • 用戶試圖同時進行兩個矛盾的操作

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

預防用戶錯誤

設計過app的同學,應該很熟悉各種限制條件。例如網絡狀況差的情況下,很難填寫表單,而且幾乎沒法同步數據。要考慮到這些限制,設計更易使用的app,將錯誤減到最少。換句話說,應該提供建議、加上限制、保持靈活,第一時間預防用戶犯錯。

Twitter因推文的字數限制而出名,他們會在用戶達到字數上限之前提出警示。

讓錯誤信息統一有效

10條可用性啟迪中建議,要清晰優雅地表達出錯誤信息。有效的錯誤提示應該提供如下信息:

  • 明確表達發生了什么
  • 描述用戶應該如何應對
  • 盡可能多地保留用戶輸入的信息

用戶輸入錯誤

用戶輸入信息驗證的意義在于與用戶交流,并引導他們克服困難,應對不確定。

輸入驗證的首要原則是:“出現錯誤時告知他們!”簡單說,優秀的表單驗證由3個重要元素組成:

  • 在適當時機和位置告知錯誤
  • 為錯誤信息選擇合適的顏色
  • 用簡明的語言描述錯誤

所有這些都有一個主要目標——避免困惑。

適當的時機和位置(行內驗證)

用戶并不喜歡填完一個長表單并提交之后,才發現哪里填錯了。告知輸入信息正確與否的恰當時機,正是在輸入之后。實時驗證就該出場了。

實時行內驗證會立刻對用戶輸入作出提醒。如果使用行內表單驗證,就會清晰標明有錯誤的輸入項,發生錯誤時,提交按鈕也會置灰。用戶不必等到點擊提交按鈕才看到錯誤,他們能更早改正錯誤。

圖片來源:Google

下面是幾個行內表單驗證的案例:

(1)不匹配的內容

圖片來源:Material Design

提交之前檢測出的錯誤。

(2)超過或不滿規定字數

圖片來源:Material Design

帶有字數統計的輸入框與錯誤提示。

合適的顏色(直觀的設計)

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

圖片來源:Material Design

讓人注意到提示信息。

簡明的信息(發生了什么)

確保錯誤信息是寫給人看的。要實現這一點,就得用用戶的語言來說話,避免使用技術術語,用用戶的詞匯來表達一切。驗證信息要清晰陳述以下內容:

  • 什么出錯了,為什么。
  • 用戶接下來該做什么來解決錯誤。

圖片來源:Material Design

【圖注:左圖中的錯誤提示為,“輸入日期錯誤”;右圖中的錯誤提示為,“這是個過去的日期”?!?/p>

典型的錯誤會直接說“信息不正確”,沒有告訴用戶它為什么錯了(是數據類型錯誤?還是已經被占用了?)。確保信息清晰明確。

應用的錯誤

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

同步錯誤/加載錯誤

當同步或鏈接斷開,或者內容加載失敗時,應該告知用戶。要預先告訴他們。由于沒有數據,可以使用空狀態
填補空隙。可悲事實是,許多空狀態看起來……真的是空的。下面的例子中,錯誤界面只說“發生了錯誤”,沒有提供一點有用的信息。

圖片來源:Spotify

這個空狀態界面是個死胡同。

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

走丟了,失去連接,就像置身于荒島?可以跟隨建議,保持冷靜,點起篝火,持續刷新。圖片來源:Azendoo
在適當時機,提供鏈接或按鈕幫助用戶完成任務。但要提供你所能做到的操作。如果明知道會失敗,就不要放出“再試一次”這樣的選項。

不要展示原始錯誤信息

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

【圖注:操作無法完成。(WDGeneralNetworkError error 500.)】

這種錯誤信息,是由開發者寫給另一名開發者看的。

不要假設人們知道提示信息的來龍去脈,或者指望他們是技術專家,要用簡單的語言告訴人們哪里出錯了。如何用人話來解釋這些錯誤?把它寫下來,那就是你的錯誤提示文案。

不匹配的狀態錯誤

用戶試圖執行沖突操作時,會引發不匹配的狀態錯誤,例如在飛行模式下撥電話,或者離線狀態播放在線視頻。應該清晰表明他們所處狀態,避免他們陷入這般境地。簡單說,就是不要讓用戶執行無法完成的任務。

圖片來源:Material Design

清晰表明錯誤的原因和出處。

結論

從不出現的錯誤信息才是最好的。最佳方式是引導用戶向正確方向前進,第一時間預防錯誤發生。但當錯誤確實發生時,設計精良的錯誤處理,不僅能教育用戶按你預期的方式使用app,還能防止用戶感到茫然。

感謝閱讀!

 

原文地址:https://uxplanet.org/mobile-ux-design-user-errors-1ad1f5d664f9#.fzcsdis0n

原文作者:Nick Babich?I’m a software developer, tech enthusiast and UI/UX lover. http://babich.biz

#專欄作家#

可樂橙,微信公眾號:可樂橙(colachangreen)。人人都是產品經理專欄作家,UI/UX設計師,關注互聯網,關注科技?,F居杭州,與小伙伴們正在創業途中?;蛟S不是一名優秀的設計師,至少是個快樂的設計師。

本文翻譯發布于人人都是產品經理,未經許可,不得轉載。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 很好的提升交互感方法

    來自上海 回復
  2. 很好!說到底還是要用同理心來看待產品。

    來自江蘇 回復
  3. 英文看不懂啊

    來自湖南 回復
  4. 學習了

    來自廣東 回復
    1. 11

      來自上海 回復
    2. fh

      來自上海 回復
    3. 24

      來自上海 回復