[UI/UX] バリデーションの発火タイミングとボタン制御について

きっかけ

これまでエンジニアとして開発したり UIUX レビューする中で、バリデーションが発火するタイミングやボタン制御については、いろいろ意見が分かれる分野だと感じました。

こちらに関して、自分なりの考えを整理してみたいなと思い、言語化してまとめてみました。

■ ボタン押下時か、入力中か、フォーカスアウト時か

1. ボタン押下時

ボタンを押下すると、バリデーションに引っかかっている全ての入力フォームの直下に、赤いエラーメッセージが出現。

メリット

• 実装が楽。

デメリット

• 全フォームを入力してボタンを押下したときしか、入力が間違っているということがユーザーに検知されないので、ユーザーには優しくない。

2. 入力中

入力中（1 文字 1 文字入力するたび）にバリデーションがかかるというもの。

メリット

• ユーザーへの検知という意味では非常に強力。
  • 複雑なバリデーションにおいては、入力中にバリデーションがかかると嬉しい。
    • 例）ID やパスワードなどにおいて、使用できない ID や記号がある、英大文字が必要、～以上の文字数、等。

デメリット

• 簡単なバリデーションにおいては、常に警告が出続けると鬱陶しい。
  • まだ入力中なのにずっと警告が出る、、
  • 例）10 文字以上チェックだと 10 文字以上入力するまで警告が出続ける、など。
• 処理が少し重くなりそう。

3. フォーカスアウト時

フォーカスアウト時にバリデーションがかかるというもの。

メリット

• ボタン押下時と比べると、事前にユーザーに誤入力を検知してくれるのでユーザーに優しい。
• 簡単なバリデーションにおいては、入力都度にエラーを検知させられ続けなくて済む。

デメリット

• 複雑なバリデーションにおいては、都度フォーカスアウトしないと確認できない。
  • この場合はユーザーに優しくない。

まとめ、所感

• ボタン押下時のみバリデーション発火させるのはユーザーに優しくない。
  • そのため入力中またはフォーカスアウト時のユーザーへの検知があった方がユーザーに優しい。
• 複雑なバリデーションにおいては、入力中のバリデーションが適していそう。
• 簡単なバリデーションにおいては、フォーカスアウト時のバリデーション適していそう。

■ 正常に入力していない時は、ボタン押下時にバリデーション発火させるか、そもそもボタンを非活性にしておくか

1. ボタン押下時にバリデーション発火

メリット

• どこが間違えたのか、すぐユーザーは検知できる。
  • ユーザーが自己解決しやすい。
• 入力画面にスクロールが発生している場合、バリデーションエラー箇所に戻る実装をしていると、さらにユーザーに優しい。

デメリット

• 無さそう、、？

2. ボタンを非活性にする

メリット

• 絶対にボタンが押せない

デメリット

• 入力ミスがあってボタンが日活性の場合、なぜボタンが押せないのかユーザーが一瞬混乱しそう。
• スクロールがある場合、どこがエラーになっているのか確認する必要があり、スクロール戻りが発生してユーザー負荷が上がる。

まとめ、所感

• 個人的には、ボタン押下時バリデーション発火の方が、ユーザーが自己解決しやすそうで優しいと思うので好きです。

まとめ

個人的には、、

• 入力に誤りがある場合は、ボタン非活性ではなくボタン押下時にバリデーション発火して欲しい。
• ボタン押下時のみだけでなく、フォーカスアウトや入力中にもバリデーションは欲しい。
• フォーカスアウトか入力中どちらがいいかは、その入力フォームのバリデーションの複雑さによる。

最後に

バリデーションについて自分の考えを言語化してまとめてみました。
これが全くの正解とも思っていないので、何か意見があればコメントいただけると嬉しいです！