如何设计网页的错误提示？

没有系统在工作时不会出错。错误的原因可能是因为用户也可能是因为系统。在这两种情况下，以正确的方式处理错误，对于良好的用户体验是至关重要的。

这里列举好的错误提示应该包含的3个重要部分：

1.清晰的文本消息

2.正确的错误提示位置

3.良好的视觉设计

· 清晰的文本消息

1.错误提示应该清楚

错误提示应该清楚地说明问题是什么，为什么发生，以及如何处理。把你的错误提示想象成与用户的对话 （这就要保证错误提示应该像和人在交流）。确保你的错误提示是有礼貌的，可以理解的，友好的，不含行话的。

2.错误提示应该是有帮助的

只写出一些错误是不够的，要向用户展示如何尽可能快地解决问题。例如，Microsoft描述了什么是错误的，并在错误消息中提供了解决方案，以便您可以立即解决此问题。

3.错误提示应该是特定的情况

很多时候，网站对所有验证状态只使用一个错误提示。例如“您的电子邮件地址行为空” “输入有效的电子邮件地址”。MailChimp以另一种方式进行处理，每个电子邮件验证状态都有3个错误消息。第一次提交表单时检查输入字段是否不为空，第二三次检查是否有“@”和“.”字符。（但是“请输入一个值”并不是错误提示一个很好的例子，因为用户不清楚需要输入什么样的值）。

4.错误提示应该是有礼貌的

不要责怪你的用户，即使他们做错了。对你的用户要有礼貌，让他们感觉舒适方便。这是一个很好的提升品牌的机会，并适当的添加与品牌相关的错误提示。

5.如果情景合适的话，使用幽默的话术

在你的错误提示中应当小心的使用幽默元素。首先，错误信息应该是内容简洁且有帮助的。但是，如果合适的话，在错误提示中添加一些幽默话术有助于提升用户体验。

· 错误提示的正确位置

好的错误提示是你可以在需要的时候看到。尽量将错误提示放在相关的UI元素附近。

· 错误提示的正确视觉设计

错误提示应该是清晰可见。使用高对比度的文本和背景颜色，以便用户可以轻松快速注意到并阅读提示。

通常来说，红色用于错误信息文本。在某些情况下，可以使用黄色或橙色作为错误信息颜色。因为红色对用户来说压力太大。在这两种情况下，请确保错误提示的信息是清晰的，与背景颜色明显对比。不要忘记在颜色旁边提供一个相关的图标，以改善色盲患者的可访问性。

· 结论

错误提示是改善用户体验，分享品牌和彰显个性的好机会。注意一个好的错误提示的所有方面：语言，位置和视觉设计，使它成为一个非常完美的错误提示。

原文：uxplanet

译文：GSDS