交互设计中的错误状态设计技巧

原文作者 ：Vitaly Dulenko  |  Wirex的产品设计师

翻译：Elm

—————————————————————————————————————————————————

UI设计中“错误提示”看上去只是很少的一部分，但是归纳整理出来其实很多，影响许多至关重要的功能，如果没有设计好，那么将严重影响你的产品体验。

“错误”时有发生。在App与生活中都会发生。有时是因为我们犯了错误，有时是系统错误。无论错误原因是什么，它们——还有解决方式——对用户体验影响深远。但它往往不被重视，草草处理错误、组织混乱的错误信息会使用户沮丧，最终抛弃你的应用。相反，处理得当的错误提示，能把失败变为惊喜。   

错误是什么？

错误（或者说错误状态）发生在app未能完成某个预期操作时，例如：

 

  ·  APP不理解用户的输入 

  ·  APP出错了

  ·  用户试图同时进行两个矛盾的操作

 

无论是谁引起的，每一种错误对于用户而言，都会成为一种阻碍。好在，设计良好的错误处理能减少这种阻碍。

以下是每条错误信息的3个重要组成部分

1、简明的信息（发生了什么）

2、正确的位置

3、良好的视觉设计

简明的信息（发生了什么）

1、错误信息应该明确（什么出错了，为什么？）

错误消息应该清楚地表达问题是什么，为什么会发生，以及如何处理它。将错误消息视为与用户的对话 ，确保错误信息是写给人看的。 要实现这一点，就得用用户的语言来说话，避免使用技术术语，用用户的词汇来表达一切。验证信息要清晰陈述以下内容

2、错误信息应对用户有所帮助（用户接下来该做什么来解决错误）

如果只写出错误信息是不够的，应尽快向用户提供解决错误的方案。

例如，Microsoft描述了错误，并在错误消息中提供了解决方案，以便用户可以立即解决此问题。

3、错误信息应针对具体情况

网站通常对所有验证失败状态使用一条错误信息。将此电子邮件字段留空提示 “输入有效的电子邮件地址”，没有输入“@”字符依然提示“输入有效的电子邮件地址”。MailChimp以另一种方式执行 - 它们针对每种电子邮件验证状态有3条错误信息。第一个检查提交表单时输入字段是否为空白。另外两个检查是否有“@”和“.”字符。并且“请输入内容”并不是合理的错误信息，用户不清楚要输入什么样的内容。向用户提示符合实际情况的信息，而不是所有情况都提示同一种信息。

4、友好的提示

不要责怪用户做错了，即使他们真的做错了。还是要对你的用户友好，让他们感到舒适和方便。同时这也是一个提升品牌形象和辨识度的机会。

5.适当的使用幽默

在错误信息中适当使用幽默。在保证提示消息正确且没有误导的情况下可以在消息中添加一些幽默。这样可以改善用户体验。

正确的位置

好的错误消息在需要时即可看到。避免将错误信息放在不相关的元素旁，将错误消息放在与其相关的UI元素旁边。

良好的视觉设计

错误信息应清晰可见。使用对比度较大的文本和背景颜色，以便用户可以轻松地注意和阅读消息。

像往常一样，红色用于错误消息文本。在某些情况下，黄色或橙色也可被用作错误状态，红色对用户来说太紧张。在这两种情况下，请确保错误文本清晰易读，并与背景颜色形成鲜明对比。不要忘记在颜色旁边提供相关图标，以改善色盲人士的可访问性。

让人注意到提示信息。图片来源：Material Design

后记

错误信息是改善用户体验，展示品牌和个性的绝佳机会。注意错误信息的所有方面 ： 语言、位置和视觉设计，使其错误信息变得完美。

同时错误信息是最佳方式引导用户向正确方向前进，第一时间预防错误发生。但当错误确实发生时，设计精良的错误处理，不仅能教育用户按你预期的方式使用APP，还能防止用户感到茫然。

感谢阅读！