ユーザーエクスペリエンスに関する情報を発信する米国のブログ「UX Movement」から、フォームのエラー表示に関する記事を紹介したいと思います。
フォームのエラーは、ユーザーをイライラさせ、ページからの離脱を生み出す大きな要因のひとつです。EFOにおいて、エラー表現の検討は入力完了率やユーザーの満足度に直結すると言えるでしょう。
エラー表示の改善施策については、以前当ブログでも取り上げました。
フォーム最大の関門＜エラー表示＞のストレスを軽減する基本施策
https://f-tra.jp/blog/column/1058
ちなみに、上記の記事で紹介した施策は下記のとおりでした。
- エラー文言は該当項目の近くに表示
- デザイン上目立たせる
- エラー文言は具体的にする
- リアルタイムでのエラー判定を行う
- 入力成功時のサインを出す
今回注目した記事ではエラー表示における6つのポイントが紹介されていました。上記と重なる部分もありますが、加えてさらに参考となる内容ももり込まれていました。さっそく、紹介に移りたいと思います。
エラーメッセージ表示のポイント
エラーメッセージの6つのポイントは下記のとおりでした。
順番に見ていきます。
1. ネガティブトーンの言葉を使用しない
エラーメッセージには否定的な言葉を使うべきでないと筆者は述べています。具体的には下記のような言葉が挙げられていました。
- 「Oops」―おっと, しまった, これはどうも
- 「Error」― 誤り，間違い
- 「Failed」―失敗した，不成功の
- 「Problem」―(特に，解決の難しい)問題，難問
- 「Invalid」―効力のない，無効な
- 「Wrong」―間違った，誤った
- 「Prohibited」―禁止，禁制
これらを日本のフォームの場合に置き換えると、たとえば下記のような表現が該当しそうです。
- 「入力エラーです」
- 「入力形式が間違っています」
- 「無効な入力内容です」
- 「誤りがあります」
- 「送信に失敗しました」
エラーといえど、そのほとんどが些細な部分を修正するだけで済むもの。必要以上に否定的な言葉を使うとユーザーの気分を害することにつながります。
ついつい使用してしまいがちな表現ばかりですが、できるだけ使わないように心がけたいですね。
2. エラー項目のハイライトは、赤ではなく黄色やオレンジを使用
どこがエラー箇所かを目立たせることは大切ですが、その際に赤色ではなく、黄色やオレンジ系の色を使うべきとのこと。
理由としては、否定的な言葉を避けるのと同様に、赤色が過剰に危険なイメージを与えてしまうことにあるようです。
赤色だと、どぎつい印象を与える
エラー表示に赤色を使用するのはもはや定番になりつつありますが、強烈すぎる表現は避けたほうが無難のようです。
3. エラーの理由を正確に説明する
こちらは以前に当ブログで紹介した内容と同じですね。
ただ抽象的に「エラーがあります」と言われても、どのように直せばよいかわからない場合もあります。スムーズに入力し直せるようにミスの内容は具体的に表記するようにしたいですね。
エラー文言の悪い例。
エラーが具体的な例。
また、理由を具体的に表記することが、1つめに紹介した「ネガティブトーンの言葉を使用しない」ということにもつながってくるようにも感じました。
4. エラーの要約は避け、ラベルの横に配置する
こちらも以前お伝えした内容です。
ただしこの記事では上部のエラーの要約は排除すべきだ、と述べています。
エラーのサマリーがフォーム上部にズラリ…
たくさんのエラーがズラリと並ぶと、たしかにウンザリしてしまいます。またどこが間違っているか照らし合わせるのも面倒です。エラー内容はその項目の箇所に記載するのが良いでしょう。
とはいえ、何の文言もないと（特に縦に長いフォームページにおいては）エラーの存在に気づきにくくなってしまいます。
すべてのエラー内容を表記する必要はないのですが、エラーが存在している旨はフォームの上部で表記するのが良いように個人的には思いました。
エラー表示。上部にエラー内容と、該当箇所の背景が赤く色づく。
エラーはひとつづつ見せる
エラーをその都度ひとつずつ表示すること、つまりはおなじみ「リアルタイムアラート」の導入が良いアプローチであると述べられています。
ボタン押下時にまとめて複数のエラーが出るよりも、入力しているそばからエラーに気づけるとすぐに軌道修正が可能で、ユーザーも負担に感じにくくなりますね。
エフトラEFOのリアルタイムアラート。入力形式にミスがある場合アラートが発動
さらに著者は、一度表示した吹き出しは次の項目の選択時には消すことが望ましいとも述べています。吹き出しの存在は、時にほかの入力項目やラベル、補足など重要な情報を隠してしまうため、そのような工夫が必要です。
複数の条件がある場合、送信前にチェックする
項目の種類によっては、ひとつの項目に複数の入力条件が存在することがあります。
そのような場合、送信前に条件を満たすかどうかをチェックできると良いとのこと。
Apple ID作成画面。
著者は参考例として「Apple ID」の作成画面を紹介していました。
複数の条件が存在する場合、文章で表現するとどうしても煩わしい印象を与えてしまいますが、条件が箇条書きになっており、リアルタイムに満たすかどうかを判別してくれると非常にスムーズですよね。
最後に
いかがだったでしょうか。本日はエラーメッセージの表現に関する海外の記事から、効果的な施策６つを紹介させていただきました。
エラーによるストレスを極力なくし、気持よく利用できるフォームを作っていきましょう。
参考記事：How to Make Your Form Error Messages More – UX Movement
