フォーム利用時にユーザーに大きなストレスを与え、時には離脱に導いてしまう可能性も高い、入力エラー。
できるだけエラーを出さないために工夫をすることが重要ですが、人間はどうしても間違うもの。完全に入力エラーをゼロにすることは難しいでしょう。
そこで、できるだけストレスを与えないエラーメッセージの表示方法、デザイン、タイミング等について、このブログでは下記の記事などで何度か考察してきました。
フォーム最大の関門<エラー表示>のストレスを軽減する基本施策

https://f-tra.jp/blog/column/1058

海外EFO情報:すぐ使える!エラーメッセージを効果的に表示する6つのポイント
https://f-tra.jp/blog/overseas/4454

今回は、そのなかでも特にメッセージの内容について重点的に考えてみたいと思います。

よくある不親切なエラーメッセージ

日頃多くのフォームを見ていて、まだまだ文言が不親切なフォームが多いように感じます。
具体的には、このようなメッセージを多く見かけます。

  • エラーがあります。
  • 正しいIDとパスワードを入力してください
  • 必須項目に必ずご記入ください
  • 入力内容に誤りがあります
  • 無効なメールアドレスです

実店舗にたとえてみる

EFOを語るときに、フォーム送信をレジに並んだお客さんに例えたりしますが、今回も店頭での接客に置き換えてみましょう。

まずは、フォームのエラーを店舗での行動に置き換える

フォームでエラーメッセージを出す場合のユーザーの行動は、

  • 必須項目を埋めていなかった場合
  • 入力の形式(半角や文字数など)が正しくなかった場合
  • 誤った内容(パスワード間違いなど)を入力した場合

などが代表的です。
まずはこれらのシーンを実店舗のレジに置き換えてみましょう。
なお完全に上記置き換えることは難しいのですが、すでにレジに並んだ後に支払い完了に進めない事柄の例として、たとえば下記のような場面を考えてみました。

  • お客さんが出したお金が足らなかった
  • 対応していないクレジットカードで支払いを希望していた
  • 期限切れのポイントカードやクーポンを提示された
  • 他店のポイントカードやクーポンを提示された
  • セット売りの商品の単品や非売品をレジに持ってきていた

店舗ではありえない対応

上記のような場面で、下記のような対応をされたことがあるでしょうか?または、想像してみてください。

  • 「精算できません」
  • 「このカードは使えません」
  • 「これはお買い上げできません」

非常に不親切です。
このような対応をされることは。おもてなしの国であるここ日本ではめったにないのではないでしょうか。
しかし、冒頭で挙げたようなフォームのエラーメッセージの不親切さは、これらのぶっきらぼうな対応とさほど変わらないのではと思います。

もし親切な店舗なら

実際の店舗で親切なスタッフなら、このような事態には下記のように対応するでしょう。

  • 「あと20円、頂戴できますでしょうか」
  • 「申し訳ありませんが○○カードは対応していません。△△カードと□□カードであれば対応可能です」
  • 「有効期限が切れております。新しいポイントカードをお作りしますか?」
  • 「恐れ入りますがこちらは○○社のクーポンでございます」
  • 「この商品は3つセットでのみ販売しておりますが、いかがいたしましょうか」

以上極点な例ではありましたが。伝え方ひとつで大きく印象が変わる点、再び購入に前向きになれるかが大きく変化するということがおわかりいただけたのではないかと思います。
少し前置きがながくなってしまいましたが、フォームのエラーメッセージも実店舗での親切な対応のように、伝え方一つでポジティブな印象を与えることができるはずです。

ポジティブなトーンでのエラーメッセージの書き方

では、具体的にエラーメッセージを改善するためには、どのようなポイントが重要なのでしょうか。
uxmagでのエラーメッセージの伝え方について取り上げている記事では、メッセージをポジティブにするための方法として、下記の5つを挙げています。

  • 専門用語を排除する。
  • 否定的な言葉を利用しない
  • エラー内容を明確にし、何を訂正すれば良いかをわかりやすくする
  • 問題を解決するためのヒントを与える
  • ユーザーではなく、自分自身に責任を置く

専門用語を排除する。

専門用語とは、例えば「互換性」など、コンピューターに携わる業界の人間であれば違和感がないものの、一般的には浸透していない言葉を指します。
このような言葉は平易な言い回しに置き換える必要があります。
例えば「互換性ががありません」は「一緒に動作させることができません」のような形です。

否定的な言葉を利用しない

こちらは以前に取り上げた記事にも詳しく言及がありました。
具体的には、

「Oops」―おっと, しまった, これはどうも

  • 「Error」― 誤り,間違い
  • 「Failed」―失敗した,不成功の
  • 「Problem」―(特に,解決の難しい)問題,難問
  • 「Invalid」―効力のない,無効な
  • 「Wrong」―間違った,誤った
  • 「Prohibited」―禁止,禁制

などが挙げられていました。
このようなネガティブワードが存在することで、エラーを出したユーザーは、単に少しだけミスしてしまっただけにもかかわらず、まるで重大な過ちを犯したかのような気分にさせられてしまいます。
そもそもフォーム側が欲する情報や入力形式というのは、こちらの都合に過ぎません。こちらが勝手に作ったフォーマットから少し外れただけで「失敗」呼ばわりさせるのもおかしな話ですよね。

エラー内容を明確にし、何を訂正すれば良いかをわかりやすくする

例えばカードが使えないという事象に対して、
ただ「カードが使えません」という結論だけ述べるのは非常に不親切です。
「有効期限が切れている」「カード会社が対応していない」「現金のみの対応」など、なぜ使えないのか、その理由を明確にすることではじめてお客さんは次のアクションを考慮することができるようになります。

問題を解決するためのヒントを与える

さきほど例に上げた実店舗でよくある対応方法をもう一度見てみましょう。

  • 「あと20円、頂戴できますでしょうか」
  • 「申し訳ありませんが○○カードは対応していません。△△カードと□□カードであれば対応可能です」
  • 「有効期限が切れております。新しいポイントカードをお作りしますか?」
  • 「恐れ入りますがこちらは○○社のクーポンでございます」
  • 「この商品は3つセットでのみ販売しておりますが、いかがいたしましょうか」

全体を通して言えるのは、「20円を出す」「△△カードか□□カードを出すか、現金で支払う」「新しいポイントカードと作る」など、お客さんが次にどんな何をすればよいかを明確に提示している点です。

ユーザーではなく、自分自身に責任を置く

繰り返しになりますが、そもそも設定しているエラーとは、サービス提供側の都合に過ぎません。ですのでユーザーのミスは悪いことではありませんし、修正を要求するのであればサービスとして謙虚であるべきです。

具体的な改善例

同記事ではさきほど上げた5点のポイントを応用した改善例を載せていましたので、その日本語訳も紹介したいと思います。
(日本語訳)

例1:
(改善前)
“Your departure date is not a valid date. Please check and try again.”
出発日が無効な日付です。ご確認のうえ、もう一度入力してください。
(改善後)
“Oops, you didn’t enter a departure date. Please use the calendar to select a date for your departure flight.”
おっと、出発日が入力されていないようです。カレンダーを使ってフライトの出発日を選んでください。

例2:
(改善前)
“Login incorrect. User ID’s and password are case sensitive. Please try again.”
正しくログインできませんでした。ユーザーIDとパスワードは大文字と小文字を区別します。もう一度お試しください。
(改善後)
“Oops, you didn’t enter a username. Please fill in your username, or click here if you’ve forgotten your username.”
おっと、ユーザー名が入力できていないようです。ユーザー名を入力してください。もしユーザー名を忘れた場合はここをクリックしてください。

例3:
(改善前)
“Incompatible Browser Detected.”
互換性のないブラウザが検出されました。
(改善後)
“Our site works best with browsers other than the one you’re using. You can download a different web browser here. You can continue using this browser, but be aware that some features might not be available. We apologize for this inconvenience.”
このサイトは、あなたが今お使いのもの以外のブラウザで快適に動作します。ここから異なるブラウザをダウンロードすることができます。現在のブラウザは引き続きお使いいただけますが、一部の機能が利用できない可能性があります。ご不便をおかけして申し訳ありません。

いずれの例も、その後どのようなアクションをとればよいかが具体的かつ明確に示されており、なおかつネガティブな印象を与えず、謙虚です。

最後に

いかがだったでしょうか。本日はフォームのエラーメッセージの内容についてお届けしました。
ぜひ上記の例などをお手本にして、エラーメッセージを見なおしてみてはいかがでしょうか。
もし改善に迷った場合は、「もし実店舗ならどのように対応するか」と置き換えてみると、いいアイデアが浮かんでくるかもしれませんね。
※参考記事
How to Make Your Form Error Messages More – UX Movement
Are You Saying “No” When You Could Be Saying “Yes” in Your Web Forms? | UX Magazine