不知道你有沒(méi)有遇到過(guò)這樣的場(chǎng)景：在某些軟件中提交一些內(nèi)容會(huì)有紅色警告信息彈出，提示你填寫(xiě)錯(cuò)誤，但大家通常不知道哪里錯(cuò)誤了，又不敢點(diǎn)擊，怕所填內(nèi)容清空。作為產(chǎn)品設(shè)計(jì)者，該如何提高防錯(cuò)率。本文將結(jié)合一些實(shí)例，講解在表單錄入場(chǎng)景中，如何將防錯(cuò)糾錯(cuò)。

不知道你有沒(méi)有過(guò)這樣的體驗(yàn)?

你需要在某個(gè)軟件中，提交一些內(nèi)容，然而紅色的警告信息頻頻彈出，卻讓你摸不著頭腦，根本不明白自己到底是哪里出錯(cuò)了，輸入了大半的內(nèi)容不敢退出界面，因?yàn)橥顺鲋缶褪且黄瞻?，重頭再來(lái)?？墒窃趺磭L試也輸不對(duì)，無(wú)語(yǔ)的你是不是特別想砸了手機(jī)?

再完美的系統(tǒng)也會(huì)出錯(cuò)，這個(gè)錯(cuò)誤可能來(lái)自用戶，抑或來(lái)自系統(tǒng)本身，而頻頻出錯(cuò)的界面無(wú)疑，導(dǎo)致了極其糟糕的用戶體驗(yàn)。

表單錄入場(chǎng)景是錯(cuò)誤頻頻發(fā)生的場(chǎng)景，如何在不干擾用戶正常使用流程的前提下，降低用戶出錯(cuò)概率，快速幫助用戶糾正錯(cuò)誤，一直是設(shè)計(jì)師們關(guān)心的話題。

防錯(cuò)性原則，作為尼爾森可用性十條原則之一，尼爾森是這樣闡述防錯(cuò)原則的：“相比貼心的錯(cuò)誤提示信息，更好的設(shè)計(jì)是防止錯(cuò)誤發(fā)生。消除易出錯(cuò)的環(huán)境、為用戶檢查、讓用戶確認(rèn)他們的動(dòng)作”。

本文將結(jié)合一些實(shí)例，講解在表單錄入場(chǎng)景中，如何將防錯(cuò)糾錯(cuò)進(jìn)行到底！

一、從輸入抓起

用戶的輸入操作是數(shù)據(jù)的源頭， 從這一步入手， 可以從根本上省掉很多麻煩事.

1.1 更易輸入

當(dāng)用戶輸入的內(nèi)容又長(zhǎng)又復(fù)雜，那么不僅大大加大了用戶的負(fù)荷。同時(shí)，也極易出錯(cuò)，如果系統(tǒng)能夠幫助用戶降低輸入難度，那么變相的，也是提高了內(nèi)容的正確率。

1）長(zhǎng)數(shù)字串提供間隔

降低用戶記憶的難度根據(jù)米勒法則，一個(gè)人在短期記憶中可以記得五到九樣?xùn)|西，所以在輸入很長(zhǎng)的數(shù)字時(shí)，比如銀行卡號(hào)，可以提供一些間隔，一來(lái)不容易看花眼，二來(lái)降低記憶難度。

2）拍照免輸入

同樣是銀行卡號(hào)，讓用戶直接拍銀行卡，系統(tǒng)自動(dòng)識(shí)別，免用戶輸入，同樣很簡(jiǎn)單，不過(guò)這需要銀行卡剛好在用戶身邊，或者手機(jī)中有銀行卡的照片。如果從支付寶或者微信中得到關(guān)聯(lián)的銀行卡號(hào)信息，一鍵導(dǎo)入，會(huì)不會(huì)更方便?

3）系統(tǒng)記憶或者粘貼

比如你曾經(jīng)輸入什么很長(zhǎng)的信息，然后下一次需要再次輸入的時(shí)候，系統(tǒng)可以自動(dòng)顯示你上一次的輸入記錄。再比如小紅書(shū)，你懶得輸入一大串地址，那么你可以直接從淘寶中復(fù)制，小紅書(shū)可以自動(dòng)識(shí)別填充。

4）提示輸入內(nèi)容的格式或要求

• 當(dāng)需要用戶鍵入郵箱地址時(shí)，會(huì)自動(dòng)顯示@某某郵箱地址；
• 要上傳圖片，需要告知圖片的大小尺寸要求；
• 需要輸入日期時(shí)，給出日期的填寫(xiě)例子等等，而不是等到用戶出錯(cuò)了才提示正確的填寫(xiě)要求，這樣會(huì)浪費(fèi)用戶的時(shí)間，降低效率。

更進(jìn)一步，在一些比較容易讓用戶產(chǎn)生困惑（比較冷門(mén)、專業(yè)）的輸入框附近，還可以加上專門(mén)答疑解惑的鏈接。

5）自動(dòng)保存

當(dāng)不小心退出輸入大半的表單，返回后發(fā)現(xiàn)頁(yè)面空空如也，需要從頭來(lái)過(guò)怎么辦?

這真是五雷轟頂?shù)挠脩趔w驗(yàn)，倘若頁(yè)面能夠定時(shí)自動(dòng)幫用戶保存剛才輸入的內(nèi)容，即使網(wǎng)絡(luò)不順暢或者貓貓突然拔了網(wǎng)線，用戶也可以放寬心。

1.2 不允許輸入錯(cuò)誤格式數(shù)據(jù)

比如，不允許在數(shù)字輸入框中輸入文字內(nèi)容，不允許在文字輸入框輸入數(shù)字內(nèi)容，日期提供正確的填寫(xiě)例子。

1.3 允許用戶犯簡(jiǎn)單錯(cuò)誤

錯(cuò)誤不可避免，一方面從用戶抓手，另一方面可以提高系統(tǒng)的容錯(cuò)率，比方說(shuō)空格，難免輸入時(shí)會(huì)不小心鍵入空格，一個(gè)空格的距離并不明顯，用戶可能不容易發(fā)現(xiàn)這個(gè)錯(cuò)誤。

如果僅僅因?yàn)橐粋€(gè)空格就阻止用戶進(jìn)行下一步操作，未免太苛刻了，系統(tǒng)可以嘗試自動(dòng)識(shí)別清除空格，糾正為正確的數(shù)據(jù)。

1.4 輸入未完成無(wú)法進(jìn)行下一步操作

人類的好奇心一點(diǎn)不比貓貓來(lái)的低，只要能點(diǎn)擊的按鈕都躍躍欲試，所以我們需要給未完成輸入內(nèi)容時(shí)，下一步按鈕需要置灰，防止用戶誤操作。

1.5 錯(cuò)誤提示

1）輸入時(shí)檢查

你看了一部精彩絕倫的大片激動(dòng)不已，可是過(guò)了一周，你的老師讓你寫(xiě)觀后感，你是不是忘記了一大半的細(xì)節(jié)了？由此可見(jiàn)，即刻的反饋時(shí)最有效的，用戶能立馬意識(shí)到問(wèn)題出在哪里，能夠快速修正。

2）提交時(shí)檢查

提交時(shí)檢查，能夠?qū)?wèn)題匯總呈現(xiàn)，比起需要用戶一個(gè)一個(gè)找到標(biāo)注問(wèn)題的地方，更推薦的方式是用一個(gè)問(wèn)題清單，用戶點(diǎn)擊問(wèn)題后，可以自動(dòng)跳轉(zhuǎn)到具體的地方，也能夠從當(dāng)前一個(gè)問(wèn)題位置，跳到下一個(gè)問(wèn)題地方，每解決一個(gè)問(wèn)題，問(wèn)題清單中就會(huì)少一項(xiàng)，這樣既能夠幫助用戶快速找到問(wèn)題，解決問(wèn)題也能夠避免問(wèn)題的遺漏。

3）錯(cuò)誤提示原則

告知用戶哪里出錯(cuò)：如果是在輸入時(shí)提示錯(cuò)誤，錯(cuò)誤的出處需要引起用戶足夠注意，如常見(jiàn)的輸入框標(biāo)紅（考慮到色盲用戶，不能夠僅僅只是標(biāo)紅，要有其他信息的展示），至于錯(cuò)誤提示文字的展現(xiàn)方式一般有三種：

1）當(dāng)聚焦在當(dāng)前輸入框時(shí)，錯(cuò)誤提示文字以提示起泡顯示，這種做法的弊端是檢查時(shí)需要先聚焦才能查看，如果是出現(xiàn)了很多錯(cuò)誤的話，那么用戶需要一個(gè)一個(gè)查看，大大降低了用戶的效率，但是這樣不會(huì)改變?cè)瓉?lái)的界面布局，能夠節(jié)省空間。

2）錯(cuò)誤提示就標(biāo)注在輸入框上下左右，只要錯(cuò)誤不消失，提示文字要始終可見(jiàn)，這種做法是最為推薦的，所有錯(cuò)誤一覽無(wú)余，但是錯(cuò)誤文字會(huì)占據(jù)較多的空間，空間有限的話可以選擇第一種。

3）錯(cuò)誤發(fā)生后，會(huì)彈出一個(gè)彈窗，有的是顯示幾秒后自動(dòng)消失，這種是非常不建議的，因?yàn)橛脩艉芸赡軟](méi)有注意到，或者沒(méi)有閱讀完整;還有的直接彈出模式彈窗，阻斷用戶進(jìn)程，這種常見(jiàn)于登錄場(chǎng)景，由于用戶的輸入任務(wù)較少，所以不會(huì)有太大干擾。

• 告知用戶為什么出錯(cuò)
• 告知用戶如何糾正錯(cuò)誤

除了上面三點(diǎn)，還要注意，比方說(shuō)言簡(jiǎn)意賅，不要廢話連篇，不要指責(zé)用戶，保持禮貌態(tài)度，這些是基本原則了。

下面是一個(gè)錯(cuò)誤提示的典型案例，在我試圖登陸B(tài)itly時(shí)，提示我出錯(cuò)，但是沒(méi)有告知究竟是賬戶名不對(duì)還是密碼出錯(cuò)，而且一個(gè)Nope的措辭，讓用戶感覺(jué)被否定了，這是糟糕的用戶體驗(yàn)。

同樣是登陸出錯(cuò)，F(xiàn)acebook就給了一個(gè)很完美的防錯(cuò)示范， 我不小心輸入了舊密碼，它會(huì)給一個(gè)提醒彈窗，告訴我2個(gè)月前改過(guò)密碼，我可以選擇重置密碼，或者申訴賬號(hào)安全，或者重新嘗試，可以說(shuō)是相當(dāng)完善的建議了。

二、提供反悔操作

2.1 撤銷操作

上一步驟輸入錯(cuò)誤，按下ctrl+Z可以返回上一步。

2.2 提交后可返回修改

當(dāng)一個(gè)表單提交成功后，可以返回重新編輯，然后更新。

2.3 刪除后回收站找回

在Figma中，當(dāng)你首次刪除文件時(shí)，不會(huì)有彈窗彈出;當(dāng)你誤刪了某個(gè)文件，可以快速在回收站中找回，只有決定永久刪除時(shí)，會(huì)彈出彈窗提醒，這樣的設(shè)計(jì)既可以保證操作的順暢，又不影響流暢的用戶體驗(yàn)。

三、二次確認(rèn)

對(duì)于破壞性操作，比如刪除掉一個(gè)班級(jí)的信息，或者格式化硬盤(pán)，一定要給予一個(gè)二次確認(rèn)彈窗，讓用戶意識(shí)到這個(gè)行為可能帶來(lái)的后果， 二次確認(rèn)的彈窗要注意以下幾點(diǎn)：

1）要清楚的告知用戶此次操作帶來(lái)的后果，避免模糊的描述

2）底部按鈕要無(wú)歧義，執(zhí)行破壞性操作的按鈕用特殊的樣式突出，比方說(shuō)紅色加粗

3）二次確認(rèn)

可以通知增加用戶的認(rèn)知或者操作難度， 避免用戶誤操作，比方Figma中，如果要?jiǎng)h除某個(gè)team， 在正確輸入團(tuán)隊(duì)的名字后，刪除按鈕才會(huì)被激活。

有一個(gè)寓言故事：男孩在海邊想要尋找一塊點(diǎn)石成金的石頭，這個(gè)石頭據(jù)說(shuō)會(huì)發(fā)燙，于是他每摸到一塊普通的石頭，就扔到海里，他遍尋了999塊石頭，但是仍然沒(méi)找到發(fā)燙的石頭，就在第1000塊石頭時(shí)，他終于找到了!但是由于太習(xí)慣丟到海里的動(dòng)作，等他意識(shí)到，那塊發(fā)燙的石頭已經(jīng)丟到了汪洋大海中。

所以要注意， 二次確認(rèn)彈窗一定是破壞性的操作才會(huì)使用到，而不是處處使用，當(dāng)用戶對(duì)此習(xí)以為常，二次確認(rèn)也就沒(méi)有作用了。

適當(dāng)?shù)剡\(yùn)用防錯(cuò)原則，可以大大降低用戶輸錯(cuò)頻率，營(yíng)造良好的用戶體驗(yàn)，當(dāng)然實(shí)際問(wèn)題中要靈活運(yùn)用，不要撿了芝麻，丟了西瓜，希望我的總結(jié)對(duì)你有用! 歡迎評(píng)論區(qū)進(jìn)行補(bǔ)充和完善~