フォームのどこにエラーメッセージを配置していますか？ ユーザーの期待する場所にエラーメッセージが置かれていないと、ユーザーはフォーム入力を完了できなくなってしまうかもしれません。
フォーム入力を間違えたら、ユーザーはそれを修正して送信し直すために、なにが間違っていたのかを理解する必要があります。フォームを完了しようと思っていたとしても、それがあまりにも大変であればユーザーは心変わりしてしまうでしょう。
フォームの上か、フィールドのインラインか
エラーメッセージの配置場所でもっとも一般的なのは、「フォームの上」と、「エラーのあるフィールドのインライン」という２箇所です。どちらの配置場所が、ユーザーにとってより直感的でしょうか？
調査によると、フォーム上部にエラーメッセージを表示すると、ユーザーの記憶に対して高い認知負荷が掛かることがわかりました。フォーム上部にメッセージがある場合、ユーザーはそれぞれのエラーフィールドに対応するメッセージを記憶しなければなりません。
認知負荷が少なかったのは、エラーのあるフィールドのインラインにエラーメッセージを表示する配置でした。フィールドの間に表示されていると、ユーザーは記憶ではなく認知を頼りにできるので、より早く簡単に間違いを修正できます。
もう１つの調査では、「エラーフィールドとエラーメッセージに距離があると、修正の効率に影響が出る」ことが判明しました。修正を始めるまでに掛かった時間は、メッセージがフォームの上部や下部にあるときにもっとも長く、フィールドのインラインにあるときにもっとも短くなったそうです。
また、フォームの上部や下部はエラー発生率がもっとも高く、完了までの時間がもっとも長く、ユーザーの満足度も最低でした。上部やインラインの配置の中でも、フォームの下部のメッセージは、修正したエラーの正解率がもっとも低くなりました。
ユーザーはどこに配置されているのを好むのか
エラーのあるフィールドのインラインにエラーメッセージを配置すると、もっとも優れたパフォーマンスにつながることが調査で証明されました。加えてこの調査では、フィールドのどの位置に隣接しているのがもっとも直感的なのかについても示されています。
調査では、ユーザーはもっとも好ましいエラーメッセージの配置場所はどこか、順位を付けました。その結果、フィールドの右側が、もっともユーザーの好みや期待を集めました。
好まれる順番
- フィールドの右側
- フィールドの下
- フィールドの上
- フィールドの左
最低評価だったのは、エラーメッセージを左側に表示したときでした。また、フィールドの上に配置したときに認知負荷がもっとも高く、続いてフィールドの下が高い結果になりました。
フィールドの右側が適している理由
なぜフィールドの右側にエラーメッセージを置くのがもっとも好ましく、期待されているのかを理解することは重要です。それによって、デザインの意思決定をするとき、デザイナーはユーザーの振舞いについて、他人に適切に教えられるようになります。
横書きでは、文章は左から右に読みます。そのため、インプットからエラーメッセージにユーザーの視線が動くとき（１→２）、視覚的な労力や精神的な負担をほとんど掛けずに、自然に進行しているように感じられるのです。修正のためにエラーメッセージからインプットに目を戻す際も（２→３）、テキストをもう一度読むような自然な流れに沿っています。
フィールドの左側が適さない理由
フィールドの左側にエラーメッセージを配置すると、横書きの読み方と逆行してしまいます。エラーメッセージが表示されたとき、ユーザーは自然な読解の流れとは反対方向に視線を動かします。自然な視線移動とは異なり、ユーザーがフォームを完了したいときに不自然に感じられます。
また、重要度の高い要素ほど左側にあることをユーザーは期待しているため、直感に反するようにも感じられます。左側にエラーメッセージを置くと、エラーメッセージがフィールドよりも重要になってしまいます。しかし、ユーザーは入力したものの修正に集中する必要があるので、フィールドのほうが重要です。
フィールドの上側は認知負荷が高い理由
フィールドの上側にエラーメッセージがあると、ユーザーに高い認知負荷が掛かります（上側にラベルが付いたフォームなど）。その理由は、エラーメッセージのテキストとラベルのテキストが近いことで、ユーザーが混乱してしまうからです。
２つのテキストが近接していると雑然とした見た目になり、ユーザーがエラーメッセージやラベルを読もうとするとき邪魔になってしまいます。視界に２つのテキストが入ると、どちらか１つに集中するのが難しくなり、混乱を招くかもしれません。
モバイルにおいて最適なエラーメッセージの配置場所
モバイル画面の場合、エラーメッセージとフィールドを並列させられるだけの幅がありません。つまりモバイルのフォームでは、フィールドの右側にエラーメッセージを配置するのは適切ではありません。
代わりにフィールドの下にエラーメッセージを配置しましょう。調査によれば、フィールドの下側はユーザーにとって２番目に好ましい場所です。左から右という横書きの自然な読解の流れには適合しませんが、上から下という読解の流れとは一致しています。
文章を読むとき、ユーザーは左から右へ目を動かして、ページの下方向に読み進めます。フィールドの下にあるエラーメッセージは、縦の閲読の方向に沿っているため、上にあるものより自然です。
フィールドのラベルとエラーメッセージの位置が近すぎると、ユーザーがテキストを読むときの認知負荷が増えます。よって、十分なスペースを確保して２つを区別することで、混乱を防ぎましょう。
フィールドの右か、フィールドの下か
フィールドの右も下も、エラーメッセージの位置として最適です。では、どちらの配置場所を使うべきでしょうか？ この選択は、開発者がどれだけの作業ができるかに依存します。
デスクトップとモバイルのデバイスに実装する際、配置にあまり時間をかけたくない場合は、フィールドの下にエラーメッセージを置いてください。デスクトップ用に実装したフォームは、モバイルデバイスでも同様に活用できるでしょう。
両方のデバイスに向けてエラーメッセージを開発する時間があるのなら、デスクトップではフィールドの右に配置し、モバイルデバイスでは下側に配置しましょう。右にエラーメッセージを置くと、ユーザーが閲覧しやすくなるだけでなく、フォームを短くすることにも繋がります。
直感的なエラーメッセージの表示場所
以上のベストプラクティスに従って、ユーザーが期待する場所にエラーメッセージを配置しましょう。エラーメッセージは、ユーザーの読解の流れに沿っているべきです。そうすることで、少ない認知負荷で間違いを修正できます。
作業や思考の負担が少ないと、ユーザーはフォームをより素早く完了することができます。フォーム入力が楽しい人は誰もいません。ユーザーが手短にフォームを達成できれば、彼らが本当にしたいことにスムーズに誘導することができるでしょう。
