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