チェックボックスとサポートフォームフィールドのグループをレイアウトする最良の方法は何ですか?
たとえば、このフォームでは、ユーザーはレポートの配信方法についていくつかの選択肢を選択できます。一部の選択肢には、電子メールアドレス、ファックス番号、フォルダの場所などの追加情報が必要です。
チェックボックスを互いに近づけて、ユーザーが1つまたは複数のレポート配信オプションを選択しやすくしたいと思います。以下は、チェックボックスとサポートするテキストフィールドのスクリーンショットです。適切なチェックボックスがマークされると、サポートするテキストフィールドがアクティブ/無効になります。
すべてのチェックボックスを1つにまとめようとするのではなく、縦にリスト下または横にフィールドを配置します。これにより、スキャンが簡単になり、チェックボックスとフィールドの間の関連付けが強化されます。
デザインではなく、ここで原則を提案しています。
チェックボックスを垂直に配置し、フィールドの右側に特定のチェックボックスの追加情報を含むフィールドを配置すると、より論理的に見えます。メールリストの増加を心配する場合は、固定幅のテキストフィールドと、右側に2つのボタン(編集とクリア)を使用できます。 [編集]を押すと、リストを編集するための別のフォームまたはコントロールが開始されます。[クリア]を押すと、リストがクリアされます。
John Bソリューションでは、関連するチェックボックスがアクティブな場合にのみ入力フィールドを表示できました。
例:
ファックスがチェックされている場合のみ、入力「ファックス番号」を表示します。