web-dev-qa-db-ja.com

ラジオボタンまたはトグルスイッチの2つのオプションのうちの1つですか?

2つの可能なオプションから1つのオプションを選択する必要がある場合に何を使用するかについて、少し混乱しています。 タッチスクリーンインターフェイスでの作業

例1-小売店での税タイプの選択の場合、オプションは包括的および排他的です enter image description here

enter image description here

例2-割引タイプの選択

enter image description here

enter image description here

このような場合、1つのオプションが他のオプションよりも優先される方法を理解できません。だから、誰かが例で述べたような同様のケースで別のものを選択する理由を1つか2つ教えてくれますか?.

10

ここでトグルスイッチについて言及していると思います。そうは言っても、ラジオボタンではユーザーが複数の選択肢から1つのオプションを選択できますが、トグルスイッチでは、ユーザーが物事をオンまたはオフにできる物理スイッチを模倣します。

また、どのコントロールをいつ使用するかについては、Microsoftによる以下のUXガイドラインを参照できます。

トグルスイッチ制御のガイドライン

ラジオボタンコントロールのガイドライン

編集:2つのオプションしか扱っていないため、タッチインターフェイスのラジオボタンを使用できます簡単にタップできる場合

スクリーンショットから、非タッチUIで作業しているようです(ドロップダウンからヒントを取得)。これと、ここでは2つのオプションしか扱っていないため、この使用例ではラジオボタンをお勧めします。 3つ以上のオプションがあった場合、 トグルボタン (スイッチではありません)を使用していました。

11
Adit Gupta

混乱が生じるのは、選択肢があるとあなたが言っているあなたの質問にあると思います

「小売店での税タイプの選択、オプションは包括的および排他的」

..包括的な意味ですか[〜#〜]または[〜#〜]排他的ですか?

ラジオボタンとトグルのクイックランダウン:

トグルボタンは、相互に排他的なオプションが2つしかない場合に使用する必要があります。ライトスイッチのように考えてください。ライトはどちらかでオンまたはオフにでき、両方ではありません。あなたの例では、これは税タイプが包括的[〜#〜]または[〜#〜]のみである場合に機能します。

Toggle Button

ラジオボタンは、3つ以上の相互に排他的なオプションがある場合に最適です。あなたが生まれた月を選ぶようなものだと考えてください。あなたが7月に生まれたと言うなら、あなたは他の11ヶ月の間に生まれなかったのです。あなたの例では、これは他のオプションがある場合にのみ使用する必要があります。包括的[〜#〜]または[〜#〜]排他的または別のオプション

Radio Button

オプションが相互に排他的でない場合は、チェックボックスを使用する必要があります。好きな食べ物を選ぶようなものだと考えてください。あなたはハンバーガーとホットドッグが好きで、ハンバーガーを好きになってもホットドッグが好きになるのを妨げません。あなたの例では、これは税タイプが包括的[〜#〜]および[〜#〜]排他的である場合に使用する必要があります-したがって、ユーザーは両方にチェックを入れます。

Tickboxes

TL; DR-オプションが相互に排他的であり、オプションが2つしかない場合、トグルボタンを使用します

7
Thomas Adcock

ユーザーがクリックするターゲットが大きいため、トグルスイッチ(上の「税タイプ」の例のように)を使用することをお勧めします。フィッツの法則は、単純なバイナリラジオボタンよりもトグルスイッチを優先すべきだと示唆していると思いますが、他の人の考えを知りたいのですが。

3
Chef Matt

私は、最も単純で一般的な答えは、常に守られているわけではなく、明確な例外はありますが、2つ以上のオプションがある場合はラジオボタンの方が好ましい場合があり、それらは即時のアクションではないものに適していると考えています。たとえば、送信が必要なフォームでの選択。

トグルスイッチは、ライトスイッチを切り替えるなど、2つの選択肢の間の瞬間的なアクションを模倣するためのものであり、実行するアクションがすぐに効果を発揮する場合に使用する必要があります。また、アクションがオン/オフまたははい/いいえなどの非常に明確なバイナリ状態と反対の状態の間で切り替われば、より簡単に理解できます。トグルを使用して、「ステージングネットワーク/プロダクションネットワーク」などの同等または異なる状態を選択します。 「混乱につながるかもしれません。

明らかに、これは常に使用される方法ではありません。しかし、ラジオボタンがどのように進化して理解されるようになったか(あるとき、ボタンもインスタントアクションを暗示する)、メタファーはより意味があり、2つの選択肢と複数の選択肢の明確さも、選択肢の選択に役立ちます。

また、スイッチは狭いスペースでも役立ちますが、明確にラベルが付けられていなかったり、適切に設計されていなかったりすると、あいまいになる可能性があるため、慎重に使用する必要があります。アクションのトリガーと独自のステータスの表示の両方にコントロールを使用する場合は、常に注意してください。

2
Mattynabib

同様の質問があったのでこの質問に出くわしました。使用したい要素が「トグルスイッチ」ではなかったので、私は私の答えを見つけました。

Apple HIG。のセグメント化されたボタンとセグメント化されたコントロールを混同しないでください。

以下は、SAP Fioriの実装例です。

ユーザーが小さなグループから1つのオプションを選択できるようにする場合は、ツールバーまたはフッターツールバーにセグメント化されたボタンを提供します。

enter image description here

1
SNaushadS

セット[包括的、排他的]または[$、%]のいずれかを選択します。これは ラジオボタン を使用するものです(セットに2つの要素しかない場合があります)。

enter image description here

トグルは、通常、設定がオン/オフかどうかを示すためにのみ使用されます。確かに、マテリアルデザインでは/ Android world。

アプリにマテリアルデザインを使用しているように見えますが、正しいトグルを使用していません。これは、マテリアルガイドラインの 'Switch' です。

enter image description here

1
icc97