登録ページの情報配置
ウェブサイトの登録ページを作成しています。異なるコンポーネントを相互にどのように配置する必要がありますか？たとえば、見出しはテキスト入力フィールドと同じレベルか上にある必要がありますか？
Username:____________
または
Username:
____________
また、パスワードの最小要件など、ユーザーに説明する必要がある場合もあります。情報はどこに、どのように提示すべきですか？見出しのすぐ下の少し小さいフォントにする必要がありますか？
ユーザーが入力しているときに動的に更新される入力フィールドの横に、たとえばパスワードが短すぎるなどのテキストがあります
多くのUIの問題と同様に、最適な方法は、ユーザーがフォームをどのように使用するかによって異なります。あなたの場合、登録フォームはおそらくシンプルなので、入力ボックスの上にあるフィールド名に関する他の回答に同意します。
より長く複雑なフォームの場合、フォームを最初にスキャンして、フォームに入力する必要があるかどうか、または特定のフィールドに入力する必要があるかどうかを評価する必要があります。その場合は、入力の左側にあるラベルを使用して、スキャンを有効にします。サミュエルMが投稿したuxmattersの記事に応えて、LukeWからのコンテキストの重要性について 詳細情報 を示します。
見落とされるフォームに関連するトピックは、アクションボタンの配置とスタイルです。 LukeWにも 優れた研究 があります（短いバージョン：プライマリアクションをボタンに、セカンダリアクションリンクを作成します）。
入力の上にラベルを付けると、フォームフィールドを簡単にスキャンできるようになることが一般に受け入れられています。文字制限を説明するために、入力内に別のラベルを追加できます。
フォームの入力の上に「見出し」（ラベル）を置くことをお勧めします。これは、読み取りと入力の方が速いためです（ xmatters.com-フォームのラベル配置 を参照）。入力フィールドの後に検証通知用のより多くのスペースがあります。
パスワードフィールドについては、フィールドの下に「パスワードは8文字である必要があります」というテキストを配置します。フォームラベルやフィールド自体ほど目立たないだけでなく、表示して判読可能にします。 （そしてもちろんパスワードタイプとしてのフィールド）
そして、それらが検証する入力フィールドの後に置く検証の出力は、それらが二次的な情報であり、必ずしも目に見えるわけではないためです。全体の配色がわからなければ色は何も言えませんが、フォームが明るい場合、他のテキストに使用されていない場合、検証エラーの色は通常赤です。
例（うまくいけば、私がそれを見せようとする方法を示しています）：
ユーザー名：
[_JoeSmi]利用可能
パスワード：
[xxx____]短すぎる
パスワードの確認：
[yyy___]パスワードが一致しません
パスワードは8文字にする必要があります。
[Submit]