2020-12-1 資深UI設(shè)計者
使用互聯(lián)網(wǎng)產(chǎn)品過程中，會有很多因素造成操作錯誤或失誤，導(dǎo)致無法順利完成任務(wù)。因此產(chǎn)品的容錯性設(shè)計是交互設(shè)計中的重要內(nèi)容。
用戶在實際使用互聯(lián)網(wǎng)產(chǎn)品的過程中，會有很多因素造成操作錯誤或者失誤，而導(dǎo)致無法順利完成任務(wù)，或者完成任務(wù)的效率很低。產(chǎn)品自身所具備的容錯能力對于各種使用場景的有效覆蓋，可以提升產(chǎn)品糾錯效率、降低用戶操作出錯概率，因此產(chǎn)品的容錯性設(shè)計是交互設(shè)計中的重要內(nèi)容，也是提升用戶體驗不可忽視的一個環(huán)節(jié)。
容錯性概念源于計算機領(lǐng)域，容錯性是指計算機系統(tǒng)在發(fā)生故障的情況下，依然能夠保證系統(tǒng)正常運行。計算機這種保證系統(tǒng)正常運行的能力也被稱為容錯能力。
本篇內(nèi)容我們討論的是容錯性在互聯(lián)網(wǎng)產(chǎn)品領(lǐng)域的內(nèi)涵和意義。延伸到互聯(lián)網(wǎng)產(chǎn)品設(shè)計領(lǐng)域，容錯性的范疇更為寬泛，涉及產(chǎn)品對錯誤操作承載能力的多個方面，包括：如何降低用戶操作的出錯率，如何及時提供糾錯幫助，以及如何給用戶提供解決方案等內(nèi)容。
「 即便你的產(chǎn)品90％的時間都運行良好，但是如果在用戶需要幫助時置之不理，他們是不會忘記這一點的?！禛etting Real》」
一個產(chǎn)品設(shè)計的無論多么簡單，用戶都難免在使用過程中因為各種原因而犯錯。互聯(lián)網(wǎng)產(chǎn)品面向的用戶群體是復(fù)雜多樣化，教育背景的不同，行為習(xí)慣的差異，復(fù)雜的使用場景，都會使得用戶的真實操作相比產(chǎn)品設(shè)計之初的預(yù)期有一定出入。此外，一些產(chǎn)品本身存在的因素，例如產(chǎn)品路徑復(fù)雜，邏輯不暢等，也有可能造成用戶無法順利完成任務(wù)，亦或是完成任務(wù)的效率低，出錯率高。產(chǎn)品在遇到錯誤如不能夠及時糾錯幫用戶挽回損失，會給用戶帶來不好的用戶體驗，也是產(chǎn)品的一種設(shè)計缺陷。因此設(shè)計師應(yīng)具有良好的容錯性設(shè)計思維，盡量避免用戶錯誤操作的出現(xiàn)，當用戶出現(xiàn)錯誤操作時，幫助用戶識別、診斷，及時反饋問題所在，并提出有效的解決方案，幫助用戶快速從錯誤中恢復(fù)。最終達到使產(chǎn)品更可用、更易用的目的，給用戶帶來更優(yōu)的用戶體驗，使用戶與產(chǎn)品的交流更加順暢。
互聯(lián)網(wǎng)產(chǎn)品的容錯設(shè)計可從用戶使用產(chǎn)品的三個階段來考慮，即操作前、操作中、操作后。可大致歸納為以下幾方面內(nèi)容：首先在用戶操作前給予正確有效的引導(dǎo)；其次在重要的操作步驟給予用戶及時有效的提示；當用戶發(fā)生操作錯誤或失誤時及時為用戶糾錯并提供有效的解決方案；最后幫助用戶在錯誤發(fā)生后迅速回到正確狀態(tài)。
在用戶開始任務(wù)操作前給出用戶正確有效的提示，可減少錯誤操作的發(fā)生。需要注意的是，引導(dǎo)應(yīng)盡量醒目且簡單易理解，確保能引起用戶注意，并且在用戶注意到后快速獲取信息，到有效的防錯幫助。
產(chǎn)品常見的引導(dǎo)主要針對兩種情況。第一種是針對于新手用戶的功能介紹，不同于曾使用過產(chǎn)品的用戶或者高級用戶，新用戶首次使用產(chǎn)品的過程其實是一個學(xué)習(xí)的過程，此時需要讓用戶快速了解產(chǎn)品核心功能及主要的操作，幫助他們更快地上手。
例如下圖導(dǎo)航APP新版本的新手引導(dǎo)【如圖1】，在用戶首次啟動產(chǎn)品時，產(chǎn)品用趣味性的圖文形式給用戶展示了打車、公交乘車、實時公交路線等功能的信息介紹，能夠讓新用戶快速熟悉核心功能，并在正式使用產(chǎn)品的過程中提升效率，降低出錯率。
圖1-導(dǎo)航APP新手引導(dǎo)
第二種情況是針對產(chǎn)品上線的新功能或者較大的功能變動而設(shè)計的初次引導(dǎo)，產(chǎn)品的功能改動可能會是用戶產(chǎn)生不同程度的陌生感，適當?shù)奶崾究蓭椭脩艨焖偈煜ば鹿δ茳c或頁面信息的調(diào)整。初次引導(dǎo)常見的方式有很多種，包括：遮罩式引導(dǎo)、彈窗式引導(dǎo)、氣泡、浮層式引導(dǎo)等等。
例如版本升級后的音樂APP【如圖2】，首頁使用情感化圖文設(shè)計加遮罩式的引導(dǎo)，可以有效將注意力集中到特定功能上，用戶進入頁面第一時間就注意到，確保了信息傳達的有效性。
圖2-新版首頁的遮罩引導(dǎo)
以上列舉的內(nèi)容屬于狹義層面的引導(dǎo)，用戶尚處在被動接受引導(dǎo)的學(xué)習(xí)階段，在此階段引導(dǎo)的目的是提醒和防錯。從廣義的層面來講，我們可將對用戶的引導(dǎo)理解為”消減信息的不對稱性“，當用戶面對可影響其決策的因素時，給予用戶關(guān)鍵性的信息提示和說明，可以促使用戶做出正確的決策。
針對需要加工時間的特殊品類，如烘焙蛋糕，京東到家在用戶決策的關(guān)鍵頁面和步驟展示時效提醒【如圖3】，避免用戶在完成訂單信息填寫或結(jié)算后才發(fā)現(xiàn)商品的配送時間超出用戶的期望，會給用戶帶來極為不好的購物體驗。
圖3-京東到家頁面中的時效提醒
當用戶進行一些如修改、刪除、覆蓋等不可逆操作時，系統(tǒng)需要在用戶做出這類操作指令后告知其產(chǎn)生的后果，讓用戶自主決策是否選擇繼續(xù)執(zhí)行。在此階段的提示需要注意從以下兩個角度考慮：一是提示的方式，二是提示的時機。
在用戶完成任務(wù)的操作路徑中，大部分產(chǎn)品首先會選擇以彈框的形式對用戶進行信息提示。彈框可以分為模態(tài)彈框和非模態(tài)彈框兩種大的類型【如圖4】，主要區(qū)別在于是否強制用戶進行交互操作。如何選擇合適的彈框形式對用戶進行提示，要依據(jù)提示信息的優(yōu)先級和視覺權(quán)重的大小，同時要清楚不同類型的彈框適合的場景。
圖4-彈框分類
模態(tài)彈窗是較重的提示方式，在用戶進行重要且有風(fēng)險的操作時可優(yōu)先考慮使用。其優(yōu)點是可以快速獲取用戶的視覺焦點，缺點是會打斷用戶當前的操作流程，用戶需要進行如單擊“確定”、“取消”、“關(guān)閉”按鈕等操作指令將該對話框關(guān)閉后才可繼續(xù)操作。
而非模態(tài)彈框?qū)儆谳p量級的提示方式，其優(yōu)點是不強制用戶進行交互操作，或者用戶依然可以在頁面進行其他操作。彈框出現(xiàn)一段時間后會自動消失，所以但不利于承載過多文字信息。非模態(tài)彈框?qū)τ脩粼斐傻母蓴_較小，但也因此容易被用戶忽視。
給用戶的信息提示還有一點不可忽視的是反饋時機，應(yīng)確保用戶在關(guān)鍵的操作步驟得到及時的反饋，因為滯后的反饋可能會導(dǎo)致用戶因為某一個環(huán)節(jié)的錯誤操作不得不重復(fù)操作一遍之前的流程，或者要修改關(guān)的一系列信息。
【如圖5】中的登錄頁面，用戶登錄需要依次輸入手機號、密碼、圖片驗證碼，但如果用戶輸錯了密碼并不能馬上得到反饋，依然可以繼續(xù)填寫驗證碼，只有在全部信息填寫完之后點擊登錄，系統(tǒng)才會校驗密碼，并提示用戶密碼錯誤重新確認，用戶需要再次輸入密碼以及識別并輸入一次驗證碼。但如果系統(tǒng)驗證密碼可以提前到輸入圖片驗證碼的步驟之前，在用戶在得到密碼填寫錯誤提示后則可以停止操作后面的步驟，馬上修改密碼。
圖5-登錄頁面中的提示滯后
同時，盡量為用戶提供相應(yīng)的解決方案，這樣可以提升糾錯信息有效性。BOSS直聘會因為手機儲存空間不足給用戶報錯，并且會告知用戶如何去管理儲存空間，以解決此問題【如圖7】。
圖6-多行表單報錯頁面
在產(chǎn)品設(shè)計中，為降低操作的出錯率，限制也是一種方式。在可能造成錯誤操作的入口適當設(shè)置操作障礙或者禁止操作，增加不可逆操作的難度，可以有效規(guī)避錯誤操作發(fā)生風(fēng)險、減少誤操作概率。例如常見的頁面信息置灰、按鈕置灰的設(shè)計，可以有效避免用戶的誤操作。
此外通過讓控件、動作、選項等變得可見，盡可能減少用戶記憶負擔，把需要記憶的內(nèi)容作為輔助信息提供給用戶，或幫助用戶自動完成信息填寫也可以幫助用戶快捷地完成既定任務(wù)，降低出錯率。例如【如圖8】在信息填寫的步驟，可在用戶已復(fù)制的內(nèi)容和上傳的圖片中自動識別姓名、電話、地址等內(nèi)容，并在用戶確認后自動幫用戶填寫對應(yīng)信息，為用戶大大節(jié)省時間和記憶成本，快捷地完成既定任務(wù)，降低出錯率。
在用戶執(zhí)行操作后，應(yīng)盡可能的為用戶保留已操作的信息，以便在發(fā)生錯誤或失誤后可撤銷之前的操作。針對一些流程較為復(fù)雜的操作任務(wù)，記錄用戶在每一步驟的操作信息，讓用戶可以從出錯的步驟上及時恢復(fù)到正確的流程上，或恢復(fù)到距離錯誤操作最近的步驟，可有效的幫用戶挽回失誤。例如很多圖片編輯的APP都支持用戶撤銷當前的操作，在用戶對照片進行多編輯后頁面上會有回到上一步和下一步操作的按鈕，可讓用戶有機會恢復(fù)到上一步操作結(jié)果上。
圖9-圖片編輯頁面頂部切換上一步和下一步的操作按鈕
以上是關(guān)于互聯(lián)網(wǎng)產(chǎn)品中容錯設(shè)計的概念、重要性以及設(shè)計方法的一些闡述和思考。在產(chǎn)品設(shè)計的實際應(yīng)用的中，可以模擬使用場景，對目標用戶使用產(chǎn)品的真實操作進行行為觀察，分析對比產(chǎn)品設(shè)計的操作路徑與用戶真實操作的差別，發(fā)現(xiàn)并收集用戶可能發(fā)生錯誤或失誤操作的關(guān)鍵步驟，驗證產(chǎn)品的容錯能力是否能達到有效覆蓋。同時，也要通過產(chǎn)品數(shù)據(jù)的對比分析得出用戶操作錯誤及失誤的真實原因，指導(dǎo)并提升產(chǎn)品容錯能力的設(shè)計優(yōu)化，進而不斷提升產(chǎn)品的可用性和易用性。
文章來源：站酷 作者：DXC設(shè)計體驗中心
藍藍設(shè)計( tweetduck.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
藍藍設(shè)計的小編 http://tweetduck.com