検証エラーとヒントをWebフォームに統合する最良の方法
私はWebフォームを作成しており、ここと他のUXサイトでこれまでに説明されているベストプラクティスに従っています。
私がまだしなければならない1つの決定は、エラーメッセージと入力ヒントの表示に関することです。これは、モバイル（幅320px）だけでなく、デスクトップ/ラップトップ/タブレットなどでも機能する必要があります。
ヒントとともに、エラーメッセージが入力フィールドの横または下に表示されます。繰り返しますが、エラーが表示された場合、ヒントは入力されているコンテンツの性質に純粋に関連しているため、エラーはすべてのヒントをオーバーライドすることをすでに決めています。
ただし、エラー/ヒント（入力の下）のためにスペースを予約する機会があります。これにより、フォームが少し長くなったり、エラーが発生したときにフォームが下に移動したりします。検証はJavaScriptを使用した送信時と入力変更時の両方で行われるため、入力フィールドを終了するとフォームが調整されます。
もちろん、動的にスペースを作成するのではなく、スペースを予約することにした場合、エラーは特定のスペースに収まるように抑制する必要がありますが、この場合は可能です。
私が心配しているのはこの動きです-固定または動的なフォームの長さ、または私は心配する必要がない何かについて心配していますか？
前もって感謝します。
フォームは常にトリッキーです。ユーザーは長い形式を嫌うので、長すぎないようにしてください。 eコマースのチェックアウト手順では、長い登録フォームでユーザーの40％を怖がらせることができます（個人的な例）。また、ユーザーの不満を防ぐためにフォームを十分に明確にする必要があります。そして何よりも、できるだけ短い時間でユーザーにフォームを飛ばしてもらいたいのです。
ここに、私が良い実践であることを学んだいくつかの指針があります。
明確で目に見えるラベル
ユーザーが入力する必要があるものを常に明確にしてください。入力フィールドには、ユーザーに入力する必要があるものを伝えるためのプレースホルダーしかない傾向があります。問題は、プレースホルダーが入力フィールドがアクティブになります。ユーザーが気を散らすと、何を入力する必要があるかを忘れる可能性があります（たまにそれが表示されることはわかっています）。したがって、ラベルを使用してください。 人々は、プレースホルダーのように見えるラベルを備えたクリエイティブを手に入れ、入力がアクティブになると場所をシフトします 。
プレースホルダー
プレースホルダーはラベルと組み合わせて使用すると非常に効果的です。あなたの場合、ヒントを表示するのに最適です。メールアドレスの場合は[email protected]、日付の場合は03-13-2014などの入力例を示します（技術に詳しい多くの人はこれを理解できないため、mm-dd-yyyyを使用するのは悪いUXです）。
エラー
適切な場所に明確なエラーを表示します。これはすでに正しく実行されているようです。エラーが発生した入力フィールドの下にエラーメッセージが表示されています。
エラーを表示します。入力フィールドの境界線を赤に変更できます。少し振るか、赤い色で別の方法で注目を集めます。
エラーメッセージをわかりやすくします。 「エラーが発生しました」を使用することは、死んだ罪です（もちろん文字通りではありません）。 「パスワードが短すぎます。8文字以上にする必要があります」は、適切なエラーメッセージの例です。
このエラーメッセージの配置は、空いている部屋によって異なります。他の入力を下に移動せずに、2つの入力の間に収まる場合があります。右側にも左側にも配置できます。
検証
ユーザーが[送信]をクリックする前に、入力が変更されたときに、既に行っているように入力を検証するのは素晴らしいことです。ユーザーは、[送信]をクリックしたときにそれを嫌い、何かが間違っていることを見つけて、もう一度上にスクロールする必要があります。入力の直後または入力中に検証を行うと、ユーザーがフォームに正しくすばやく入力できるようになります。