web-dev-qa-db-ja.com

フォームにチェックボックスを配置する

私はテキストフィールドとドロップダウンで構成されるかなり大きなフォームをいくつか持っています。ただし、チェックボックスが散在しています。私はそれらを配置するための最良の方法を見つけ出そうとしています。ここに問題があります:

ラベルを右に配置し、コントロール自体を左に配置すると、チェックボックスが他のすべてのコントロールと同じ列に配置されません

mockup

download bmml sourceBalsamiq Mockups で作成されたワイヤーフレーム

コントロールを右に揃えると、そのラベルが他のコントロールと揃わなくなり、見落とされる可能性があります。

mockup

bmmlソースをダウンロード

解決策は、ラベルをコントロールから分離することです。このソリューションで私が気になるのは、チェックボックスのターゲット領域が小さいことです。それを大きくしても、ユーザーはチェックボックス自体を「スナイプ」する必要があると思うかもしれません。

mockup

bmmlソースをダウンロード

これを解決するために、私はコントロールに一般的なラベルと特定のラベルの両方を提供することを試みてきましたが、ほとんどの場合、それは非常に不自然で強制されています。たとえば、「タイムスタンプを含める」などと言う代わりに、「タイムスタンプ:含める」など、ひどいように聞こえます。

mockup

bmmlソースをダウンロード

最適なオプションは3ですが、何か不足しているようです。これに関するガイドラインまたはより良い解決策はありますか?

14

私は単一のラベルの下で可能な限り多くのチェックボックスをグループ化しようとします:

mockup

download bmml sourceBalsamiq Mockups で作成されたワイヤーフレーム

20
fdmsaraiva

単一のチェックボックスを2つのラジオボタンで置き換えることもできます。これにより、独立した「説明」ラベルとユーザー入力用のラベル付きコントロールの両方が提供されます。

mockup

download bmml sourceBalsamiq Mockups で作成されたワイヤーフレーム


このソリューションのプラスの副作用は、暗黙的な3番目の値、つまり "unanswered"を取得することです。
状況によっては、ユーザーがアクションによって「はい」または「いいえ」を実際に選択することが重要な場合があります。

mockup

bmmlソースをダウンロード


さらに別のプラスの副作用は、より良いデフォルト値を提供できることです。

mockup

bmmlソースをダウンロード

9

通常のスタイルガイドをざっと目を通すだけで、明確なガイドラインを見つけることはできませんが、スタイルガイドの例に基づいて Appleは2番目のオプションを好むようです 。仕切りまたは空白は、チェックボックスを目立たせるために使用され、上のコントロールの下位には表示されません。

Windows および Gnome では、チェックボックスはフィールドコントロールのラベルとともに左揃えになります。

enter image description here

じっくりとじっと見つめると、奇妙に見えますが、乱雑ではなく(余分な言葉はありません)、スペースも効率的です。それはよく使われ、誰もがそれに否定的に反応する(あるいはそれに気づくことすら)見たことがないので、私はそれは大丈夫だと思います。

垂直方向のスペースがある場合の別のオプションは、コントロールを左揃えにし、フィールドの上にラベルを配置することです。これにより、ユーザーが最初にフォームに入力するときに 一部の効率上の利点 が表示される場合があります。

enter image description here

8