💭

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

2024/06/08に公開

きっかけ

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

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

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

1. ボタン押下時

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

メリット

  • 実装が楽。

デメリット

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

2. 入力中

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

メリット

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

デメリット

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

3. フォーカスアウト時

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

メリット

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

デメリット

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

まとめ、所感

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

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

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

メリット

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

デメリット

  • 無さそう、、?

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

メリット

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

デメリット

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

まとめ、所感

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

まとめ

個人的には、、

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

最後に

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

Discussion