用戶(hù)在實(shí)際使用互聯(lián)網(wǎng)產(chǎn)品的過(guò)程中，會(huì)有很多因素造成操作錯(cuò)誤或者失誤，而導(dǎo)致無(wú)法順利完成任務(wù)，或者完成任務(wù)的效率很低。產(chǎn)品自身所具備的容錯(cuò)能力對(duì)于各種使用場(chǎng)景的有效覆蓋，可以提升產(chǎn)品糾錯(cuò)效率、降低用戶(hù)操作出錯(cuò)概率，因此產(chǎn)品的容錯(cuò)性設(shè)計(jì)是交互設(shè)計(jì)中的重要內(nèi)容，也是提升用戶(hù)體驗(yàn)不可忽視的一個(gè)環(huán)節(jié)。

1、容錯(cuò)性是什么

容錯(cuò)性概念源于計(jì)算機(jī)領(lǐng)域，容錯(cuò)性是指計(jì)算機(jī)系統(tǒng)在發(fā)生故障的情況下，依然能夠保證系統(tǒng)正常運(yùn)行。計(jì)算機(jī)這種保證系統(tǒng)正常運(yùn)行的能力也被稱(chēng)為容錯(cuò)能力。

本篇內(nèi)容我們討論的是容錯(cuò)性在互聯(lián)網(wǎng)產(chǎn)品領(lǐng)域的內(nèi)涵和意義。延伸到互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)領(lǐng)域，容錯(cuò)性的范疇更為寬泛，涉及產(chǎn)品對(duì)錯(cuò)誤操作承載能力的多個(gè)方面，包括：如何降低用戶(hù)操作的出錯(cuò)率，如何及時(shí)提供糾錯(cuò)幫助，以及如何給用戶(hù)提供解決方案等內(nèi)容。

2、為什么需要容錯(cuò)性設(shè)計(jì)

「 即便你的產(chǎn)品90％的時(shí)間都運(yùn)行良好，但是如果在用戶(hù)需要幫助時(shí)置之不理，他們是不會(huì)忘記這一點(diǎn)的?！禛etting Real》」

一個(gè)產(chǎn)品設(shè)計(jì)的無(wú)論多么簡(jiǎn)單，用戶(hù)都難免在使用過(guò)程中因?yàn)楦鞣N原因而犯錯(cuò)?；ヂ?lián)網(wǎng)產(chǎn)品面向的用戶(hù)群體是復(fù)雜多樣化，教育背景的不同，行為習(xí)慣的差異，復(fù)雜的使用場(chǎng)景，都會(huì)使得用戶(hù)的真實(shí)操作相比產(chǎn)品設(shè)計(jì)之初的預(yù)期有一定出入。此外，一些產(chǎn)品本身存在的因素，例如產(chǎn)品路徑復(fù)雜，邏輯不暢等，也有可能造成用戶(hù)無(wú)法順利完成任務(wù)，亦或是完成任務(wù)的效率低，出錯(cuò)率高。產(chǎn)品在遇到錯(cuò)誤如不能夠及時(shí)糾錯(cuò)幫用戶(hù)挽回?fù)p失，會(huì)給用戶(hù)帶來(lái)不好的用戶(hù)體驗(yàn)，也是產(chǎn)品的一種設(shè)計(jì)缺陷。因此設(shè)計(jì)師應(yīng)具有良好的容錯(cuò)性設(shè)計(jì)思維，盡量避免用戶(hù)錯(cuò)誤操作的出現(xiàn)，當(dāng)用戶(hù)出現(xiàn)錯(cuò)誤操作時(shí)，幫助用戶(hù)識(shí)別、診斷，及時(shí)反饋問(wèn)題所在，并提出有效的解決方案，幫助用戶(hù)快速?gòu)腻e(cuò)誤中恢復(fù)。最終達(dá)到使產(chǎn)品更可用、更易用的目的，給用戶(hù)帶來(lái)更優(yōu)的用戶(hù)體驗(yàn)，使用戶(hù)與產(chǎn)品的交流更加順暢。

3、容錯(cuò)性的設(shè)計(jì)方法

互聯(lián)網(wǎng)產(chǎn)品的容錯(cuò)設(shè)計(jì)可從用戶(hù)使用產(chǎn)品的三個(gè)階段來(lái)考慮，即操作前、操作中、操作后?？纱笾職w納為以下幾方面內(nèi)容：首先在用戶(hù)操作前給予正確有效的引導(dǎo)；其次在重要的操作步驟給予用戶(hù)及時(shí)有效的提示；當(dāng)用戶(hù)發(fā)生操作錯(cuò)誤或失誤時(shí)及時(shí)為用戶(hù)糾錯(cuò)并提供有效的解決方案；最后幫助用戶(hù)在錯(cuò)誤發(fā)生后迅速回到正確狀態(tài)。

3.1給予用戶(hù)正確有效的引導(dǎo)

在用戶(hù)開(kāi)始任務(wù)操作前給出用戶(hù)正確有效的提示，可減少錯(cuò)誤操作的發(fā)生。需要注意的是，引導(dǎo)應(yīng)盡量醒目且簡(jiǎn)單易理解，確保能引起用戶(hù)注意，并且在用戶(hù)注意到后快速獲取信息，到有效的防錯(cuò)幫助。

產(chǎn)品常見(jiàn)的引導(dǎo)主要針對(duì)兩種情況。第一種是針對(duì)于新手用戶(hù)的功能介紹，不同于曾使用過(guò)產(chǎn)品的用戶(hù)或者高級(jí)用戶(hù)，新用戶(hù)首次使用產(chǎn)品的過(guò)程其實(shí)是一個(gè)學(xué)習(xí)的過(guò)程，此時(shí)需要讓用戶(hù)快速了解產(chǎn)品核心功能及主要的操作，幫助他們更快地上手。

例如下圖導(dǎo)航APP新版本的新手引導(dǎo)【如圖1】，在用戶(hù)首次啟動(dòng)產(chǎn)品時(shí)，產(chǎn)品用趣味性的圖文形式給用戶(hù)展示了打車(chē)、公交乘車(chē)、實(shí)時(shí)公交路線(xiàn)等功能的信息介紹，能夠讓新用戶(hù)快速熟悉核心功能，并在正式使用產(chǎn)品的過(guò)程中提升效率，降低出錯(cuò)率。

圖1-導(dǎo)航APP新手引導(dǎo)

第二種情況是針對(duì)產(chǎn)品上線(xiàn)的新功能或者較大的功能變動(dòng)而設(shè)計(jì)的初次引導(dǎo)，產(chǎn)品的功能改動(dòng)可能會(huì)是用戶(hù)產(chǎn)生不同程度的陌生感，適當(dāng)?shù)奶崾究蓭椭脩?hù)快速熟悉新功能點(diǎn)或頁(yè)面信息的調(diào)整。初次引導(dǎo)常見(jiàn)的方式有很多種，包括：遮罩式引導(dǎo)、彈窗式引導(dǎo)、氣泡、浮層式引導(dǎo)等等。

例如版本升級(jí)后的音樂(lè)APP【如圖2】，首頁(yè)使用情感化圖文設(shè)計(jì)加遮罩式的引導(dǎo)，可以有效將注意力集中到特定功能上，用戶(hù)進(jìn)入頁(yè)面第一時(shí)間就注意到，確保了信息傳達(dá)的有效性。

圖2-新版首頁(yè)的遮罩引導(dǎo)

以上列舉的內(nèi)容屬于狹義層面的引導(dǎo)，用戶(hù)尚處在被動(dòng)接受引導(dǎo)的學(xué)習(xí)階段，在此階段引導(dǎo)的目的是提醒和防錯(cuò)。從廣義的層面來(lái)講，我們可將對(duì)用戶(hù)的引導(dǎo)理解為”消減信息的不對(duì)稱(chēng)性“，當(dāng)用戶(hù)面對(duì)可影響其決策的因素時(shí)，給予用戶(hù)關(guān)鍵性的信息提示和說(shuō)明，可以促使用戶(hù)做出正確的決策。

針對(duì)需要加工時(shí)間的特殊品類(lèi)，如烘焙蛋糕，京東到家在用戶(hù)決策的關(guān)鍵頁(yè)面和步驟展示時(shí)效提醒【如圖3】，避免用戶(hù)在完成訂單信息填寫(xiě)或結(jié)算后才發(fā)現(xiàn)商品的配送時(shí)間超出用戶(hù)的期望，會(huì)給用戶(hù)帶來(lái)極為不好的購(gòu)物體驗(yàn)。

圖3-京東到家頁(yè)面中的時(shí)效提醒

3.2 給予用戶(hù)及時(shí)有效的提示

當(dāng)用戶(hù)進(jìn)行一些如修改、刪除、覆蓋等不可逆操作時(shí)，系統(tǒng)需要在用戶(hù)做出這類(lèi)操作指令后告知其產(chǎn)生的后果，讓用戶(hù)自主決策是否選擇繼續(xù)執(zhí)行。在此階段的提示需要注意從以下兩個(gè)角度考慮：一是提示的方式，二是提示的時(shí)機(jī)。

3.2.1提示的方式

在用戶(hù)完成任務(wù)的操作路徑中，大部分產(chǎn)品首先會(huì)選擇以彈框的形式對(duì)用戶(hù)進(jìn)行信息提示。彈框可以分為模態(tài)彈框和非模態(tài)彈框兩種大的類(lèi)型【如圖4】，主要區(qū)別在于是否強(qiáng)制用戶(hù)進(jìn)行交互操作。如何選擇合適的彈框形式對(duì)用戶(hù)進(jìn)行提示，要依據(jù)提示信息的優(yōu)先級(jí)和視覺(jué)權(quán)重的大小，同時(shí)要清楚不同類(lèi)型的彈框適合的場(chǎng)景。

圖4-彈框分類(lèi)

模態(tài)彈窗是較重的提示方式，在用戶(hù)進(jìn)行重要且有風(fēng)險(xiǎn)的操作時(shí)可優(yōu)先考慮使用。其優(yōu)點(diǎn)是可以快速獲取用戶(hù)的視覺(jué)焦點(diǎn)，缺點(diǎn)是會(huì)打斷用戶(hù)當(dāng)前的操作流程，用戶(hù)需要進(jìn)行如單擊“確定”、“取消”、“關(guān)閉”按鈕等操作指令將該對(duì)話(huà)框關(guān)閉后才可繼續(xù)操作。

而非模態(tài)彈框?qū)儆谳p量級(jí)的提示方式，其優(yōu)點(diǎn)是不強(qiáng)制用戶(hù)進(jìn)行交互操作，或者用戶(hù)依然可以在頁(yè)面進(jìn)行其他操作。彈框出現(xiàn)一段時(shí)間后會(huì)自動(dòng)消失，所以但不利于承載過(guò)多文字信息。非模態(tài)彈框?qū)τ脩?hù)造成的干擾較小，但也因此容易被用戶(hù)忽視。

3.2.2 提示的時(shí)機(jī)

給用戶(hù)的信息提示還有一點(diǎn)不可忽視的是反饋時(shí)機(jī)，應(yīng)確保用戶(hù)在關(guān)鍵的操作步驟得到及時(shí)的反饋，因?yàn)闇蟮姆答伩赡軙?huì)導(dǎo)致用戶(hù)因?yàn)槟骋粋€(gè)環(huán)節(jié)的錯(cuò)誤操作不得不重復(fù)操作一遍之前的流程，或者要修改關(guān)的一系列信息。

【如圖5】中的登錄頁(yè)面，用戶(hù)登錄需要依次輸入手機(jī)號(hào)、密碼、圖片驗(yàn)證碼，但如果用戶(hù)輸錯(cuò)了密碼并不能馬上得到反饋，依然可以繼續(xù)填寫(xiě)驗(yàn)證碼，只有在全部信息填寫(xiě)完之后點(diǎn)擊登錄，系統(tǒng)才會(huì)校驗(yàn)密碼，并提示用戶(hù)密碼錯(cuò)誤重新確認(rèn)，用戶(hù)需要再次輸入密碼以及識(shí)別并輸入一次驗(yàn)證碼。但如果系統(tǒng)驗(yàn)證密碼可以提前到輸入圖片驗(yàn)證碼的步驟之前，在用戶(hù)在得到密碼填寫(xiě)錯(cuò)誤提示后則可以停止操作后面的步驟，馬上修改密碼。

圖5-登錄頁(yè)面中的提示滯后

3.3 為用戶(hù)提供糾錯(cuò)幫助以及解決方案

一旦用戶(hù)出現(xiàn)錯(cuò)誤或失誤操作的情況，系統(tǒng)需要為用戶(hù)及時(shí)提供糾錯(cuò)幫助及有效的解決方案，以提高用戶(hù)操作的成功率。

關(guān)于糾錯(cuò)文案的表達(dá)應(yīng)注意盡量簡(jiǎn)潔清晰、精煉準(zhǔn)確，避免使用難懂的術(shù)語(yǔ)，不要在出錯(cuò)信息中使用威脅或者責(zé)備的語(yǔ)氣。應(yīng)主動(dòng)識(shí)別用戶(hù)的情感狀況，語(yǔ)氣友好，讓用戶(hù)感受到“情感支持”，盡量為用戶(hù)緩解因操作失誤產(chǎn)生的挫敗、焦慮等負(fù)面情緒。

此外，糾錯(cuò)信息內(nèi)容不可僅描述場(chǎng)景，還需要向用戶(hù)反饋出錯(cuò)原因，并且有明確的指向性，為用戶(hù)指出錯(cuò)誤出在什么地方。例如在填寫(xiě)部分內(nèi)容較多的表單時(shí)【如圖6】，當(dāng)證件號(hào)填寫(xiě)出錯(cuò)時(shí)，系統(tǒng)及時(shí)為用戶(hù)糾錯(cuò)并用一條紅色的下劃線(xiàn)明確指出了信息填寫(xiě)錯(cuò)誤的位置，用戶(hù)可以立即定位并修改錯(cuò)誤信息。

同時(shí)，盡量為用戶(hù)提供相應(yīng)的解決方案，這樣可以提升糾錯(cuò)信息有效性。BOSS直聘會(huì)因?yàn)槭謾C(jī)儲(chǔ)存空間不足給用戶(hù)報(bào)錯(cuò)，并且會(huì)告知用戶(hù)如何去管理儲(chǔ)存空間，以解決此問(wèn)題【如圖7】。

圖6-多行表單報(bào)錯(cuò)頁(yè)面

圖7-存儲(chǔ)空間不足報(bào)錯(cuò)提醒

在產(chǎn)品設(shè)計(jì)中，為降低操作的出錯(cuò)率，限制也是一種方式。在可能造成錯(cuò)誤操作的入口適當(dāng)設(shè)置操作障礙或者禁止操作，增加不可逆操作的難度，可以有效規(guī)避錯(cuò)誤操作發(fā)生風(fēng)險(xiǎn)、減少誤操作概率。例如常見(jiàn)的頁(yè)面信息置灰、按鈕置灰的設(shè)計(jì)，可以有效避免用戶(hù)的誤操作。

此外通過(guò)讓控件、動(dòng)作、選項(xiàng)等變得可見(jiàn)，盡可能減少用戶(hù)記憶負(fù)擔(dān)，把需要記憶的內(nèi)容作為輔助信息提供給用戶(hù)，或幫助用戶(hù)自動(dòng)完成信息填寫(xiě)也可以幫助用戶(hù)快捷地完成既定任務(wù)，降低出錯(cuò)率。例如【如圖8】在信息填寫(xiě)的步驟，可在用戶(hù)已復(fù)制的內(nèi)容和上傳的圖片中自動(dòng)識(shí)別姓名、電話(huà)、地址等內(nèi)容，并在用戶(hù)確認(rèn)后自動(dòng)幫用戶(hù)填寫(xiě)對(duì)應(yīng)信息，為用戶(hù)大大節(jié)省時(shí)間和記憶成本，快捷地完成既定任務(wù)，降低出錯(cuò)率。

圖8-系統(tǒng)自動(dòng)識(shí)別用戶(hù)復(fù)制文本中的姓名、電話(huà)、地址

3.4 幫助用戶(hù)在錯(cuò)誤發(fā)生后迅速回到正確狀態(tài)

在用戶(hù)執(zhí)行操作后，應(yīng)盡可能的為用戶(hù)保留已操作的信息，以便在發(fā)生錯(cuò)誤或失誤后可撤銷(xiāo)之前的操作。針對(duì)一些流程較為復(fù)雜的操作任務(wù)，記錄用戶(hù)在每一步驟的操作信息，讓用戶(hù)可以從出錯(cuò)的步驟上及時(shí)恢復(fù)到正確的流程上，或恢復(fù)到距離錯(cuò)誤操作最近的步驟，可有效的幫用戶(hù)挽回失誤。例如很多圖片編輯的APP都支持用戶(hù)撤銷(xiāo)當(dāng)前的操作，在用戶(hù)對(duì)照片進(jìn)行多編輯后頁(yè)面上會(huì)有回到上一步和下一步操作的按鈕，可讓用戶(hù)有機(jī)會(huì)恢復(fù)到上一步操作結(jié)果上。

圖9-圖片編輯頁(yè)面頂部切換上一步和下一步的操作按鈕

總結(jié)

以上是關(guān)于互聯(lián)網(wǎng)產(chǎn)品中容錯(cuò)設(shè)計(jì)的概念、重要性以及設(shè)計(jì)方法的一些闡述和思考。在產(chǎn)品設(shè)計(jì)的實(shí)際應(yīng)用的中，可以模擬使用場(chǎng)景，對(duì)目標(biāo)用戶(hù)使用產(chǎn)品的真實(shí)操作進(jìn)行行為觀(guān)察，分析對(duì)比產(chǎn)品設(shè)計(jì)的操作路徑與用戶(hù)真實(shí)操作的差別，發(fā)現(xiàn)并收集用戶(hù)可能發(fā)生錯(cuò)誤或失誤操作的關(guān)鍵步驟，驗(yàn)證產(chǎn)品的容錯(cuò)能力是否能達(dá)到有效覆蓋。同時(shí)，也要通過(guò)產(chǎn)品數(shù)據(jù)的對(duì)比分析得出用戶(hù)操作錯(cuò)誤及失誤的真實(shí)原因，指導(dǎo)并提升產(chǎn)品容錯(cuò)能力的設(shè)計(jì)優(yōu)化，進(jìn)而不斷提升產(chǎn)品的可用性和易用性。

文章來(lái)源：站酷   作者：DXC設(shè)計(jì)體驗(yàn)中心

藍(lán)藍(lán)設(shè)計(jì)( m.sillybuy.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)