優(yōu)化App的設(shè)計(jì):防止用戶錯(cuò)誤,并建立良好的錯(cuò)誤信息

7 評(píng)論 18718 瀏覽 77 收藏 10 分鐘

“錯(cuò)誤”時(shí)有發(fā)生。在App與生活中都會(huì)發(fā)生。有時(shí)是因?yàn)槲覀兎噶隋e(cuò)誤,有時(shí)是系統(tǒng)錯(cuò)誤。無(wú)論錯(cuò)誤原因是什么,它們——還有解決方式——對(duì)用戶體驗(yàn)影響深遠(yuǎn)。但它往往不被重視,草草處理錯(cuò)誤、組織混亂的錯(cuò)誤信息會(huì)使用戶沮喪,最終拋棄你的應(yīng)用。相反,處理得當(dāng)?shù)腻e(cuò)誤提示,能把失敗變?yōu)轶@喜。在本文中,我們會(huì)討論如何優(yōu)化app的設(shè)計(jì),來(lái)盡力防止用戶錯(cuò)誤,并建立良好的錯(cuò)誤信息。

錯(cuò)誤是什么?

錯(cuò)誤(或者說(shuō)錯(cuò)誤狀態(tài))發(fā)生在app未能完成某個(gè)預(yù)期操作時(shí),例如:

  • app不理解用戶的輸入
  • app出錯(cuò)了
  • 用戶試圖同時(shí)進(jìn)行兩個(gè)矛盾的操作

無(wú)論是誰(shuí)引起的,每一種錯(cuò)誤對(duì)于用戶而言,都會(huì)成為一種阻礙。好在,設(shè)計(jì)良好的錯(cuò)誤處理能減少這種阻礙。

預(yù)防用戶錯(cuò)誤

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

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

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

10條可用性啟迪中建議,要清晰優(yōu)雅地表達(dá)出錯(cuò)誤信息。有效的錯(cuò)誤提示應(yīng)該提供如下信息:

  • 明確表達(dá)發(fā)生了什么
  • 描述用戶應(yīng)該如何應(yīng)對(duì)
  • 盡可能多地保留用戶輸入的信息

用戶輸入錯(cuò)誤

用戶輸入信息驗(yàn)證的意義在于與用戶交流,并引導(dǎo)他們克服困難,應(yīng)對(duì)不確定。

輸入驗(yàn)證的首要原則是:“出現(xiàn)錯(cuò)誤時(shí)告知他們!”簡(jiǎn)單說(shuō),優(yōu)秀的表單驗(yàn)證由3個(gè)重要元素組成:

  • 在適當(dāng)時(shí)機(jī)和位置告知錯(cuò)誤
  • 為錯(cuò)誤信息選擇合適的顏色
  • 用簡(jiǎn)明的語(yǔ)言描述錯(cuò)誤

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

適當(dāng)?shù)臅r(shí)機(jī)和位置(行內(nèi)驗(yàn)證)

用戶并不喜歡填完一個(gè)長(zhǎng)表單并提交之后,才發(fā)現(xiàn)哪里填錯(cuò)了。告知輸入信息正確與否的恰當(dāng)時(shí)機(jī),正是在輸入之后。實(shí)時(shí)驗(yàn)證就該出場(chǎng)了。

實(shí)時(shí)行內(nèi)驗(yàn)證會(huì)立刻對(duì)用戶輸入作出提醒。如果使用行內(nèi)表單驗(yàn)證,就會(huì)清晰標(biāo)明有錯(cuò)誤的輸入項(xiàng),發(fā)生錯(cuò)誤時(shí),提交按鈕也會(huì)置灰。用戶不必等到點(diǎn)擊提交按鈕才看到錯(cuò)誤,他們能更早改正錯(cuò)誤。

圖片來(lái)源:Google

下面是幾個(gè)行內(nèi)表單驗(yàn)證的案例:

(1)不匹配的內(nèi)容

圖片來(lái)源:Material Design

提交之前檢測(cè)出的錯(cuò)誤。

(2)超過(guò)或不滿規(guī)定字?jǐn)?shù)

圖片來(lái)源:Material Design

帶有字?jǐn)?shù)統(tǒng)計(jì)的輸入框與錯(cuò)誤提示。

合適的顏色(直觀的設(shè)計(jì))

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

圖片來(lái)源:Material Design

讓人注意到提示信息。

簡(jiǎn)明的信息(發(fā)生了什么)

確保錯(cuò)誤信息是寫給人看的。要實(shí)現(xiàn)這一點(diǎn),就得用用戶的語(yǔ)言來(lái)說(shuō)話,避免使用技術(shù)術(shù)語(yǔ),用用戶的詞匯來(lái)表達(dá)一切。驗(yàn)證信息要清晰陳述以下內(nèi)容:

  • 什么出錯(cuò)了,為什么。
  • 用戶接下來(lái)該做什么來(lái)解決錯(cuò)誤。

圖片來(lái)源:Material Design

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

典型的錯(cuò)誤會(huì)直接說(shuō)“信息不正確”,沒(méi)有告訴用戶它為什么錯(cuò)了(是數(shù)據(jù)類型錯(cuò)誤?還是已經(jīng)被占用了?)。確保信息清晰明確。

應(yīng)用的錯(cuò)誤

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

同步錯(cuò)誤/加載錯(cuò)誤

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

圖片來(lái)源:Spotify

這個(gè)空狀態(tài)界面是個(gè)死胡同。

把錯(cuò)誤提示想象成與用戶的一場(chǎng)對(duì)話。在遭遇失敗時(shí),用友好且有意義的空狀態(tài)來(lái)溝通。提供基本所需的信息來(lái)幫助用戶,鼓勵(lì)他們解決問(wèn)題。

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

不要展示原始錯(cuò)誤信息

下面這個(gè)例子中的消息非?;逎瓏樔恕?/p>

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

這種錯(cuò)誤信息,是由開發(fā)者寫給另一名開發(fā)者看的。

不要假設(shè)人們知道提示信息的來(lái)龍去脈,或者指望他們是技術(shù)專家,要用簡(jiǎn)單的語(yǔ)言告訴人們哪里出錯(cuò)了。如何用人話來(lái)解釋這些錯(cuò)誤?把它寫下來(lái),那就是你的錯(cuò)誤提示文案。

不匹配的狀態(tài)錯(cuò)誤

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

圖片來(lái)源:Material Design

清晰表明錯(cuò)誤的原因和出處。

結(jié)論

從不出現(xiàn)的錯(cuò)誤信息才是最好的。最佳方式是引導(dǎo)用戶向正確方向前進(jìn),第一時(shí)間預(yù)防錯(cuò)誤發(fā)生。但當(dāng)錯(cuò)誤確實(shí)發(fā)生時(shí),設(shè)計(jì)精良的錯(cuò)誤處理,不僅能教育用戶按你預(yù)期的方式使用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

#專欄作家#

可樂(lè)橙,微信公眾號(hào):可樂(lè)橙(colachangreen)。人人都是產(chǎn)品經(jīng)理專欄作家,UI/UX設(shè)計(jì)師,關(guān)注互聯(lián)網(wǎng),關(guān)注科技?,F(xiàn)居杭州,與小伙伴們正在創(chuàng)業(yè)途中?;蛟S不是一名優(yōu)秀的設(shè)計(jì)師,至少是個(gè)快樂(lè)的設(shè)計(jì)師。

本文翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,不得轉(zhuǎn)載。

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 很好的提升交互感方法

    來(lái)自上海 回復(fù)
  2. 很好!說(shuō)到底還是要用同理心來(lái)看待產(chǎn)品。

    來(lái)自江蘇 回復(fù)
  3. 英文看不懂啊

    來(lái)自湖南 回復(fù)
  4. 學(xué)習(xí)了

    來(lái)自廣東 回復(fù)
    1. 11

      來(lái)自上海 回復(fù)
    2. fh

      來(lái)自上海 回復(fù)
    3. 24

      來(lái)自上海 回復(fù)