「ユーザーに優しいエラーメッセージ」をデザインする方法 | アドビ UX 道場 #UXDojo

表示されないものこそが、最高のエラーメッセージであることは誰もが知っています。しかし、どんなにデザインが優れていても、エラーが起きることは避けられません。人々が製品を操作するとき、いつかは何かの問題に直面することになるでしょう。

「エラーメッセージ」は些細なものに見えるかもしれません。しかし、これはユーザー体験の重要な構成要素です。エラーメッセージの質によって製品の品質を評価するユーザーは数多く存在します。できの悪いエラーメッセージは、ユーザーを困らせますが、優れたエラーメッセージは、使用効率とユーザーの主観的な満足度を高めます。

今回は、ユーザーフレンドリーなエラーメッセージの書き方に関する推奨事項を 6 つ紹介したいと思います。これらの推奨事項は、Microsoft が作成したガイドラインと Apple のデザインガイドラインに基づいています。

1. 分かりやすさに拘る

エラーメッセージでは、わかりやすさを最優先します。メッセージは、何が起きたのか、なぜ起きたのか、ユーザーは何ができるのかを説明する必要があります。従って、ターゲット層のユーザーが、問題と解決策の両方を容易に理解できるように、平易な言葉で書かれていなければなりません。

抽象的なメッセージを避ける

抽象的なエラーメッセージは、問題についての情報を十分に伝えません。何かがうまくいかなかったという事実を述べるだけでは、ユーザーが問題の根本的な原因を理解する助けにはならないのです。相手が状況を把握していると仮定せず、問題点を明示することが必要です。

エラーメッセージが、何が問題だったのかを明確にしないと混乱の原因になる。この画像は、Windows 10 のセットアップ時の抽象的なエラーメッセージの例

専門用語を排除する

専門用語が含まれているエラーメッセージは、ユーザーを混乱させる原因になります。エラーメッセージは、常に対象ユーザーの行動と目的に合った言葉を使って、問題を記述するべきです。たとえ技術に精通しているユーザー向けであっても、誰もが簡単に理解できる用語を使用する方がよいでしょう。

このエラーメッセージは、専門用語を多用している 出典: IDW

2. 簡潔かつ的確に書く

人々がページを一字一句、順番に読むことは稀です。大抵は、ページをざっとスキャンして、文章をいくつか拾い読みします。テキストが多いほど、テキストをスキャンすることが難しくなるため、ユーザーがテキストをまったく読まない可能性が高くなります。アメリカプレス協会の調査でも、文章は短いほど理解度が高いと結論づけられています。

エラーメッセージを含め、GUI のすべての部分のテキストを、必要最小限の文字数に減らすよう努めましょう。目標は、短くて、それでも意味のあるエラーメッセージを書くことです。

問題を伝えすぎない

エラーメッセージには、ユーザーの容易な問題解決を助ける役割があります。メッセージには、そのために必要な情報だけを含めるべきです。伝えたい事柄を把握して、不必要な情報は排除します。

よく考えられたエラーメッセージは、解決方法を説明する傾向があります。場合によっては、複数ステップに分けて指示が記述されます。次の例は、エラーメッセージの中で、問題解決のすべてのステップを説明しようとしています。その結果、エラーメッセージが読みづらくなっています。

エラーメッセージの本文に複数ステップの指示を表示するのは避ける 出典: Microsoft

エラーメッセージの中で、複雑な問題解決のプロセスを説明するのは避けるべきです。代わりに、段階的に情報を表示する手法を使用しましょう。作業手順を含む箇所は、デフォルトでは非表示にしておいて、問題についてもっと知りたくなったユーザーだけが「解決方法」をクリックすれば良いのです。

3. ユーザーを非難しない

口調や言葉選びは、ユーザーのメッセージの理解に多大な影響を及ぼします。適切な語り口を使って伝えれば、ユーザーがエラーの起きた状況に共感しやすくなり、エラーの理解が容易になります。

「行われた操作のため」などの表現は避ける

エラーメッセージの中には、エラーをユーザーが引き起こしたと伝えるものがあります。エラーはすでに不快なものです。そこにさらに不快さを追加する必要はありません。つまるところ、エラーメッセージも、ユーザーとのコミュニケーションであり、関係を構築するための重要な手段の一部なのです。問題を引き起こしたユーザーのアクションではなく、問題そのものに焦点を当てるよう心掛けましょう。

以下は、ユーザーが間違ったログイン情報を入力したときの、2 種類の対応例です。

ヒント:エラーメッセージに、より人間的なトーンを取り入れる良い方法は、自分にとって大切な人を思い浮かべ、その相手に対して声に出して説明する場面を考えることです。

Dropbox が欠落している文字を丁寧に要求していることに注目

大文字のテキストや感嘆符を使用しない

大文字のテキストと感嘆符は、どちらもユーザー体験を粗悪にします。大文字のテキストはエラーメッセージを読みづらくします。エラーメッセージの末尾に感嘆符があると、システムがユーザーに対して怒鳴っているかのような印象を与えかねません。

4. ユーザーに解決策を提示する

とても重要なメールを書いて「送信」ボタンを押したとします。その直後、「メールを送信できませんでした」というメッセージが表示され、詳細が一切提示されなかったとしたら?おそらく、どうすればいいのか、全く分からない状態になるでしょう。その結果、作業を一時中断して、問題の解決策を見つけるために時間を費やさなければならなくなります。

行き詰らせるエラーメッセージの例

エラーに対応するためユーザーが作業を中断しなければならないとしたら、ユーザー中心設計の基本原則である「ユーザーが効率的かつ効果的にタスクを完了する助けになる」から逸脱してしまいます。

効果的なエラーメッセージは、問題が発生したこととその理由をユーザーに伝えるだけでなく、次のステップを提示して、ユーザーの問題解決を助けるべきです。提示する次のステップは、コンテキストに則したアクションが望ましいでしょう。

コンテキストに沿ったアクションを提供するエラーメッセージ

ボタンの意味を説明しない

エラーメッセージには、一般的にボタンが提供されています。多くの場合、ユーザーは操作を続行するか、キャンセルするかをボタンによって選択することになります。優れたボタンデザインの基本ルールはシンプルで、ボタンのラベルを読むだけで、ユーザーが何をするためのボタンなのかを理解できることです。エラーメッセージの文言とボタンのラベルが明確であれば、ボタンの意味を説明は不要なはずです。

Apple Music のプレイリストを削除する際のエラーメッセージ。ここでは、「削除」ボタンの意味を説明する必要はない

5. 適切なメッセージ形式を使用する

一般的なエラーメッセージは、モーダルのダイアログボックスに表示されます。これは、ユーザーがコンテンツにアクセスできないように、オーバーレイ表示されるウインドウです。モーダルダイアログボックスにエラーメッセージを表示することは、ユーザーの注意を 100%引きつけるという大きな利点があります。しかし、注意を引く必要がないときは、これは反対に欠点になります。多くの場合、エラーメッセージは、インラインやステータス欄を使うなど、別の方法で表示することが可能です。

エラーメッセージをデザインするときは、次のシンプルな質問をしてみましょう。すなわち、「ユーザーがこのメッセージを読むために、作業を中断しなければならないか?」です。もしその答えが「いいえ」なら、モーダルダイアログボックスの代替案を検討しましょう。

6. ユーザーに提示するエラーメッセージの数を制限する

頻繁にエラーメッセージが表示されるのは、悪いユーザー体験の兆候です。エラーメッセージはユーザー体験を妨げ、ユーザーと製品の間に摩擦を生み出します。したがって、エラーメッセージは、取り消しのできないアクション(削除など)を行う場合のように、重要度の高い状況でのみ使用されるべきです。アラートの頻度が低いことは、人々がそれを真剣に受け止めるようにするためにも役立ちます。

制約されたコントロール

一般的に、エラーを報告するよりも、エラーを防止する方が望ましいのは言うまでもありません。多くのエラーは、より共感的なデザインによって回避できます。例えば、スライダーや日付・時刻のピッカーなどの UI 要素は、有効な値のみ提示するよう制限されるべきでしょう。ホテル予約に使われる日付ピッカーであれば、過去の日付を無効にすることができます。

Booking.com では、過去の日付を無効にすることで、ユーザーが誤った日付を選択することを防いでいる

また、テキストボックスに特定の文字しか入力できないように制限をかけることも可能です。たとえば、ユーザーが電話番号を入力することを想定しているテキストフィールドであれば、数字のみを受け付けるよう制限することができます。

電話番号を入力するテキストフィールド 出典: Github

もう一つ重要な例ですが、入力フォームの場合は、クリックするとエラーになる CTA ボタンを無効にすることができます。コントロールが無効になっている理由が明らかである限り、データを送信するフォームにはこれを適用できます。これにより、ユーザーが不必要な対応を求められる状況を、事前に防止できます。

ユーザーに無関係なエラーは報告しない

ソフトウェア開発者は、エラーメッセージに依存しがちです。システムにバグがあることを示すメッセージは、プログラマーには意味がありますが、ユーザーは気にも留めないでしょう。無視する以外に、ユーザーがそのようなエラーメッセージに対してできることはありません。

エラーを自動修正する

問題を自動的に修正できる場合は、自動修正するべきです。例えば、検索フォームでは、タイプミスの自動修正が可能です。

Amazon はマイナーなタイプミスを自動修正する

エラーメッセージのデザイン戦略を持とう

エラーメッセージをデザインするには、総体的なアプローチが必要です。まず調査と分析から始めて、製品内で問題が起こりそうなすべての場所を検討します。その結果から一覧表を作成したら、それぞれの項目について、簡潔で親しみやすいエラーメッセージを考えます。

既存のエラーメッセージを見直す際は、UX ライターと協力しましょう。UX ライターは、状況とユーザーの心理状態の両方を考慮してエラーを評価し、必要に応じてエラーメッセージを更新するスキルを持っています。そして、出来上がった案の検証を忘れずに行いましょう。エラーメッセージは、必ず実際のユーザーとテストするべきです。

エラーメッセージのデザインは、情報アーキテクチャのほんの些細な一部に思えるかもしれませんが、実際には、ユーザー体験に多大な影響を与える可能性があるものです。ユーザーに優しいエラーメッセージは、製品とユーザーとの摩擦を減らすことで、彼らが思い通りに行動できるようにして、目的の達成を助けることができます。

この記事は How to Write and Design User-Friendly Error Messages(著者: Nick Babich)の抄訳です