網站建設經驗分享：網頁設計中"錯誤提示"的做法

網站建設 2023-09-02 次

很多人都在網銀或者直銷銀行中買過理財產品，各家銀行的理財產品購買流程是大同小異的：選擇合適的理財產品——輸入購買金額——確認項目信息——返回操作結果。我們假設一個情況，當用戶輸入的購買金額超過賬戶余額時，我們應該怎么給用戶一個錯誤提示？

以寧波銀行直銷銀行為例，當你想購買 4000 元的直投項目的時候，點擊「立即購買」按鈕，進入「確認支付頁面」，點擊「去支付」按鈕，這時候彈出一個對話框，告訴你賬戶余額不足。具體多少余額也沒有說清楚，你立馬去「我的賬戶」里看了余額再返回購買，這時發現項目都被人搶光了，瞬間奔潰。

從這個虛擬案例中，我們可以看出錯誤提示對于產品用戶體驗來說是極其重要的，那么如何才能給用戶提供合適友好的錯誤提示呢？

什么是錯誤提示

用戶在填寫信息的時候難免會出錯，例如，表單太長他們可能會忘記填寫其中的一項，或者輸入了 14 位的手機號碼，又或者輸入的密碼中只有數字沒有字母過于簡單等等。這個時候我們應該給用戶一個提示，讓他們了解當前的錯誤狀態。這就是我們常說的錯誤提示。

一個合格的錯誤提示應該有以下兩個基本功能：

1、向用戶報告錯誤狀態；

2、解釋錯誤發生原因以及如何更正。

錯誤提示的種類

1.彈出框

目前來說，彈出框可以說是常見的錯誤提示形式。因為彈出框的空間比較大，可以很完整的向用戶告知當前的錯誤狀態并且闡明錯誤原因以及如何更正。但是彈出框這種形式也有自身的缺陷，那就是用戶如果想更正錯誤就必須關閉這個彈出框，這樣那些錯誤信息就看不到了。在一些特殊情況下錯誤信息比較冗長，你沒有辦法短時間內記住，那么就無法完成修改了。

2.頁面

此外，錯誤提示還可以通過載入一個新的頁面來報告給用戶。比如在你點擊提交按鈕以后進入下一個頁面才知道自己剛才的輸入發生了錯誤。用戶可以通過閱讀提示知道如何更正問題，但是如果想更正這個問題就要點擊后退按鈕，這樣錯誤提示又不存在了，這點和彈出框很像。下面這個例子比較典型，用戶只知道沒有綁定成功，但是不知道具體的失敗原因，重新綁定也無法避免再次失敗。

3.標簽提示

現在還有很多設計師開始將錯誤提示做成文字標簽形式，將其和控件放在一起。這樣子用戶就可以很容易的讀取錯誤信息，一眼就能看出來哪里出錯了，不用根據提示的控件名稱去尋找出錯的位置，因為錯誤提示就在發生錯誤控件的旁邊。此外還很容易改正，因為用戶不用再跳轉頁面或去記那些冗長的錯誤信息。

錯誤提示設計原則

1.合理的使用配色和圖標

就像我在上面說的，錯誤提示的個功能就是向用戶報告當前的錯誤狀態。但是我們沒有必要真正的給用戶顯示：“尊敬的用戶，你剛才的個人信息填寫錯誤balabala…”。錯誤狀態我們可以直接通過顏色和圖標來完成。因為在潛意識中，人們習慣性把紅色和錯誤聯系在一起。當然考慮到現實生活中還有相當多的用戶是紅綠色盲患者，因此我們知名是紅色和圖標搭配使用。

2.文字簡潔易懂

提示文字應該盡可能的簡短，用戶看到一大段文字，就很可能會失去了去閱讀的耐心。此外我們應該避免使用術語，讓用戶可以更好的理解。例如你填寫身份證號，多填了一個數字，那么我們就應該提示用戶「身份證號位數出現錯誤」而不是簡單的「身份證號驗證錯誤」。因為驗證錯誤的種類有很多種，這樣籠統的錯誤提示會增加用戶的操作負擔。

避免用戶犯錯

對于這個信息錄入這個操作來說，知名的用戶體驗就是避免用戶犯錯，而不是等到用戶犯錯了以后才思考怎么樣“亡羊補牢”。設計師應該防患于未然。

1.輸入提醒

我們可以用一句話或者一個例子來向用戶介紹要輸入什么樣的信息，這個就是輸入提醒。我們要保持提醒字體比較小或者配色要比標簽字體更淺，因為輸入提醒只是起到一個輔助輸入的作用，過于顯眼反而會分散用戶注意力。

2.良好的默認值

如果你確定對用戶足夠的了解，在用戶進行信息錄入的時候我們可以提供合理的默認值。因為對于用戶來說，填寫信息永遠都不是一件有趣的事情，合理的默認值可以節省用戶的操作時間。

3.自動完成

當用戶在文本框里輸入時，系統猜測可能的答案，顯示可選列表。自動完成可以為用戶節省時間、精力和記憶成本，避免犯錯。