错误提示示例:差、好、极好,全部重写
八条错误提示,从一串原始代码一路改写成人们能照着做的文案。每一级都有解析,附上极好文案背后的三行公式,还有下次评审可用的检查清单。
一条极好的错误提示会告诉人们三件事:发生了什么、为什么会发生、下一步该做什么,并且配一个能直接完成这一步的按钮。大多数产品只做到第一条,很多连代码都没能越过。下面是八条从差一路爬到极好的错误提示,每一级背后的原因,以及你写下一条时可以直接套用的公式。
从差到极好,变了什么
差
极好
差的那条是写给服务器看的。403 是真实的状态码,也很准确,但读到它的人什么有用的信息都得不到。极好的那条是写给人看的:它点出了文件,解释了它是私有的,说明了谁能打开它,还把下一步变成一次点击。
每一级都多给一样东西:
| 级别 | 给了人们什么 | 还缺什么 |
|---|---|---|
| 差 | 一个代码,或者像“失败”这样含糊的词 | 发生了什么、为什么、该做什么 |
| 好 | 用大白话说明发生了什么 | 为什么,以及下一步做什么 |
| 极好 | 发生了什么、为什么,以及按钮上的下一步 | 没有任何需要他们自己判断的事 |
1. 没有访问权限
差
Error 403。
一个状态码。对开发者没错,对其他人毫无意义。好
你没有访问此文件的权限。
用读者的语言说明了发生什么,但让他们卡在原地。极好
这个文件是私有的。向 Sam 申请访问权限,一旦开通我们会通知你。
说明了原因(它是私有的)、谁能解决(Sam)以及之后会发生什么。按钮是“申请访问”,所以申请只需点一下。
403 表示这个人已经登录,只是没有权限。这个区别对文案很重要:他们不需要重新登录,而是需要有人把文件分享给他们。
2. 银行卡被拒
差
交易失败。
“失败”却没有主语。是卡、商家,还是网络?好
你的银行卡被拒绝了。
点出了人们能着手处理的原因。极好
你的银行卡被拒绝了。是银行拒绝的。换一张卡试试,或者请银行批准这笔交易。
把问题归到银行而不是用户身上,并给出两条出路。按钮是“换一张卡”,也是更快的那条路。
支付错误牵涉的钱最多,也最让人尴尬。不要责怪任何人,并把出路放在同一个界面上。
3. 文件太大
差
上传错误。
什么都有可能,所以人们会重试同一个文件,撞上同一堵墙。好
这个文件太大了。
说了原因,但没说超了多少。极好
这个视频有 2.4 GB,上限是 2 GB。稍微裁剪一下再试一次。
两个数字都给出,人们能看出差距很小。按钮是“裁剪视频”,不用离开应用就能解决。
涉及限制时,就把限制说出来。人们没法修正一个从没被告知的数字。
4. 断网了
差
网络错误。
听起来像是什么东西坏了,甚至可能丢了工作成果。好
你已离线。
简单明了,但任何人脑子里的第一个担心都是“我的修改丢了吗?”极好
你已离线。你的修改已保存在这部手机上,恢复联网后会自动同步。
在对方问出口之前就回答了担忧。按钮是“重试”。
5. 被登出
差
Error 401: Unauthorized。
“Unauthorized”读起来像指责,而且又是个代码。好
你的会话已过期。
准确,但“会话”是开发者的词。极好
你已被登出。已经过去 30 天了。重新登录,我们会带你回到这里。
解释了原因,并承诺人们不会丢失进度。按钮是“登录”。
401 与 403 正好相反:这个人没有登录,或者登录已失效。让他们去登录就是解决办法,而告诉他们登录后会回到原来的位置,就消除了犹豫的理由。
再来三个,全新撰写
上面五个没覆盖的场景,同样适用这些规则。下面三个是我们自己的示例。
差
Error 500。出了点问题。
代码没提供任何信息,而“点问题”等于承认我们自己也不知道。好
我们没能保存你的修改。
承担了责任,并指出了什么失败了。极好
我们没能保存你的修改。这是我们这边的问题,不是你的。你的文字还在,请过一分钟再试一次。
说明了是谁的问题,以及什么都没丢。按钮是“再次保存”。
差
请求过多。
对一个很可能已经很烦躁的人说机器语言。好
尝试次数过多。请稍后再试。
清楚,但“稍后”可能是一分钟,也可能是一天。极好
尝试次数过多。为了你的安全,登录已暂停 15 分钟。你也可以现在直接重置密码。
给出了等待时间、原因和更快的路径。按钮是“重置密码”。
差
链接无效。
暗示是用户自己输错了什么。好
此邀请已过期。
真正的原因,而且不责怪任何人。极好
此邀请已过期。邀请的有效期是 7 天。请 Maya 重新发一个给你。
说明了链接为什么会过期,以及谁能解决。按钮是“请求新邀请”。
公式:发生了什么、为什么、下一步做什么
上面每一条极好的提示,都符合同样的三行结构:
[What happened, in the reader's words.]
[Why, in one short sentence.]
[What to do next.] [Button: the next step as a verb]
| 提示 | 发生了什么 | 为什么 | 下一步做什么 |
|---|---|---|---|
| 没有权限 | 这个文件是私有的 | 只有受邀的人才能打开 | 申请访问 |
| 银行卡被拒 | 你的银行卡被拒绝了 | 是银行拒绝的 | 换一张卡 |
| 文件太大 | 这个视频有 2.4 GB | 上限是 2 GB | 裁剪视频 |
| 离线 | 你已离线 | 修改已保存在这部手机上 | 重试 |
| 被登出 | 你已被登出 | 已经过去 30 天了 | 登录 |
“为什么”这一行是团队最先砍掉的,也是能挡住下一张客服工单的那一行。
下次评审用的检查清单
- 不要出现原始代码。 403、401 和 500 留在日志里,别放进提示。
- 不要责怪用户。 写“是银行拒绝的”,而不是“你输入了无效的银行卡”。
- 把数字说出来。 大小限制、等待时间、天数。
- 一个按钮,用动词命名。 “裁剪视频”,而不是“确定”。
- 说明保留了什么。 如果什么都没丢,就直说。
- 登录时不要确认账号是否存在。 “密码错误”等于告诉陌生人这个账号存在。改说“该邮箱和密码不匹配”。
- 然后再检查颜色。 文字承载错误,颜色和图标起辅助作用。我们关于错误提示颜色的文章里,有适用于浅色和深色模式的红色。
文章
错误提示颜色:用这 8 种红,别再用 #FF0000
这篇文章的姊妹篇:文字在这里,颜色、图标和代码在那边。
FAQ
如何写出好的错误提示?
用大白话说明发生了什么,用一句简短的话说明为什么会发生,再说明下一步该做什么。把下一步放在用动词命名的按钮上,比如“重试”或“换一张卡”。
糟糕的错误提示有哪些例子?
原始代码和含糊的词:“Error 403”、“Error 401: Unauthorized”、“交易失败”、“上传错误”和“网络错误”。每一条都准确,但没有一条告诉人们该怎么做。
错误提示应该显示错误代码吗?
不要把它当作提示本身。代码对客服和开发者有帮助,所以把它留在日志里,或者如果客服团队需要,就放在真正提示下方的小字里。
401 和 403 错误提示有什么区别?
401 表示这个人没有登录或登录已过期,所以提示应该引导他们去登录。403 表示他们已登录但缺少权限,所以提示应该告诉他们谁能授予访问权限。
为什么登录错误不应该写“密码错误”?
因为这会确认账号存在,对试探账号的人有帮助。安全指南建议,邮箱错误或密码错误都使用同一条通用提示。
来源
- HTTP 状态码:MDN 上的 403 Forbidden 和 401 Unauthorized。
- 错误提示指南,Nielsen Norman Group。
- Writing,Apple Human Interface Guidelines。
- Authentication and error messages,OWASP Cheat Sheet Series。
- 最初以轮播图形式发布在 UX Brainy。
Want every error, empty and loading state written and designed as one system? Our team designs product UI with the words in it from the first draft.
Get Started
