错误消息设计 - 用户可理解的字数与表达方式

11 分钟阅读

错误消息是用户遇到问题时系统显示的文本。这一瞬间的沟通如果恰当,用户就能解决问题并继续操作;如果不当,则会引发困惑和不满,导致用户流失。Nielsen Norman Group 的研究表明,用户平均只花 1.5 秒阅读错误消息,几乎所有的传达力都集中在前 5~7 个词上。本文将结合认知心理学和可用性研究的成果,系统讲解如何设计用户能理解的错误消息字数与表达方式。想系统学习错误消息设计基础的读者,了解细高跟鞋 (Amazon)也可作为参考。

错误消息的字数参考标准

错误消息太短则信息不足,太长则无人阅读。根据错误类型设定合适的字数至关重要。以下推荐字数综合考虑了显示场景 (内联、Toast、全屏) 和用户心理状态 (焦虑、困惑、不安) 两方面因素。

错误类型推荐字数示例
输入验证15~40 字符密码至少需要 8 个字符
操作错误30~60 字符文件上传失败,请选择 5MB 以下的文件
系统错误40~80 字符无法连接服务器,请稍后重试
404 页面60~120 字符未找到您要访问的页面,请检查 URL 或从首页重新查找
权限错误30~60 字符您没有执行此操作的权限,请联系管理员
API 错误响应30~120 字符机器可读的错误代码 + 面向用户的消息组合

错误消息的基本结构是"发生了什么 + 该怎么做"两个要素。只告知原因而不提供解决方案的消息,会让用户不知所措。认知心理学研究表明,人在压力状态下能处理的信息量约降至正常水平的 60%。错误发生时的用户正处于这种状态,因此消息需要比普通文本更短,结构更清晰。

优秀错误消息的三大原则

能让用户理解的错误消息具有三个共同原则。这些原则直接对应尼尔森十大可用性启发式中的"帮助用户识别、诊断和恢复错误" (Help users recognize, diagnose, and recover from errors)。

  1. 用通俗语言说明发生了什么:避免技术术语,用用户能理解的语言传达情况。不要写"500 Internal Server Error",而要写"服务器出现了问题"。从认知负荷理论的角度看,专业术语会增加外在认知负荷 (extraneous cognitive load),占用本可用于解决问题的认知资源
  2. 简要说明原因:尽可能告知原因。例如"您输入的邮箱地址格式不正确"。提示原因有助于修正用户的心智模型 (对系统运作方式的内在理解),防止同类错误再次发生
  3. 具体指引下一步操作:明确提供解决方案或下一步行动。例如"请输入包含 @ 的邮箱地址"。可用性研究表明,包含解决方案的错误消息可将任务完成率提升最高 50%

将这三个要素融入一条消息中,通常需要 40~80 个字符。不必将所有内容塞进一句话,分成 2~3 句以提高可读性也是有效的做法。

主要服务的错误消息设计模式

Google、Apple、Microsoft 三家公司分别采用不同的方法设计错误消息。分析各家的模式,可以为自身服务找到合适的设计方向。

服务设计方针特点
Google具体、行动导向如"密码至少 8 个字符,需包含字母和数字",具体列出要求,用户一目了然
Apple简洁、关注情感如"无法连接"般简短,彻底避免责怪用户的表达。详细信息通过"了解更多"链接逐步展示
Microsoft渐进式披露Windows 11 起在蓝屏上显示 QR 码,引导用户获取详细信息。兼顾技术人员和普通用户的双层结构

三者的共同点是都坚持"不责怪用户"和"提示下一步操作"。虽然表达风格各异,但将错误恢复性 (error recovery) 放在首位的态度是一致的。

错误消息的语气与风格

错误消息的语气应与服务整体的品牌形象保持一致。但无论采用何种语气,以下几点都应共同遵守。

错误消息的字数可以用字符计数器来确认,在保持简洁的同时确保必要信息不遗漏。

HTTP 状态码对应的错误消息设计

Web 应用中,需要根据 HTTP 状态码优化错误消息的内容和长度。状态码本质上是面向开发者的信息,面向用户时应传达情况和解决方案,而非代码本身。

状态码面向用户的表达推荐字数设计要点
400 Bad Request输入内容有误30~50 字符具体指出哪项输入有问题
401 Unauthorized需要登录20~40 字符提供登录页面的直接链接
403 Forbidden没有访问权限30~50 字符指引获取权限的方法
404 Not Found页面未找到60~120 字符提供搜索功能或首页导航
408 Request Timeout连接超时30~60 字符提示检查网络并重试
429 Too Many Requests请求过于频繁30~50 字符提示预计等待时间
500 Internal Server Error服务器出现问题40~80 字符告知恢复预期和替代方案
503 Service Unavailable正在维护中40~80 字符尽可能明确恢复时间

需要注意安全方面的考量。如果向用户明确区分 401 和 403,攻击者可能借此判断已认证用户或资源是否存在。在登录页面应使用"邮箱地址或密码不正确"这样无法确定具体哪项有误的表达。

表单验证的最佳实践

表单输入的验证消息是用户最常看到的错误消息类型。采用实时验证 (输入过程中即时反馈) 可以大幅提升用户体验。

验证消息应控制在 15~40 个字符以内。由于显示在表单字段附近,过长的消息会破坏布局。应使用"必填项""请输入 8 个字符以上""请输入有效的邮箱地址"等具体而简洁的表达。

验证的显示时机也需要注意。如果在字段获得焦点的瞬间就显示错误,用户还没开始输入就会感觉被批评了。推荐在字段失去焦点时 (blur 事件) 执行验证。不过,对于密码强度等实时反馈有益的场景,输入过程中显示也是有效的。

成功状态的反馈也不要忘记设计。输入正确时显示对勾或绿色边框,用户就能安心地进入下一个字段。不要仅依赖颜色,应同时使用图标或文字,确保色觉多样性的用户也能获取信息。

Toast 通知与内联显示的使用场景

错误消息的显示方式需要根据错误的性质来区分。以下整理了主要的显示模式及其适用场景。

显示方式适用场景注意事项
内联显示表单验证、与输入字段关联的错误显示在出错字段的正下方。需要滚动时应自动滚动到相应位置
Toast / Snackbar临时通知 (保存成功、连接断开)、不希望中断用户操作的场景3~5 秒后自动消失,因此应控制在 40~80 字符以内。不要用于重要错误
模态对话框数据丢失警告、不可逆操作的确认会完全阻断用户操作,应仅限于真正重要的场景
横幅 / 警告栏影响整个系统的故障、维护通知固定显示在页面顶部,并提供关闭按钮

屏幕阅读器的适配也很重要。动态显示的错误消息应设置 role="alert"aria-live="assertive",确保不依赖视觉的用户也能立即感知错误的发生。Toast 通知等自动消失的消息可能在屏幕阅读器朗读之前就消失了,因此重要错误应优先使用内联显示。

系统错误与 404 页面的设计

系统错误和 404 页面是用户最感到不安的场景。这些场景下的消息设计是防止用户流失的最后防线。

404 页面除了 60~120 字符的消息外,还应提供首页链接、搜索功能和热门页面链接。务必为用户准备到达目标信息的替代途径。优秀的 404 页面不是"死胡同",而是"分岔路口"。

系统错误 (500 系列) 中,传达恢复预期和替代方案至关重要。像"系统正在维护中,请 30 分钟后重试"这样给出具体时间,可以减轻用户的不安。根据心理学的不确定性规避原则,"请 30 分钟后重试"比"请稍后再试"能大幅降低用户的压力。

移动端由于屏幕尺寸限制,错误消息设计需要额外考量。在 320px 宽的智能手机上,内联验证消息如果折行超过 2 行,会破坏整个表单的布局。移动端应以 15~25 个字符为目标,详细信息通过"了解更多"链接渐进式展示。

关于错误消息的冷知识

Windows 的"蓝屏" (BSOD) 被认为是世界上最多人见过的错误消息。Microsoft 从 Windows 8 开始,将技术性错误代码替换为悲伤表情的表情符号 ":("。Windows 11 更进一步,添加了 QR 码引导用户前往支持页面。这标志着错误消息设计从"用技术术语说明"到"用情感共鸣引导下一步操作"的转折点。

GitHub 的 404 页面"This is not the web page you are looking for" (星球大战的戏仿) 是在错误页面中融入幽默的经典成功案例。而 Amazon 的 404 页面则显示狗的照片,营造品牌的亲和力。不过,幽默仅适用于 404 页面等"非致命性错误",在支付错误或数据丢失的错误中则不合适。

关于 HTTP 404 状态码的由来众说纷纭。最著名的说法是 CERN 的 404 号办公室里放着第一台 Web 服务器,但实际上 HTTP 状态码是在 1992 年系统性定义的,400 系列被设计为表示客户端错误的类别。

为什么不同错误类型的字数不同

错误消息的最佳长度由三个因素决定:用户的情绪状态、问题的复杂程度和显示区域。

输入验证 (15~40 字符) 之所以短,是因为它显示在表单字段下方,过长的消息会破坏布局。而且用户在填写表单时处于"心流状态",长消息会打断这种专注。另一方面,404 页面 (60~120 字符) 之所以较长,是因为有整个页面的空间来展示替代方案 (首页链接、搜索功能)。

系统错误 (40~80 字符) 需要包含"发生了什么""何时恢复""有无替代方案"三个要素,容纳这些信息至少需要 40 个字符。超过 80 个字符,处于恐慌状态的用户就难以读完,因此也设定了上限。参照认知心理学的神奇数字 7±2 法则,一条错误消息中包含的信息块以 3~4 个为极限。

多语言错误消息的设计

全球化服务中,错误消息的多语言适配不可避免。然而,简单的翻译往往无法保证质量。多语言适配的设计模式,搜索吊袜带 (Amazon)中有系统性的介绍。

安全性与错误消息

错误消息可能成为攻击者的宝贵信息来源。从安全角度出发,需要注意以下几点。

常见的失败模式

API 错误响应的设计

API 的错误响应需要同时向前端开发者和最终用户传递信息。推荐采用机器可读的错误代码与面向人类的消息相结合的结构。

通用的错误响应结构由三层组成:错误代码 (机器可读的唯一标识符)、消息 (人类可读的说明)、详细信息 (验证错误时各字段的错误)。错误代码应独立于 HTTP 状态码,设计应用专属的代码体系,这样前端的条件分支会更容易。

API 错误消息的国际化中,以错误代码为键管理各语言消息的方式最为高效。服务器端返回英文消息,前端根据用户的区域设置显示对应翻译,这种设计在可维护性和可扩展性方面都很优秀。

专业人士实践的错误消息设计技巧

总结

错误消息是影响用户体验的重要 UI 元素。正如认知心理学的研究所示,处于压力状态下的用户能处理的信息量是有限的。以"发生了什么 + 该怎么做"两个要素为基础,根据错误类型设定合适的字数来设计。验证消息 15~40 字符、操作错误 30~60 字符、系统错误 40~80 字符为参考标准,使用字符计数器确认字数,创建贴近用户的消息。同时不要忘记安全方面的信息泄露防范、多语言适配时的字数膨胀、无障碍访问等考量,在整个产品中构建一致的错误消息体验。

分享这篇文章