エラーメッセージの例:悪い例、良い例、最高の例を書き直してみた
生のコードから、人が行動できる文章へ。8つのエラーメッセージを段階的に書き直しました。各段階の解説、最高の例の裏にある3行の公式、次のレビューで使えるチェックリスト付きです。
優れたエラーメッセージは、人に3つのことを伝えます。何が起きたか、なぜ起きたか、次に何をすべきか。そしてそれを実行するボタンを添えます。多くのプロダクトは1つ目で止まり、コードから先に進まないものも少なくありません。以下では8つのエラーメッセージを悪い例から最高の例まで引き上げ、各段階の理由と、次に書くときに使える公式を紹介します。
悪いから最高へ、何が変わるのか
悪い例
最高の例
悪いメッセージはサーバーのために書かれています。403は本物のステータスコードで正確ですが、読んだ人は何も役立つ情報を得られません。最高のメッセージは人のために書かれています。ファイルを名指しし、非公開だと説明し、誰が開けられるかを示し、次の一歩をワンタップにします。
各段階で足されるのは1つずつです。
| 段階 | 人に与えるもの | まだ足りないもの |
|---|---|---|
| 悪い | コード、または「失敗」のような曖昧な言葉 | 何が起きたか、なぜか、何をすべきか |
| 良い | 何が起きたかを平易な言葉で | なぜか、次に何をすべきか |
| 最高 | 何が起きたか、なぜか、ボタンになった次の一歩 | 本人が判断すべきことは何も残らない |
1. アクセス権がない
悪い
Error 403.
ステータスコード。開発者には正しくても、それ以外の人には空っぽです。良い
このファイルへのアクセス権がありません。
何が起きたかを読み手の言葉で伝えています。ただ、読んだ人は行き詰まります。最高
このファイルは非公開です。Samにアクセスをお願いしましょう。許可されたらお知らせします。
理由(非公開)、直せる人(Sam)、その後どうなるかを伝えています。ボタンは「アクセスをリクエスト」なので、お願いはワンタップで済みます。
403は、サインイン済みなのに権限がないという意味です。この違いは文章に影響します。再度サインインする必要はなく、誰かにファイルを共有してもらう必要があるのです。
2. カードが拒否された
悪い
取引に失敗しました。
主語のない「失敗」。カードなのか、お店なのか、通信なのか分かりません。良い
カードが拒否されました。
行動につながる原因を示しています。最高
カードが拒否されました。カード会社が承認しませんでした。別のカードをお試しいただくか、カード会社に承認を依頼してください。
問題を本人ではなくカード会社の側に置き、逃げ道を2つ示しています。ボタンは速い方の「別のカードを使う」です。
支払いエラーは、最も多くのお金と最も多くの気まずさを抱えています。誰も責めず、逃げ道は同じ画面に置きましょう。
3. ファイルが大きすぎる
悪い
アップロードエラー。
原因が何でもあり得るので、人は同じファイルで再試行して同じ壁にぶつかります。良い
このファイルは大きすぎます。
原因は分かりますが、どれだけ超えたのかは分かりません。最高
この動画は2.4 GBです。上限は2 GBです。少し短くしてからもう一度お試しください。
2つの数字を示すので、差がわずかだと分かります。ボタンは「動画をトリミング」で、アプリを離れずに解決できます。
上限が関わるなら、上限を言いましょう。教えられていない数字は、直しようがありません。
4. オフラインになった
悪い
ネットワークエラー。
何かが壊れたように聞こえ、作業が失われたようにも感じられます。良い
オフラインです。
平易ですが、誰もが最初に思うのは「変更が消えた?」という心配です。最高
オフラインです。変更はこのスマートフォンに保存されており、接続が戻ったら同期されます。
聞かれる前に不安に答えています。ボタンは「再試行」です。
5. サインアウトされた
悪い
Error 401: Unauthorized.
「Unauthorized」は非難のように読めますし、またしてもコードです。良い
セッションの有効期限が切れました。
正確ですが、「セッション」は開発者の言葉です。最高
サインアウトされました。30日が経過したためです。もう一度サインインすると、この画面に戻れます。
理由を説明し、今の場所を失わないと約束しています。ボタンは「サインイン」です。
401は403と逆のケースです。サインインしていないか、サインインの期限が切れた状態です。サインイン画面へ案内するのが解決策で、元の場所に戻れると伝えれば、ためらう理由がなくなります。
さらに3つ、新しく書き下ろし
上の5つで扱っていない状況にも、同じルールが通用します。この3つは私たちのオリジナルの例です。
悪い
Error 500. 問題が発生しました。
コードは何も足さず、「問題」は原因が分からないと認めているだけです。良い
変更を保存できませんでした。
問題を自分事として受け止め、何が失敗したかを示しています。最高
変更を保存できませんでした。原因はこちら側にあり、あなたのせいではありません。入力した文章はそのまま残っているので、少し待ってからもう一度お試しください。
誰の責任かを明らかにし、何も失われていないと伝えています。ボタンは「もう一度保存」です。
悪い
リクエストが多すぎます。
おそらくすでにイライラしている人への、機械の言葉です。良い
試行回数が多すぎます。しばらくしてからもう一度お試しください。
明確ですが、「しばらく」は1分かもしれないし1日かもしれません。最高
試行回数が多すぎます。安全のため、サインインを15分間停止しています。代わりに今すぐパスワードをリセットすることもできます。
待ち時間、理由、より速い道を示しています。ボタンは「パスワードをリセット」です。
悪い
無効なリンクです。
本人が何か間違えて入力したかのように聞こえます。良い
この招待は期限切れです。
責めることなく、本当の原因を伝えています。最高
この招待は期限切れです。招待の有効期間は7日間です。Mayaに新しい招待を送ってもらってください。
リンクが失効する理由と、直せる人を伝えています。ボタンは「新しい招待をお願いする」です。
公式:何が起きたか、なぜか、次に何をするか
上の最高のメッセージはどれも、同じ3行に収まります。
[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はログに残し、メッセージには出さない。
- 責めない。「カード会社が承認しませんでした」であり、「無効なカードが入力されました」ではない。
- 数字を言う。 サイズの上限、待ち時間、日数。
- ボタンは1つ、動詞で名付ける。「OK」ではなく「動画をトリミング」。
- 残ったものを伝える。 何も失われていないなら、そう言う。
- サインイン時にアカウントの存在を確認させない。「パスワードが違います」は、そのアカウントが存在すると他人に教えてしまいます。代わりに「そのメールアドレスとパスワードの組み合わせは一致しません」と言いましょう。
- 最後に色を確認する。 エラーを伝えるのは言葉で、色とアイコンはそれを支える役です。エラーメッセージの色の記事に、ライトモードとダークモードで使う赤をまとめています。
ペーパー
エラーメッセージの色:#FF0000の代わりに使う8つの赤
この記事の姉妹編。ここは言葉、あちらは色、アイコン、コードの話です。
FAQ
良いエラーメッセージはどう書きますか?
何が起きたかを平易な言葉で、なぜ起きたかを短い一文で、次に何をすべきかを伝えます。次の一歩は、「再試行」や「別のカードを使う」のように動詞で名付けたボタンに置きます。
悪いエラーメッセージの例には何がありますか?
生のコードや曖昧な言葉です。「Error 403」「Error 401: Unauthorized」「取引に失敗しました」「アップロードエラー」「ネットワークエラー」など。どれも正確ですが、人が何をすべきかは教えてくれません。
エラーメッセージにエラーコードを表示すべきですか?
メッセージ本体としては表示しません。コードはサポートや開発者の役に立つので、ログに残すか、サポートチームから求められた場合に本来のメッセージの下に小さな文字で添えましょう。
401と403のエラーメッセージの違いは何ですか?
401はサインインしていない、またはサインインの期限が切れた状態なので、メッセージはサインインへ誘導します。403はサインイン済みだが権限がない状態なので、誰がアクセスを与えられるかを伝えます。
ログインエラーで「パスワードが違います」と言ってはいけないのはなぜですか?
アカウントが存在することを確認させてしまい、アカウントを推測する人の助けになるからです。セキュリティのガイダンスでは、メールアドレスの誤りにもパスワードの誤りにも、同じ汎用メッセージを使うことが推奨されています。
出典
- HTTPステータスコード:MDNの403 Forbiddenと401 Unauthorized。
- Error-message guidelines、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
