2つのトグルボタンは、トライステートスイッチよりも優れていますか？
ユーザーごとに、ユーザーを定義済みグループに含めるか、グループから除外するか、未決定のままにするかをユーザーが決定する必要があるグリッドのグリッドがあります。初期状態は未定です。ユーザーが最初に「in」または「out」を選択した後、ユーザーが心を「未定」に戻すことができるため、2つのラジオボタンを使用しても機能しません（そのため this は別の質問です）。
2つのアプローチが考えられました。 1つは2つのトグルボタンを使用する方法で、もう1つはトライステートの「スイッチ」を使用する方法です（これは基本的に3つの無線のグループであり、異なる方法で表示されます）。
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
- トグルボタンは相互に排他的です（1つだけ選択できますが、両方とも選択解除できます）。
- これはかなり忙しいグリッドの中にあるので、不動産（列幅）は間違いなく要因です
- これはタッチインターフェイスではありません
ここでの最善のアプローチは何ですか？長所と短所？
マイクロワークフローの設計
観察
ほとんどのユーザーは選択を行い、先に進みます、お気付きのとおり。ユーザーは、選択をすぐにまたは後で選択解除することはあまりありません。
ここではInとOutが主な選択肢です。未定の選択は、公平なデフォルトです。
- Null /デフォルト/未定/不明の選択は、多くの場合、正しく設計するのが非常に難しく、設計者はコントロールを設計するときにこれらについて十分に考慮しません。
- 多くの場合、プログラマーはこれを習得するのに優れています（
nullと''vsundefinedin javascript）、しかしそれでもセマンティクスはしばしば簡単に失敗します。
グリッドの配置とスペースの節約が重要 ....ページ上に他の多くのコントロールがあることを前提とします。
1つの可能な設計
ここでの設計ロジックは次のとおりです。
主要な選択を明確にする。大きなボタンはカーソルを簡単に着地させることができ、主なオプションは視覚的に明確です。
未決定の選択を強調しない。ユーザーが選択するまで（上の例）、非表示にすることも、表示したままにすることもできます（下の例、おそらくより良い）。このボタンは比較的まれなオプション/シナリオであるため、主要な選択を目立たせるために宣伝する必要はありません。
アイコンを取り除く。これらは単に視覚的な混乱を追加し、貴重な水平方向の不動産を占有します。
チェックマークを追加することを検討してくださいわかりやすくするために選択したボタンに追加します（下の例）。
ボタンをグリッドに準拠させますコンパクトにするため、およびインターフェイス全体を落ち着かせます。
トグルvsトライステート...
この答えは（うまくいけば）どちらのアプローチも本質的に他のアプローチよりも優れていないことを示しています。この2つを決定する方法は、設計目標と制約をレイアウトすることがnull状態の意味を慎重に検討することであり、設計タスクがより明確になるはずです。
利用可能なオプションを一目で非表示にしてもかまわない場合は、列幅を節約できるラジオボタンの代わりにコンボを使用することもできます。
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
3つのラジオボタンのセットをお勧めします。1つは「入力」、1つは「出力」、もう1つは「未定」です。
相互に排他的なトグルは、多くの説明を必要とする可能性が高く、ユーザーを混乱させる可能性があります。トグルボタンのペアは、4つの異なる組み合わせ（A +/B +、A +/B-、A-/B +、A-/B-）を提供するようですが3つしかないことを説明する必要があります（A +/B-、A-/B +、A-/B-）。その上、3番目のオプションはコントロール設定で明示的に表示されることはありません-あなたの場合、「in」または「out」を表示しますが、「undecided」は他の設定がない場合にのみ表示されます。これもまた説明が必要です。
3つの専用ラジオボタンのセットで、希望どおりの動作を実行できます。3つのオプションすべてが表示され、ユーザーが1つしか選択できないという事実は、確立されたパターンで示されます。
最初のオプションは、トグルでより優れています。考えられる回答について明確な指示を与えられたユーザーは、指示が不明瞭な場合よりも、それらを理解し、（正しく）回答する可能性が高いためです。トライスイッチの場合、2つの表示オプションと1つの非表示オプションがあります。それぞれに3つの状態がありますが、後者には固有ではないオプションが1つあります。つまり、指示を提供するか、ユーザーが「理解できる」ことを望んでいる必要があります。
あなたの人口統計によっては、それは問題ではないかもしれません。技術に詳しい若いユーザーは、1つの指示でスイッチを利用できます。ただし、55歳以上の白人の会社に転職したため、簡単な指示だけでは必ずしも十分ではありません。たとえば、3つのボタンの例では機能しません。未決定のボタンには、未決定のボタンは表示されず、疑問符があるだけです。私の世界では、「質問があります。このボタンをクリックすると、質問したり、ヒントを提供したりすることができます。」.
質問に答えるには、このアクションの頻度を考慮する必要があります。
低頻度：
定期的に使用しない場合、ユーザーはオプションを覚えていないため、簡単に見つけて理解できるはずです。
あなたが言及した画面の領域を考慮し、ユーザーがオプションを簡単に理解できるように、私はVincentのようなドロップダウンも提案するでしょう。
もちろん、ドロップダウンはオプションに到達するための追加のクリックを追加しますが、ここでの主な焦点は、ユーザーにそれほど面倒なく次のアクションを識別および決定させることです。したがって、頻繁に使用されない画面については、ユーザーが使い慣れているUI要素を使用することをお勧めします。
高周波：
この画面が頻繁に使用され、ユーザーが未決定、イン、アウトを頻繁に切り替える必要がある場合、ドロップダウンはユーザーを苛立たせます。ここで、ユーザーはオプションにすばやくアクセスできる必要があります。
この場合、トライステートスイッチをお勧めします。ユーザーがこのトグルを頻繁に使用する場合、学習曲線は小さいため、やがてトライステートスイッチに適応できるようになります。しかし、私は疑問符を提案しません。
以下のモックアップをご覧ください。これは、いくつかの楽しみが追加された単純なトライステートスイッチであり、ユーザーエンゲージメントが向上する可能性があります。それはあなたが説明した不動産に適合します。ただし、このトグルアクションが頻繁に使用される場合にのみ、私の提案を考慮してください。ありがとう
手元に2つの問題があるようです
明示的または暗黙的なトライステート？明示的なトライステートが与えられた理由により、かなり満場一致で
明示的なトライステートのコンパクトな視覚化3つのボタン、ラジオボタングループ、コンボボックスのすべてが機能します。しかし、概念の関連性を明確に伝えるのに役立つ別のUIもスライダーです-またはリッカートスケールを連想させる他の同様のビジュアル
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
あなたの解決策はまだラジオボタンです。 「in」、「out」、「undecided」の3つのオプションがあるラジオボタンです。 「未定」がデフォルトです。 3番目のオプションとして「未定」を明確に示す場合、ユーザーに曖昧さはありません。
トグルボタンを選択したり、入力したりするのと同じように、1つのラジオボタンオプションを選択して後で変更できないというUXの理由はありません。これが受け入れられないというあなたの先入観がどこから来たかはわかりません。どちらか一方を選択したときに、デザインがさまざまなものを起動する場合、実装がどのように複雑になるかは理解できますが、その場合は、最初は間違ったデザインから始めている可能性があります。
一部のUIガイドでは、チェックボックスは選択の任意の組み合わせが有効な場合にのみ使用するように勧めていますが、与えられた多くの場合にも適切であると提案します（設計者によっては同意するようです）。以前の状態とクリックされた状態の組み合わせでは、望ましい次の状態の組み合わせがどのようなものかは「明白」です。
チェックボックスが「A、B、またはどちらでもない」セマンティクスを持つ選択肢を表す特定の状況では（「両方」は有効な選択肢ではない）、3つの状態のボタンまたはチェックのペアを使用するかどうかの選択-boxesは、「どちらでもない」ケースが他の状態の欠如に対して、それ自体が状態を表すかどうかに依存します。たとえば、1990年代のMS-Wordの[フォント]ボックスには、[すべて大文字]と[小文字]、および[上付き]と[下付き]のチェックボックスがあり、[太字]、[斜体]、すべてのチェックボックスを使用すると、ラジオボタンよりも見栄えが良くなり、「すべてではない」または「すべてではない」および「上付きでも下付きでもない」ボタンのラベルを付ける必要がなくなりました。
「include」、「exclude」、または「undecided」に3つの状態のボタンを使用する場合、後者の選択は、それらの状態を「undecided」に設定することを提案します。 「含める」または「除外する」チェックボックスを指定して、両方のボックスを選択しないままにしておくと、人々は内部の場合は内部に、外部の場合は外部に残されることを示唆します。後者のセマンティクスが意図されている場合は、チェックボックスを使用した方がよい場合があります。
上記の2つのオプションの間で、2つのトグルボタンオプションを使用することをお勧めします。利点：
- 明確なアフォーダンス
- メインコンテンツの邪魔にならない
既存の例：
pvote/downvote buttonsこのような（stackexchange）、reddit、quoraなどのさまざまなサイト全体.
[p.s.要素は多忙なグリッド内にあるため、視覚に重点を置いたデザインを実装すると、多くの注目が集まり、多忙さが増します]
これが機能するかどうかはわからないので、テストする必要があります。共通の要素を使用し、すべてのオプションをコンパクトに表示するものを考えたかったのです。アイデアは、2つのチェックボックスを使用して、「未定」のラベルを除外することです。
なぜチェックボックスなのか？オプションが必要ない場合は、チェックを外すだけでよいことが一般的です。どちらもチェックできると考えるのはやむを得ない。これは2つの方法で解決できます。
- 1つがチェックされたときに他のチェックボックスを無効にすることにより：
- 両方を確認しようとすると、メッセージが表示されます。この例では、「Out」がクリックされています。
＃2の方が好きです。なぜなら、あなたが自分の選択に行き詰まっているという考えを与えず、誰かが意図を理解していないときに、より役立つからです。
赤=アウト、黄=未定、緑=イン（背景はビジー（タイド）グリッドについて言及したため）で色付けされた3つのラジオボタンを使用し、色の意味を説明する凡例を使用できます。
直感的なトライステートチェックボックスカラム（使用可能な場合）を使用しないのはなぜですか？
スペースを節約し、データを適切に表現します（ユーザーがそのようなコントロールに慣れている場合）。