不知道你有沒有遇到過這樣的場景：在某些軟件中提交一些內容會有紅色警告信息彈出，提示你填寫錯誤，但大家通常不知道哪里錯誤了，又不敢點擊，怕所填內容清空。作為產品設計者，該如何提高防錯率。本文將結合一些實例，講解在表單錄入場景中，如何將防錯糾錯。

不知道你有沒有過這樣的體驗?

你需要在某個軟件中，提交一些內容，然而紅色的警告信息頻頻彈出，卻讓你摸不著頭腦，根本不明白自己到底是哪里出錯了，輸入了大半的內容不敢退出界面，因為退出之后就是一片空白，重頭再來?？墒窃趺磭L試也輸不對，無語的你是不是特別想砸了手機?

再完美的系統也會出錯，這個錯誤可能來自用戶，抑或來自系統本身，而頻頻出錯的界面無疑，導致了極其糟糕的用戶體驗。

表單錄入場景是錯誤頻頻發生的場景，如何在不干擾用戶正常使用流程的前提下，降低用戶出錯概率，快速幫助用戶糾正錯誤，一直是設計師們關心的話題。

防錯性原則，作為尼爾森可用性十條原則之一，尼爾森是這樣闡述防錯原則的：“相比貼心的錯誤提示信息，更好的設計是防止錯誤發生。消除易出錯的環境、為用戶檢查、讓用戶確認他們的動作”。

本文將結合一些實例，講解在表單錄入場景中，如何將防錯糾錯進行到底！

一、從輸入抓起

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

1.1 更易輸入

當用戶輸入的內容又長又復雜，那么不僅大大加大了用戶的負荷。同時，也極易出錯，如果系統能夠幫助用戶降低輸入難度，那么變相的，也是提高了內容的正確率。

1）長數字串提供間隔

降低用戶記憶的難度根據米勒法則，一個人在短期記憶中可以記得五到九樣東西，所以在輸入很長的數字時，比如銀行卡號，可以提供一些間隔，一來不容易看花眼，二來降低記憶難度。

2）拍照免輸入

同樣是銀行卡號，讓用戶直接拍銀行卡，系統自動識別，免用戶輸入，同樣很簡單，不過這需要銀行卡剛好在用戶身邊，或者手機中有銀行卡的照片。如果從支付寶或者微信中得到關聯的銀行卡號信息，一鍵導入，會不會更方便?

3）系統記憶或者粘貼

比如你曾經輸入什么很長的信息，然后下一次需要再次輸入的時候，系統可以自動顯示你上一次的輸入記錄。再比如小紅書，你懶得輸入一大串地址，那么你可以直接從淘寶中復制，小紅書可以自動識別填充。

4）提示輸入內容的格式或要求

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

更進一步，在一些比較容易讓用戶產生困惑（比較冷門、專業）的輸入框附近，還可以加上專門答疑解惑的鏈接。

5）自動保存

當不小心退出輸入大半的表單，返回后發現頁面空空如也，需要從頭來過怎么辦?

這真是五雷轟頂的用戶體驗，倘若頁面能夠定時自動幫用戶保存剛才輸入的內容，即使網絡不順暢或者貓貓突然拔了網線，用戶也可以放寬心。

1.2 不允許輸入錯誤格式數據

比如，不允許在數字輸入框中輸入文字內容，不允許在文字輸入框輸入數字內容，日期提供正確的填寫例子。

1.3 允許用戶犯簡單錯誤

錯誤不可避免，一方面從用戶抓手，另一方面可以提高系統的容錯率，比方說空格，難免輸入時會不小心鍵入空格，一個空格的距離并不明顯，用戶可能不容易發現這個錯誤。

如果僅僅因為一個空格就阻止用戶進行下一步操作，未免太苛刻了，系統可以嘗試自動識別清除空格，糾正為正確的數據。

1.4 輸入未完成無法進行下一步操作

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

1.5 錯誤提示

1）輸入時檢查

你看了一部精彩絕倫的大片激動不已，可是過了一周，你的老師讓你寫觀后感，你是不是忘記了一大半的細節了？由此可見，即刻的反饋時最有效的，用戶能立馬意識到問題出在哪里，能夠快速修正。

2）提交時檢查

提交時檢查，能夠將問題匯總呈現，比起需要用戶一個一個找到標注問題的地方，更推薦的方式是用一個問題清單，用戶點擊問題后，可以自動跳轉到具體的地方，也能夠從當前一個問題位置，跳到下一個問題地方，每解決一個問題，問題清單中就會少一項，這樣既能夠幫助用戶快速找到問題，解決問題也能夠避免問題的遺漏。

3）錯誤提示原則

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

1）當聚焦在當前輸入框時，錯誤提示文字以提示起泡顯示，這種做法的弊端是檢查時需要先聚焦才能查看，如果是出現了很多錯誤的話，那么用戶需要一個一個查看，大大降低了用戶的效率，但是這樣不會改變原來的界面布局，能夠節省空間。

2）錯誤提示就標注在輸入框上下左右，只要錯誤不消失，提示文字要始終可見，這種做法是最為推薦的，所有錯誤一覽無余，但是錯誤文字會占據較多的空間，空間有限的話可以選擇第一種。

3）錯誤發生后，會彈出一個彈窗，有的是顯示幾秒后自動消失，這種是非常不建議的，因為用戶很可能沒有注意到，或者沒有閱讀完整;還有的直接彈出模式彈窗，阻斷用戶進程，這種常見于登錄場景，由于用戶的輸入任務較少，所以不會有太大干擾。

• 告知用戶為什么出錯
• 告知用戶如何糾正錯誤

除了上面三點，還要注意，比方說言簡意賅，不要廢話連篇，不要指責用戶，保持禮貌態度，這些是基本原則了。

下面是一個錯誤提示的典型案例，在我試圖登陸Bitly時，提示我出錯，但是沒有告知究竟是賬戶名不對還是密碼出錯，而且一個Nope的措辭，讓用戶感覺被否定了，這是糟糕的用戶體驗。

同樣是登陸出錯，Facebook就給了一個很完美的防錯示范， 我不小心輸入了舊密碼，它會給一個提醒彈窗，告訴我2個月前改過密碼，我可以選擇重置密碼，或者申訴賬號安全，或者重新嘗試，可以說是相當完善的建議了。

二、提供反悔操作

2.1 撤銷操作

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

2.2 提交后可返回修改

當一個表單提交成功后，可以返回重新編輯，然后更新。

2.3 刪除后回收站找回

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

三、二次確認

對于破壞性操作，比如刪除掉一個班級的信息，或者格式化硬盤，一定要給予一個二次確認彈窗，讓用戶意識到這個行為可能帶來的后果， 二次確認的彈窗要注意以下幾點：

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

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

3）二次確認

可以通知增加用戶的認知或者操作難度， 避免用戶誤操作，比方Figma中，如果要刪除某個team， 在正確輸入團隊的名字后，刪除按鈕才會被激活。

有一個寓言故事：男孩在海邊想要尋找一塊點石成金的石頭，這個石頭據說會發燙，于是他每摸到一塊普通的石頭，就扔到海里，他遍尋了999塊石頭，但是仍然沒找到發燙的石頭，就在第1000塊石頭時，他終于找到了!但是由于太習慣丟到海里的動作，等他意識到，那塊發燙的石頭已經丟到了汪洋大海中。

所以要注意， 二次確認彈窗一定是破壞性的操作才會使用到，而不是處處使用，當用戶對此習以為常，二次確認也就沒有作用了。

適當地運用防錯原則，可以大大降低用戶輸錯頻率，營造良好的用戶體驗，當然實際問題中要靈活運用，不要撿了芝麻，丟了西瓜，希望我的總結對你有用! 歡迎評論區進行補充和完善~