廣州熱線

　　當(dāng)用戶遇到404、輸入錯(cuò)誤或加載失敗等錯(cuò)誤場(chǎng)景時(shí)，優(yōu)秀的設(shè)計(jì)師會(huì)懂得如何舒緩他們的焦慮，并引導(dǎo)他們解決問題……

　　“錯(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ò)。

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

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

　　10條可用性啟迪(經(jīng)典的尼爾森十大可用性原則)中建議，要清晰優(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)單說，優(yōu)秀的表單驗(yàn)證由3個(gè)重要元素組成：

　　在適當(dāng)時(shí)機(jī)和位置告知錯(cuò)誤

　　為錯(cuò)誤信息選擇合適的顏色

　　用簡(jiǎn)明的語言描述錯(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ò)誤。

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

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

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

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

　　△ 帶有字?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ì)的重要因素。

　　△ 讓人注意到提示信息。

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

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

　　什么出錯(cuò)了，為什么。

　　用戶接下來該做什么來解決錯(cuò)誤。

　　(圖注：左圖中的錯(cuò)誤提示為，“輸入日期錯(cuò)誤”;右圖中的錯(cuò)誤提示為，“這是個(gè)過去的日期”。)

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

　　應(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)有用的信息。

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

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

　　走丟了，失去連接，就像置身于荒島?可以跟隨建議，保持冷靜，點(diǎn)起篝火，持續(xù)刷新。

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

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

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

　　△ 圖注：操作無法完成。(WDGeneralNetworkError error 500.)

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

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

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

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

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

　　結(jié)論

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

　　武漢肥貓網(wǎng)絡(luò)科技有限公司，是一家集策劃、設(shè)計(jì)、技術(shù)開發(fā)于一體的專業(yè)互聯(lián)網(wǎng)科技服務(wù)公司，致力于為企業(yè)信息化提供驅(qū)動(dòng)力。技術(shù)團(tuán)隊(duì)8年來致力于為客戶提供企業(yè)品牌官網(wǎng)設(shè)計(jì)制作、營(yíng)銷型網(wǎng)站建設(shè)、搜索引擎SEO優(yōu)化、全網(wǎng)營(yíng)銷等服務(wù)。經(jīng)過多年發(fā)展，公司擁有行業(yè)領(lǐng)先的網(wǎng)絡(luò)技術(shù)團(tuán)隊(duì)，先后服務(wù)、推廣了上萬家網(wǎng)站，包括各類中小企業(yè)、上市公司、高校、政府等機(jī)構(gòu)單位。

　　肥貓科技擁有一批朝氣、年輕而極富實(shí)踐經(jīng)驗(yàn)的技術(shù)、設(shè)計(jì)、策劃人才，多次自主開發(fā)業(yè)內(nèi)領(lǐng)先的站群程序、SEO軟件，如鏡像站群、蜂鳥站群等，在網(wǎng)絡(luò)推廣、網(wǎng)絡(luò)營(yíng)銷領(lǐng)域擁有豐富的實(shí)戰(zhàn)經(jīng)驗(yàn)。肥貓科技核心團(tuán)隊(duì)成型5年，契合度高，技術(shù)力量雄厚穩(wěn)定。

　　公司奉行“注重效果，成就客戶價(jià)值”的運(yùn)營(yíng)宗旨，不斷追求技術(shù)、服務(wù)、模式領(lǐng)先的發(fā)展方向和目標(biāo)。憑借著8年以上網(wǎng)絡(luò)整合營(yíng)銷的經(jīng)驗(yàn)和技術(shù)優(yōu)勢(shì)，在企業(yè)建站、網(wǎng)站優(yōu)化、全網(wǎng)營(yíng)銷方面取得了長(zhǎng)足的發(fā)展。全年不間斷地為客戶提供網(wǎng)絡(luò)技術(shù)服務(wù)，保障客戶的線上業(yè)務(wù)通暢運(yùn)營(yíng)，并與眾多知名合作伙伴結(jié)成了廣泛的業(yè)務(wù)聯(lián)盟，創(chuàng)新一站式服務(wù)的獨(dú)特網(wǎng)絡(luò)品牌!

　　肥貓科技將會(huì)以更加朝氣蓬勃的姿態(tài)迎接未來，期待與您攜手共創(chuàng)大贏未來!

　　武漢肥貓網(wǎng)絡(luò)科技有限公司地址：武漢市江岸區(qū)江漢二路金寶大廈18層G2座

　　公司電話：027-82823488 公司官網(wǎng)：www.feimao666.com 公司微信：feimao8899