イライラを軽減するエラー メッセージを設計する方法

ガイドライン

Nielsen Norman Group は、効果的なエラー メッセージを、視認性が高く、建設的で、ユーザーの努力を尊重したものとして要約しています。実際には、それは次のことを意味します。

• 問題のあるフィールドまたは要素の隣にメッセージを配置します。
• 「入力が無効です」ではなく、「この番号は 1 桁不足です」という、わかりやすく具体的な言葉を使用してください。
• 修正を提案します: どのような形式が予想されるか、次に何を試すべきか。
• ユーザーが入力した内容を保存しておくと、最初からやり直すことなく編集できるようになります。
• 責めないでください。無効、違法、間違っているなどの言葉は避けてください。

タイミング

誰かが完了する前にエラーを表示することは、最も一般的な間違いの 1 つです。 NN/g は、生徒が終了する前にテストを採点するなど、時期尚早のエラーを敵対的なパターンと呼んでいます。ユーザーがフィールドを離れるかフォームを送信するときにフィールドを検証し、修正している間にメッセージをライブで更新します。

フォームに関するものではないエラー

保存の失敗や接続の切断などのシステム エラーの場合は、何が起こったのか、何が保持されたのか、ユーザーができること (再試行、オフライン作業、サポートへの連絡など) を伝えます。エラーコードそのものを回避してください。サポートが必要な場合は、人間の説明と一緒にそれを見せてください。

アクセシビリティ

赤だけに依存せず、アイコンとテキストを追加してください。メッセージをそのフィールドに接続すると、スクリーン リーダーがフィールドとともにメッセージを読み上げ、送信が失敗した後に最初のエラーまたはエラーの概要にフォーカスを移動します。

エラー状態のモーション

短い揺れや色の変更により、問題のあるフィールドに注意を向けることができますが、短くし、キーストロークのたびに繰り返さないようにし、モーションの軽減がオンになっている場合は、動きを色やアイコンの変更に置き換えます。アニメーションよりもメッセージ自体が重要です。