フォームでエラーを出す時の挙動を考える

フォームを作っている時に必須項目が入力されなかったらエラー文言を出す、という動作があるが、その時の画面をどのようにつくるべきかちょっと考えた。

実装例

広告バナーやコンテンツが読まれた時に、ガタッとしてしまうとユーザ体験が最悪という説がある。それを前提に、エラー文の場所を確保するUIにしてみた。

挙動としては、一度フォーカスを当てたコンポーネントのフォーカスが外れるとエラー文が出現する。エラー文が出ると以下のようになる。

メリット・デメリット

理想としていたガタッとならない世界は実現することができた。しかし、 エラーが出現していない場合のマージンが空きすぎている。そのため、デザインがあまり揃わなくなってしまった。仮に同じだけのマージンを付与するとコンポーネントに対して広すぎる余白を持つことになってしまう。

世の中の事例と向き合う

Googleや国内のサービスを見ると、細かい挙動の差はあれど、エラー文の余白はなく、選択したあとにフォーム下にエラー文が出現することが多かった。その時は追加されたエラー文の高さだけ、対象より下に配置されたコンポーネントの位置が下がるようになっている。

所感

ページを開いた時のコンテンツの高さ確保の話と、今回のフォームのエラー文の高さの話は別の問題なのだと思った。
バリデーションの実装方法にもよると思うが、フォームの状態( フォーカスされているか ) であったり、入力の内容を見てリアルタイム判定するのであれば、次のフォームに移動した際に、エラー文が出ても動作に支障がでることはほぼない気がするので(視覚的に若干の視点移動は発生するが) デザインを整えるという面でも、最初からエラーの高さを確保する必要はなさそうだと思った。