前言
错误无处不在，错误消息也是如此，可以是小的错误摘要和大的错误说明、简短的文字提示和冗长的提示框消息。
那么，怎么设计更好的错误消息提醒呢？别急，本文将告诉你。
一、搞清楚错误的类型
并不是所有错误都是相同的，Page Laubheimer指出，存在两种不同类型的错误：失误（无意识）、错误（有意识），针对这两种不同的方式有不同的设计解决方案。
1.失误
对于失误，我们可以设置有效的约束条件（文本框的合理宽度、前缀和后缀等），提供恢复建议（自动恢复），选择合理的默认值，使用宽容度高的格式。
2.错误
针对错误，我们可以为用户提供示例和参考（密码要求、文件大小等），允许用户修改（更改电子邮件或付款方式）。总的来说，就是给用户提供参考和后悔的机会。
为了衡量我们的错误消息是否成功，我们可以定义一个以错误为中心的设计KPI，并随着时间的推移对其进行跟踪。其中可能包括：
• 用户旅程中的平均错误数
• 错误恢复时间
• 完成率和完成时间
我们不能真正完全消除错误，因为人为输入是不可能万无一失的，但我们可以通过设计来减少错误的出现。
其中的一种简单方法是改进用户发现错误的方式，不要只依赖错误消息的颜色。
二、设计过程中的注意事项
下面我将列举一些在设计过程中需要格外注意的地方：
1.不要只依赖于红色
当我们想到错误信息时，我们几乎下意识地想到了粗体红色文本提示。这确实是一个非常成熟的模式，但这种方式并不能确保所有用户都能识别到信息。（如下图）
由于色觉缺陷的存在，最好使用图标来补充错误消息。
例如，在错误消息旁边放一个红色背景的感叹号，同时还可以突出显示整个部分，例如，错误消息旁边的红色垂直粗线是就是一种常见错误消息展示方式。（如下图）
2.不要挡住用户输入的信息
当我们显示错误消息时，我们的目的是给用户传达“存在问题”的信息，一个好的错误消息同时也会引导用户找到解决方案，这就需要用户自己检查输入的内容，而错误消息就不能对用户输入的内容产生遮挡。（如下图）
看起来很简单，然而，一旦我们有了操作提示，事情就会变得比较复杂，用户打开操作提示后，可能会同时看不到错误消息和输入的内容。（如下图）
但是，我们可以相对容易地解决这个问题。首先，把悬停打开的方式改为点击，这就意味着操作提示不会自动消失，必须手动关闭。
然后，我们可以使用下拉展开的方式（如下图），这样就可以在操作提示和其他内容之间留出空间。因此不会覆盖任何内容，错误消息也会始终可见。
通过这种方式，我们可以同时显示所有三条信息——用户可以选择他们想要查看的内容。
3.不要依赖提示框显示错误消息
用提示框显示错误消息在表单中可能不常见，但它们经常出现在表格和企业工作台中。
提示框显示错误消息有一些常见的可用性问题：
• 在错误消息消失之前，用户通常没有机会完全阅读或理解错误消息，并且无法恢复它或让它一直显示；
• 提示框通常出现在屏幕边缘，并且通常与导致错误的输入内容离得很远。这种错误消息和输入之间存在很大脱节的情况，导致用户很少可能同时阅读错误消息并更正错误；
• 使用提示框的时候，通常没有足够的空间来提供图像或视频等详细说明，并且必须依赖纯文本和外部链接。
三、如何在设计中运用
下面是一些实际应用方法介绍：
1.表单：在输入框上方显示错误消息
这听起来可能不太对，通常错误消息会位于输入框下方，或者可能位于输入框的右侧。事实证明（不太常见），不过这些设计方案会带来一些可用性的问题。
• 缩放页面的用户可能会错过位于右侧的错误消息；
• 在移动设备上，用户可能无法在输入状态看到错误消息，因为它会被虚拟键盘覆盖；
• 编辑输入内容时，错误消息可能会被浏览器的自动填充或下拉菜单的自动完成建议覆盖。
在输入框上方显示错误消息通常有助于我们避免上面列出的可用性问题。
然而，它的代价是布局变化：随着每个新错误消息出现，整个表单必须垂直移动，因为我们需要腾出空间让错误消息出现。它可能会带来较大的干扰，但有时这种干扰可能非常值得。
2.表格：内联显示错误消息
在表格中显示错误消息时，一种简单的方法是在内容所在的同一行中显示错误消息。在这种情况下，错误的消息可能出现在下方，而不是上方。通过点击整行，可以折叠和展开冗长的错误消息。
如果同一个错误影响多行，我们可以突出显示包含错误的行，并在页面的最顶部显示一条错误消息，该消息将解释错误以及需要采取哪些措施来解决它。
四、总结一下
乍一看，处理错误消息可能听起来没什么大不了的。然而，当我们深入研究细节时，有很多考虑因素可能会导致高放弃率或帮助人们快速解决问题。
有了文章中这些指导方针，我们应该可以在设计错误消息提醒时做得更好。
——
【原文作者】 Vitaly Friedman
【原文链接】https://www.smashingmagazine.com/2022/08/error-messages-ux-design/返回搜狐，查看更多