web-dev-qa-db-ja.com

ラジオボタンではなく、グループ化されたボタンまたはトグルボタンを使用する利点は何ですか?

多くの複雑な検索フォームを扱っています。ラジオボタンの代わりにグループ化された(トグル)ボタンをいつ使用すればよいですか?グループ化されたボタンがすっきりとしていて、クリックしやすいという事実を除けば、これを他の人にどのように売れるかわかりません。ラジオボタンは複数の行にまたがることができますが、これは大きな利点ですが、そうである場合は、ドロップダウンを使用しないでください。グループ化されたボタンを使用する場合、ラジオを完全に廃止する必要がありますか?両方を使用すると、ユーザーが複雑になりますか?ありがとうございました!

ブートストラップのグループ化されたボタン: https://v4-alpha.getbootstrap.com/components/button-group/

before and after

1
Mopo123

あなたはこの投稿でかなりの数の質問をしました。

ラジオボタンの代わりにグループ化された(トグル)ボタンをいつ使用する必要がありますか?

トグルボタンはどちらか一方または両方の選択のより現代的な実装だと思います。ラジオボタンは前者です。モダンな外観にしたい場合は、トグルボタンの使用を検討してください。理由は、

  • トグルボタンの場合のオプションの選択のためのより多くのヒット領域。ラジオは常にラベルで機能するとは限りません。
  • 正しいラベルを正しい無線に関連付けるための認知的負荷がないため、選択されたオプションを把握しやすくなる可能性があります。

問題のカップル

  • トグルボタンは、テキストの長さが長いオプションではうまく機能しないことに注意してください。このような場合は、上から下への無線が適切に機能します。
  • トグルボタンにタブベースのキーボードナビゲーションを表示するのは難しいか、従来とは異なります。ユーザーは、トグルよりもラジオのタブ操作に精通しています。

それでは、なぜドロップダウンを使用しないのですか?

ドロップダウンの最大の問題は、値を非表示にすることです。ユーザーは、ドロップダウンを開いて、可能性を確認する必要があります。ラジオとトグルはデータを前もって表示します。不動産に余裕があり、オプションの数が非常に少ない場合は、ラジオボタン/トグルスイッチを使用する必要があります。

一方、ドロップダウンはスケーラビリティを非常にうまく処理します。

グループ化されたボタンを使用する場合、ラジオを完全に廃止する必要がありますか?

私は2つの比喩を混ぜるのに警戒するでしょう。私は1つに固執します。ユーザーとしては、ラジオとトグルのどちらを選択したかによって混乱する可能性があります。

2
Sol

機能的には、同じことを行います。

一連のオプションを表すこの方法はより自然であり、より自然な読み取り順序を提供すると思います。その上、それはより少ないformyと私は言うでしょう、そしてフォームに現代的な感じを与えます。

何が選択されているかを認識することは読書の瞬間に行われるため、読書はより自然に感じられます。水平に配置されたラジオの場合は、次のように読みます:(選択されていない)オプションa、(選択されている)オプションb、(選択されていない)オプションc。このラジオを読んでいないだけで、当然のことながら、当然のことながら、地平線セレクターでそれが自然になります。

ただし、長い選択リストには注意してください。ある時点で、選択するオプションのスキャン可能性が低下すると問題が発生する可能性があります。オプションが5つ以上あるか、オプションが長くなると、このアプローチが非常に非効率になり、垂直方向に揃えるが重要になる場合があります。そのような場合、上から下にリストされたオプションを含むラジオリストを提供することがおそらく最良の選択です。

0
Dominik Oslizlo

また、Bootstrapでボタングループとドロップダウンを組み合わせることもできます。たとえば、最も一般的な選択肢をグループの最初のいくつかのボタンとしてリストし、あまり一般的でない選択肢を最後のボタンとしてドロップダウンに配置できます。例えば:

Bootstrap button group with dropdown

0
Gary Coker