フォームのエラーメッセージと送信ボタンのユーザビリティ
フォームにおいてバリデーションやエラーメッセージの表示方法は、ユーザーエクスペリエンスを向上させる上で非常に重要な要素です。
フォームのエラーメッセージの表示の仕方や送信ボタンの扱いについて、以下のポイントを考えてみたいと思います。
- エラーメッセージの出し方
- 送信ボタンの制御
エラーメッセージの出し方
フォームへの入力内容についてのバリデーションの結果は、エラーメッセージで表現されます。
エラーメッセージは、ユーザーに対して下記のコミュニケーションを行います。
- ユーザーに入力についての問題があることを知らせる
- 入力した内容の問題の原因を明確にする
- 解決方法を提供する
タイミングと場所
エラーメッセージの表示は、入力項目ごとに表示する方法と画面レベルでまとめて表示する方法の2つがあります。
これらをどのように採用するかは、 ユーザーのエクスペリエンスやコンテキスト、フォームのシステムに合わせて検討する必要があります。
入力項目ごとに表示する方法は、現状のフォームでよく見るパターンです。ユーザーが入力を確定した後（フォーカスが外れた後）にバリデーションを行いエラーメッセージを表示する動作をします。 入力した直後にバリデーションの結果がわかるので、問題の解決についてもユーザーが行いやすいと言えます。
またこの場合の必須入力の入力項目についてのパターンで見かけるものですが、一切の入力を行う前に「〇〇を入力してください」などのエラーメッセージが表示されたりします。ユーザーとしてはまだフォームに入力を始めていない状態なのにエラーが起きている状態なので、体験として印象はよくありません。バリデーションからのエラーメッセージの表示タイミングを動作観点から設計と実装で方針をちゃんと決めている必要があるものだと言えます。
画面レベルでまとめてエラーメッセージを出す場合は、フォームを一度送信したあとに内容のバリデーションを行うシステムの場合に多いパターンのように思います。ページのトップにエラーのサマリー表示します。
エラーのサマリーを見て問題のある該当箇所を見ていく必要があるため、各エラーの入力項目へのアンカーリンクがあると便利です。
さらに、エラーの発生した入力項目にもエラーメッセージが表示されると先ほど書いたことと同様に、問題のある箇所の近くにエラーメッセージがあることで、ユーザーが入力内容の修正を行いやすくなります。まとめてエラーメッセージを出す場合については、入力項目ごとにエラーメッセージを表示する方法を併用するのがベストではないでしょうか。
送信ボタンの制御
フォームの送信ボタンについて、必須の入力内容がすべて埋められるまでフォームの送信ボタンを非活性（diabled）にすることがよくあります。条件を満たさなければ先に進めないようにすることで、必須の入力項目をより強調するものであると思います。
ただ、必須の入力項目が入力されないと活性化しないフォームの送信ボタンは、ユーザーに必要な情報の入力を促すデザインですが、いくつかの問題があります。
当初から送信ボタンの非活性の見た目になっていることで、フォームを送信ボタンとしての認知を落として把握しづらくしている可能性があります。
また、送信ボタンが非活性になっているため、ユーザーは入力漏れに気づかず、フォームが長くスクロールしなければ見えないこともあります。入力漏れの原因を見つけるのも難しいことがあり、ユーザーの満足度や信頼度が低下する恐れがあります。
代替案としては、フォームの送信ボタンは「活性」にし必須の入力項目は明確にすることになるでしょうか。この方法では、必須の入力項目が入力されていない場合にはエラーメッセージを表示します。ユーザーはボタンを押すことができますが、入力漏れに気づくとエラーメッセージでその旨が伝えられます。エラーメッセージは具体的な指示を提供し、ユーザーは問題を解消できます。
最後に
入力フォームの体験の設計としては、エラーの発生を最小限に抑えるデザインや開発の観点が重要です。
ユーザーフォームの設計において、エラーメッセージの表示方法を選定する際は、ユーザーの利便性とストレス軽減を考慮した最適な方法を見つけることが大切です。
デザインシステムとして、フォームのデザインパターンを定義し一貫性のあるフォームデザインを実現することもひとつの方法です。システム要件や開発観点も考慮にいれながら、ユーザービリティを考慮したUIの設計アプローチ進めることが大切だと思います。
