B端產(chǎn)品的業(yè)務(wù)邏輯較為復(fù)雜，用戶犯錯(cuò)的可能性也較高，且錯(cuò)誤的嚴(yán)重程度對(duì)用戶的影響更大，因此容錯(cuò)性的設(shè)計(jì)對(duì)于端產(chǎn)品來(lái)說(shuō)更加重要。

交互設(shè)計(jì)是對(duì)用戶要完成任務(wù)的操作流程進(jìn)行設(shè)計(jì)，目標(biāo)是使用戶在人機(jī)交互的過(guò)程中使用流暢，感覺(jué)簡(jiǎn)單和易用，而易用的一個(gè)重要的組成部份就是容錯(cuò)性設(shè)計(jì)。

一個(gè)產(chǎn)品設(shè)計(jì)得無(wú)論多么簡(jiǎn)單，都不可避免的會(huì)有用戶在使用時(shí)會(huì)因?yàn)槟撤N原因而出錯(cuò)，遇到錯(cuò)誤時(shí)如果不能迅速的糾正錯(cuò)誤或換回?fù)p失，即便這個(gè)產(chǎn)品擁有再多的用戶，從交互設(shè)計(jì)上來(lái)說(shuō)也是失敗的。

看一個(gè)產(chǎn)品的容錯(cuò)性主要是看這個(gè)產(chǎn)品的用戶在操作時(shí)出現(xiàn)錯(cuò)誤的概率和錯(cuò)誤出現(xiàn)后得到解決的概率和效率。出現(xiàn)錯(cuò)誤的概率越低，且出現(xiàn)錯(cuò)誤后得到解決的概率和效率越高，表明這個(gè)產(chǎn)品的容錯(cuò)性越好，易用性也就越高。

相對(duì)C端產(chǎn)品而言，B端產(chǎn)品的業(yè)務(wù)邏輯較為復(fù)雜、涉及的業(yè)務(wù)場(chǎng)景更為專業(yè)、對(duì)用戶的要求比C端產(chǎn)品要高，那么用戶犯錯(cuò)的可能性也較高，且錯(cuò)誤的嚴(yán)重程度對(duì)用戶的影響更大，因此容錯(cuò)性的設(shè)計(jì)對(duì)于端產(chǎn)品來(lái)說(shuō)更加重要。

在B端產(chǎn)品交互設(shè)計(jì)中，容錯(cuò)性設(shè)計(jì)從用戶操作步驟上可以分為３步：

• 第１步：用戶操作前，有正確且有效的引導(dǎo)、提示、反饋及防錯(cuò)限制；
• 第２步：用戶操作的過(guò)程中，及時(shí)反饋錯(cuò)誤并提供糾錯(cuò)幫助；
• 第３步：用戶操作后，錯(cuò)誤易恢復(fù)。

對(duì)于這3步容錯(cuò)性設(shè)計(jì)的應(yīng)用，詳細(xì)闡述如下：

一、用戶操作前須有正確且有效的引導(dǎo)、提示、反饋及防錯(cuò)限制

1. 提供新手引導(dǎo)

下圖是谷歌廣告投放系統(tǒng)（以下簡(jiǎn)稱Adwords）的新手引導(dǎo)，新手用戶登錄后，可以沿著新手引導(dǎo)設(shè)計(jì)的路徑去了解這個(gè)系統(tǒng)；也可以選擇關(guān)閉，直接完成自己此次的操作目標(biāo)。

2. 為用戶提供專業(yè)術(shù)語(yǔ)的引導(dǎo)

下圖是Adwords的名詞解釋，這樣的名詞解釋幾乎遍布于該系統(tǒng)的每個(gè)角落，很多廣告投放的用戶，遇到新的術(shù)語(yǔ)時(shí)，習(xí)慣性的會(huì)把鼠標(biāo)移到術(shù)語(yǔ)的位置，去查看是否有解釋，所以界面中不需要特別用小問(wèn)號(hào)來(lái)強(qiáng)調(diào)，Adwords對(duì)用戶有可能不懂的術(shù)語(yǔ)都非常貼心的添加了解釋。

名詞解釋中尤其要注意的是：不同須解釋，這又分2兩種場(chǎng)景：

場(chǎng)景1：后臺(tái)常涉及到不同權(quán)限，不同用戶有可能看到的內(nèi)容會(huì)有些不同。而有些B端后臺(tái)，可能會(huì)同一個(gè)人經(jīng)常會(huì)以不同的帳戶身份登錄后臺(tái)，比如一個(gè)客服帶20多個(gè)客戶，分屬于8個(gè)行業(yè)，她每天都要去后臺(tái)操作，而同一個(gè)產(chǎn)品對(duì)應(yīng)不同行業(yè)的功能是不同。

那么，對(duì)于客服而言，我們就需要把這個(gè)“不同”進(jìn)行解釋，如果需要客服去記憶這些“不同”，非常容易會(huì)出錯(cuò)。

場(chǎng)景2：有些術(shù)語(yǔ)從表述上看通俗易懂，而在當(dāng)前平臺(tái)對(duì)其進(jìn)行了重定義，它在這個(gè)平臺(tái)的實(shí)際含義與用戶對(duì)這個(gè)術(shù)語(yǔ)的預(yù)期理解不同，也需要解釋。下圖以Adwords為例，對(duì)可能會(huì)讓用戶產(chǎn)生誤解的通俗術(shù)語(yǔ)“費(fèi)用”進(jìn)行了解釋。

3. 難以理解的圖形，提供引導(dǎo)

非文字圖標(biāo)需帶上文案解釋，以防理解出錯(cuò)。

“解釋”的交互方式有多種，須達(dá)到界面簡(jiǎn)潔與解釋能力的平衡，以Adwords為例，在用戶沒(méi)有觸發(fā)操作時(shí)，只顯示一級(jí)標(biāo)題，便于用戶快速瀏覽其功能，當(dāng)用戶對(duì)某個(gè)功能感興趣時(shí)（鼠標(biāo)移上去時(shí)），給出詳細(xì)的解釋文案，以幫助用戶做決策。

4. 表單填寫引導(dǎo)及反饋

表單中，如同時(shí)存在可填項(xiàng)與不可填項(xiàng)，則須區(qū)分；選中態(tài)與未選中態(tài)要有區(qū)分；默認(rèn)態(tài)與激活太要有區(qū)分；數(shù)據(jù)展示須帶單位，否則會(huì)給客戶看數(shù)據(jù)增加難度。

總之，同一個(gè)頁(yè)面中，對(duì)應(yīng)不同行為的元素，需要讓用戶能感知到不同的反饋。

如：可編輯、可拷貝、可跳轉(zhuǎn)、不可點(diǎn)擊，均用不同的反饋，以便讓用戶能產(chǎn)生對(duì)應(yīng)的感知，避免用戶理解出錯(cuò)。

5. 操作提示的方式

分2種，一種是顯性提示，一種是隱性提示。

提示的格式一個(gè)系統(tǒng)要保持一致性，讓用戶很快能理解這是提示，而不是其它信息，此外，提示文案須言簡(jiǎn)意駭、提示文案的位置可根據(jù)內(nèi)容多寡而定，以輸入框?yàn)槔嚎梢来芜x擇輸入框內(nèi)、框右方、框上方、浮層。

• 顯性提示：通常置于界面上，常用于不需要額外增加界面空間，或用戶不太熟悉、專業(yè)性或風(fēng)險(xiǎn)性較高的使用場(chǎng)景，如財(cái)務(wù)信息處理場(chǎng)景，這種提示對(duì)界面的干擾較大，但是用戶的需求度較高。
• 隱性提示：常用于用戶比較熟悉的、通用的使用場(chǎng)景，如輸入密碼，這種方式的，對(duì)界面的干擾較小，根據(jù)用戶的行為選擇性的出現(xiàn)。以印象筆記的密碼重置的輸入新密碼的隱性提示為例：

6. 防錯(cuò)限制的設(shè)置

將一些可能造成錯(cuò)誤的操作入口設(shè)置障礙，或直接禁止操作，以避免錯(cuò)誤的發(fā)生，如為表單設(shè)置默認(rèn)項(xiàng)、為有要求的數(shù)字錄入設(shè)計(jì)數(shù)字輸入控件、不可點(diǎn)擊的按鈕置灰（需給出置灰的原因提示）等等。

在后臺(tái)的防錯(cuò)限制時(shí)特別容易將置灰和不顯示混淆（后續(xù)會(huì)有文章單獨(dú)細(xì)講），以Ant design數(shù)字輸入框示例如下，數(shù)字輸入框可以設(shè)置輸限制，如限制整數(shù)、小數(shù)點(diǎn)1位、小數(shù)點(diǎn)2位等，以達(dá)到避免用戶輸錯(cuò)的目的。

以Ant design網(wǎng)址文本輸入框示例如下，將常用的內(nèi)容摘出來(lái)，供用戶選擇，以達(dá)到避免用戶輸錯(cuò)的目的。

二、用戶操作的過(guò)程中及時(shí)反饋錯(cuò)誤、提供糾錯(cuò)幫助

1. 反饋，分為防錯(cuò)反饋和出錯(cuò)反饋

防錯(cuò)反饋：如操作過(guò)程實(shí)時(shí)反饋，如Adwords的文本輸入框，實(shí)時(shí)顯示用戶已輸入字?jǐn)?shù)及還可以輸入的字?jǐn)?shù)，以用戶心理有個(gè)預(yù)期，避免輸入出錯(cuò)：

出錯(cuò)反饋：由前、后端反饋組出，部分錯(cuò)誤是可以通過(guò)前端進(jìn)行實(shí)時(shí)校驗(yàn)的，可以實(shí)時(shí)反饋給用戶，這個(gè)稱之為出端反饋；部份錯(cuò)誤，須由后端技術(shù)對(duì)比輸入要求才能給出校驗(yàn)結(jié)果的，須等用戶點(diǎn)擊提交后，才能反饋給用戶，這個(gè)稱之為后端反饋。前端出錯(cuò)反饋以，Adwords的查詢?yōu)槔?/p>

出錯(cuò)反饋文案須易理解，包含出錯(cuò)原因、出錯(cuò)位置、行為引導(dǎo)、建議，以Adwords的反饋為例：

2. 允錯(cuò)

如允許用戶輸入錯(cuò)誤，給予其修正的機(jī)會(huì)、任何彈窗、浮層都允許用戶關(guān)閉、取消、用戶的數(shù)據(jù)在一定范圍內(nèi)允許刪除等。

如Adwords的文本輸入框，允許用戶輸入出錯(cuò)，及時(shí)給出紅色的錯(cuò)誤的提示來(lái)引導(dǎo)用戶修正：

3. 錯(cuò)誤提示

如Adwords的表單設(shè)置中，客戶設(shè)置不合理，系統(tǒng)會(huì)出警告提示：

4. 涉及對(duì)用戶影響較大、重要、不可挽回的操作時(shí)，給出提示

如Adwords，用戶刪除數(shù)據(jù)時(shí)，會(huì)出再次提示，以免用戶誤操作：

三、用戶操作后，錯(cuò)誤易恢復(fù)

每次用戶執(zhí)行操作后，特別是在操作步驟較多的任務(wù)中，要盡可能保留操作信息，以便能夠及時(shí)恢復(fù)；如果一個(gè)任務(wù)結(jié)速后的操作錯(cuò)誤，最好是能提供安全恢復(fù)到離錯(cuò)誤點(diǎn)最近的一步的方式，使用戶可以快速地從糾正錯(cuò)誤的步驟轉(zhuǎn)移到正確的流程上，從而換回?fù)p失或錯(cuò)誤。

比較常見(jiàn)的，如WORD會(huì)保持系統(tǒng)問(wèn)題導(dǎo)致軟件中止時(shí)，用戶的最后編輯內(nèi)容；PS可以通過(guò)歷史記錄，返回到之前的操作步驟。

對(duì)于B端產(chǎn)品來(lái)說(shuō)，以廣告投放平臺(tái)為例，用戶經(jīng)常會(huì)誤刪內(nèi)容，有存在著這樣的需求，比如某用戶誤刪除了大批關(guān)鍵詞，需要恢復(fù)，但目前而言，只有鳳巢在之前有過(guò)回收站這個(gè)功能，其它的廣告投放平臺(tái)尚無(wú)這個(gè)功能，可能是考慮到服務(wù)器也承截能力，畢竟有一些B端用戶的數(shù)據(jù)量較大，不過(guò)，還是建議可以評(píng)估、考慮下類似的錯(cuò)誤恢復(fù)功能，以提升用戶操作的易用性。

因?yàn)楫a(chǎn)品的特性不一樣，有的復(fù)雜、有的簡(jiǎn)單，對(duì)應(yīng)的用戶人群也不同，在具體的設(shè)計(jì)過(guò)程中，要根據(jù)產(chǎn)品及目標(biāo)人群的特征來(lái)考慮，只要用合理的方式保證產(chǎn)品出錯(cuò)時(shí)不至于中斷任務(wù)的執(zhí)行，對(duì)出錯(cuò)提供了適當(dāng)?shù)囊龑?dǎo)，達(dá)到產(chǎn)品性能、界面的簡(jiǎn)潔性、防錯(cuò)效果的平衡就可以。

參考文獻(xiàn)

黃群，楊賽男（2012）《交互設(shè)計(jì)中產(chǎn)品的容錯(cuò)性設(shè)計(jì)應(yīng)用研究》設(shè)計(jì)藝術(shù)研究

本文由 @崔玲美 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自Unsplash，基于CC0協(xié)議