简评:网站 / app 的 UI 设计必然要考虑如何展示出错消息。1.说人话,让用户知道具体哪儿出错了、正确操作是啥;2.出错消息应展示在离错误源最近的地方;3.设计别太难看。
没有系统是清白的。
错误在所难免,可能是系统问题或者用户的错误操作。这两种情况下,用正确的方式处理错误非常重要,关乎用户体验。
关于错误信息(提示)有三点要重点关注:
- 简洁的文字信息
- 正确的位置
- 良好的视觉效果
简洁的文字信息
1.错误信息应该清楚
错误信息应该明确指出问题是什么,问题原因,如何处理。你要知道,错误信息是给用户看的,要写人能看得懂的文字。确保你的错误信息有礼貌,易于理解,友好和没有术语。
2.错误信息应该有帮助
仅仅写出错误是不够的,要想用户展示如何快速解决问题,尽可能的简答。
例如,Microsoft 错误信息会描述错误并提供解方案,以便用户立刻解决问题。
3.错误信息应该是具体的情况
通常网站只会显示一个通用错误信息,比如请输入正确的账号。如下图所示,左侧的图片就是提示「输入你的 email 地址」,仅此而已。但是右侧图会具体分析问题,如果你没输入任何字符就提示你输入,如果没有 @ 那就提示你添加@,如果没有.com,那就提示输入.com。要显示你用户实际的具体问题,而不是通用问题。
4.错误信息要有礼貌
不要责怪用户,即使他们真的做错了。对你的用户有礼貌会让他们觉得受到尊重。这是个展示你企业形象的好机会。
5.适当的展示幽默感
在错误信息中使用幽默感要谨慎。首先错误信息应该是提供信息和解决问题的。其次,如果合适,再考虑幽默感,这样可以改善用户体验。
错误信息应该出现在哪
好的错误信息,当你需要的时候应该随时可以看到。尽量避免错误摘要,避免突兀的出现错误信息,将错误信息放在当前输入的UI附近,以便提示。
正确的视觉设计
错误信息应该清晰可见,和背景以及文字有高对比度,以便用户可以轻松关注到这些信息。
和其他设计元素一样,错误信息常用红色来标注。在某些情况下也可以使用红色和橙色作为候选,毕竟红色对用户来说有一定的压力。不论哪种配色,请确保错误信息的文字清晰可变,和背景有明显的对比。
以及,不要忘记无障碍阅读,提供相关的图标来帮助色盲人群识别信息。
总结
错误信息是改善用户体验,分享品牌形象和公司价值的绝佳机会。
注意错误信息的细节,文本描述,出现位置,视觉设计,各个方面要综合考量。
原文:How to Write a Perfect Error Message
“本译文仅供个人研习之用,谢绝任何转载及用于任何商业用途。本译文所涉法律后果均由本人承担。本人同意简书平台在接获有关著作权人的通知后,删除文章。”
延伸阅读:
如何获得第一份产品设计的工作
UI 设计中最重要的颜色