移動(dòng)用戶體驗(yàn)設(shè)計(jì):錯(cuò)誤狀態(tài)
[國外設(shè)計(jì)第157期]
錯(cuò)誤”時(shí)有發(fā)生啸澡。在App與生活中都會(huì)發(fā)生吝镣。有時(shí)是因?yàn)槲覀兎噶隋e(cuò)誤钝诚,有時(shí)是系統(tǒng)錯(cuò)誤庐船。無論錯(cuò)誤原因是什么银酬,它們——還有解決方式——對(duì)用戶體驗(yàn)影響深遠(yuǎn)。但它往往不被重視,草草處理錯(cuò)誤、組織混亂的錯(cuò)誤信息會(huì)使用戶沮喪睹欲,最終拋棄你的應(yīng)用瓷翻。相反勒奇,處理得當(dāng)?shù)腻e(cuò)誤提示,能把失敗變?yōu)轶@喜。
本文中,我們會(huì)討論如何優(yōu)化app的設(shè)計(jì)嗤攻,來盡力防止用戶錯(cuò)誤,并建立良好的錯(cuò)誤信息诽俯。
錯(cuò)誤是什么妇菱?
錯(cuò)誤(或者說錯(cuò)誤狀態(tài))發(fā)生在app未能完成某個(gè)預(yù)期操作時(shí),例如:
app不理解用戶的輸入*
app出錯(cuò)了
用戶試圖同時(shí)進(jìn)行兩個(gè)矛盾的操作
無論是誰引起的,每一種錯(cuò)誤對(duì)于用戶而言闯团,都會(huì)成為一種阻礙辛臊。好在,設(shè)計(jì)良好的錯(cuò)誤處理能減少這種阻礙偷俭。
預(yù)防用戶錯(cuò)誤
設(shè)計(jì)過app的同學(xué)浪讳,應(yīng)該很熟悉各種限制條件缰盏。例如網(wǎng)絡(luò)狀況差的情況下涌萤,很難填寫表單,而且?guī)缀鯖]法同步數(shù)據(jù)口猜。要考慮到這些限制负溪,設(shè)計(jì)更易使用的app,將錯(cuò)誤減到最少济炎。換句話說川抡,應(yīng)該提供建議、加上限制须尚、保持靈活崖堤,第一時(shí)間預(yù)防用戶犯錯(cuò)。
讓錯(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í)告知他們偎箫!”簡單說,優(yōu)秀的表單驗(yàn)證由3個(gè)重要元素組成:
在適當(dāng)時(shí)機(jī)和位置告知錯(cuò)誤
為錯(cuò)誤信息選擇合適的顏色
用簡明的語言描述錯(cuò)誤
所有這些都有一個(gè)主要目標(biāo)——避免困惑皆串。
適當(dāng)?shù)臅r(shí)機(jī)和位置(行內(nèi)驗(yàn)證)
用戶并不喜歡填完一個(gè)長表單并提交之后淹办,才發(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ò)誤。
下面是幾個(gè)行內(nèi)表單驗(yàn)證的案例:
不匹配的內(nèi)容
超過或不滿規(guī)定字?jǐn)?shù)
合適的顏色(直觀的設(shè)計(jì))
顏色是設(shè)計(jì)驗(yàn)證信息的最佳手段。因?yàn)樗芤l(fā)本能作用漱凝,紅色的錯(cuò)誤信息和黃色的警告信息非常有效疮蹦。錯(cuò)誤文字應(yīng)當(dāng)易于閱讀,與背景有足夠的反差茸炒,讓人能注意到愕乎。但要確保界面中的顏色適用于所有用戶,這是優(yōu)秀視覺設(shè)計(jì)的重要因素壁公。
簡明的信息(發(fā)生了什么)
確保錯(cuò)誤信息是寫給人看的。要實(shí)現(xiàn)這一點(diǎn)紊册,就得用用戶的語言來說話比肄,避免使用技術(shù)術(shù)語,用用戶的詞匯來表達(dá)一切囊陡。驗(yàn)證信息要清晰陳述以下內(nèi)容:
什么出錯(cuò)了芳绩,為什么。
用戶接下來該做什么來解決錯(cuò)誤撞反。
典型的錯(cuò)誤會(huì)直接說“信息不正確”丁稀,沒有告訴用戶它為什么錯(cuò)了(是數(shù)據(jù)類型錯(cuò)誤吼拥?還是已經(jīng)被占用了?)线衫。確保信息清晰明確凿可。圖片來源:Material Design
應(yīng)用的錯(cuò)誤
應(yīng)用也會(huì)發(fā)生錯(cuò)誤,它不受用戶輸入影響授账。這種情況下枯跑,用戶會(huì)遭遇意料之外的狀態(tài)。顯示錯(cuò)誤時(shí)白热,要解釋一下用戶為什么一無所獲敛助,如何擺脫當(dāng)前處境。
同步錯(cuò)誤/加載錯(cuò)誤
當(dāng)同步或鏈接斷開屋确,或者內(nèi)容加載失敗時(shí)纳击,應(yīng)該告知用戶续扔。要預(yù)先告訴他們。由于沒有數(shù)據(jù)焕数,可以使用空狀態(tài)填補(bǔ)空隙纱昧。可悲事實(shí)是堡赔,許多空狀態(tài)看起來……真的是空的识脆。下面的例子中,錯(cuò)誤界面只說“發(fā)生了錯(cuò)誤”善已,沒有提供一點(diǎn)有用的信息灼捂。
把錯(cuò)誤提示想象成與用戶的一場(chǎng)對(duì)話雕拼。在遭遇失敗時(shí)纵东,用友好且有意義的空狀態(tài)來溝通粘招。提供基本所需的信息來幫助用戶啥寇,鼓勵(lì)他們解決問題。
在適當(dāng)時(shí)機(jī)邓线,提供鏈接或按鈕幫助用戶完成任務(wù)。但要提供你所能做到的操作煌恢。如果明知道會(huì)失敗骇陈,就不要放出“再試一次”這樣的選項(xiàng)。
不要展示原始錯(cuò)誤信息
下面這個(gè)例子中的消息非彻宓郑晦澀嚇人你雌。
這種錯(cuò)誤信息二汛,是由開發(fā)者寫給另一名開發(fā)者看的婿崭。
不要假設(shè)人們知道提示信息的來龍去脈,或者指望他們是技術(shù)專家肴颊,要用簡單的語言告訴人們哪里出錯(cuò)了氓栈。如何用人話來解釋這些錯(cuò)誤?把它寫下來婿着,那就是你的錯(cuò)誤提示文案授瘦。
不匹配的狀態(tài)錯(cuò)誤
用戶試圖執(zhí)行沖突操作時(shí)幸海,會(huì)引發(fā)不匹配的狀態(tài)錯(cuò)誤,例如在飛行模式下?lián)茈娫挵挛瘢蛘唠x線狀態(tài)播放在線視頻物独。應(yīng)該清晰表明他們所處狀態(tài),避免他們陷入這般境地氯葬。簡單說挡篓,就是不要讓用戶執(zhí)行無法完成的任務(wù)。
結(jié)論
從不出現(xiàn)的錯(cuò)誤信息才是最好的官研。最佳方式是引導(dǎo)用戶向正確方向前進(jìn),第一時(shí)間預(yù)防錯(cuò)誤發(fā)生闯睹。但當(dāng)錯(cuò)誤確實(shí)發(fā)生時(shí)戏羽,設(shè)計(jì)精良的錯(cuò)誤處理,不僅能教育用戶按你預(yù)期的方式使用app楼吃,還能防止用戶感到茫然始花。
感謝閱讀!
文章轉(zhuǎn)載自可樂橙孩锡,微信號(hào)可樂橙酷宵,博客http://www.colachan.com/