同じ行のボタンに異なる機能があることをユーザーに示す最良の方法は何ですか？
インターフェイスには4つのボタンがあり、すべて同じように見えますが、すべてが同じように動作するわけではありません。以下の例のように配置されます。
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
ボタン1およびボタン2は、変更された種類のトグルスイッチです。ユーザーがボタン1をクリックすると、ボタン1が選択されます。ユーザーには2つのオプションがあります。ボタン2をクリックすると、ボタン1の選択が解除され、ボタン2が選択されます。ボタン1が選択されているときにもう一度ボタン1をクリックすると、ボタン1がオフになります。同じ動作がボタン2でも発生します。
ボタン3およびボタン4は、標準のオン/オフ切り替えスイッチです。 1回クリックしてオンにします。ボタンをもう一度クリックすると、オフになります。
問題は、最初の2つのボタンは2番目の2つのボタンとは異なる動作をするため、視覚的に分離する必要があるように感じることです。私の問題は、機能がいくぶん似ているため、それらを分離する方法にあります。
さまざまな機能を持つボタンをレイアウトするためのベストプラクティスはありますか？
代わりにチェックボックスがよく使用されます...
これらの種類の切り替え可能な相互に排他的なオプション。例えば：
しかし、ボタンを好むなら...
ボタン内のチェックマークは、より良いトグルアフォーダンスを提供し、色覚にやさしいです。
ラジオボタンもここで排他的なボタンとして使用できますが、（a）UIで3番目の選択肢（「どちらでもない」）を追加する必要があります。 （b）質問で指定されたクリックして切り替えの動作を満たしていない。
これらの要件を緩和する場合は、ラジオボタンを使用することもできます。
ボタン1とボタン2を結合します。次に、選択したものを別の色合いにすることができます（たとえば、以下の例では「はい」を選択しています。「いいえ」を選択すると、青色になり、 「はい」は白になります）。これは、これら2つが相互に排他的であることを示します。
次に、ボタン3と4には同じ「オン」と「オフ」の色を使用しますが、個別のボタンのままにします。お役に立てれば。
私が見ると、実際には3つのボタンがあります（=アクション）。
ボタン1
トライステートボタン/トグル：
ボタン1はそれ自体に反応し、ボタン2は反応します
ボタン2はそれ自体とボタン1に反応します
ボタン2
ブールボタン/トグル：
ボタン3はそれ自体に反応します（YES/NO、ON/OFF）
ボタン3
ブールボタン/トグル：
ボタン4はそれ自体に反応します（YES/NO、ON/OFF）
基本的に、3つのアクションがあります。最初のアクションは、他と同じブールロジックと相互作用する子アクションを持つアクショングループです：はい/いいえ、オン/オフ、1/0
有効なカルチャーリファレンスは古いテープレコーダーで、相互に作用する一時停止ボタンがあり、次に再生ボタンと録音ボタンを一緒に押す必要があり、次に互いにキャンセルする巻き戻しボタンと早送りボタンがありました。
したがって、提案された解決策は、最初の2つのボタンをグループ化し、それらの間で相互作用するのでトライステートトグルを使用することです。残りのボタンは分離されますが、プロセスの一部です。以下の基本的なモックアップを参照してください。
ご覧のとおり、すべてのボタンが単独で選択されていますが、ボタン1と2は同じアクショングループの一部として明確に接続されていますが、 3番目の状態（オフ）。両方のサブアクション（ボタン1とボタン2）を同時にキャンセルできます。
循環ボタンが最良の選択かもしれません。
セグメント化されたコントロールは、伝統的にラジオボタンのメンタルモデルに一致するため、疑問があります。常に1つの選択肢を選択する必要があります。 「なし」オプションを追加することもできますが、それにより、ツールバーが煩雑になり、混乱が増える可能性があります。
3方向トグルは、ユースケースにより適している場合があります。
他のオプションが何であるか、またループバックする前にいくつのオプションがあるかをユーザーが確認できないため、これはあまり一般的なパターンではありません。さらに、フィルターを変更するたびにパフォーマンスコストがある場合、「ターゲットを逃した」ユーザーは、正しい選択に戻るのにかかるときにイライラする可能性があります。
ただし、コンテキストが、一般的なユーザーがコンテキストで理解できる相互に排他的な2つのモードと、どちらのモードにも制限されていない場合、このオプションは非常に機能的です。 「アクティブウィジェット」、「非アクティブウィジェット」、または「すべてのウィジェット」を表示するフィルターのようなものは、ユーザーが表示されているものを理解するのに十分単純である必要があります。
他の標準トグルの外観に応じて、このコントロールは、状態ラベルとアクションラベルに関する古典的な議論を引き起こす可能性があります。
グループ化されたボタンコントロールを作成してみてください。このようなもの：
ユーザーがグループ化されたボタンを見ると、どのボタンがオンでどれがオフであるかがすぐに理解できない場合があるため、色（アクティブ=緑）を追加する必要があります。これで十分ではないと思われる場合、および設計が許可する場合は、どれを選択するかという疑問を解消するために、ある程度の深さを追加します。
これが気に入らない場合は、次のようにグループコントロールにグループ化する必要があります（グループに線を付けます）。
これがお役に立てば幸いです。 :)
ボタンのテキストが混乱しない限り、ボタン1と2を結合するというBDDの提案を使用します。ボタンのラベルがそうなら。ボタンが選択されたら、ボタンの行の近くのどこかに「クリア」というテキストを追加することをお勧めします。前じゃない。そして、「なし」または金の状態のボタンではなく、「クリア」というテキストを入力すると、混乱する可能性があります。
3つのオプション（「オプションA」、「オプションB」、「どちらでもない」）を示すラジオボタンは、最初のグループに最も適していませんか？私はそれらがボタンほど「セクシー」ではないことを知っていますが、それはあなたが複製に別の達成入力タイプを強制しようとしているものだと私には思えます。
他の2つはチェックボックスです。
いくつかの視覚的なデザイン要件があると確信しています。その場合は、適切にスタイルを設定する必要がありますが、可能な限り標準のHTML要素に固執することで、すべてにアクセスできるようになります（スクリーンリーダー、JSがオフになっているなど）。