フォームの指示やヒントはどこに配置する必要がありますか？
私はForrstを閲覧していて、Twitter Bootstrapで左側にラベルがあり、右側に入力フィールドがあり、必要な指示があったunder次のようにフィールド自体：
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
私はそれが間違った方法であるとほとんどコメントしましたが、Twitter自体をチェックすることにしました。そのようなレイアウトは彼らのスタイルガイドの一部であるようです：
ライブTwitterでの表示は次のとおりです。
同じアプローチがWufooでも使用されています。
そしてJotFormで：
ただし、Googleフォームでは、ヘルプテキストをラベルの下で入力フィールドの前に配置しています。
フィールドの後にヘルプテキストを配置すると、認知（タスクの前の指示）およびUX（前後の目の動きを最小限に抑える）の主要な原則の一部に違反するように見えます。私は周りを見回しましたが、私が見つけた唯一の研究はlabels（フィールドの上、右、または左）に関連していて、何もないようですそれらをインラインにしてフィールド上にフォーカスするように提案する以外に、ヒントや指示。
では、フィールドやラベルとの関係でヒント/指示/方向などを配置する「正しい」方法は何ですか？現在の選択肢には、ラベルの下、フィールドの上、フィールドの後、フィールドの横のインラインコールアウトが含まれます。
これらの指示は、ユーザーがフィールドを解釈しようとして失敗した後に読み取られることになっているため、最初にすべてのユーザーが読み取るわけではありません。
Twitterの例の場合、これらのテキストは多くの場合、実際にフィールドに入力する方法を説明するのではなく、決定を行う方法を説明します。つまり、ユーザーがディシジョンポイントに苦労した場合にのみ読み取られることになっています。ドメインを知っている、または「スロットイン」応答（識別機能を入力するときに一般的）を持っているユーザーは、テキストを表示する必要がないため、補助的な場所に配置できます。
他にもさまざまな要素があります。 （通常は大きい）フォームフィールドを使用すると、最初に視覚的な階層が確立されるため、フォームフィールドの前に指示があると、ペアを関連付けるのが難しくなります（上記のコメントでBen Brockaが述べているように）。また、フィールドとラベルが非常に接近して配置できるため、解析が容易になります（特に、ユーザーが元の送信後にフィールドを編集するフィールドを探している場合）。
適切なアクセス可能なWebサイトの場合、指示はalwaysをフィールドの前に置く必要があります。それらは一般的なユーザーのためだけに存在するのではなく、アクセシビリティのための重要な手がかりでもあります。
例：スクリーンリーダーは、フォームフィールドの詳細を読み取る前に説明/ヒントbeforeをヒットするので、ユーザーはフィールドを正常に完了するために必要なものを知ることができます。ヒントがフィールドの後にある場合は、ヒントのテキストを聞く前にすでに入力されている可能性が高くなります。
ヒントが検証/失敗のテキストとしても使用されている場合、同じ理由でフィールドの後にこれらを表示することはアクセシビリティに劣ります。ユーザーは、実際の入力値を聞く前に失敗の理由を知っておく必要があります。そうすることで、入力内容が検証を破った方法を聞くことができます。それ以外の場合は、各フィールドが失敗したと想定し、失敗したかどうかを聞く必要があります。検証を聞くと、最初に準備されます 'ok、読み取ろうとしているこのフィールドにエラーがあります'
（実際には、さらに優れたアクセシビリティを実現するには、フォームの最上部にすべての検証エラーをリストする必要があります。これにより、ユーザーは失敗したフィールドとその数がすぐにわかります。）
また、キーボードのユーザーも忘れないでください。誰かがキーボードを使用していて、マウスを使用せずにフィールドをタブで移動し、フォームに「スクロールせずに見える範囲」の下に多くのフィールドがある場合、下のフィールドにタブを移動すると、そのフィールドが表示されるだけで、テキストがフィールド。
JotForm開発者はこちら。
これらのヒントは主に、ユーザーが入力タイプまたは正しいエントリのいくつかの例を支援するために使用されます。ユーザーが質問のすぐ下にヘルプテキストを表示すると、混乱して混雑します。私たちは通常、質問だけに集中してもらいたいのです。彼らが質問に答えるとき、彼らは予想されるエントリーについての簡単なヒントを読むことができます、または彼らはヒントを完全に無視するかもしれません、それゆえ小さなフォントと薄い灰色です。
あまり多くの情報を表示して、調査の潜在的な送信者を怖がらせたくない場合。
私は常に入力ヒント/エラー/最小要件を真下に配置し、入力の境界線強調表示でそれらを色分けします。赤->エラー
さらに、これは意見です 6つの改訂から
（大多数のユーザーにとって）タスクがかなり単純なものである場合、説明は邪魔になりません。
例えば。ツールヒントを使用するか、入力ボックスの下に少し小さい灰色のテキストを表示します（おそらく現在のフィールドと無効な入力のフィールドのみ）。
タスクが複雑な場合（大多数のユーザーにとって）、指示はもっと目立つはずです。
例えば。ボックスのヘルプメッセージをフォームの横（LTRの場合はフォームの左側など）に配置し、入力を指す矢印を付けます。
このようなもの
しかし、おそらくアクティブなフィールド（おそらく暗い灰色）とエラー（赤）を除いて、はるかに目立たない色（明るい灰色など）です。
必要なフィールドをマークするだけの場合は、別の背景（たとえば、白ではなく黄色または黒ではなく濃い黄色）+以下のテキストを使用することをお勧めします。
他の場所で説明付きの星を使用すると、ユーザーが説明を探し始める可能性があります。
リンクを使用してヘルプを表示すると、ユーザーはプレビューを表示する代わりにヘルプタブ/ウィンドウを開く必要があります。 -通常のリンクの明確な差別化要因（二重下線など）で閉じるために外側をクリックするオーバーレイポップアップでない限り。