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