如何设计好页面错误提示

2022-05-30 分类：网站建设

合理的错误提示设计可以很好的提升产品的用户体验，建立用户与产品之间的纽带。

相信日常生活中，很多人都曾经在各家银行的网上银行或者直销银行中买过理财产品。各家银行的理财产品购买流程都是大同小异的：选择合适的理财产品——输入购买金额——确认项目信息——返回操作结果。我们来假设一个情况，当用户输入的购买金额超过账户余额时，我们应该怎么给用户一个错误提示?

以宁波银行直销银行为例，当你想购买4000元的直投项目的时候，点击“立即购买”按钮，进入“确认支付页面”，点击“去支付”按钮，这时候弹出一个对话框，告诉你账户余额不足。具体多少余额也没有说清楚，你立马去我的账户里看了余额再返回购买，这时发现项目都被人抢光了!瞬间奔溃。。。

从这个虚拟案例中，我们可以看出错误提示对于产品用户体验来说是极其重要的，那么如何才能给用户提供合适友好的错误提示呢?

什么是错误提示

要了解什么是错误提示，我们应该首先了解错误提示的由来。用户在填写信息的时候难免会出错，例如，表单太长他们可能会忘记填写其中的一项，或者输入了14位的手机号码，又或者输入的密码中只有数字没有字母过于简单等等。这个时候我们应该给用户一个提示，让他们了解当前的错误状态。这就是我们常说的错误提示。

一个合格的错误提示应该有以下两个基本功能：

向用户报告错误状态;

解释错误发生原因以及如何更正。

错误提示的种类

1 弹出框

目前来说，弹出框可以说是最常见的错误提示形式。因为弹出框的空间比较大，可以很完整的向用户告知当前的错误状态并且阐明错误原因以及如何更正。但是弹出框这种形式也有自身的缺陷，那就是用户如果想更正错误就必须关闭这个弹出框，这样那些错误信息就看不到了。在一些特殊情况下错误信息比较冗长，你没有办法短时间内记住，那么就无法完成修改了。

2 页面

此外，错误提示还可以通过载入一个新的页面来报告给用户。比如在你点击提交按钮以后进入下一个页面才知道自己刚才的输入发生错误。用户可以通过阅读提示知道如何更正问题，但是如果想更正这个问题就要点击后退按钮，这样错误提示又不存在了，这点和弹出框很像。下面这个例子比较典型，用户只知道没有绑定成功，但是不知道具体的失败原因，重新绑定也无法避免再次失败。

3 标签提示

现在还有很多设计师开始将错误提示做成文字标签形式，将其和控件放在一起。这样子用户就可以很容易的读取错误信息，一眼就能看出来哪里出错了，不用根据提示的控件名称去寻找出错的位置，因为错误提示就在发生错误控件的旁边。此外还很容易改正，因为用户不用再跳转页面或去记那些冗长的错误信息。

错误提示设计原则

1 合理的使用配色和图标

就像我在上面说的，错误提示的第一个功能就是向用户报告当前的错误状态。但是我们没有必要真正的给用户显示：“尊敬的用户，你刚才的个人信息填写错误balabala…”。错误状态我们可以直接通过颜色和图标来完成。因为在潜意识中，人们习惯性把红色和错误联系在一起。当然考虑到现实生活中还有相当多的用户是红绿色盲患者，因此我们最好是红色和图标搭配使用。

2 文字简洁易懂

提示文字应该尽可能的简短，用户看到一大段文字，就很可能会失去了去阅读的耐心。此外我们应该避免使用专业术语，让用户可以更好的理解。例如你填写身份证号，多填了一个数字，那么我们就应该提示用户“身份证号位数出现错误”而不是简单的“身份证号验证错误”。因为验证错误的种类有很多种，这样笼统的错误提示会增加用户的操作负担。