フォームの検証と無効なボタン
ユーザーがフォームを検索してボタンが無効になっている理由を確認する認知的負荷と比較して、ユーザーがエラーを送信および検出できるようにすることは、おそらく最適です。ただし、これはリアルタイムの検証フィードバックを提供することで回避できます。
それでは、どのシナリオがよりユーザーフレンドリーで、煩わしさやエラーが少ない傾向がありますか？
- すべてのフィールドに入力して有効になるまで、送信ボタンを無効にします。リアルタイムの靴のインライン検証。
- 送信ボタンを無効にせず、ユーザーが送信ボタンをクリックした後にのみ検証エラーを表示する。
フォームの長さは短く、通常は6〜8フィールド以下です。
TL; DR：ユーザーが送信ボタンを押すまで、送信ボタンを無効にせず、エラーが表示されるのを待ちません。
エラーの表示に関係なく、ユーザーがエラーを修正する前にフォームを完全に記入する傾向があることを示す調査が行われました。
そのような調査の1つは、ユーザーがさまざまなエラープレゼンテーションにどのように反応したかを調べたものです： World Wide Webで使用可能なエラーメッセージプレゼンテーション：エラーをすぐに表示しない 、コンピューターとの対話、第19巻、ページ330-341（2007）
6種類のエラープレゼンテーションが確認されました。
- すぐに、フィールドにインラインで、エラーを1つずつ表示します。
- すぐに、ダイアログでエラーを1つずつ表示します。
- 送信後、フィールドにインラインで1つずつエラーを表示します。
- 送信後、フィールドにインライン化し、すべてのエラーを一度に表示します。
- 送信後、ダイアログでエラーを1つずつ表示します。
- 送信後、ダイアログでエラーを一度に表示します。
彼らが見つけたものは、この研究記事で呼び出されています： World Wide Webでの使用可能なフォームに向けての作業：日付入力フィールドの最適化
Bargas-Avila et al。 [24]は、インライン検証、ポップアップウィンドウ、埋め込みエラーメッセージなど、エラーメッセージを表示する6つの異なる方法を比較しました。エラーメッセージが対応する入力フィールドの横にあるフォームに埋め込まれているか、ポップアップウィンドウに1つずつ表示されていると、連続して発生するエラーが少なくなります。これは、送信ボタンをクリックした後にエラーメッセージが最後に表示された場合にのみ発生しました。エラーメッセージが表示された時点でエラーメッセージが表示された場合（インライン検証）、参加者はフォームの入力時にかなり多くのエラーを発生させました。単に無視するか、ポップアップウィンドウの場合は、表示されたエラーメッセージを読み取らずにクリックしてしまいました。
もう少し分解するには：
- ユーザーには、完了モードと改訂モードの2つのモードがあります。
- ユーザーはフォームに入力するときに即時のエラーを無視する傾向があります
- 最も効果的なエラープレゼンテーションは次のとおりです。
- 送信後、フィールドにインライン化し、すべてのエラーを一度に表示します。
- 送信後、フィールドにインラインで1つずつエラーを表示します。
- 送信後、ダイアログでエラーを1つずつ表示します。
これをあなたの状況に適用するには：
送信ボタンを無効にせず、ユーザーが送信ボタンをクリックした後にのみ検証エラーを表示する。
...正しい行動方針です。
上記のように、エラーをすぐにインラインで表示すると、ユーザーの注意をそらし、フォーム入力のタスクから外すことができます。ユーザーが「完了」モードを終了し、送信を押した後にエラーを表示できるようにします。
私はあなたのオプションのミックスを使用します：
インライン検証を表示し、送信ボタンを無効にしないでください。
[送信]をクリックしたときにフォームがまだ無効な場合は、自動スクロールして表示し（「画面外」になった場合）、各フィールドが変更されるまでフィールドの下にエラーを表示できます。このアプローチは現在、Google、Facebook、Twitterで使用されています。
送信ボタンを無効にする場合は、少なくともその横にメッセージを表示して、無効になっている理由を示す必要があります。ユーザーを混乱させる可能性があります。とにかく私はそれをお勧めしません、その場合はユーザーが「一歩先」を考えている（そして正しく考えている）と想定していることを覚えておいてください。これは本当に悪いUXデザインプラクティスです
送信後の検証だけを行う場合は、入力を説明するラベルが明確であることを確認し、ツールチップまたは何らかの指示を追加することを検討してください送信成功の可能性を高めるために
また、送信後の検証機能としては、（ Twitterのページを作成する を例にとります）エラーを含む最初のフィールドにフォーカスを当てることができますユーザーがそのフィールドに移動する必要がないようにします。