デザイン

デザイン

【適切にエラーメッセージをデザインする!】エラーメッセージのベストプラクティス

6,004 views

読了時間 : 約2分53秒

エラーメッセージは、Webおよびモバイルインターフェースで何か問題が発生したときにユーザーにフィードバックを与え、エラーが生じていることを知らせます。ブランドのユーザーエクスペリエンス、コンバージョン率、評判には、これらのメッセージによる指示、警告、リマインドが不可欠です。

UXMasによると、エラーメッセージのデザインは、人間的、有益、謙虚でユーモラスでなければなりません!

適切なエラーメッセージを設計するための4つのベストプラクティスを以下に示します。

 

 

1 – エラーメッセージの例:配置とタイミングを考慮する

効果的なエラーメッセージは、エラーが生じた直後に表示され、最適な瞬間に画面上に戦略的に配置されるため、ユーザーはそれらを見逃すことができません。

上記に2つのエラーメッセージの例があります。

左の支払いフォームは、支払いを行うために詳細を記入する必要があることをユーザーに知らせるためにポップアップを使用します。ユーザは、支持された操作を行うためにポップアップをクリックしなければならず、ユーザの入力フローに1つステップが追加されます。また、ユーザーがポップアップの指示を忘れて、ポップアップに戻ることが強制されるリスクもあります。これは時間がかかり、イライラしますよね。

正しいフォームは、「インライン検証」を使用します。各エラーが生じている入力箇所のすぐ下にエラーメッセージをデザインするのです。

ユーザーが空白のままにしておくと、明らかに目につく指示が各入力フィールドのすぐ下に表示されます。ユーザーは即時フィードバックを受け、必要な修正にはっきりとマークが付けられます。

 

 

2 – エラーメッセージの例:実行可能にする

どんなにうまく設計されていても、戦略的に位置づけられていても、ユーザーに道を譲らないとエラーメッセージは上手くいきません。

ユーザーに問題があることを知る必要があるだけでなく、問題を解決する方法も知らせておく必要があります。実行可能なエラーメッセージは、タスクを完了するために次に何をすべきかをユーザに知らせるメッセージです。

これは私たちが見た最も良いエラーメッセージの例の1つです。

システムは、自分の電子メールアドレスがすでに使用中であることをユーザに通知するだけでなく、ユーザ名を回復することによってログインプロセスを完了する方法も知らせます。

 

 

3 – エラーメッセージの表示例:目立つようにする

エラーメッセージは、ユーザーが気付かない場合は時間の無駄です。Jakob Nielsenが言っているように、「非常に最悪のエラーメッセージは、存在しないメッセージです。大きなフォントや派手なポップアップはすぐに刺激になります。それであなたのメッセージが確実に伝わるようにするにはどうすればいいですか?適切な色を使用してください。

色はユーザーの検証に最適なツールの1つです。エラーメッセージは、通常、コントラストのために白い背景に対して赤いテキスト/警告アイコンとして表示されます。

色はエラーであることの唯一の指標であってはならないことに注意してください。Jakob Nielsenは、色盲のユーザーにも見えるように色以外の目印も含めるようアドバイスします。

 

 

4 – エラーメッセージの表示例:特定する

あなたはエラーメッセージの美学をほとんど習得しました!複雑な説明やあいまいなコード、略語でこれまでに学んだ適切なデザインを崩さないでください。

エラーメッセージが読みやすく、人間らしさを持つようにする方法について、いくつかのアドバイスがあります:

・感情的に、技術的ではなく:「タイプ2のエラーが発生しました」などの生のエラーデータは表示すべきではありません。

・有益かつ正確に:何が間違っていてるか正確に示すことは大切です。何が正しく入力されているかも明確に示しましょう。

・各メッセージで一貫性を保つ

・常に問題を解決する方法に関するアドバイスをする

 

 

 

Jonathan Colman氏によれば、良いエラーメッセージはシンプルで明確に言い表されています。悪いメッセージには、何が起こったのか、次に何をするのかについての詳細は表示されません。

適切にエラーメッセージをデザインして、使用しましょう。

 

 

 

▼こちらの記事もおすすめです!

 

 

 

 

 

※本記事はHow to design error messages — downloadable exampleを翻訳・再構成したものです。

【コンビニでも使える!メルペイ初回利用1000円分招待コード】

当サイト限定招待コード:CMUTDF

 
・利用可能店舗:メルカリ、コンビニ、ドラッグストア等
・金額:1000円分
※さらにメルペイスマート払で2000円分ポイント!
 友達招待でお互いに1000円分ポイント!2人以上招待でUSJ貸し切りイベントに抽選招待も!

メルカリ-フリマアプリ&スマホ決済メルペイ

メルカリ-フリマアプリ&スマホ決済メルペイ

無料

 

ピックアップ! さらに今このキャンペーン中です↓

期間中の金・土限定でd払い利用で最大20%のdポイント還元中!
■エントリー期間:2020/2/29(土)23:59 まで
■キャンペーン期間:2020/2/24/(月)23:59 まで

 

 

Seleqtをご覧頂いた方だけに「朗報」
\当サイト限定特別クーポン/

【Uber taxi初回利用2000円オフクーポン】
JP20gd6nv7

 

以下のリンクから『プロモーション コードを追加する』で「JP20gd6nv7」を入れてください。初回利用が2000円オフになります!
※プロモコードは日本国内でのみ利用可能

 

2000円オフで登録» »当サイト限定の初回利用2000円オフのクーポンを使って登録はこちら!

 

アプリDLはこちらから↓

Uber

Uber

 

 

 

Seleqtをご覧頂いた方だけに「朗報」
\当サイト限定特別クーポン/

【UberEats初回1000円オフクーポン】
ins6je2v

 

対象店舗:マック、ガスト、スタバ、ピザハット、松屋 等
※1000円分無料で頼めます。〇〇円以上とかもナシ!完全無料でお試しOK
割引額:1000円引き

 

1000円オフで登録» »当サイト限定の初回利用1000円オフのクーポンを使って登録はこちら!

 

アプリDLはこちらから↓

Uber Eats: 地元で人気の料理をお届け

Uber Eats: 地元で人気の料理をお届け

無料

 

おすすめ新着記事

おすすめタグ